/* ==========================================================================
   Segretly — scheda pubblica di una struttura (/prenota/<slug>)
   La scheda e' contenuto stampato dal server; il pannello di prenotazione e'
   l'unica parte disegnata dal JavaScript. I token sono quelli di home.css.
   ========================================================================== */

.structure__head {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 32px 0 28px;
}

/**
 * Titolo a sinistra, marchio a destra, **centrati fra loro**.
 *
 * `align-items: center` e non `flex-start`: e' il "vertical align middle" che
 * fa sembrare il logo parte dell'intestazione invece di una cosa appoggiata
 * sopra — con un nome lungo tre righe la differenza si vede subito.
 */
.structure__headRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.structure__headMain {
  flex: 1 1 320px;
  min-width: 0;
}

/**
 * La cornice del marchio.
 *
 * Il contorno e' il marrone del sito a bassa intensita' e non la riga grigia
 * delle card: qui serve a dire che quel logo e' **dentro** Segretly, non a
 * separare due blocchi. Il fondo bianco e' obbligatorio e non estetica — i
 * marchi arrivano quasi sempre in PNG con lo sfondo trasparente e pensati per
 * il bianco, e su una pagina color sabbia un logo scuro con i contorni chiari
 * sparirebbe a meta'.
 */
.structure__logo {
  align-items: center;
  background: var(--white);
  border: 1px solid rgba(129, 103, 41, 0.3);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(32, 32, 32, 0.06);
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 16px 20px;
}

/* Il logo si adatta: `contain` e non `cover`, o un marchio largo verrebbe
   tagliato ai lati — che su un marchio e' l'unico ritaglio che non si puo'
   fare. */
.structure__logoImage {
  display: block;
  height: auto;
  max-height: 96px;
  max-width: min(240px, 60vw);
  object-fit: contain;
  width: auto;
}

