/* ==========================================================================
   fioristi.css · landing «Christmas Inspiration 2026» (/fioristi/ e /fioristi/grazie/)
   Si carica dopo style.css e lo estende: tutto sta sotto .pagina-fioristi, quindi la
   landing del packaging non lo vede. Colori, spazi, raggi e durate da tokens.css.
   Le 12 tinte delle palette sono gli unici valori nuovi (design.md, «Palette»):
   servono solo come accento (disco, banda, pillola), mai per testo, bottoni o fondi.
   ========================================================================== */

.pagina-fioristi {
  --pal-1a: #7A1A2A; --pal-1b: #E2BDB5;   /* Teatro Barocco: bordeaux e rosa cipria */
  --pal-2a: #9E1B1B; --pal-2b: #1F3B2D;   /* Locanda Scozzese: rosso e tartan */
  --pal-3a: #B08A4E; --pal-3b: #EFE6D2;   /* Chalet Nordico: avorio e oro */
  --pal-4a: #0F4C4F; --pal-4b: #C39A62;   /* Salotto Déco: verde petrolio e oro */
  --pal-5a: #A0612F; --pal-5b: #E3CFA8;   /* Serra Liberty: caramello e champagne */
  --pal-6a: #C1121F; --pal-6b: #FFFFFF;   /* Bottega Pop: rosso e bianco */
  --bordo-disco: color-mix(in srgb, var(--ink) 22%, transparent);
  --linea-sottile: color-mix(in srgb, var(--ink) 14%, transparent);
}

.pal-teatro-barocco   { --pal-a: var(--pal-1a); --pal-b: var(--pal-1b); }
.pal-locanda-scozzese { --pal-a: var(--pal-2a); --pal-b: var(--pal-2b); }
.pal-chalet-nordico   { --pal-a: var(--pal-3a); --pal-b: var(--pal-3b); }
.pal-salotto-deco     { --pal-a: var(--pal-4a); --pal-b: var(--pal-4b); }
.pal-serra-liberty    { --pal-a: var(--pal-5a); --pal-b: var(--pal-5b); }
.pal-bottega-pop      { --pal-a: var(--pal-6a); --pal-b: var(--pal-6b); }

/* Disco della palette: metà scura e metà chiara in diagonale, bordo sottile sempre
   (l'avorio e il bianco sul fondo crema altrimenti spariscono). */
.disco {
  flex: none;
  display: inline-block;
  width: var(--disco, 26px);
  height: var(--disco, 26px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pal-a) 50%, var(--pal-b) 50%);
  border: 1px solid var(--bordo-disco);
}
/* Locanda Scozzese: la metà chiara è un tartan, verde con righe rosse e un filo oro */
.pal-locanda-scozzese .disco {
  background-color: var(--pal-b);
  background-image:
    linear-gradient(135deg, var(--pal-a) 50%, transparent 50%),
    repeating-linear-gradient(90deg, transparent 0 5px, color-mix(in srgb, var(--oro) 80%, transparent) 5px 6px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--pal-a) 60%, transparent) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--pal-a) 60%, transparent) 0 2px, transparent 2px 6px);
}

/* ------------------------------------------------------------------ 1 · hero */

/* Il mockup è 2:3 e riempie il telaio: si taglia il soffitto, resta il catalogo sul banco */
.pagina-fioristi .hero__piano {
  aspect-ratio: auto;
  height: 100%;
  transform: none;
}
.pagina-fioristi .hero__piano img { object-position: 50% 74%; }

/* Nastro in organza: stesso componente e stessa foto del packaging (js/pagina.js), qui
   ruotato e spostato perché corra sul banco. Entra da sinistra davanti alla base del
   catalogo e fa l'anello fra i rotoli di velluto: non sale mai sulla copertina.
   Misure in % della larghezza della foto, rotazione attorno al centro dell'anello.
   Le code sfumano appena escono dalla foto. Reduced motion: style.css (nastro subito intero). */
