/* ==========================================================================
   bb2026 — PAGINA DE SERVICIO / GALERIA Y LIGHTBOX.

   La seccion existe y funciona aunque no haya fotos: con el array
   'gallery' vacio la plantilla no imprime nada y esta hoja no encuentra
   nada que estilar. Rellenar la galeria NO requiere tocar este fichero.

   --------------------------------------------------------------------
   ARITMETICA DE LA REJILLA (por que no queda ningun hueco)

   La rejilla tiene 6 columnas y cada foto ocupa 2, 3 o 4:

     base  3 columnas, proporcion 3/2 (horizontal)
     wide  4 columnas, proporcion 3/2 (horizontal)
     tall  2 columnas, proporcion 3/4 (vertical)

   El patron de bb_service_gallery_span() tiene NUEVE pasos:

     base base | wide tall | tall tall tall | wide tall
       3 + 3   |  4 + 2    |  2 + 2 + 2     |  4 + 2
        = 6    |    = 6    |     = 6        |   = 6

   Suma 24 = 4 filas EXACTAS de 6 columnas, asi que el ciclo cierra y no
   deja huecos. Y las cuatro filas reparten distinto (dos iguales, grande
   + pequenia, tres pequenias, grande + pequenia), asi que no se lee como
   una cuadricula. La fila que abre el ciclo siguiente (3+3) tampoco
   repite el reparto de la que lo cierra (4+2).

   Si el numero de fotos no es multiplo de 9, la ultima fila puede quedar
   incompleta: 'grid-auto-flow: dense' rellena el hueco con la primera
   foto posterior que quepa, y si no cabe ninguna el aire final se lee
   como margen editorial, no como error.

   ESO ES EL RESPALDO. En las galerias reales el span va DECLARADO foto a
   foto segun su orientacion REAL, y el orden se calcula para que toda
   fila sume 6 EXACTAS, asi que no hay huecos que rellenar y 'dense' no
   llega a actuar. Las unicas filas legales son:

     3+3      dos horizontales
     4+2      horizontal + vertical
     2+2+2    tres verticales

   Cualquier mezcla de horizontales y verticales se coloca con esas tres:
   las horizontales de dos en dos, las verticales de tres en tres, y la
   fila mixta gasta una de cada. La cuenta de cada galeria (nH, nV y
   cuantas filas de cada tipo) esta en la cabecera de su array 'gallery',
   en inc/services/{slug}.php.

   --------------------------------------------------------------------
   TRAMPA DEL MARCO (pagada, no repetir)

   Un marco con aspect-ratio NO puede llevar la imagen en flujo con
   height:100% dentro de una pista '1fr': '1fr' es minmax(auto, 1fr) y se
   mide por contenido, asi que el alto del marco depende de su ancho y el
   ancho de la pista depende del contenido -> referencia circular y
   anchos absurdos (del orden de 2^25 px). Aqui, por eso:
     - las pistas van declaradas minmax(0, 1fr);
     - el aspect-ratio va en el MARCO;
     - la imagen va en position:absolute; inset:0.
   -------------------------------------------------------------------- */

.bb-sgal {
  background: var(--bb-white);
  padding-block: var(--bb-s5);
}
.bb-sgal__head { margin-bottom: var(--bb-s4); }
.bb-sgal__kicker { color: var(--bb-body); }

.bb-sgal__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bb-s2);
}

.bb-sgal__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.bb-sgal__btn:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 4px; }

/* MARCO: lleva el recorte de la persiana y el fondo del hueco. */
.bb-sgal__frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  /* BLANCO, nunca gris: el hueco tiene que leerse como pagina. */
  background: var(--bb-frame-bg);
}
.bb-sgal__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--bb-ease);
}
.bb-sgal__btn:hover .bb-sgal__img,
.bb-sgal__btn:focus-visible .bb-sgal__img { transform: scale(1.035); }

@media (min-width: 768px) {
  .bb-sgal { padding-block: var(--bb-s6); }
  .bb-sgal__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--bb-s2);
  }
  .bb-sgal__cell--base { grid-column: span 3; }
  .bb-sgal__cell--wide { grid-column: span 4; }
  .bb-sgal__cell--tall { grid-column: span 2; }
  /* La vertical es la que rompe el ritmo: proporcion 3/4. */
  .bb-sgal__cell--tall .bb-sgal__frame { aspect-ratio: 3 / 4; }
}

