/* ============================================================================
   RIDNI — client-area private gallery (selection + comments)
   Loaded ONLY on the per-client gallery page (after gallery.css).
   The public gallery aesthetic is preserved; this file adds the bits
   that are unique to the selection workflow:
     1. uniform thumbnail grid (better for scanning hundreds of photos)
     2. red corner mark + qty badge on selected tiles
     3. wide lightbox with print-size form panel + note textarea
     4. floating "selected" counter in the topbar
     5. instructions block + submit button block
   ============================================================================ */

/* --- 1. Topbar selection counter ------------------------------------- */
.client-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
  margin-right: 1.25rem;
  color: var(--muted);
}
.client-counter__num {
  color: var(--gold);
  font-style: italic;
  font-size: 1.1em;
  letter-spacing: 0;
  font-feature-settings: "lnum";
  min-width: 1.4em;
  text-align: right;
}
.client-counter.has-selection .client-counter__num { color: var(--paper); }

/* --- 2. Intro paragraph (above the grid) ----------------------------- */
.client-intro {
  padding: 0 var(--gutter) clamp(2rem, 4vw, 3.5rem);
}
.client-intro__copy {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-style: italic;
  color: rgba(240, 237, 232, 0.78);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.7;
}

.client-banner {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 1rem 1.5rem;
  border: 1px solid var(--gold);
  background: rgba(201, 169, 110, 0.06);
  font-family: var(--serif);
  font-style: italic;
  color: rgba(240, 237, 232, 0.9);
  text-align: center;
  font-size: 0.95rem;
}
.client-banner a { color: var(--gold); border-bottom: 1px solid currentColor; }

/* --- 3. Photo grid (Pinterest-style masonry, JS-positioned) ------------
   Layout Pinterest: ogni tile viene posizionata absolute da JS nella
   colonna al momento più CORTA. Risultato:
     - Bordo destro DRITTO (4 colonne sempre uguali per larghezza).
     - NIENTE BUCHI NERI: ogni nuova foto va a riempire lo spazio dove
       la colonna è più corta, mantenendo il fondo della grid bilanciato.
     - Approssimativamente row-major: le prime 4 foto popolano riga 1,
       una per colonna; dalla 5a in poi va dove serve riempire.
     - Proporzioni naturali: ogni cella ha l'aspect-ratio dell'immagine
       sorgente (calcolato server-side con getimagesize).
     - Il LIGHTBOX naviga sempre in ordine DOM (dataset.index), quindi
       next/prev seguono la sequenza 1,2,3,4... indipendentemente dalla
       posizione visiva nella masonry.

   Variabili:
     --col-count = numero colonne (responsive via @media).
     --cell-gap  = gap tra tile (orizzontale + verticale).
------------------------------------------------------------------------ */
.client-grid {
  --col-count: 4;
  --cell-gap: 14px;
  position: relative;       /* cuna per le tile absolute */
  padding: 0 var(--gutter);
  /* min-height settato da JS = altezza colonna più alta */
}
@media (max-width: 1280px) { .client-grid { --col-count: 3; } }
@media (max-width: 720px)  { .client-grid { --col-count: 2; --cell-gap: 8px; } }
@media (max-width: 420px)  { .client-grid { --col-count: 1; } }
.client-empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 4rem 0;
}

