/* =====================================================================
   Alkecè · componente foto
   Carosello (varianti scheda, card, galleria, blocco), galleria a
   linguette, ingrandimento (lightbox). CSS e JS puri, nessuna libreria.
   Markup: vedi il contratto del componente (_note). JS: alkece-foto.js.

   Scelte dichiarate
   - Una foto per volta, scroll-snap orizzontale nativo: lo swipe col dito
     e' quello del browser e lo scroll verticale della pagina resta libero.
   - Nessun giro circolare: agli estremi la freccia si attenua.
   - Foto intera (object-fit: contain) su fondo scuro in scheda, galleria
     e blocco; nella card copertura 3:2 centrata, ma le verticali
     (data-orient="v") restano intere anche li'.
   - Didascalia e contatore stanno in una fascia SOTTO la foto, mai sopra.
     Sotto i 600 px di larghezza del carosello anche le frecce scendono
     nella fascia, per non coprire la foto.
   - Altezze legate alla larghezza del carosello (container query), non
     solo alla finestra: lo stesso carosello funziona in una colonna
     stretta e a tutta pagina.

   Per chi monta le pagine
   - Il carosello prende la larghezza del suo contenitore: metterlo in un
     blocco, in una cella di griglia o in un elemento flex con larghezza
     propria (non dentro inline-block / width:fit-content, dove varrebbe 0).
   - Non metterlo dentro .room-gallery o .pd-mosaic del modello vecchio:
     sono griglie a 2 colonne con altezze e filtri propri.
   - Nelle foto verticali scrivere nello srcset le larghezze vere
     (es. 600w / 1333w), non 900w / 2000w.
   - Contratto completo del markup: _note (orchestratore); esempio vivo:
     _strumenti/prove/carosello.html.
   ===================================================================== */

/* Ancore sotto la barra fissa */
[id] { scroll-margin-top: 92px; }

/* ---------------------------------------------------------------------
   Carosello
   --------------------------------------------------------------------- */
