/* =========================================================================
   LAYOUT.CSS
   Struttura e disposizione delle grandi sezioni del sito
   (come sono disposti i blocchi nello spazio: colonne, griglie, ecc.)
   ========================================================================= */

.section {
  padding-block: var(--section-padding);
}

.section--dark {
  background: var(--color-black);
  color: var(--color-white);
}

.section-head {
  margin-bottom: 2.5rem;
}

/* -------------------------------------------------------------------------
   SEZIONE HERO (prima schermata della home)

   Su smartphone e tablet (sotto i 1280px): il video è un blocco normale
   in cima alla pagina (si vede per primo), e scendendo con lo scroll
   arriva il titolo "Valore che si vede" in una sezione sotto, su sfondo
   bianco normale. Il riquadro ".hero__panel-bg" qui non serve (è
   nascosto) perché non c'è nessuna sovrapposizione da fare.

   Da 1280px in su invece video e titolo stanno affiancati nella stessa
   schermata: il video (a destra) e il testo (a sinistra) diventano
   entrambi "position: absolute" sovrapposti, con ".hero__panel-bg"
   che fa da sfondo bianco dietro al testo. Sotto i 1280px il titolo a
   questa dimensione di carattere non ci starebbe nella sola metà
   sinistra senza sconfinare visivamente sopra al video, per questo
   l'affiancamento parte solo da lì.

   Il testo (.hero__content) resta sempre un ".container" come
   nell'header e in tutte le altre sezioni, così è sempre allineato
   al logo, sia impilato (mobile) sia affiancato (desktop).
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}

/* Il video: su mobile è un blocco normale a tutta larghezza (altezza
   decisa da "aspect-ratio"); "pointer-events: none" toglie anche i
   controlli che Chrome mostra passandoci sopra col mouse (il video è
   solo decorativo, non va toccato). */
.hero__bg-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  pointer-events: none;
}

.hero__panel-bg {
  display: none;
}

.hero__content {
  padding-block: 3rem;
}

@media (min-width: 1280px) {
  .hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
  }

  /* Da qui in su il video torna a essere lo sfondo assoluto della
     metà destra (non più un blocco normale in cima alla pagina) */
  .hero__bg-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    aspect-ratio: auto;
  }

  .hero__panel-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 50%;
    background: var(--color-white);
    z-index: 1;
  }

  .hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
  }
}

.hero__subtitle {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gray-text);
  margin-top: 1rem;
  max-width: 26ch;
}

.hero__scroll-hint {
  margin-top: 2rem;
}

/* "Occhiolino" fermo nel forellino della "D" di "veDe": un cerchio pieno
   che ogni tanto si apre e si chiude come un occhio che sbatte le palpebre,
   per dire "si vede". Resta sempre nello stesso punto (calcolato per stare
   dentro al forellino) così non capita più che sparisca. */
.d-hole {
  position: relative;
  display: inline-block;
}

.d-hole__dot {
  position: absolute;
  top: 53%;
  left: 55%;
  width: 0.15em;
  height: 0.15em;
  border-radius: 50%;
  background: var(--color-black);
  transform: translate(-50%, -50%);
  animation: d-blink 4s ease-in-out infinite;
  pointer-events: none;
}

/* 0-85%: occhio aperto. 90%: si chiude (schiacciato in orizzontale).
   95%: si riapre. Il ciclo si ripete ogni 4 secondi. */
