/* ============================================================================
   PASTICCERIA FRANCESCA — Fogli di stile onepage
   ----------------------------------------------------------------------------
   INDICE
     01. VARIABILI ......... il tuo pannello di controllo. Tocca solo questo
                             per modifiche di colore, spazio e dimensione testo.
     02. BASE .............. reset minimo, container, tipografia condivisa
     03. COMPONENTI ........ eyebrow, titoli display, bottoni, reveal
     04. HERO
     05. INTRO ............. "Una nuova idea di dolcezza"
     06. BANDA ............. fascia immagine a tutta larghezza
     07. FEATURE ........... blocco azzurro "La tradizione incontra..."
     08. CREAZIONI ......... elenco numerato prodotti
     09. GALLERY
     10. CONTATTI
     11. FOOTER
     12. RESPONSIVE ........ solo gli scavalcamenti che le variabili non coprono

   REGOLA: dentro le sezioni non ci sono valori fissi, solo variabili.
   Se un valore sta nella sezione e non qui sopra, vuol dire che è davvero
   specifico di quella sezione.
   ============================================================================ */


/* ============================================================================
   01. VARIABILI
   ============================================================================ */

.pf {
  /* --- COLORI (brand book) ------------------------------------------------ */
  --pf-crema:        #F5F1E9;   /* fondo principale                          */
  --pf-caramello:    #AF8F3F;   /* accento: eyebrow, parole evidenziate      */
  --pf-cacao:        #462617;   /* marrone del brand book (usato nelle linee)*/
  --pf-confetto:     #B1D6E7;   /* fondo sezione feature                     */
  --pf-inchiostro:   #271D18;   /* colore del testo                          */
  --pf-grigio:       #4E4E4E;   /* testo sul fondo confetto                  */
  --pf-linea:        rgb(70 38 23 / 18%);  /* filetti divisori               */

  /* --- FONT ---------------------------------------------------------------- */
  --pf-font-display: "Marcellus SC", Georgia, serif;  /* titoli di sezione    */
  --pf-font-titolo:  "Marcellus", Georgia, serif;     /* nomi prodotto        */
  --pf-font-testo:   "Mulish", system-ui, sans-serif; /* corpo e utility      */

  /* --- SCALA TIPOGRAFICA ---------------------------------------------------
     Tutte le misure sono guidate dal vw: il valore centrale di ogni clamp() è
     la dimensione del Figma divisa per 1920 (es. 118px → 6.15vw), quindi a
     1920px di larghezza il sito è identico al progetto e sotto scala da solo.

     I due estremi restano in rem di proposito, e servono a due cose:
     il minimo evita che le didascalie diventino illeggibili su schermi
     stretti, il massimo evita che il titolo esploda su un monitor da 32".
     Sono anche l'unico modo di rispettare la dimensione testo impostata dal
     browser, che con il vw puro verrebbe ignorata.

     Per ingrandire tutto di un filo, alza il terzo valore.                   */
  --pf-t-hero:       clamp(3rem,     6.15vw,  7.375rem);  /* 118px           */
  --pf-t-sezione:    clamp(2.25rem,  4.27vw,  5.125rem);  /*  82px           */
  --pf-t-accento:    clamp(2.75rem,  5.89vw,  7.063rem);  /* 113px           */
  --pf-t-prodotto:   clamp(2rem,     3.44vw,  4.125rem);  /*  66px           */
  --pf-t-guida:      clamp(1.25rem,  1.25vw,  1.5rem);    /*  24px           */
  --pf-t-corpo:      clamp(1rem,     0.94vw,  1.125rem);  /*  18px           */
  --pf-t-corpo-s:    clamp(0.813rem, 0.78vw,  0.938rem);  /*  15px           */
  --pf-t-etichetta:  clamp(0.75rem,  0.68vw,  0.813rem);  /*  13px           */
  --pf-t-eyebrow:    clamp(0.625rem, 0.57vw,  0.688rem);  /*  11px           */
  --pf-t-micro:      clamp(0.563rem, 0.52vw,  0.625rem);  /*  10px           */
  --pf-t-footer:     clamp(0.5rem,   0.47vw,  0.563rem);  /*   9px           */

  --pf-interlinea-display: 0.95;
  --pf-interlinea-corpo:   1.5;
  --pf-tracking-display:   -0.03em;
  --pf-tracking-eyebrow:   0.22em;

  /* --- SPAZIO -------------------------------------------------------------- */
  --pf-gutter:       clamp(1.25rem, 10vw, 12rem);  /* margine laterale 192px */
  --pf-max:          1536px;   /* container standard                         */
  --pf-max-stretto:  1334px;   /* container intro e immagini affiancate      */
  --pf-sezione-y:    clamp(4rem, 7vw, 8.75rem);    /* aria sopra/sotto       */
  --pf-gap:          clamp(1.5rem, 2.7vw, 3.25rem);
  --pf-gap-s:        1.375rem;  /* 22px, gap della griglia gallery           */

  /* --- MOVIMENTO ----------------------------------------------------------- */
  --pf-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --pf-durata:       0.7s;
  --pf-ritardo:      0.09s;   /* scarto fra elementi che entrano in sequenza */

  /* --- BOTTONI -------------------------------------------------------------- */
  --pf-btn-padding:  1.125rem 1.5rem;
  --pf-btn-bordo:    1px;
}