.pagina-fioristi .nastro--hero {
  width: 120%;
  margin-left: 1.6%;
  margin-top: 52%;
  transform: rotate(20deg);
  transform-origin: 72% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, var(--ink) 13%, var(--ink) 92%, transparent 99%);
  mask-image: linear-gradient(90deg, transparent 3%, var(--ink) 13%, var(--ink) 92%, transparent 99%);
}

/* Le 6 palette sotto la foto: ognuna apre la sua collezione (js/fioristi.js) */
.tinte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.tinta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 6px 4px;
  border-radius: var(--r-card);
  color: var(--ink);
  font-size: var(--fs-label);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.tinta .disco { transition: transform var(--dur-fast) var(--ease-out); }
.tinta:hover .disco,
.tinta:focus-visible .disco { transform: scale(1.12); }
.tinta:hover .tinta__nome { text-decoration: underline; text-underline-offset: 3px; }
.tinta:focus-visible { outline: 2px solid var(--rosso); outline-offset: 2px; }

/* ------------------------------------------------------------------ 2 · come funziona */

.telefono__foto { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ 4 · per chi è */

.perchi__altro {
  margin-top: 24px;
  font-size: var(--fs-body);
  color: var(--ink-soft);
}
.perchi__altro a { color: var(--ink); text-underline-offset: 3px; }
.perchi__altro a:hover { color: var(--rosso); }

/* ------------------------------------------------------------------ 5 · collezioni */

.testata__lead { color: var(--ink-soft); max-width: 52ch; }

.indice {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea-sottile);
}
.collezione { margin: 0; }
.collezione__testa { margin: 0; font: inherit; }
.collezione__bottone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 72px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--linea-sottile);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  --disco: 34px;
}
.collezione__bottone:focus-visible { outline: 2px solid var(--rosso); outline-offset: 2px; }
.collezione__nomi { display: grid; gap: 2px; }
.collezione__palette { font-size: var(--fs-label); color: var(--ink-soft); }
.collezione__nome {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.collezione__bottone:hover .collezione__nome { color: var(--rosso); }
/* Chevron: ruota quando la voce è aperta */
.collezione__segno {
  justify-self: center;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.collezione__bottone[aria-expanded="true"] .collezione__segno { transform: translateY(2px) rotate(-135deg); }

.collezione__corpo { padding: 20px 0 32px; }
.collezione__corpo[hidden] { display: none; }
/* Banda della palette sopra le foto */
.collezione__corpo::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--pal-a) 50%, var(--pal-b) 50%);
  box-shadow: 0 0 0 1px var(--bordo-disco);
}
.collezione__corpo.is-entrata { animation: collezione-entra var(--dur-fast) var(--ease-out); }
@keyframes collezione-entra { from { opacity: 0; } to { opacity: 1; } }

.collezione__galleria {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 12px;
  align-items: end;
}
.collezione__grande,
.collezione__piccola {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--crema-2);
}
.collezione__piccola { margin-bottom: 24px; }
.collezione__pillola { display: none; }
.collezione__testo { margin-top: 18px; color: var(--ink-soft); max-width: 52ch; }

.collezioni__azione { margin-top: 36px; }

/* ------------------------------------------------------------------ 7 · dal vivo */

.appuntamento--domeniche { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.domeniche { display: flex; flex-wrap: wrap; gap: 4px 6px; }

.formazione {
  display: grid;
  gap: 8px;
  margin: -12px 0 28px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body);
  color: var(--ink);
}
.formazione li { position: relative; padding-left: 18px; }
.formazione li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
}

/* ------------------------------------------------------------------ 8 · chi siamo */

.pagina-fioristi .chi__cornice img { object-position: 50% 40%; }
.chi__citazione {
  margin: 16px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--oro);
}
.chi__citazione p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--ink);
}

/* ------------------------------------------------------------------ grazie */