@media (max-width: 720px) {
  /* Il marchio passa sopra il nome: e' l'ordine in cui si guarda una scheda su
     un telefono, e affiancato a un titolo grande resterebbe un francobollo. */
  .structure__headRow {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

.structure__badge {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  padding: 4px 10px;
}

.structure__badge--appointments {
  background: rgba(129, 103, 41, 0.12);
  color: var(--laiton-strong);
}

.structure__badge--food {
  background: rgba(255, 104, 44, 0.14);
  color: #a83a0d;
}

.structure__title {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.structure__headline {
  color: var(--gray-700);
  font-size: 18px;
  margin: 0 0 10px;
  max-width: 60ch;
}

.structure__rating {
  margin: 0 0 18px;
}

.structure__reviews {
  color: var(--gray-400);
  font-size: 14px;
}

.structure-section {
  padding: 32px 0;
}

.structure-section__title {
  font-size: 22px;
  margin: 0 0 16px;
}

/* La sede sta su due colonne e ha le sue regole piu' sotto; i professionisti
   restano una griglia di card. */
.structure-locations,
.structure-pros {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Una sede occupa la riga intera: dentro ci sono gia' due colonne, e
   affiancarne due vorrebbe dire quattro colonne su uno schermo da portatile. */
.structure-locations {
  grid-template-columns: minmax(0, 1fr);
}

.structure-pro {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.structure-location__name,
.structure-pro__name {
  font-size: 17px;
  margin: 0 0 6px;
}

.structure-location__address,
.structure-pro__role,
.structure-pro__bio {
  color: var(--gray-700);
  font-size: 15px;
  margin: 0 0 10px;
}

/**
 * La presentazione, che adesso e' **testo formattato**.
 *
 * Le regole stanno qui e non in `prose.css` perche' quella e' la tipografia dei
 * testi lunghi del sito (documentazione, legali) e nasce da noi; questo lo
 * scrive un cliente, e i tag che puo' usare sono la manciata che
 * `sanitizeRichText` lascia passare — piu' di cosi' non arriva, qualunque cosa
 * incolli.
 */
/* Tutta la larghezza: il testo lo scrive il cliente e puo' essere lungo, e
   una colonna stretta in mezzo a una pagina larga lascia mezzo schermo bianco
   accanto a una cosa che si legge comunque. */
.structure-about {
  color: var(--gray-900);
}

.structure-about p {
  margin: 0 0 12px;
}

.structure-about h3,
.structure-about h4 {
  font-size: 18px;
  margin: 20px 0 8px;
}

.structure-about ul,
.structure-about ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.structure-about li {
  margin-bottom: 4px;
}

.structure-about blockquote {
  border-left: 3px solid var(--laiton);
  color: var(--gray-700);
  margin: 0 0 12px;
  padding-left: 14px;
}

/* Lo stile dei link del sito: mai un link nudo. */
.structure-about a {
  color: var(--laiton);
  font-weight: 700;
  text-decoration: none;
}

.structure-about a:hover {
  text-decoration: underline;
}

/* L'ultimo blocco non lascia aria in fondo alla sezione. */
.structure-about > :last-child {
  margin-bottom: 0;
}

/* ---- Dove siamo --------------------------------------------------------- */

/**
 * La card si taglia a meta': a sinistra dove si e' (nome, indirizzo, cartina),
 * a destra quando si e' aperti. Sono le due domande che porta chi apre questa
 * pagina, e una sotto l'altra vorrebbe dire scorrere per sapere se conviene
 * andarci.
 *
 * La galleria prende tutta la riga sotto le due colonne: e' della sede, non di
 * una delle due meta'.
 */
.structure-location {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 18px;
}

.structure-location__where,
.structure-location__when {
  min-width: 0;
}

.structure-location__subtitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.structure-location__map {
  aspect-ratio: 3 / 2;
  background: var(--gray-200);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 12px;
  overflow: hidden;
  width: 100%;
}

.structure-location__directions {
  display: inline-block;
  font-weight: 700;
  margin-top: 10px;
}

.structure-location__noHours {
  color: var(--gray-400);
  font-size: 14px;
  margin: 0;
}

/* Il punto della sede: pieno e con il bordo chiaro, come quelli della ricerca
   ma piu' grande — qui ce n'e' uno solo e non deve farsi cercare. */
.structure-pin {
  background: var(--laiton);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(32, 32, 32, 0.4);
  height: 22px;
  width: 22px;
}

/* ---- Tabella degli orari ------------------------------------------------ */

/* Larga quanto le serve e non quanto la colonna: stirata su mezza card, il
   giorno resta a sinistra e l'orario si incolla al bordo opposto, con
   quattrocento pixel di niente in mezzo che l'occhio deve attraversare per
   ogni riga. */
.structure-hours {
  border-collapse: collapse;
  font-size: 14px;
  max-width: 340px;
  width: 100%;
}

.structure-hours__row + .structure-hours__row {
  border-top: 1px solid var(--line);
}

.structure-hours__day {
  color: var(--gray-900);
  font-weight: 600;
  padding: 7px 12px 7px 0;
  text-align: left;
  white-space: nowrap;
}

.structure-hours__meal {
  color: var(--gray-700);
  padding: 7px 12px 7px 0;
  white-space: nowrap;
}

.structure-hours__slots {
  padding: 7px 0;
  text-align: right;
}

/* Le fasce di uno stesso giorno vanno a capo insieme invece di spezzarsi in
   mezzo a un orario: "09:00–13:00" e' una cosa sola, non due. */
.structure-hours__slot {
  display: inline-block;
  margin-left: 8px;
  white-space: nowrap;
}

/* Il giorno chiuso resta in tabella e si dichiara: una riga che manca non dice
   se quel giorno e' chiuso o se nessuno l'ha compilato. */
.structure-hours__row.is-closed .structure-hours__day,
.structure-hours__row.is-closed .structure-hours__slots {
  color: var(--gray-400);
  font-weight: 400;
}

.structure-pro__head {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.structure-pro__photo {
  border-radius: 50%;
  height: 56px;
  object-fit: cover;
  width: 56px;
}

.structure-services {
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
}

/* Solo il nome della prestazione: durata e prezzo li dice la segretaria
   quando si prenota, dove sono quelli della persona scelta. */
.structure-services__row {
  padding: 4px 0;
}

/* ---- Il fumetto della prenotazione -------------------------------------- */

/**
 * **Attaccato al suo pulsante, non in un angolo.**
 *
 * Prenotare da questa struttura e chiedere assistenza a Segretly sono due cose
 * diverse: messe nello stesso angolo, con lo stesso cerchio verde, si leggono
 * come una sola — e chi voleva un appuntamento finisce a scrivere a noi. Qui la
 * bolla esce da sotto il pulsante che l'ha aperta, e l'angolo in basso resta
 * dell'assistenza, dov'e' su tutte le altre pagine.
 */
.structure__cta {
  display: inline-block;
  margin-top: 8px;
  position: relative;
}

.wa-book__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(32, 32, 32, 0.18);
  left: 0;
  padding: 20px;
  position: absolute;
  top: calc(100% + 12px);
  width: min(340px, calc(100vw - 40px));
  /* Sopra l'intestazione del sito, che e' fissa a 9000: senza, la bolla
     scorrendo finisce sotto la barra e si taglia a meta'. */
  z-index: 9400;
}

.wa-book__panel[hidden] {
  display: none;
}

/* La punta che la lega al pulsante: senza, e' un riquadro che galleggia li'
   sotto e potrebbe venire da qualunque cosa. Due triangoli sovrapposti, uno
   del colore del bordo e uno del fondo, perche' un bordo vero su una forma
   fatta con i bordi non si puo' mettere. */
.wa-book__panel::before,
.wa-book__panel::after {
  border: 9px solid transparent;
  content: '';
  left: 26px;
  position: absolute;
}

/* Piu' scuro del bordo del riquadro e non `--line` come lui: quello vive
   contro l'ombra della card e si vede, mentre la punta sta sopra il bianco
   dell'intestazione, dove il dodici per cento sparisce del tutto. */
.wa-book__panel::before {
  border-bottom-color: rgba(32, 32, 32, 0.22);
  top: -18px;
}

.wa-book__panel::after {
  border-bottom-color: var(--white);
  top: -17px;
}

.wa-book__head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wa-book__title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.wa-book__close {
  background: var(--gray-100);
  border: 0;
  border-radius: 50%;
  color: var(--gray-700);
  cursor: pointer;
  display: grid;
  height: 28px;
  padding: 0;
  place-items: center;
  width: 28px;
}

.wa-book__close svg {
  fill: currentColor;
  width: 16px;
}

.wa-book__intro {
  color: var(--gray-700);
  font-size: 14px;
  margin: 0 0 14px;
}

.wa-book__form {
  display: grid;
  gap: 12px;
}

.wa-book__field {
  display: block;
}

.wa-book__label {
  color: var(--gray-700);
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.wa-book__field input {
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  padding: 11px 12px;
  width: 100%;
}

.wa-book__field input:focus-visible {
  border-color: var(--laiton);
  outline: 2px solid rgba(129, 103, 41, 0.25);
  outline-offset: 1px;
}

/* Il codice si legge una cifra alla volta: spaziato e centrato si ricopia dal
   telefono senza perdere il segno. */
.wa-book__code {
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
}

.wa-book__consent {
  align-items: flex-start;
  color: var(--gray-700);
  display: flex;
  font-size: 12px;
  gap: 8px;
  line-height: 1.4;
}

.wa-book__consent input {
  margin-top: 2px;
}

.wa-book__submit {
  justify-content: center;
  width: 100%;
}

.wa-book__note {
  color: var(--gray-400);
  font-size: 12px;
  margin: 10px 0 0;
}

.wa-book__link {
  background: none;
  border: 0;
  color: var(--laiton);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
  padding: 0;
  text-decoration: underline;
}

.wa-book__feedback {
  font-size: 13px;
  margin: 10px 0 0;
}

.wa-book__feedback.is-error {
  background: #fff4f0;
  border: 1px solid rgba(255, 104, 44, 0.4);
  border-radius: 10px;
  color: #8a2c00;
  padding: 8px 10px;
}

.wa-book__feedback:empty {
  display: none;
}

@media (max-width: 560px) {
  /* Su un telefono la bolla prende la larghezza della pagina e parte dal bordo:
     ancorata al pulsante uscirebbe dallo schermo a destra. */
  .structure__cta {
    display: block;
  }

  .wa-book__panel {
    width: 100%;
  }
}

/* ---- Gallery ------------------------------------------------------------ */

/* Sotto gli orari, nella colonna di destra: la tabella e' corta e la cartina a
   sinistra e' alta, quindi li' sotto c'era mezzo riquadro vuoto — e le
   miniature ci stanno senza allungare la card di una riga. */
.structure-location__gallery {
  margin-top: 20px;
}

.structure-gallery {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}

/* La miniatura e' un pulsante: apre una finestra, quindi si deve raggiungere
   col tab e premere con invio. Il reset del sito gli toglie gia' bordo e
   sfondo. */
.structure-gallery__item {
  aspect-ratio: 1;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: transform 160ms var(--ease-out);
}

.structure-gallery__item:hover,
.structure-gallery__item:focus-visible {
  transform: scale(1.03);
}

.structure-gallery__thumb {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* ---- Galleria a schermo intero ------------------------------------------ */

.lightbox[hidden] {
  display: none;
}

/**
 * **Sopra tutto**, intestazione del sito compresa.
 *
 * La scala di `home.css` e' gia' scritta e va letta prima di inventare un
 * numero: 9000 l'intestazione (che e' fissa), 8000 il menu a schermo stretto,
 * 7000 il banner dei cookie, 6500 il torna su, 6400 il fumetto. Una foto a
 * schermo intero con un numero piccolo ci finisce **sotto**, e l'intestazione
 * resta a galleggiare in mezzo.
 */
.lightbox {
  inset: 0;
  position: fixed;
  z-index: 9500;
}

.lightbox__backdrop {
  background: rgba(20, 20, 20, 0.92);
  inset: 0;
  position: absolute;
}

.lightbox__panel {
  align-items: center;
  display: flex;
  gap: 8px;
  inset: 0;
  padding: 16px;
  position: absolute;
}

.lightbox__viewport {
  flex: 1;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  /* Il dito serve a sfogliare, non a scorrere la pagina sotto: senza questa
     riga il browser si prende il gesto orizzontale e il trascinamento non
     arriva mai. */
  touch-action: pan-y;
}

/* Il nastro: largo quanto le diapositive e traslato di uno schermo per volta.
   `translate3d` e non `left`, cosi' lo scorrimento lo disegna la scheda video
   invece di ricalcolare il layout a ogni fotogramma. */
.lightbox__track {
  display: flex;
  height: 100%;
  transition: transform 320ms var(--ease-out);
  will-change: transform;
}

.lightbox__slide {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 0;
  padding: 0 8px;
}

.lightbox__image {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  /* Trascinando, il browser proverebbe a "prendere" l'immagine come si fa per
     spostarla altrove, e il gesto si fermerebbe li'. */
  user-select: none;
}

.lightbox__close,
.lightbox__nav {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: var(--white);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  transition: background 160ms var(--ease-out);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__nav {
  font-size: 30px;
  height: 48px;
  line-height: 1;
  padding-bottom: 4px;
  width: 48px;
}

.lightbox__nav[hidden] {
  display: none;
}

.lightbox__close {
  font-size: 26px;
  height: 40px;
  line-height: 1;
  padding-bottom: 3px;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 40px;
  z-index: 1;
}

.lightbox__counter {
  bottom: 20px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

@media (max-width: 560px) {
  /* Le frecce escono di scena: sullo schermo stretto rubano larghezza alla
     foto, e li' si sfoglia con il dito. */
  .lightbox__nav {
    display: none;
  }
}

/* ==========================================================================
   Schermi stretti

   **Sta in fondo al foglio, e non e' pignoleria.** Queste regole scavalcano
   quelle qui sopra a parita' di specificita', e a parita' vince l'ultima
   scritta: messe in cima non fanno niente, e a schermo stretto la cartina e la
   tabella degli orari restano affiancate — cosa che si scopre solo aprendo la
   pagina da un telefono. E' gia' successo una volta.

   Il breakpoint e' **uno solo** per tutta la pagina: due riquadri vicini che
   cambiano forma a larghezze diverse si leggono come un guasto.
   ========================================================================== */
@media (max-width: 720px) {
  /* Le due meta' della sede si impilano e prendono tutta la larghezza: la
     cartina e la tabella degli orari affiancate su un telefono sono due cose
     illeggibili al posto di una leggibile. */
  .structure-location {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Gli orari smettono di stare stretti: senza la colonna accanto, la tabella
     puo' prendersi tutta la riga. */
  .structure-hours {
    max-width: none;
  }

  /* Anche le schede dei professionisti: a 280px di minimo ne entrano due
     strette dove ne sta bene una. */
  .structure-pros {
    grid-template-columns: minmax(0, 1fr);
  }
}