.alk-car {
  --alk-bg: var(--night-2, #050A11);
  --alk-line: var(--line, rgba(234, 227, 210, 0.12));
  --alk-line-2: var(--line-2, rgba(234, 227, 210, 0.22));
  --alk-brass: var(--brass, #B8935A);
  --alk-brass-soft: var(--brass-soft, #D8B576);
  --alk-cream: var(--cream, #EAE3D2);
  --alk-cream-2: var(--cream-2, #D8CFB9);
  --alk-night: var(--night, #0E1620);
  --alk-display: var(--font-display, 'Playfair Display', 'Times New Roman', serif);
  --alk-sans: var(--font-sans, 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif);
  --alk-bar: 44px;
  /* altezza della foto (variante scheda) */
  --alk-h: clamp(260px, min(58vw, 62cqi, 74vh), 640px);
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  container-type: inline-size;
  background: var(--alk-bg);
  border: 1px solid var(--alk-line);
  color: var(--alk-cream);
  font-family: var(--alk-sans);
  -webkit-tap-highlight-color: transparent;
}
.alk-car--galleria { --alk-h: clamp(240px, min(50vw, 56cqi, 66vh), 560px); }
.alk-car--blocco   { --alk-h: clamp(200px, min(66cqi, 60vh), 460px); }

.alk-car-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0;
  padding: 0;
  outline: none;
}
.alk-car-track::-webkit-scrollbar { display: none; }
.alk-car-track:focus-visible { outline: 2px solid var(--alk-brass); outline-offset: -2px; }

.alk-car-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.alk-car-slide img {
  display: block;
  width: 100%;
  max-width: none;
  height: var(--alk-h);
  object-fit: contain;
  object-position: center;
  background: transparent;
  -webkit-user-drag: none;
  user-select: none;
}
.alk-car--zoom .alk-car-slide img { cursor: zoom-in; }

/* Fascia sotto la foto: didascalia a sinistra, contatore a destra */
.alk-car-cap {
  margin: 0;
  min-height: var(--alk-bar);
  padding: 13px 16px 12px;
  border-top: 1px solid var(--alk-line);
  font-family: var(--alk-sans);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--alk-cream-2);
  text-align: left;
  overflow-wrap: anywhere;
}
/* riserva il posto del contatore solo sulla prima riga */
.alk-car-cap::before { content: ""; float: right; width: 84px; height: 18px; }
/* slide senza didascalia: la fascia resta, vuota, per il contatore */
.alk-car-slide:not(:has(> .alk-car-cap))::after {
  content: "";
  display: block;
  min-height: var(--alk-bar);
  border-top: 1px solid var(--alk-line);
}
.alk-car.is-single .alk-car-slide:not(:has(> .alk-car-cap))::after { display: none; }

/* Frecce (nascoste finche' il JS non e' partito, e con una sola foto) */
.alk-car-btn {
  position: absolute;
  z-index: 2;
  top: calc(var(--alk-h) / 2);
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0 0 3px;
  border: 1px solid rgba(216, 181, 118, 0.55);
  border-radius: 0;
  background: rgba(5, 10, 17, 0.58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--alk-cream);
  font-family: var(--alk-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.alk-car.is-ready:not(.is-single) > .alk-car-btn { display: flex; }
.alk-car-prev { left: 14px; }
.alk-car-next { right: 14px; }
.alk-car-btn:focus-visible { outline: 2px solid var(--alk-brass-soft); outline-offset: 2px; }
.alk-car-btn[aria-disabled="true"] { opacity: 0.28; cursor: default; }
@media (hover: hover) {
  .alk-car-btn:not([aria-disabled="true"]):hover {
    background: var(--alk-brass);
    border-color: var(--alk-brass);
    color: var(--alk-night);
  }
}

/* Contatore «3 / 12» */
.alk-car-count {
  position: absolute;
  z-index: 2;
  right: 0;
  top: var(--alk-h);
  height: var(--alk-bar);
  min-width: 84px;
  padding: 0 16px;
  /* block, non flex: in un contenitore flex gli spazi di « / » sparirebbero */
  display: none;
  text-align: right;
  font-family: var(--alk-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  line-height: var(--alk-bar);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--alk-brass-soft);
  pointer-events: none;
}
.alk-car.is-ready:not(.is-single) > .alk-car-count { display: block; }

/* Carosello stretto (telefono, colonne strette): foto 4:3 e frecce nella fascia */
@container (max-width: 600px) {
  .alk-car:not(.alk-car--card) > .alk-car-track,
  .alk-car:not(.alk-car--card) > .alk-car-btn,
  .alk-car:not(.alk-car--card) > .alk-car-count { --alk-h: 75cqi; }

  .alk-car:not(.alk-car--card) > .alk-car-btn {
    top: calc(var(--alk-h) + var(--alk-bar) / 2);
    width: 34px;
    height: 34px;
    padding-bottom: 2px;
    font-size: 24px;
    background: transparent;
    border-color: var(--alk-line-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--alk-brass-soft);
  }
  .alk-car:not(.alk-car--card) > .alk-car-prev { left: auto; right: 100px; }
  .alk-car:not(.alk-car--card) > .alk-car-next { right: 8px; }
  .alk-car:not(.alk-car--card) > .alk-car-count {
    right: 42px;
    min-width: 58px;
    padding: 0;
    text-align: center;
  }
  .alk-car:not(.alk-car--card) .alk-car-cap { padding-left: 14px; }
  .alk-car:not(.alk-car--card) .alk-car-cap::before { width: 138px; }
}

/* Browser senza container query: altezze sulla finestra */
@supports not (width: 1cqi) {
  .alk-car { --alk-h: clamp(260px, 58vw, 640px); }
  .alk-car--galleria { --alk-h: clamp(240px, 50vw, 560px); }
  .alk-car--blocco { --alk-h: clamp(200px, 40vw, 460px); }
  @media (max-width: 600px) {
    .alk-car, .alk-car--galleria, .alk-car--blocco { --alk-h: 70vw; }
  }
}

/* --- Variante card: dentro le card di home e camere --- */
.alk-car--card {
  --alk-bar: 0px;
  border: 0;
  background: var(--night-3, #1A2332);
}
.alk-car--card .alk-car-link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline-offset: -2px;
}
.alk-car--card .alk-car-slide img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}
.alk-car--card .alk-car-slide[data-orient="v"] img {
  object-fit: contain;
  background: var(--alk-bg);
}
.alk-car--card .alk-car-slide::after { display: none !important; }
.alk-car--card .alk-car-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 0;
  padding: 26px 12px 9px;
  border: 0;
  font-size: 11px;
  line-height: 15px;
  color: var(--alk-cream);
  background: linear-gradient(180deg, rgba(5, 10, 17, 0) 0%, rgba(5, 10, 17, 0.78) 100%);
  pointer-events: none;
}
.alk-car--card .alk-car-cap::before { display: none; }
.alk-car--card > .alk-car-btn {
  top: 50%;
  width: 34px;
  height: 34px;
  padding-bottom: 2px;
  font-size: 22px;
  border-color: rgba(234, 227, 210, 0.35);
  background: rgba(5, 10, 17, 0.55);
}
.alk-car--card > .alk-car-prev { left: 8px; }
.alk-car--card > .alk-car-next { right: 8px; }
.alk-car--card > .alk-car-count {
  top: 8px;
  right: 8px;
  height: auto;
  min-width: 0;
  padding: 5px 9px 6px;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  color: var(--alk-cream);
  background: rgba(5, 10, 17, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (hover: hover) and (pointer: fine) {
  .alk-car--card > .alk-car-btn { opacity: 0; }
  .alk-car--card:hover > .alk-car-btn,
  .alk-car--card:focus-within > .alk-car-btn { opacity: 1; }
  .alk-car--card:hover > .alk-car-btn[aria-disabled="true"],
  .alk-car--card:focus-within > .alk-car-btn[aria-disabled="true"] { opacity: 0.28; }
}

/* --- Variante blocco: frecce un po' piu' piccole --- */
.alk-car--blocco > .alk-car-btn { width: 40px; height: 40px; font-size: 25px; }

/* ---------------------------------------------------------------------
   Galleria a linguette
   --------------------------------------------------------------------- */
.alk-gal { position: relative; width: 100%; max-width: 100%; }
.alk-gal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.alk-gal-tab {
  margin: 0;
  padding: 11px 18px;
  font-family: var(--font-sans, 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-2, #D8CFB9);
  background: transparent;
  border: 1px solid var(--line-2, rgba(234, 227, 210, 0.22));
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .alk-gal-tab:hover { border-color: var(--brass, #B8935A); color: var(--brass, #B8935A); }
}
.alk-gal-tab[aria-selected="true"],
.alk-gal-tab[aria-selected="true"]:hover {
  background: var(--brass, #B8935A);
  border-color: var(--brass, #B8935A);
  color: var(--night, #0E1620);
}
.alk-gal-tab:focus-visible { outline: 2px solid var(--brass-soft, #D8B576); outline-offset: 2px; }
.alk-gal-panel { margin: 0; }
.alk-gal-panel[hidden] { display: none !important; }
@media (max-width: 600px) {
  .alk-gal-tabs { gap: 8px; margin-bottom: 16px; }
  .alk-gal-tab { padding: 9px 12px; font-size: 10.5px; letter-spacing: 0.08em; }
}

/* ---------------------------------------------------------------------
   Ingrandimento (lo crea il JS, un solo elemento nel body)
   --------------------------------------------------------------------- */
html.alk-lb-lock { overflow: hidden !important; }

.alk-lb {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--night-2, #050A11);
  color: var(--cream, #EAE3D2);
  font-family: var(--font-sans, 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif);
  opacity: 0;
  transition: opacity 0.25s ease;
  overscroll-behavior: contain;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.alk-lb[hidden] { display: none !important; }
.alk-lb.is-open { opacity: 1; }

.alk-lb-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 72px 104px 0;
}
.alk-lb-img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  transition: opacity 0.2s ease;
  -webkit-user-drag: none;
  user-select: none;
}
.alk-lb-img.is-loading { opacity: 0.35; }

.alk-lb-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 84px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
}
.alk-lb-info { min-width: 0; max-width: 760px; text-align: center; }
.alk-lb-cap {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--cream-2, #D8CFB9);
}
.alk-lb-cap:empty { display: none; }
.alk-lb-count {
  margin: 0;
  font-family: var(--font-display, 'Playfair Display', 'Times New Roman', serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.2;
  color: var(--brass-soft, #D8B576);
  white-space: nowrap;
}

.alk-lb-btn,
.alk-lb-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0 0 3px;
  border: 1px solid var(--brass, #B8935A);
  border-radius: 0;
  background: rgba(5, 10, 17, 0.5);
  color: var(--brass-soft, #D8B576);
  font-family: var(--font-display, 'Playfair Display', 'Times New Roman', serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, opacity 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.alk-lb-prev,
.alk-lb-next { position: absolute; top: calc(50% - 6px); transform: translateY(-50%); }
.alk-lb-prev { left: 24px; }
.alk-lb-next { right: 24px; }
.alk-lb-close { position: absolute; top: 12px; right: 24px; font-family: var(--font-sans, 'Space Grotesk', -apple-system, sans-serif); font-size: 30px; font-weight: 300; }
.alk-lb-btn[aria-disabled="true"] { opacity: 0.25; cursor: default; }
.alk-lb.is-single .alk-lb-btn { visibility: hidden; }
.alk-lb-btn:focus-visible,
.alk-lb-close:focus-visible { outline: 2px solid var(--cream, #EAE3D2); outline-offset: 2px; }
@media (hover: hover) {
  .alk-lb-btn:not([aria-disabled="true"]):hover,
  .alk-lb-close:hover { background: var(--brass, #B8935A); color: var(--night, #0E1620); }
}

@media (max-width: 700px) {
  .alk-lb-stage { margin: 60px 0 0; }
  .alk-lb-close { top: 8px; right: 8px; width: 44px; height: 44px; font-size: 28px; }
  .alk-lb-bar {
    justify-content: space-between;
    min-height: 76px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .alk-lb-prev,
  .alk-lb-next {
    position: static;
    transform: none;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    font-size: 26px;
  }
  .alk-lb-info { flex: 1 1 auto; }
  .alk-lb-cap { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .alk-lb, .alk-lb-img, .alk-car-btn, .alk-gal-tab { transition: none; }
}