/* =========================================================================
   PAGES.CSS
   Stili specifici di singole pagine (non riutilizzati altrove).
   Indice:
   1) Home - lettera decorativa "V" nella sezione "Chi siamo"
   2) Portfolio - pagina con l'elenco dei lavori (foto/video)
   3) Privacy Policy - pagina di solo testo
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) HOME - "V" decorativa sullo sfondo della sezione scura, ritagliata
   dalla forma in "assets/v-shape.svg" (stesso segno usato nelle frecce del
   nastro "Contattaci" più sotto in pagina). Puramente decorativa: se non
   piace si può rimuovere senza problemi. Per cambiare quanto si vede,
   modifica il numero in "background-color" (0.08 = molto leggera).
   ------------------------------------------------------------------------- */
.about-teaser {
  isolation: isolate;
}

.about-teaser::before {
  content: '';
  position: absolute;
  right: -2rem;
  bottom: -4rem;
  width: 20rem;
  aspect-ratio: 284.89 / 282.22;
  background-color: rgba(255, 255, 255, 0.08);
  -webkit-mask: url('../assets/v-shape.svg') no-repeat center / contain;
  mask: url('../assets/v-shape.svg') no-repeat center / contain;
  z-index: -1;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   2) PORTFOLIO - i lavori scorrono in orizzontale, uno schermo intero alla
   volta, senza nessun testo fuori dalle foto/video (titolo e tag stanno in
   sovraimpressione, vedi ".work-slide__overlay"). Per aggiungere un
   lavoro, copia un blocco ".work-slide" intero in portfolio.html (vedi i
   commenti lì dentro) e cambia media, numero, titolo e tag.

   Su SMARTPHONE/TABLET (schermo touch) resta una pagina "statica" senza
   scroll verticale: si scorre lateralmente col dito sulla striscia.

   Su DESKTOP (mouse/trackpad) invece la pagina scorre normalmente in
   verticale come qualunque altra pagina, e quello scroll fa avanzare i
   lavori in orizzontale (vedi js/main.js, punto 10): più naturale che
   "catturare" la rotella. In questo caso js/main.js aggiunge la classe
   "portfolio-page--pin" al body, che attiva le regole più sotto.

   Il body di questa pagina ha sempre la classe "portfolio-page": le regole
   qui sotto (comportamento touch, di base) tolgono lo scroll verticale e
   fanno occupare tutta l'altezza dello schermo all'header + alla striscia
   orizzontale insieme. ".portfolio-scroll-spacer" (tra il body e la
   striscia) su schermo touch è solo un contenitore "di passaggio" che
   riempie lo spazio disponibile; su desktop diventa invece alto apposta
   per dare spazio allo scroll verticale che guida quello orizzontale.
   ------------------------------------------------------------------------- */
body.portfolio-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* "main" deve essere anch'esso un contenitore flex (e prendere lo spazio
   rimasto sotto l'header con flex:1) perché ".portfolio-scroll-spacer" e
   ".portfolio-strip" qui sotto sono suoi discendenti, non figli diretti
   del body: senza questa regola "main" si allunga quanto il suo contenuto
   (il video) invece di restare dentro lo schermo, e la pagina torna a
   scorrere in verticale. */
body.portfolio-page main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.portfolio-scroll-spacer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

/* Striscia orizzontale: occupa tutto lo spazio rimasto sotto l'header e
   scorre lateralmente, un lavoro a schermo intero alla volta (vedi
   ".work-slide" qui sotto: "scroll-snap" fa "scattare" ogni lavoro
   esattamente a schermo pieno, senza fermarsi a metà). */
.portfolio-strip {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  background: var(--color-black);
  -webkit-overflow-scrolling: touch;
}

.portfolio-strip::-webkit-scrollbar {
  height: 6px;
}

.portfolio-strip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}

/* --- Variante desktop: scroll verticale della pagina che guida quello
   orizzontale della striscia (classe aggiunta da js/main.js, punto 10) -- */
body.portfolio-page--pin {
  height: auto;
  overflow: visible;
  display: block;
}

body.portfolio-page--pin main {
  display: block;
}

body.portfolio-page--pin .portfolio-scroll-spacer {
  display: block;
  position: relative;
  /* L'altezza vera e propria viene calcolata e impostata da js/main.js
     (deve tener conto di quanto è larga la striscia da scorrere): il
     valore qui sotto è solo un minimo di sicurezza prima che il JS parta. */
  min-height: 100vh;
}

/* La striscia resta "agganciata" (sticky) sotto l'header mentre si scorre
   la pagina: il JS calcola l'altezza dell'header e la mette nella
   variabile qui sotto, così la striscia non ci finisce sotto. Lo scroll
   della striscia stessa non è più guidato dal dito/trascinamento
   dell'utente su di essa (per questo niente più scroll-snap qui: se ne
   occupa il JS, "agganciando" il lavoro più vicino quando lo scroll
   verticale si ferma). */
body.portfolio-page--pin .portfolio-strip {
  position: sticky;
  top: var(--vorak-header-h, 0px);
  height: calc(100vh - var(--vorak-header-h, 0px));
  scroll-snap-type: none;
}

/* Ogni lavoro occupa uno schermo intero: la foto/video riempie tutto lo
   spazio disponibile (vedi ".work-slide__media" sotto, "object-fit:
   cover"), niente bordi o spazi vuoti intorno. */
.work-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
}

.work-slide__media,
.work-slide__media img,
.work-slide__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Titolo e tag in sovraimpressione, in basso a sinistra, su un leggero
   velo scuro sfumato: così restano leggibili sopra qualsiasi foto/video,
   senza bisogno di nessun testo fuori dal contenuto multimediale. */
.work-slide__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 40%);
  color: var(--color-white);
  pointer-events: none;
}

.work-slide__title {
  font-size: 1.3rem;
  text-transform: none;
  color: var(--color-white);
}

.work-slide__tag {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 0.35rem;
}

@media (min-width: 900px) {
  .work-slide__overlay {
    padding: 3rem;
  }
  .work-slide__title {
    font-size: 1.8rem;
  }
}

/* -------------------------------------------------------------------------
   3) PRIVACY POLICY - pagina di solo testo, larghezza contenuta per
   restare leggibile (una riga troppo lunga è faticosa da leggere).
   ------------------------------------------------------------------------- */
.legal-page {
  max-width: 760px;
  padding-block: 4rem;
}

@media (min-width: 900px) {
  .legal-page {
    padding-block: 6rem;
  }
}

.legal-page__updated {
  color: var(--color-gray-text);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  margin-bottom: 2.5rem;
}

.legal-page h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.legal-page p {
  margin-bottom: 1rem;
}

.legal-page ul {
  margin: 0 0 1rem 1.25rem;
  list-style: disc;
  color: var(--color-gray-text);
}

.legal-page li {
  margin-bottom: 0.4rem;
}

.legal-page a {
  color: var(--color-accent);
  text-decoration: underline;
}