/* ============================================================================
   02. BASE
   ============================================================================ */

.pf {
  background: var(--pf-crema);
  color: var(--pf-inchiostro);
  font-family: var(--pf-font-testo);
  font-size: var(--pf-t-corpo);
  font-weight: 300;
  line-height: var(--pf-interlinea-corpo);
}

.pf *,
.pf *::before,
.pf *::after { box-sizing: border-box; }

.pf p { margin: 0 0 1.5em; }
.pf p:last-child { margin-bottom: 0; }

.pf img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf a { color: inherit; text-decoration: none; }

.pf__sezione { padding: var(--pf-sezione-y) var(--pf-gutter); }

.pf__container {
  width: 100%;
  max-width: var(--pf-max);
  margin-inline: auto;
}

.pf__container--stretto { max-width: var(--pf-max-stretto); }


/* ============================================================================
   03. COMPONENTI CONDIVISI
   ============================================================================ */

/* --- Eyebrow: la righina maiuscola sopra ai titoli ------------------------- */
.pf-eyebrow {
  margin: 0 0 1.25rem;
  color: var(--pf-caramello);
  font-size: var(--pf-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--pf-tracking-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
}

/* --- Titolo display: "Una nuova idea di dolcezza." ------------------------- */
.pf-display {
  margin: 0;
  color: var(--pf-inchiostro);
  font-family: var(--pf-font-display);
  font-size: var(--pf-t-sezione);
  font-weight: 400;
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-interlinea-display);
  text-wrap: balance;
}

/* La parola evidenziata: più grande e color caramello */
.pf-display__accento {
  color: var(--pf-caramello);
  font-size: var(--pf-t-accento);
}

/* Il punto finale segue la dimensione della parola evidenziata, non quella
   del titolo: da solo, in corpo piccolo, sembrava un refuso. */
.pf-display__punto {
  color: var(--pf-inchiostro);
  font-size: var(--pf-t-accento);
}

/* --- Bottone -------------------------------------------------------------- */
.pf-btn {
  display: inline-block;
  padding: var(--pf-btn-padding);
  border: var(--pf-btn-bordo) solid currentColor;
  color: var(--pf-inchiostro);
  font-family: var(--pf-font-testo);
  font-size: var(--pf-t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  transition:
    background-color var(--pf-durata) var(--pf-ease),
    color            var(--pf-durata) var(--pf-ease);
}

.pf-btn:hover,
.pf-btn:focus-visible {
  background: var(--pf-inchiostro);
  color: var(--pf-crema);
}

.pf-btn--chiaro { color: var(--pf-grigio); }
.pf-btn--chiaro:hover,
.pf-btn--chiaro:focus-visible {
  background: var(--pf-crema);
  color: var(--pf-inchiostro);
}

.pf :focus-visible {
  outline: 2px solid var(--pf-caramello);
  outline-offset: 3px;
}

/* --- Reveal: entrata in scroll (il Figma li chiama "reveal") ---------------
   Attenzione al selettore: si nasconde SOLO sotto .pf-js, la classe che lo
   script mette su <html> quando parte. Senza JS il contenuto resta visibile.
   Non togliere ".pf-js" da qui: è la rete di sicurezza.                     */
.pf-js .pf-reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity   var(--pf-durata) var(--pf-ease),
    transform var(--pf-durata) var(--pf-ease);
}

.pf-js .pf-reveal.is-visibile {
  opacity: 1;
  transform: none;
}

/* Elementi in sequenza: ogni figlio parte un attimo dopo il precedente */
.pf-js .pf-reveal:nth-child(2) { transition-delay: var(--pf-ritardo); }
.pf-js .pf-reveal:nth-child(3) { transition-delay: calc(var(--pf-ritardo) * 2); }
.pf-js .pf-reveal:nth-child(4) { transition-delay: calc(var(--pf-ritardo) * 3); }