.pagina-fioristi .grazie__foto { position: relative; }
.pagina-fioristi .grazie__foto img { aspect-ratio: 4 / 5; object-position: 50% 72%; }
.tinte--grazie {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--carta);
  box-shadow: var(--shadow-tile);
  transform: translateX(-50%);
  --disco: 22px;
}
.tinte--grazie li { display: flex; }

/* ------------------------------------------------------------------ 640 */

@media (min-width: 640px) {
  .tinte { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .collezione__galleria { gap: 16px; }
}

/* ------------------------------------------------------------------ 1024 */

@media (min-width: 1024px) {
  .pagina-fioristi .hero .eyebrow { text-wrap: balance; }
  .pagina-fioristi .hero__piano img { object-position: 50% 70%; }
  /* Telaio più basso da desktop (100/95): il banco sale, il nastro con lui.
     Maschera ripetuta perché style.css da 1024 mette la sua, tarata sul packaging. */
  .pagina-fioristi .nastro--hero {
    width: 120%;
    margin-left: 1.6%;
    margin-top: 44%;
    -webkit-mask-image: linear-gradient(90deg, transparent 3%, var(--ink) 13%, var(--ink) 92%, transparent 99%);
    mask-image: linear-gradient(90deg, transparent 3%, var(--ink) 13%, var(--ink) 92%, transparent 99%);
  }
  /* Grazie: tre blocchi in fila (il packaging ne ha due) */
  .pagina-fioristi .grazie__blocchi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tinte { margin-top: 18px; }

  /* Testata delle collezioni: etichetta, titolo e, al posto del link, il paragrafo */
  .pagina-fioristi .testata--collezioni {
    grid-template-columns: calc((100% - 80px) * 2 / 12) minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 40px;
    align-items: end;
    margin-bottom: 48px;
  }
  .testata--collezioni .testata__lead { justify-self: end; }

  /* Indice a sinistra, vetrina della collezione aperta a destra (solo con JS: senza,
     resta la lista con tutte le voci aperte) */
  html.js .indice {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: repeat(6, auto) 1fr;
    column-gap: 64px;
    border-top: 0;
  }
  html.js .collezione { display: contents; }
  html.js .collezione__testa { grid-column: 1; }
  html.js .collezione__bottone {
    min-height: 88px;
    padding: 16px 20px;
    border-bottom: 0;
    border-radius: var(--r-card);
    --disco: 40px;
  }
  html.js .collezione__bottone[aria-expanded="true"] { background: var(--carta); box-shadow: var(--shadow-tile); }
  html.js .collezione__bottone[aria-expanded="true"] .collezione__nome { color: var(--rosso); }
  html.js .collezione__segno { transform: rotate(-45deg); }
  html.js .collezione__bottone[aria-expanded="true"] .collezione__segno { transform: rotate(-45deg); border-color: var(--rosso); }
  html.js .collezione__corpo {
    grid-column: 2;
    grid-row: 1 / span 7;
    align-self: start;
    padding: 0;
  }
  html.js .collezione__corpo::before { display: none; }
  html.js .collezione__galleria { grid-template-columns: 440fr 290fr; gap: 20px; }
  html.js .collezione__piccola { margin-bottom: 40px; }
  html.js .collezione__pillola {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 8px;
    border-radius: var(--r-pill);
    background: var(--carta);
    box-shadow: var(--shadow-tile);
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--ink);
    --disco: 22px;
  }
  html.js .collezione__testo { margin-top: 24px; font-size: var(--fs-lead); max-width: 56ch; }

  .collezioni__azione { margin-top: 48px; }
}

/* La vetrina resta ferma mentre si scorre l'indice, solo se lo schermo è alto abbastanza */
@media (min-width: 1024px) and (min-height: 760px) {
  html.js .collezione__corpo { position: sticky; top: 96px; }
}

/* ------------------------------------------------------------------ movimento ridotto */

@media (prefers-reduced-motion: reduce) {
  .tinta .disco,
  .collezione__segno { transition: none; }
  .tinta:hover .disco,
  .tinta:focus-visible .disco { transform: none; }
  .collezione__corpo.is-entrata { animation: none; }
}