@keyframes d-blink {
  0%, 85%, 100% { transform: translate(-50%, -50%) scaleY(1); }
  90% { transform: translate(-50%, -50%) scaleY(0.15); }
  95% { transform: translate(-50%, -50%) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .d-hole__dot {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   SEZIONE "CHI SIAMO" (sfondo scuro con immagine + testo)
   Lo sfondo nero è a tutta larghezza schermo; il contenuto dentro resta
   allineato al container come il resto del sito (vedi .about-teaser__inner).
   ------------------------------------------------------------------------- */
.about-teaser {
  position: relative;
  overflow: hidden;
}

.about-teaser__inner {
  display: grid;
  gap: 2.5rem;
}

/* Il saluto grande al posto del vecchio titolo "Siamo Vorak Studio":
   cambia parola a rotazione (vedi js/main.js), quindi ha una transizione
   di opacità per il dissolvenza tra una lingua e l'altra. */
.about-teaser__greeting {
  color: var(--color-accent);
  text-transform: none;
  font-size: clamp(2rem, 5vw, 3rem);
  transition: opacity 0.3s ease;
}

.about-teaser__image {
  position: relative;
  /* Il riquadro (foto + card info) è largo quanto la foto, non tutta
     la colonna: serve perché il pulsante-card qui sotto copra solo la
     foto, non anche lo spazio vuoto accanto. */
  width: fit-content;
}

.about-teaser__image img {
  /* Riquadro verticale (non più orizzontale 4:3): stessa altezza di
     prima, ma più stretto, così la foto ci sta intera senza ritagli.
     Bordi più arrotondati per un effetto "card". */
  width: 100%;
  max-width: 300px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* -------------------------------------------------------------------------
   CARD INFO SU MARCO (accanto alla foto della sezione "Ciao")
   È un <button> invisibile finché non ci passi sopra il mouse (desktop)
   o non lo tocchi (smartphone/tablet, vedi il click gestito in
   js/main.js punto 4). Su schermi stretti (sotto i 700px) non c'è spazio
   per metterla a fianco, quindi resta sopra alla foto; da 700px in su
   invece scorre fuori sul lato destro, senza coprire la foto.
   ------------------------------------------------------------------------- */
.about-teaser__info {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.75rem 1.5rem;
  background: rgba(13, 13, 13, 0.9);
  border-radius: 16px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.about-teaser__info.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Il passaggio del mouse conta solo sui dispositivi che hanno davvero
   un mouse: su smartphone/tablet basta il tocco (gestito via JS). */
@media (hover: hover) {
  .about-teaser__image:hover .about-teaser__info,
  .about-teaser__info:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 700px) {
  .about-teaser__info {
    inset: 0 auto 0 100%;
    width: 240px;
    margin-left: 1.25rem;
    transform: translateX(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .about-teaser__info.is-open {
    transform: translateX(0);
  }

  @media (hover: hover) {
    .about-teaser__image:hover .about-teaser__info,
    .about-teaser__info:focus-visible {
      transform: translateX(0);
    }
  }
}

.about-teaser__facts {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.about-teaser__facts li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 1.1rem;
}

/* Il pallino pieno + la lineetta verticale danno l'idea di una piccola
   "mappa concettuale": un punto per ogni informazione, collegati fra loro */
.about-teaser__facts-dot {
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.about-teaser__facts li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1rem;
  left: 3px;
  bottom: -1.15rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.about-teaser__facts strong {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-white);
}

.about-teaser__facts li span:last-child {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

.about-teaser__text p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 42ch;
  margin-block: 1.25rem 2rem;
}

.about-teaser__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Sotto i 900px (colonna unica, foto sopra e testo sotto): centriamo tutto
   il contenuto, così non resta appiccicato al bordo sinistro. */
@media (max-width: 899.98px) {
  .about-teaser__inner {
    justify-items: center;
    text-align: center;
  }

  .about-teaser__actions {
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .about-teaser__inner {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }
}

/* -------------------------------------------------------------------------
   GRIGLIA SERVIZI
   1 colonna su mobile, 3 colonne da tablet in su.
   ------------------------------------------------------------------------- */
.services {
  /* Meno spazio sotto del solito "--section-padding", per avvicinare
     un po' la sezione "Esplora i progetti" qui sotto */
  padding-bottom: 2.5rem;
}

@media (min-width: 900px) {
  .services {
    padding-bottom: 4rem;
  }
}

.services-grid {
  display: grid;
  gap: 0 3rem;
}

@media (min-width: 700px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------------------
   PAGINA SERVIZIO - blocco intro (foto + nome servizio + testo + bottone)
   Su mobile la foto sta sopra, da tablet in su diventano due colonne.
   ------------------------------------------------------------------------- */
.service-intro {
  display: grid;
  gap: 2.5rem;
  /* Spazio verso "I servizi che offriamo" qui sotto: un po' meno del
     solito "--section-padding", per avvicinare le due sezioni */
  padding-bottom: 2.5rem;
}

.service-intro__media img {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  border-radius: 4px;
}

.service-intro__content h2 {
  text-transform: none;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-bottom: 1.1rem;
}

.service-intro__content p {
  max-width: 42ch;
  margin-bottom: 1rem;
}

.service-intro__content .btn {
  margin-top: 0.75rem;
}

@media (min-width: 900px) {
  .service-intro {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding-bottom: 4rem;
  }
}

/* -------------------------------------------------------------------------
   RIGA PORTFOLIO
   Le card scorrono tutte insieme grazie a "transform" (spostate da
   js/main.js, punto 2), non con lo scroll nativo del browser: solo così
   il loop infinito risulta sempre fluido, senza saltare o bloccarsi
   quando lo spazio visibile mostra meno di una card intera in più (lo
   scroll nativo ha un limite oltre il quale non va, "transform" no).
   ".portfolio-carousel" fa da finestrella (taglia ciò che esce fuori),
   ".portfolio-row" è la riga intera che si sposta dentro di essa.
   ------------------------------------------------------------------------- */
.portfolio-row {
  display: flex;
  gap: 1.25rem;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

/* Avvolge la riga scorrevole, la ritaglia (vedi sopra) e serve anche da
   riferimento di posizionamento per i pulsanti precedente/prossimo
   (vedi ".portfolio-prev/.portfolio-next" in components.css), che stanno
   in sovraimpressione invece che sotto. */
.portfolio-carousel {
  position: relative;
  overflow: hidden;
}