@media (prefers-reduced-motion: reduce) {
  .pf-js .pf-reveal { opacity: 1; transform: none; transition: none; }
  .pf * { animation: none !important; transition-duration: 0.01ms !important; }
}


/* ============================================================================
   04. HERO
   ============================================================================ */

.pf-hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: var(--pf-sezione-y) var(--pf-gutter);
}

/* Il blocco logo + titolo si stringe sul proprio contenuto e si centra nella
   pagina, come nel Figma. Non segue il margine delle altre sezioni: è
   voluto, l'apertura sta per conto suo. */
.pf-hero__inner {
  display: flex;
  gap: var(--pf-gap);
  align-items: center;
  width: fit-content;
  max-width: var(--pf-max);
  margin-inline: auto;
}

.pf-hero__logo {
  flex: 0 0 clamp(7rem, 13.2vw, 15.875rem);  /* 254px */
  align-self: center;
}

.pf-hero__logo img {
  height: auto;
  object-fit: contain;
}

.pf-hero__copy { flex: 0 1 auto; }

.pf-hero__titolo {
  margin: 0;
  font-family: var(--pf-font-display);
  font-size: var(--pf-t-hero);
  font-weight: 400;
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-interlinea-display);
}

.pf-hero__riga-1 { display: block; color: var(--pf-inchiostro); }
.pf-hero__riga-2 { display: block; color: var(--pf-caramello); }

.pf-hero__azioni { margin-top: clamp(2rem, 3vw, 3.25rem); }


/* ============================================================================
   05. INTRO — "Una nuova idea di dolcezza."
   ============================================================================ */

.pf-intro__testa {
  display: grid;
  gap: var(--pf-gap);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.pf-intro__azioni { margin-top: clamp(1.5rem, 2.5vw, 2.75rem); }

.pf-intro__immagini {
  display: grid;
  gap: var(--pf-gap);
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(2.5rem, 4.6vw, 5.75rem);
}

.pf-intro__immagine { aspect-ratio: 1 / 1; }


/* ============================================================================
   06. BANDA — fascia immagine a tutta larghezza
   ============================================================================ */

.pf-banda {
  width: 100%;
  aspect-ratio: 1920 / 879;
  min-height: 14rem;
}


/* ============================================================================
   07. FEATURE — blocco azzurro
   ============================================================================ */

.pf-feature {
  background: var(--pf-confetto);
  color: var(--pf-grigio);
}

.pf-feature__inner {
  display: grid;
  gap: var(--pf-gap);
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
}

/* Sul fondo confetto l'eyebrow caramello non si legge: si usa il cacao */
.pf-feature .pf-eyebrow { color: var(--pf-cacao); }

.pf-feature .pf-display { color: var(--pf-grigio); }

.pf-feature__testo {
  align-self: center;
  font-size: var(--pf-t-corpo-s);
}

.pf-feature__azioni { margin-top: clamp(1.5rem, 2.5vw, 2.75rem); }


/* ============================================================================
   08. CREAZIONI — elenco numerato
   ============================================================================ */

.pf-creazioni__testa {
  display: grid;
  gap: var(--pf-gap);
  grid-template-columns: 1.35fr 1fr;
  align-items: end;
  padding-bottom: clamp(2rem, 3vw, 3.5rem);
  border-bottom: 1px solid var(--pf-linea);
}

.pf-creazioni__intro { font-size: var(--pf-t-corpo-s); }

.pf-creazioni__riga {
  display: grid;
  gap: var(--pf-gap);
  grid-template-columns: 3.5rem 1fr 1.15fr;
  align-items: center;
  padding: clamp(1.75rem, 2.9vw, 3.5rem) 0;
  border-bottom: 1px solid var(--pf-linea);
}

.pf-creazioni__numero {
  color: var(--pf-caramello);
  font-size: var(--pf-t-eyebrow);
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.2;
}

.pf-creazioni__titolo {
  margin: 0;
  color: var(--pf-caramello);
  font-family: var(--pf-font-titolo);
  font-size: var(--pf-t-prodotto);
  font-weight: 400;
  line-height: 1;
}

.pf-creazioni__testo { margin: 0; }


/* ============================================================================
   09. GALLERY
   ============================================================================ */

.pf-gallery__testa {
  display: grid;
  gap: var(--pf-gap);
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin-bottom: clamp(2rem, 3.25vw, 3.25rem);
}

.pf-gallery__guida {
  margin: 0;
  font-size: var(--pf-t-guida);
  line-height: 1.55;
}

/* Tre colonne di larghezza diversa, come nel Figma.
   Le proporzioni delle immagini sono definite colonna per colonna. */
.pf-gallery__grid {
  display: grid;
  gap: var(--pf-gap-s);
  grid-template-columns: 1.47fr 1fr 1.33fr;
  align-items: start;
}

.pf-gallery__col {
  display: flex;
  flex-direction: column;
  gap: var(--pf-gap-s);
}

.pf-gallery__col--1 { --pf-r-1: 576 / 554; --pf-r-n: 576 / 362; }
.pf-gallery__col--2 { --pf-r-1: 393 / 362; --pf-r-n: 393 / 362; }
.pf-gallery__col--3 { --pf-r-1: 524 / 554; --pf-r-n: 524 / 362; }

.pf-gallery__item { aspect-ratio: var(--pf-r-n); overflow: hidden; }
.pf-gallery__item:first-child { aspect-ratio: var(--pf-r-1); }

.pf-gallery__item img {
  transition: transform 1.2s var(--pf-ease);
}

.pf-gallery__item:hover img { transform: scale(1.04); }


/* ============================================================================
   10. CONTATTI
   ============================================================================ */

.pf-contatti__testa {
  display: grid;
  gap: var(--pf-gap);
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
}

.pf-contatti__voce {
  display: flex;
  gap: var(--pf-gap);
  align-items: baseline;
  justify-content: space-between;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--pf-linea);
}

