/* =============================================================================
   PUROTATTO — pagina Boutique · schede, interni, ritiro, modali prenota e mappa
   Solo classi di pagina: il sistema (colori, font, bottoni, griglie) sta in system.css
   ============================================================================= */

/* Schede sotto le tavole: indirizzo · orari · servizi · azioni */
.scheda { display: flex; flex-direction: column; }
.scheda .titolo { margin-bottom: 18px; }
.scheda .scheda-indirizzo { color: var(--inchiostro); }
.scheda-blocchi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 56px); }
.scheda-blocco .etichetta { margin: 30px 0 10px; color: var(--pietra); font-size: 11px; }
.scheda-servizi { margin: 0; padding: 0; list-style: none; }
.scheda-servizi li { font-size: 15px; line-height: 1.7; color: var(--bruno); }
.scheda-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; margin-top: clamp(34px, 3.4vw, 48px); }
.indirizzo .scheda-azioni .link-freccia { margin-top: 0; }
.scheda-azioni .btn { font-size: 12px; padding: 14px 20px 13px 22px; }

/* Gli interni: titolo sopra, poi una riga di 4 foto a filo */
.interni { background: var(--avorio); border-top: 2px solid var(--avorio); }
.interni-testa { padding: clamp(64px, 7vw, 112px) var(--gutter) clamp(34px, 3.6vw, 52px); text-align: center; }
.interni-testa .titolo { font-size: clamp(24px, 2.2vw, 32px); margin-bottom: 14px; }
.interni-testa p { font-size: 15px; line-height: 1.6; color: var(--bruno); }
.griglia--interni .tile { margin: 0; aspect-ratio: 4 / 5; }

/* Ritira in boutique: fascia avorio (il footer è carta), due righe e un bottone */
.ritiro { background: var(--avorio); }
.ritiro-in { max-width: 760px; margin: 0 auto; padding: clamp(72px, 8vw, 128px) var(--gutter); text-align: center; }
.ritiro .titolo { font-size: clamp(26px, 2.8vw, 40px); margin-bottom: 22px; }
.ritiro p { font-size: 15px; line-height: 1.7; color: var(--bruno); margin-bottom: clamp(30px, 3vw, 40px); }
.ritiro .riga { display: block; }

/* Modale prenota: scelte a segmenti, note */
.modale--prenota { max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; }
.modale--prenota h2 { margin-bottom: 22px; }
.scelta { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.scelta legend { display: block; padding: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pietra); margin-bottom: 8px; }
.scelta-opzioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scelta-opzioni label { position: relative; display: block; cursor: pointer; }
.scelta-opzioni label + label span { border-left-width: 0; }
.scelta-opzioni input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta-opzioni span {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 10px;
  margin: 0; border: 1px solid var(--inchiostro); color: var(--inchiostro); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2; text-align: center;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.scelta-opzioni label:hover span { background: var(--carta); }
.scelta-opzioni input:checked + span { background: var(--inchiostro); color: var(--avorio); }
.scelta-opzioni input:focus-visible + span { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
.modale--prenota .campo textarea {
  display: block; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--inchiostro); border-radius: 0;
  background: transparent; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; min-height: 46px; outline: 0;
}
.modale--prenota .campo textarea:focus { border-bottom-width: 2px; padding-bottom: 9px; }
.modale--prenota .campo textarea::placeholder { color: var(--pietra); }
.modale-grazie .grazie-titolo { font-size: clamp(22px, 5vw, 28px); line-height: 1.2; color: var(--inchiostro); margin: 6px 0 14px; }

/* Modale come arrivare: riquadro mappa segnaposto (carta, nome, una linea) */
.modale--mappa { width: min(560px, calc(100% - 32px)); }
.modale--mappa h2 { margin-bottom: 22px; }
.mappa { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--carta); margin-bottom: 24px; }
.mappa-linea { position: absolute; left: -10%; right: -10%; top: 62%; height: 1px; background: var(--pietra); transform: rotate(-9deg); }
.mappa-linea--b { top: 0; bottom: 0; left: 64%; right: auto; width: 1px; height: auto; opacity: .55; transform: rotate(14deg); }
.mappa-nome { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding-left: .17em; text-align: center; font-size: clamp(18px, 4.6vw, 24px); color: var(--inchiostro); }
.mappa-nota { position: absolute; left: 16px; bottom: 14px; margin: 0; font-size: 10px; color: var(--pietra); }
.mappa-indirizzo { font-size: 15px; line-height: 1.7; color: var(--bruno); margin-bottom: 26px; }

@media (max-width: 1099px) {
  .scheda-blocchi { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .scheda-blocco .etichetta { margin-top: 26px; }
  .scheda-azioni { gap: 22px 28px; }
  .griglia--interni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ritiro .riga { display: inline; }
  .modale-in { padding-top: 28px; }
}