/* ==========================================================================
   DESPLIEGUE POR TRAMOS

   La plantilla imprime TODAS las fotos y visibles; es
   assets/js/service-gallery.js quien oculta los tramos al arrancar con el
   atributo 'hidden' del elemento. Aqui solo hacen falta dos cosas:

   1. que 'hidden' gane a los display: propios. El atributo 'hidden' trae
      de serie display:none, pero es una regla de la hoja del NAVEGADOR y
      cualquier display: nuestro la pisa. Las celdas de la rejilla no
      declaran display, asi que con ellas basta el de serie; el
      contenedor del boton SI es flex y necesita la regla explicita.
   2. el rotulo y la linea de cierre, sobre papel.

   CONTRASTE: el contador y la linea de cierre van sobre papel, asi que
   usan --bb-body (#565451 -> 6,94:1) y --bb-ink. NUNCA --bb-label
   (#A6A8AB), que sobre papel da 2,19:1 y no cumple AA.
   ========================================================================== */

.bb-sgal__grid > [hidden] { display: none; }

.bb-sgal__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bb-s2);
  margin-top: var(--bb-s4);
}
/* Sin esto el flex de arriba pisaria el display:none del atributo. */
.bb-sgal__more[hidden] { display: none; }

.bb-sgal__more-btn { cursor: pointer; }

.bb-sgal__done {
  margin: 0;
  color: var(--bb-body);
  font-family: var(--bb-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.bb-sgal__done[hidden] { display: none; }

/* El <li> recibe tabindex="-1" al desplegarse para poder llevarle el
   foco; el anillo lo pinta su boton, no la celda. */
.bb-sgal__cell:focus { outline: none; }
.bb-sgal__cell:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 4px; }

/* ==========================================================================
   LIGHTBOX

   z-index 500: rango reservado para dialogos. Encaja en la jerarquia que
   ya existe sin tocarla — overlay de menu 300, barra 400, LIGHTBOX 500,
   salto al contenido 999, cursor 1200, cortina de entrada 1500. Asi el
   cursor personalizado sigue viendose sobre el lightbox y la cortina de
   entrada sigue tapandolo todo, que es lo correcto.

   El marcado lo construye assets/js/service.js cuando hace falta: sin
   galeria no existe, y sin JS los botones simplemente no hacen nada (la
   foto ya se ve en la rejilla, asi que no se pierde contenido).
   ========================================================================== */

.bb-slb {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bb-s4) var(--bb-s3);
  background: rgba(12, 12, 11, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--bb-ease), visibility 0.35s var(--bb-ease);
}
.bb-slb.is-open {
  opacity: 1;
  visibility: visible;
}

/* Figura: la foto y su pie. max-height con dvh para que en movil no se
   meta debajo de la barra del navegador. */
.bb-slb__figure {
  position: relative;
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--bb-s2);
}
.bb-slb__img {
  display: block;
  max-width: 100%;
  /* Se descuenta el alto del pie y del relleno para que la foto nunca
     empuje los controles fuera de la pantalla. */
  max-height: calc(100dvh - var(--bb-s7));
  width: auto;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}
.bb-slb__caption {
  margin: 0;
  text-align: center;
  color: var(--bb-paper);
  font-family: var(--bb-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  opacity: 0.86;
}
.bb-slb__count {
  display: block;
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-label);
  opacity: 0.7;
}

/* --- Controles ---
   48px de area de pulsacion y contraste de papel sobre el fondo casi
   negro: muy por encima del 3:1 que pide el criterio de elementos no
   textuales. */
.bb-slb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(247, 245, 242, 0.45);
  background: rgba(12, 12, 11, 0.55);
  color: var(--bb-paper);
  transition: background 0.3s var(--bb-ease), border-color 0.3s var(--bb-ease);
}
.bb-slb__btn:hover,
.bb-slb__btn:focus-visible {
  background: var(--bb-paper);
  border-color: var(--bb-paper);
  color: var(--bb-ink);
}
.bb-slb__btn:focus-visible { outline: 2px solid var(--bb-paper); outline-offset: 3px; }
.bb-slb__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.bb-slb__close { top: var(--bb-s2); right: var(--bb-s2); }
.bb-slb__prev { top: 50%; left: var(--bb-s2); transform: translateY(-50%); }
.bb-slb__next { top: 50%; right: var(--bb-s2); transform: translateY(-50%); }

/* Con una sola foto no hay a donde navegar: los controles se retiran. */
.bb-slb--single .bb-slb__prev,
.bb-slb--single .bb-slb__next { display: none; }

/* El cuerpo no hace scroll detras del dialogo. */
body.bb-slb-open { overflow: hidden; }

@media (min-width: 768px) {
  .bb-slb { padding: var(--bb-s5); }
  .bb-slb__close { top: var(--bb-s3); right: var(--bb-s3); }
  .bb-slb__prev { left: var(--bb-s3); }
  .bb-slb__next { right: var(--bb-s3); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-slb { transition: none; }
}