.client-tile {
  /* Tile posizionate absolute da JS (Pinterest masonry).
     left/top/width/height settati inline da layoutPinterestMasonry(). */
  position: absolute;
  margin: 0;
  background: #17140f;
  border: 1px solid transparent;
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
  /* Cascade reveal: opacity-only fade. Delay incrementale settato da JS. */
  opacity: 0;
  transition:
    opacity 1200ms cubic-bezier(.16,.84,.32,1) var(--reveal-delay, 0ms),
    border-color 250ms ease,
    box-shadow 250ms ease;
}
.client-tile.is-revealed {
  opacity: 1;
}
.client-tile img {
  /* Cella ha l'aspect-ratio dell'immagine sorgente (JS lo calcola
     da data-w/data-h). object-fit:cover non taglia in pratica: solo
     un pixel di rounding. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 400ms ease;
}
.client-tile:hover img,
.client-tile:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1.05);
}
.client-tile:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- 4. Selected state markers --------------------------------------- */
/*
   A small red triangle in the top-right corner + a thin red border
   when an image has any quantity > 0. The qty badge sits inside the
   triangle so the photographer's clients can see at a glance "two prints".
*/
.client-tile__mark {
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 56px 56px 0;
  border-color: transparent #b13c2e transparent transparent;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: none;
}
.client-tile__qty {
  position: absolute;
  top: 4px; right: 6px;
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1;
  font-feature-settings: "lnum";
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.client-tile.is-selected {
  border-color: rgba(177, 60, 46, 0.9);
}
.client-tile.is-selected .client-tile__mark,
.client-tile.is-selected .client-tile__qty {
  opacity: 1;
  transform: none;
}

/* --- Media badges (video / PDF abbinati allo scatto) -----------------
   Mostrato in basso a sinistra della tile. Visibili sempre (anche in
   stato non selezionato) perché segnalano contenuto extra disponibile,
   non lo stato dell'utente. Il colore gold richiama l'estetica admin. */
.client-tile__media {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: inline-flex;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}
.client-tile__media-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font: 600 10px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e0d0b;
  background: #c9a96e;
  border-radius: 1px;
}
.client-tile__media-badge--pdf {
  background: #e8e3d8;
}

/* --- Lightbox: video player + PDF link ----------------------------- */
.cl-media-actions {
  position: absolute;
  left: 50%;
  bottom: clamp(0.6rem, 1.2vh, 1rem);
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 5;
}
.cl-media-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  font: 500 0.78rem/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0e0d0b;
  background: #c9a96e;
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.cl-media-action:hover { opacity: 0.85; }
.cl-media-action--pdf { background: #e8e3d8; }
.cl-lightbox__video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #000;
  display: block;
}
/* L'attributo HTML5 [hidden] equivale a display:none ma ha
   specificità zero — qualsiasi `display: <qualcosa>` lo sovrascrive
   silenziosamente. Questa regola globale ripristina la semantica
   attesa per tutti gli elementi della pagina cliente, presente o
   futuri (in particolare .cl-lightbox__video e .cl-lightbox__media
   che hanno display:block esplicito). */
/* Language toggle EN/IT in the topbar — discreto, color gold per il
   link attivo, muted per quello inattivo. Il cookie ridni_client_lang
   ha priorità massima nel resolve server-side, quindi un click qui
   sostituisce sia il default per-galleria sia il cookie globale. */
.client-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  margin-right: 1rem;
}
.client-lang a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.2rem 0.1rem;
  transition: color 160ms ease;
  border-bottom: 1px solid transparent;
}
.client-lang a:hover { color: var(--paper); }
.client-lang a.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.client-lang__sep { color: rgba(255,255,255,0.2); }

[hidden] { display: none !important; }

/* --- 5. Instructions + submit block ---------------------------------- */
.client-instructions {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 6vw, 6rem);
  text-align: center;
}
.client-instructions__title {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  /* text-wrap: balance bilancia automaticamente le righe del titolo
     così non si rompe in modo brutto (es. una parola sola sull'ultima
     riga). Centratura visiva più armoniosa. */
  text-wrap: balance;
}
.client-instructions p {
  color: rgba(240, 237, 232, 0.78);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  line-height: 1.7;
  /* text-wrap: pretty distribuisce gli spazi più gradualmente sui
     paragrafi lunghi (mantiene il centering ma rende le linee
     "spalmate" in modo più armonioso). */
  text-wrap: pretty;
  margin-left: auto;
  margin-right: auto;
}
.client-instructions__sizes {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: center;
}
.client-instructions__sizes li {
  font-family: var(--serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--gold);
  border: 1px solid var(--hairline);
  padding: 0.45rem 0.9rem;
}
.client-instructions__custom a {
  color: var(--gold);
  border-bottom: 1px solid currentColor;
  transition: color 250ms ease;
}
.client-instructions__custom a:hover { color: var(--paper); }