.pf-contatti__etichetta {
  color: var(--pf-caramello);
  font-size: var(--pf-t-micro);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pf-contatti__valore {
  font-size: var(--pf-t-etichetta);
  font-weight: 700;
  text-align: right;
}

a.pf-contatti__valore { transition: color var(--pf-durata) var(--pf-ease); }
a.pf-contatti__valore:hover { color: var(--pf-caramello); }

.pf-contatti__mappa {
  margin-top: clamp(2.5rem, 4vw, 5rem);
  aspect-ratio: 1536 / 360;
  min-height: 15rem;
  border: 1px solid var(--pf-linea);
  overflow: hidden;
}

.pf-contatti__mappa iframe,
.pf-contatti__mappa img {
  width: 100%;
  height: 100%;
  border: 0;
}


/* ============================================================================
   11. FOOTER
   ============================================================================ */

.pf-footer {
  padding: clamp(1.75rem, 2.2vw, 2.125rem) var(--pf-gutter);
  border-top: 1px solid var(--pf-linea);
}

.pf-footer__inner {
  display: flex;
  gap: var(--pf-gap);
  align-items: flex-end;
  justify-content: space-between;
  max-width: var(--pf-max);
  margin-inline: auto;
}

.pf-footer__logo { flex: 0 0 5rem; }
.pf-footer__logo img { height: auto; object-fit: contain; }

.pf-footer__meta {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  flex-wrap: wrap;
  font-size: var(--pf-t-footer);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.pf-footer__meta a { transition: color var(--pf-durata) var(--pf-ease); }
.pf-footer__meta a:hover { color: var(--pf-caramello); }


/* ============================================================================
   12. RESPONSIVE
   Le variabili con clamp() gestiscono già la scala. Qui ci sono solo i
   cambi di impaginazione che il clamp non può fare.
   ============================================================================ */

/* --- Tablet (fino a 1024px) ------------------------------------------------ */
@media (max-width: 1024px) {

  .pf-creazioni__riga {
    grid-template-columns: 2.5rem 1fr;
    align-items: start;
  }

  .pf-creazioni__testo { grid-column: 2; }

  .pf-gallery__grid { grid-template-columns: 1fr 1fr; }
  .pf-gallery__col--3 { grid-column: span 2; }
  .pf-gallery__col--3 { flex-direction: row; }
  .pf-gallery__col--3 .pf-gallery__item { flex: 1; }
}

/* --- Mobile (fino a 767px) ------------------------------------------------- */
@media (max-width: 767px) {

  .pf-hero {
    min-height: auto;
    padding-block: clamp(5rem, 18vw, 8rem);
  }

  .pf-hero__inner {
    flex-direction: column;
    gap: clamp(1.5rem, 6vw, 2.5rem);
    align-items: flex-start;
    width: 100%;
  }

  .pf-hero__logo { flex-basis: 8.5rem; }

  .pf-intro__testa,
  .pf-intro__immagini,
  .pf-feature__inner,
  .pf-creazioni__testa,
  .pf-gallery__testa,
  .pf-contatti__testa {
    grid-template-columns: 1fr;
  }

  .pf-gallery__grid { grid-template-columns: 1fr; }
  .pf-gallery__col--3 { grid-column: auto; flex-direction: column; }

  .pf-contatti__voce {
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-start;
  }

  .pf-contatti__valore { text-align: left; }

  .pf-footer__inner {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .pf-banda { aspect-ratio: 4 / 5; }
}