/* ═══════════════════════════════════════════════════════════
   Tropicana Galería — hoja propia y autónoma.

   Reglas de la casa, para que el plugin no dependa de ningún tema:

   1. NINGÚN :root. Si el plugin declarara tokens globales, en la web de
      Tropicana pisaría los del tema en cuanto cargara después. Cada var()
      lleva su valor de respaldo: si el tema está, hereda su paleta; si no,
      se pinta sola.
   2. NINGÚN @font-face. Las Suisse son licencia del cliente y viven en el
      tema; aquí solo se nombran, con respaldo a Geist y a la del sistema.
   3. SIN @layer. Estuvo en @layer components, pero una capa no es una forma
      suave de ganar: es renunciar al desempate. Cualquier CSS sin capa de
      otro tema —los global styles de los temas de bloques, por ejemplo— le
      gana a una capa aunque tenga menos especificidad, y la galería salía
      con los enlaces subrayados y otro titular. Como aquí todo va prefijado
      y nadie más estiliza estas clases, no hay nada que ceder.
   4. Prefijo snt- en todo. Nada de .wrap, .poster o .btn a pelo: son
      del tema y colisionarían.
   ═══════════════════════════════════════════════════════════ */

/* El visor se inyecta como hijo de <body>, fuera de .snt-galeria: si los
   alias solo vivieran en el contenedor, dentro del visor quedarían sin
   resolver y se perderían la mono y el naranja del hover. Va en :where()
   para no sumar especificidad. */
:where(.snt-galeria, .snt-visor) {
  --snt-night: var(--color-night, oklch(0.18 0.035 55));
  --snt-void: var(--color-void, oklch(0.12 0.028 52));
  --snt-smoke: var(--color-smoke, oklch(0.25 0.042 55));
  --snt-ink: var(--color-ink, oklch(0.98 0.006 80));
  --snt-dim: var(--color-dim, oklch(0.72 0.035 62));
  --snt-flame: var(--color-flame, oklch(0.68 0.215 45));
  --snt-sans: var(--font-sans, "Suisse Intl", "Geist", system-ui, -apple-system, sans-serif);
  --snt-mono: var(--font-mono, "Suisse Intl Mono", "Geist Mono", ui-monospace, SFMono-Regular, monospace);
  --snt-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── Rejilla y tipografía base ───────────────────────────── */

/* El contenedor pinta su propio fondo y su propia tinta. Sin esto, sobre un
   tema de fondo claro el titular saldría casi blanco sobre blanco. Con el
   tema de Tropicana el valor coincide con el del body y no se nota. */
.snt-galeria {
  background: var(--snt-night);
  color: var(--snt-ink);
}

.snt-wrap {
  width: min(100% - 2rem, 82rem);
  margin-inline: auto;
}

.snt-poster {
  font-family: var(--snt-sans);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-wrap: balance;
  /* Solo hay peso Regular de Suisse: que el navegador no invente negrita */
  font-synthesis-weight: none;
  color: var(--snt-ink);
}

.snt-meta {
  font-family: var(--snt-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--snt-dim);
}

.snt-meta-lg {
  font-family: var(--snt-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.snt-link {
  color: var(--snt-dim);
  text-decoration: none;
  transition: color 180ms var(--snt-ease);
}

.snt-link:hover {
  color: var(--snt-ink);
}

.snt-dim {
  color: var(--snt-dim);
}

/* ── Cabecera de la galería ──────────────────────────────── */

.snt-cabecera {
  border-bottom: 1px solid oklch(1 0 0 / 0.1);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.snt-cabecera__titulo {
  margin-top: 1.25rem;
  max-width: 16ch;
  font-size: clamp(2.6rem, 8vw, 6rem);
}

.snt-cabecera__apagado {
  color: var(--snt-dim);
}

.snt-cabecera__entrada {
  margin-top: 1.5rem;
  max-width: 54ch;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--snt-dim);
}

/* ── Listado de noches ───────────────────────────────────── */

.snt-seccion {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.snt-noches {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .snt-noches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .snt-noches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* La tarjeta replica la del tema (.ev) pero a 4/5, que es la proporción
   que usaba el listado de noches. */
.snt-tarjeta {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--snt-smoke);
  aspect-ratio: 4 / 5;
  text-decoration: none;
}

.snt-tarjeta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--snt-ease);
}

@media (hover: hover) and (pointer: fine) {
  .snt-tarjeta:hover .snt-tarjeta__img {
    transform: scale(1.04);
  }
}

.snt-tarjeta__vacia {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(80% 70% at 50% 30%, oklch(0.68 0.215 45 / 0.5), transparent 70%),
    linear-gradient(to bottom, oklch(0.27 0.06 45), oklch(0.15 0.035 50));
}

.snt-tarjeta__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(0.12 0.028 52 / 0.92) 0%,
    oklch(0.12 0.028 52 / 0.55) 28%,
    transparent 58%
  );
}