.client-actions {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.client-actions__btn {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--paper);
  padding: 0.85rem 2rem;
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color 350ms ease, background 350ms ease, border-color 350ms ease;
}
.client-actions__btn:hover,
.client-actions__btn:focus-visible {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  outline: none;
}
.client-actions__hint {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ghost);
  letter-spacing: 0.05em;
}

/* ============================================================
   8. Selection review (inline, sopra il form di submit)
   ============================================================
   Anteprima live di TUTTE le foto già selezionate. Sostituisce
   l'esperienza "cieca" del flow precedente, dove il cliente
   doveva fidarsi del contatore o aprire il PDF in una tab
   nuova per vedere cosa stava per inviare.

   Layout: lista di card piccole (thumb 96px + dettagli) con
   tap-to-edit. Cliccare l'item riapre lo stesso lightbox usato
   nella griglia, già scrollato al photo + dimensioni pre-
   compilate. Il bottone "Remove" è un colpo solo (azzera le
   sizes di quella foto, refresh draft).
   ============================================================ */
.client-review {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold);
  background: rgba(201, 169, 110, 0.04);
}
.client-review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.client-review__title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.client-review__count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.client-review__count::before {
  content: "— ";
  color: var(--ghost);
}
.client-review__empty {
  font-style: italic;
  color: var(--muted);
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}
.client-review__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.client-review__item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(20, 18, 15, 0.4);
  border: 1px solid transparent;
  align-items: center;
  transition: border-color 200ms ease, background 200ms ease;
  cursor: pointer;
}
.client-review__item:hover,
.client-review__item:focus-within {
  border-color: rgba(201, 169, 110, 0.4);
  background: rgba(20, 18, 15, 0.6);
}
.client-review__thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
  background: #1a1816;
  border: 1px solid var(--rule);
}
.client-review__body {
  min-width: 0; /* per permettere il truncate del name */
}
.client-review__name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  color: var(--gold);
  margin: 0 0 0.4rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-review__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-review__sizes li {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(0,0,0,0.25);
}
.client-review__sizes li strong {
  color: var(--gold);
  font-style: italic;
  font-feature-settings: "lnum";
  font-weight: 500;
  margin-right: 0.25rem;
}
.client-review__note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--paper);
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0.4rem 0 0;
  opacity: 0.85;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.client-review__actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
}
.client-review__action {
  font-family: var(--serif);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.client-review__action:hover,
.client-review__action:focus-visible {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  outline: none;
}
.client-review__action--remove:hover,
.client-review__action--remove:focus-visible {
  background: #6b3a3a;
  border-color: #6b3a3a;
  color: var(--paper);
}

/* Mobile: stack thumb sopra ai dettagli, azioni in fondo full-width. */
@media (max-width: 640px) {
  .client-review { padding: 1rem; }
  .client-review__item {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "thumb body"
      "actions actions";
    align-items: start;
  }
  .client-review__thumb { width: 72px; height: 72px; grid-area: thumb; }
  .client-review__body { grid-area: body; }
  .client-review__actions {
    grid-area: actions;
    flex-direction: row;
    margin-top: 0.5rem;
  }
  .client-review__action { flex: 1; }
}


.client-submit {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.client-submit__hint {
  font-style: italic;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
/* Identity fields (name + email) — coppia di campi sopra il bottone
   Submit. Layout side-by-side su desktop, stacked su mobile. Niente
   gradienti o accenti gold qui: si fa parte della stessa "scheda
   submit" dei campi sotto, deve essere editorialmente quieta. */
.client-submit__identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  /* Centrato + max-width 600px: i due campi (nome + email) restano
     side-by-side su qualsiasi schermo desktop/tablet, allineati al
     centro del blocco istruzioni (che è già centrato). */
  margin: 0 auto 1.6rem;
  max-width: 600px;
  /* I campi e i loro placeholder vanno allineati a sinistra dentro la
     loro colonna, anche se il blocco contenitore è centrato. */
  text-align: left;
}
.client-submit__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.client-submit__field span {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.client-submit__field span small {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-top: 0.15rem;
}
.client-submit__field input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--paper);
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  border-radius: 1px;
  transition: border-color 160ms ease, background 160ms ease;
}
.client-submit__field input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.06);
}
@media (max-width: 480px) {
  /* Solo su schermi davvero piccoli (telefono in portrait stretto)
     i due campi si impilano. Tablet e telefoni in landscape li
     mantengono side-by-side. */
  .client-submit__identity {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
.client-submit__btn {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--paper);
  padding: 1rem 2.5rem;
  border: 1px solid var(--gold);
  background: transparent;
  cursor: pointer;
  transition: color 400ms ease, background 400ms ease, border-color 400ms ease;
}
.client-submit__btn:hover,
.client-submit__btn:focus-visible {
  color: var(--ink);
  background: var(--gold);
  outline: none;
}
.client-submit__btn[disabled] {
  opacity: 0.4;
  cursor: progress;
}
.client-submit__status {
  margin-top: 1rem;
  min-height: 1.25em;
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.client-submit__status[data-state="success"] { color: var(--gold); }
.client-submit__status[data-state="error"]   { color: #d88a7a; }

/* --- 6. Lightbox (selection-aware) ----------------------------------- */
.cl-lightbox {
  position: fixed;
  inset: 0;
  /* iOS Safari fix: 100vh include l'address bar collapsing — l'altezza
     pre-collapse del viewport è più alta di quella visibile, e il grid
     1fr centra l'immagine usando 100vh, finendo "sotto la pagina"
     (oltre il bordo inferiore visible). Usiamo 100dvh (dynamic) che
     reagisce alle barre di Safari mobile, con fallback a 100vh per
     browser senza dvh. height esplicito blocca il grid alla viewport
     visibile, garantendo che l'immagine 1fr sia sempre on-screen. */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  background: rgba(6, 5, 4, 0.96);
  display: grid;
  /* Stage flessibile in alto, panel content-sized in basso. minmax(0,1fr)
     è cruciale: senza min:0 l'item 1fr eredita un min:auto che gli impedisce
     di shrinkare quando il pannello scelte ha contenuto alto, spingendo così
     il pannello fuori dal viewport.

     CRITICO: il pannello è hidden di default (.cl-panel{display:none}) così
     in chiusura la foto occupa l'intera 100vh. All'apertura del pannello
     (classe .is-panel-open) il grid template diventa effettivamente "1fr auto"
     e la foto si adatta dinamicamente. */
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  overflow: hidden;
  /* iOS safe-area inset (notch / home indicator). Senza, su iPhone con
     home indicator la base della foto viene coperta. */
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-top:    env(safe-area-inset-top,    0);
}
.cl-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cl-lightbox__stage {
  position: relative;
  /* Grid 3 righe: nome foto (auto, riga 1) + immagine (1fr, riga 2)
     + bottone SCEGLI (auto, riga 3). Il nome non è mai più in
     sovraimpressione sull'immagine. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 0.8rem;
  padding: 4vmin 6vmin 5vmin;
  /* Permette al stage di shrinkare quando il pannello sotto è alto. */
  min-height: 0;
  overflow: hidden;
}
.cl-lightbox__media {
  max-width: 100%;
  /* max-height:100% della riga 2 (= 1fr che si adatta al viewport
     meno il filename in alto e il bottone in basso). */
  max-height: 100%;
  object-fit: contain;
  display: block;
  align-self: center;
  justify-self: center;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  /* Transizione fade in/out tra foto. Riduco a 140ms (era 260)
     così il "respiro" c'è ma non rallenta percepito. */
  transition: opacity 140ms ease;
}
.cl-lightbox__media.is-loading {
  opacity: 0.35;
}
.cl-lightbox__media.is-fading-out {
  opacity: 0;
}
.cl-lightbox__filename {
  /* Sempre nel flusso grid (riga 1 dello stage), MAI in sovraimpressione
     sull'immagine. Su desktop occupa la prima riga del .cl-lightbox__stage
     che è già grid 1fr+auto: lo metto come prima riga aggiungendo una
     terza riga implicita gestita dall'override sotto. */
  position: static;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-align: center;
  margin: 0 0 0.5rem 0;
  /* Allinea il nome al centro orizzontale, nella sua riga grid. */
  justify-self: center;
}
.cl-lightbox__close,
.cl-lightbox__nav {
  position: absolute;
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--hairline);
  background: rgba(14, 13, 11, 0.6);
  cursor: pointer;
  transition: color 300ms ease, background 300ms ease, border-color 300ms ease;
}
.cl-lightbox__close { top: 1rem; right: 1rem; }
.cl-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.cl-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.cl-lightbox__close:hover,
.cl-lightbox__nav:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Share / copy-link button: piccola icona link nell'angolo, accanto
   al filename. Solo icona, no testo, per non ingombrare. Su hover
   diventa oro come gli altri controlli del lightbox. */
.cl-lightbox__share {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: rgba(14, 13, 11, 0.6);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: color 280ms ease, border-color 280ms ease, background 280ms ease;
  z-index: 2;
}
.cl-lightbox__share:hover { color: var(--gold); border-color: var(--gold); }
.cl-lightbox__share.is-copied { color: #7e9a6f; border-color: #7e9a6f; }
.cl-lightbox__share.is-copy-failed { color: #ff9d88; border-color: #ff9d88; }

/* Toast feedback per share. Scompare automaticamente dopo 1.6s. */
.cl-lightbox__toast {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(14, 13, 11, 0.92);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 0.55rem 1rem;
  animation: cl-toast-in 220ms ease-out;
  pointer-events: none;
}
@keyframes cl-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* The selection panel sits below the image on mobile, beside it on desktop.
   Default: HIDDEN. Si rende visibile solo quando l'utente preme "SCEGLI"
   (.is-panel-open sul .cl-lightbox), così la foto a chiusura è full-screen.
   Niente più 80vh hardcoded: il grid `minmax(0,1fr) auto` adatta lo stage
   a quel che resta dopo il pannello quando aperto, e a 100vh quando chiuso. */
.cl-panel {
  display: none;
  background: rgba(20, 18, 14, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline);
  padding: 1.25rem var(--gutter);
  font-family: var(--serif);
  /* Cap morbido + scroll interno: su schermi davvero piccoli (telefono in
     landscape, finestra ridotta), se il contenuto del pannello è più alto
     della metà del viewport, il pannello scrolla internamente invece di
     spingere lo stage a 0px. Sul desktop standard non viene mai attivato
     perché il content è sotto i 50vh. */
  max-height: 60vh;
  overflow-y: auto;
}
.cl-lightbox.is-panel-open .cl-panel {
  display: block;
  animation: cl-panel-rise 280ms ease-out;
}
@keyframes cl-panel-rise {
  from { transform: translateY(20%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* Bottone SCEGLI/SELECT — riga 2 della grid stage (auto-sized).
   SEMPRE sotto l'immagine, MAI sopra. Era position:absolute bottom
   prima che metteva il bottone DENTRO al rect dell'immagine.
   align-self:start attacca il bottone al top della sua cella così
   resta vicino all'immagine sopra (separato dal gap di 1.2rem dello
   stage grid). */
.cl-select-btn {
  position: relative;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2.4rem;
  background: rgba(14, 13, 11, 0.78);
  color: var(--paper);
  border: 1px solid rgba(201, 169, 110, 0.65);
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 3;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.cl-select-btn:hover {
  background: rgba(201, 169, 110, 0.92);
  color: var(--ink);
  border-color: var(--gold);
}
.cl-select-btn.has-qty {
  border-color: var(--gold);
  color: var(--gold);
}
.cl-select-btn.has-qty:hover {
  color: var(--ink);
}
.cl-select-btn__qty {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0;
  font-weight: 500;
}
/* A pannello aperto il bottone diventa "FATTO" dorato pieno
   (visivamente conferma "selezione attiva"). Resta nella sua
   riga di grid, niente repositioning. */
.cl-lightbox.is-panel-open .cl-select-btn {
  background: rgba(201, 169, 110, 0.92);
  color: var(--ink);
  border-color: var(--gold);
}
.cl-lightbox.is-panel-open .cl-select-btn .cl-select-btn__qty {
  background: var(--ink);
  color: var(--gold);
}
.cl-panel__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.cl-panel__title {
  margin: 0 0 .25rem;
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cl-sizes {
  display: grid;
  gap: 0.6rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cl-size {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  padding: 0.5rem 0;
}
.cl-size__label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--paper);
}
.cl-size__qty-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
}
.cl-size__step {
  width: 2.2rem;
  height: 2.2rem;
  background: transparent;
  color: var(--paper);
  border: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.cl-size__step:hover { background: var(--gold); color: var(--ink); }
.cl-size__qty {
  width: 3rem;
  height: 2.2rem;
  background: transparent;
  color: var(--paper);
  border: 0;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  font-family: var(--serif);
  font-size: 1rem;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cl-size__qty::-webkit-outer-spin-button,
.cl-size__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cl-custom {
  font-style: italic;
  color: var(--muted);
  font-size: 0.92rem;
}
.cl-custom a {
  color: var(--gold);
  border-bottom: 1px solid currentColor;
}

.cl-note__label {
  display: block;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.cl-note__textarea {
  width: 100%;
  min-height: 60px;
  background: transparent;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1rem;
  border: 1px solid var(--hairline);
  padding: 0.6rem 0.8rem;
  resize: vertical;
  outline: none;
  transition: border-color 250ms ease;
}
.cl-note__textarea:focus { border-color: var(--gold); }

/* "Per chi è?" — text input gemello del textarea note, ma single-line.
   Etichetta uppercase con piccolo hint italic in muted (non
   confonde con instructions ma rende chiaro che è facoltativo).
   Quando 2 famiglie lavorano sulla stessa galleria, ognuna scrive
   il proprio nome qui foto-per-foto: il backend raggruppa l'email
   finale per nome così l'ordine è subito chiaro. */
.cl-for-whom {
  display: block;
  margin-top: 1rem;
}
.cl-for-whom__label {
  display: block;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.cl-for-whom__label small {
  display: block;
  text-transform: none;
  font-style: italic;
  letter-spacing: 0;
  font-size: 0.78rem;
  margin-top: 0.15rem;
  color: rgba(170, 163, 160, 0.85);
}
.cl-for-whom__input {
  width: 100%;
  background: transparent;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1rem;
  border: 1px solid var(--hairline);
  padding: 0.6rem 0.8rem;
  outline: none;
  transition: border-color 250ms ease;
}
.cl-for-whom__input:focus { border-color: var(--gold); }
.cl-lightbox.is-locked .cl-for-whom__input {
  pointer-events: none;
  opacity: 0.55;
}

/* ============== Family identity modal + chip ====================
   Quando 2+ famiglie condividono la stessa password, ognuna deve
   identificarsi all'apertura per isolare la propria draft. Modal
   minimal Cormorant scuro, focus subito sul name input. */
.cl-fam-modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 4, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 200;
  padding: 1.5rem;
  animation: cl-fam-fade 320ms ease-out;
}
@keyframes cl-fam-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cl-fam-modal__card {
  background: #14120e;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  max-width: 560px;
  width: 100%;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  font-family: var(--serif);
  color: var(--paper);
}
.cl-fam-modal__title {
  margin: 0 0 0.8rem;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  color: var(--gold);
}
.cl-fam-modal__intro {
  margin: 0 0 1.2rem;
  color: rgba(240, 237, 232, 0.78);
  font-size: 1.05rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.cl-fam-modal__hint {
  margin: 0 0 1.4rem;
  color: rgba(201, 169, 110, 0.82);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.cl-fam-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}
.cl-fam-modal__input {
  width: 100%;
  background: transparent;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.1rem;
  border: 1px solid var(--hairline);
  padding: 0.85rem 1rem;
  outline: none;
  text-align: center;
  transition: border-color 250ms ease;
}
.cl-fam-modal__input:focus { border-color: var(--gold); }
.cl-fam-modal__submit {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.85rem 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.cl-fam-modal__submit:hover {
  background: var(--gold);
  color: var(--ink);
}
.cl-fam-modal__submit:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Chip in basso a sinistra mostra la famiglia attiva + permette di
   cambiare. Discreto, fixed, sopra le tile. */
.cl-fam-chip {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: rgba(20, 18, 14, 0.92);
  border: 1px solid var(--hairline);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 250ms ease;
}
.cl-fam-chip:hover { border-color: var(--gold); }
.cl-fam-chip__label {
  font-style: italic;
  color: rgba(240, 237, 232, 0.92);
}
.cl-fam-chip__action {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.cl-status {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-align: right;
  min-height: 1.2em;
}
.cl-status[data-state="saving"]  { color: var(--muted); }
.cl-status[data-state="saved"]   { color: var(--gold); }
.cl-status[data-state="error"]   { color: #d88a7a; }

/* When the gallery is locked (submitted) the lightbox switches to read-only. */
.cl-lightbox.is-locked .cl-size__step,
.cl-lightbox.is-locked .cl-size__qty,
.cl-lightbox.is-locked .cl-note__textarea {
  pointer-events: none;
  opacity: 0.45;
}

/* --- 7. Responsive --------------------------------------------------- */
@media (max-width: 720px) {
  .client-grid { --tile: 140px; gap: 8px; }
  .client-tile__mark { border-width: 0 38px 38px 0; }
  .client-tile__qty  { font-size: 0.8rem; top: 2px; right: 4px; }
  /* Niente più max-height fisso sull'immagine: il grid auto-fitta lo stage
     allo spazio rimasto dopo il pannello (ora content-sized + scrollable). */
  .cl-lightbox__close { top: .6rem; right: .6rem; padding: .45rem .8rem; }
  .cl-lightbox__nav { padding: .45rem .7rem; font-size: 0.7rem; }
}

/* ===========================================================================
   PORTRAIT MOBILE: layout verticale ordinato dal vivo.
   ===========================================================================
   Riga 1: nome foto (auto)
   Riga 2: immagine (1fr, prende tutto lo spazio rimanente)
   Riga 3: strip di nav prev/next + close (auto)
   Riga 4: bottone SCEGLI o pannello (gestito dal container .cl-lightbox)

   Tolgo posizioni absolute così tutto sta nel flow naturale, niente
   sovrapposizioni. Il nome SOPRA, l'immagine al centro, i bottoni
   SOTTO. Le frecce sono SVG inline col bordino dorato, molto più
   compatte delle scritte "PREV/NEXT" piene su mobile.            */
@media (max-width: 720px) and (orientation: portrait) {
  /* Rimuovo overflow:hidden globale dal stage per evitare clipping
     in alcuni casi limite con i bottoni inferiori. */
  .cl-lightbox__stage {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "filename"
      "image"
      "nav";
    padding: clamp(0.5rem, 2vmin, 1rem);
    gap: 0.7rem;
  }
  /* Nome foto: in alto, NON più position:absolute. */
  .cl-lightbox__filename {
    position: static;
    grid-area: filename;
    transform: none;
    padding-top: env(safe-area-inset-top, 0);
    margin: 0;
    font-size: 0.78rem;
    text-align: center;
  }
  /* Immagine: occupa la riga centrale. align-self:center la centra
     verticalmente nella cella, e max-height:100% impedisce di
     fuoriuscire. */
  .cl-lightbox__media {
    grid-area: image;
    align-self: center;
    justify-self: center;
    max-width: 100%;
    max-height: 100%;
  }
  /* Close: in alto a destra, FUORI dal flusso grid (sopra il filename). */
  .cl-lightbox__close {
    position: absolute;
    top: calc(0.5rem + env(safe-area-inset-top, 0));
    right: 0.6rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.7rem;
    z-index: 110;
  }
  /* Riga di nav: contiene prev + next, tra l'immagine e il pannello
     SCEGLI (o sopra il bottone SCEGLI). */
  .cl-lightbox__nav {
    position: static;
    grid-area: nav;
    transform: none;
    top: auto; bottom: auto;
    /* Stile freccia: minimal, bordino dorato, molto compatta. */
    width: 3rem;
    height: 2.2rem;
    padding: 0;
    font-size: 0;            /* nasconde il testo "Prev/Next" */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 13, 11, 0.7);
    border: 1px solid var(--gold);
  }
  /* SVG freccia generata via CSS background — niente da cambiare nel
     JS template. Coordinato col color dorato del bordo. */
  .cl-lightbox__nav::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a96e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .cl-lightbox__nav--next::before {
    /* Specchio della freccia per "Next". */
    transform: scaleX(-1);
  }
  /* Le 2 frecce stanno una a sinistra e una a destra nella stessa
     riga grid. Per allinearle in modo ordinato uso 2 sub-grid colonne
     applicate alla riga "nav": ottenuto con gap + justify-content. */
  .cl-lightbox__nav--prev { justify-self: start; }
  .cl-lightbox__nav--next { justify-self: end; }
  /* Quando il pannello SCEGLI è aperto, i due nav sono ridondanti
     (utente sta scegliendo) — li nascondiamo per dare massimo spazio
     ai size buttons. */
  .cl-lightbox.is-panel-open .cl-lightbox__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .client-tile, .client-tile img, .client-tile__mark,
  .client-tile__qty, .cl-lightbox { transition: none !important; }
  /* In reduced-motion mostriamo subito i tile senza fade staggered. */
  .client-tile { opacity: 1 !important; }
}

/* --- 8. Read-only public CTA (/portfolio/<slug>/) ----------------------
   Sezione invito-al-contatto mostrata SOLO sulla vista pubblica
   read-only. Aesthetic coerente con il resto della galleria:
   typography Cormorant + accent gold + spaziatura ampia. */
.ro-cta {
  text-align: center;
  padding: 3.5rem var(--gutter, 1.5rem) 4rem;
  max-width: 720px;
  margin: 0 auto;
}
.ro-cta__kicker {
  display: block;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted, rgba(240, 237, 232, 0.55));
  font-size: 0.78rem;
  margin-bottom: 1rem;
}
.ro-cta__title {
  margin: 0;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.8rem);
  line-height: 1.1;
  color: var(--paper, #f0ede8);
}
.ro-cta__rule {
  width: 40px;
  margin: 1.5rem auto;
  border: none;
  border-top: 1px solid var(--gold, #c9a96e);
}
.ro-cta__copy {
  color: var(--muted, rgba(240, 237, 232, 0.7));
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 2rem;
}
.ro-cta__btn {
  display: inline-block;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--paper, #f0ede8);
  padding: 1rem 2.5rem;
  border: 1px solid var(--hairline, rgba(240, 237, 232, 0.2));
  text-decoration: none;
  background: transparent;
  transition: color 400ms ease, background 400ms ease, border-color 400ms ease;
}
.ro-cta__btn:hover,
.ro-cta__btn:focus-visible {
  color: var(--ink, #0e0d0b);
  background: var(--gold, #c9a96e);
  border-color: var(--gold, #c9a96e);
  outline: none;
}
@media (max-width: 720px) {
  .ro-cta { padding: 2.5rem var(--gutter, 1rem) 3rem; }
  .ro-cta__copy { font-size: 1rem; }
}