/* =============================================================================
   PUROTATTO — boutique.html, come la pagina boutique della vetrina (26/10 sera), con le sue foto:
   due tavole a tutta altezza (Portofino · Forte dei Marmi) coi dati sotto ciascuna,
   Atmosfere (una tessera grande e quattro, le due città), chiusura con la foto della giacca in maglia verso la collezione.
   ============================================================================= */

/* Header avorio fisso come nella vetrina (data-header="light"): le tavole partono sotto e riempiono il resto della schermata */
.pagina-boutique main { padding-top: var(--hdr); }
@media (min-width: 760px) { .pagina-boutique .bq-tavola { height: calc(100svh - var(--hdr)); min-height: 520px; } }

/* Le due boutique: ogni colonna = tavola + dati (sul telefono si impilano nell'ordine giusto) */
.pagina-boutique .bq-coppia { align-items: start; }
.pagina-boutique .bq { display: flex; flex-direction: column; background: var(--avorio); scroll-margin-top: var(--hdr); container-type: inline-size; }
.pagina-boutique .bq-tavola { width: 100%; }
.pagina-boutique .bq-tavola > .bq-foto { left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(.9); }
.pagina-boutique .bq-tavola .tavola-copy { display: flex; flex-direction: column; align-items: flex-start; }
.pagina-boutique .bq-tavola .titolo { font-size: clamp(18px, 4.2cqi, 46px); white-space: normal; }

/* Dati della boutique su fondo avorio: tre voci in riga, hairline sopra */
.pagina-boutique .bq-info { padding: clamp(40px, 4.4vw, 72px) clamp(22px, 7cqi, 72px) clamp(48px, 5vw, 88px); }
.pagina-boutique .bq-dati {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, 1.15fr); gap: 28px clamp(20px, 2.4vw, 40px);
  margin: 0; padding-top: 26px; border-top: 1px solid var(--linea);
}
.pagina-boutique .bq-dati dt { margin-bottom: 12px; color: var(--pietra); font-size: 11px; }
.pagina-boutique .bq-dati dd { margin: 0; font-size: 15px; line-height: 1.7; color: var(--inchiostro); }
.pagina-boutique .bq-dati a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .3s; }
.pagina-boutique .bq-dati a:hover { background-size: 100% 1px; }

/* Atmosfere: testa, poi una tessera grande e quattro a filo */
.pagina-boutique .bq-atm { margin-top: 2px; }
.pagina-boutique .bq-atm-testa { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(52px, 7vw, 112px) var(--gutter) clamp(36px, 4.9vw, 78px); text-align: center; }
.pagina-boutique .bq-atm-testa .titolo { font-size: clamp(24px, 2.2vw, 32px); }
.pagina-boutique .bq-atm-testa .testo { font-size: 15px; line-height: 1.75; color: var(--pietra); max-width: 52ch; }
.pagina-boutique .bq-griglia figure { margin: 0; }

/* Chiusura verso la collezione: la foto della giacca in maglia a tutta larghezza, una schermata come le tavole (26/10 sera, al posto del video);
   titolo e bottone in basso al centro, sul velo come nelle tavole: il viso resta libero e il titolo cade sulla giacca */
.pagina-boutique .teaser { position: relative; overflow: hidden; color: var(--bianco); background: #6b5d51; }
.pagina-boutique .bq-chiusura-foto, .pagina-boutique .bq-chiusura-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pagina-boutique .bq-chiusura-foto img { max-width: none; object-fit: cover; object-position: 50% 20%; filter: brightness(.9); }
.pagina-boutique .bq-chiusura::after {
  content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(22, 20, 22, .5), rgba(22, 20, 22, 0));
}
.pagina-boutique .teaser-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: clamp(40px, 11vh, 104px); }
.pagina-boutique .teaser-copy .titolo { font-size: clamp(23px, 3.4vw, 66px); margin-bottom: .5em; }
.pagina-boutique .bq-chiusura .teaser-copy::before {           /* ombra morbida dietro titolo e bottone (la maglia è fitta), niente fasce */
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(90%, 900px); height: 52%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(24, 18, 15, .34), rgba(24, 18, 15, 0));
}
.pagina-boutique .bq-chiusura { height: calc(100svh - var(--hdr)); min-height: 520px; margin-top: 2px; }

/* Desktop stretto e tablet: i dati vanno su due righe */
@media (max-width: 1279px) {
  .pagina-boutique .bq-dati { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pagina-boutique .bq-dati > :last-child { grid-column: 1 / -1; }
}

/* Telefono */
@media (max-width: 759px) {
  .pagina-boutique .bq-tavola .titolo { font-size: clamp(14px, 4.4cqi, 26px); }
  .pagina-boutique .bq-info { padding: 36px var(--gutter) 52px; }
  .pagina-boutique .bq-dati { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 20px; padding-top: 22px; }
  .pagina-boutique .bq-dati dd { font-size: 14px; }
  .pagina-boutique .bq-griglia .bq-grande { grid-row: auto; aspect-ratio: 4 / 5; }
  .pagina-boutique .teaser-copy { padding-bottom: 32px; }
  .pagina-boutique .teaser-copy .titolo { font-size: min(5.6vw, 24px); }
  .pagina-boutique .bq-chiusura { height: 78svh; min-height: 460px; }
}