.snt-tarjeta__cuerpo {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.25rem;
}

.snt-tarjeta__fecha {
  display: block;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.snt-tarjeta__nombre {
  display: block;
  margin-top: 0.5rem;
  color: var(--snt-ink);
}

.snt-tarjeta__sub {
  display: block;
  margin-top: 0.25rem;
  color: color-mix(in oklab, var(--snt-ink) 65%, transparent);
}

.snt-tarjeta__contador {
  display: block;
  margin-top: 0.75rem;
  color: color-mix(in oklab, var(--snt-ink) 50%, transparent);
}

.snt-vacio {
  padding-block: 3rem;
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--snt-dim);
}

/* ── Hoja de contactos de una noche ──────────────────────── */

.snt-hoja {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

@media (min-width: 640px) {
  .snt-hoja {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .snt-hoja {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.snt-hoja__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--snt-smoke);
  cursor: pointer;
  border: 0;
  padding: 0;
}

.snt-hoja__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--snt-ease);
}

/* La celda con foco se pinta por encima de las vecinas: si no, las que van
   después tapan su contorno y solo se ve arriba y a la izquierda */
.snt-hoja__item:focus-visible {
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .snt-hoja__item:hover img {
    transform: scale(1.06);
  }
}

/* ── Visor ───────────────────────────────────────────────── */

.snt-visor {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay, 60);
  display: none;
  flex-direction: column;
  background: oklch(0.06 0.006 160 / 0.97);
  opacity: 0;
  transition: opacity 220ms var(--snt-ease);
  font-family: var(--snt-sans);
}

.snt-visor.is-open {
  display: flex;
  opacity: 1;
}

.snt-visor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid oklch(1 0 0 / 0.12);
}

.snt-visor__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.snt-visor__escenario {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  min-height: 0;
}

.snt-visor__escenario img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Mientras carga la foto nueva no se ve la anterior */
.snt-visor__escenario img {
  transition: opacity 150ms var(--snt-ease);
}
.snt-visor.is-loading .snt-visor__escenario img {
  opacity: 0;
}

.snt-visor__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: oklch(1 0 0 / 0.08);
  border: 1px solid oklch(1 0 0 / 0.2);
  color: var(--snt-ink);
  cursor: pointer;
  transition:
    background-color 180ms var(--snt-ease),
    color 180ms var(--snt-ease);
}

.snt-visor__nav:hover {
  background: var(--snt-flame);
  color: var(--snt-void);
}

.snt-visor__prev {
  left: 0.75rem;
}

.snt-visor__next {
  right: 0.75rem;
}

/* El botón de cerrar vive en la barra, no flotando sobre la foto */
.snt-visor__cerrar {
  position: static;
  translate: none;
}

.snt-visor__descargar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  font-family: var(--snt-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid oklch(1 0 0 / 0.35);
  color: var(--snt-ink);
  transition:
    background-color 180ms var(--snt-ease),
    color 180ms var(--snt-ease),
    border-color 180ms var(--snt-ease);
}

/* display:inline-flex gana a [hidden]; sin esto se ofrece la foto anterior mientras carga */
.snt-visor__descargar[hidden] {
  display: none;
}

.snt-visor__descargar:hover {
  border-color: var(--snt-ink);
  background: var(--snt-ink);
  color: var(--snt-void);
}

/* ── Pie de la noche ─────────────────────────────────────── */

.snt-pie {
  border-top: 1px solid oklch(1 0 0 / 0.1);
}

.snt-pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 2.5rem;
}

.snt-nota {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--snt-dim);
}

.snt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}