/* Galerías de imágenes (sitio público y vista previa del editor) + visor a pantalla completa.
 * El HTML lo genera/sanea includes/posts.php (post_html_build_gallery) y lo arma js/icms-media.js:
 *   <div class="icms-gallery" data-layout data-cols data-gap data-captions data-hover data-zoom>
 *     <figure><a href="grande"><img src="mediana"></a><figcaption>…</figcaption></figure> … </div>
 * Todo el aspecto sale de atributos data-*, nunca de estilos en línea. */

.icms-gallery { --cols: 3; --gap: .5rem; --ar: 1 / 1; margin: 1.5rem 0; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.icms-gallery[data-cols="1"] { --cols: 1; } .icms-gallery[data-cols="2"] { --cols: 2; } .icms-gallery[data-cols="3"] { --cols: 3; }
.icms-gallery[data-cols="4"] { --cols: 4; } .icms-gallery[data-cols="5"] { --cols: 5; } .icms-gallery[data-cols="6"] { --cols: 6; }
.icms-gallery[data-gap="none"] { --gap: 0; } .icms-gallery[data-gap="sm"] { --gap: .25rem; } .icms-gallery[data-gap="md"] { --gap: .5rem; } .icms-gallery[data-gap="lg"] { --gap: 1.25rem; }
.icms-gallery figure { margin: 0; position: relative; overflow: hidden; min-width: 0; }
.icms-gallery a { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.icms-gallery[data-zoom="0"] a { cursor: default; }
.post-body .icms-gallery img, .icms-gallery img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; transition: transform .35s ease, filter .35s ease, opacity .35s ease; }
.icms-gallery figcaption { font-size: .875rem; line-height: 1.35; padding: .4rem .125rem 0; color: var(--muted, inherit); }

/* ── Diseños ── */
/* Cuadrícula: cuadros del mismo tamaño */
.icms-gallery[data-layout="grid"] img { aspect-ratio: var(--ar); object-fit: cover; }
.icms-gallery[data-layout="grid"] figure { border-radius: var(--radius, 8px); }
/* Mosaico: columnas de alturas libres (como Pinterest) */
.icms-gallery[data-layout="mosaic"] { display: block; column-count: var(--cols); column-gap: var(--gap); }
.icms-gallery[data-layout="mosaic"] figure { break-inside: avoid; margin-bottom: var(--gap); border-radius: var(--radius, 8px); }
/* Filas: todas a la misma altura, el ancho se reparte (js/icms-gallery.js ajusta el crecimiento) */
.icms-gallery[data-layout="rows"] { display: flex; flex-wrap: wrap; }
.icms-gallery[data-layout="rows"] figure { flex: 1 1 auto; height: 13rem; border-radius: var(--radius, 8px); }
.icms-gallery[data-layout="rows"] a, .icms-gallery[data-layout="rows"] img { height: 100%; }
.icms-gallery[data-layout="rows"] img { object-fit: cover; }
.icms-gallery[data-layout="rows"] figcaption { display: none; }
.icms-gallery[data-layout="rows"][data-captions="below"] figure { display: flex; flex-direction: column; height: auto; }
.icms-gallery[data-layout="rows"][data-captions="below"] a { height: 13rem; }
.icms-gallery[data-layout="rows"][data-captions="below"] figcaption, .icms-gallery[data-layout="rows"][data-captions="overlay"] figcaption { display: block; }
/* Collage: la primera foto grande y las demás alrededor */
.icms-gallery[data-layout="collage"] { grid-auto-flow: dense; }
.icms-gallery[data-layout="collage"] figure:first-child { grid-column: span 2; grid-row: span 2; }
.icms-gallery[data-layout="collage"] figure { border-radius: var(--radius, 8px); }
.icms-gallery[data-layout="collage"] a, .icms-gallery[data-layout="collage"] img { height: 100%; }
.icms-gallery[data-layout="collage"] img { aspect-ratio: 1 / 1; object-fit: cover; }
.icms-gallery[data-layout="collage"] figure:first-child img { aspect-ratio: auto; }
/* Ancho completo: una bajo otra, a todo el ancho */
.icms-gallery[data-layout="full"] { grid-template-columns: minmax(0, 1fr); }
.icms-gallery[data-layout="full"] figure { border-radius: var(--radius, 8px); }
/* Carrusel: se desliza hacia los lados */
.icms-gallery[data-layout="carousel"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; position: relative; }
.icms-gallery[data-layout="carousel"] figure { flex: 0 0 calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols)); scroll-snap-align: start; border-radius: var(--radius, 8px); }
.icms-gallery[data-layout="carousel"] img { aspect-ratio: 4 / 3; object-fit: cover; }
.icms-gallery-wrap { position: relative; }
.icms-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.icms-gal-nav:hover { background: rgba(0, 0, 0, .8); }
.icms-gal-prev { left: .5rem; } .icms-gal-next { right: .5rem; }
/* Círculos */
.icms-gallery[data-layout="circle"] { justify-items: center; }
.icms-gallery[data-layout="circle"] figure { width: 100%; overflow: visible; text-align: center; }
.icms-gallery[data-layout="circle"] a { border-radius: 50%; overflow: hidden; aspect-ratio: 1 / 1; }
.icms-gallery[data-layout="circle"] img { height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.icms-gallery[data-layout="circle"][data-captions="overlay"] figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .5rem .75rem; aspect-ratio: auto; }
/* Hexágonos */
.icms-gallery[data-layout="hex"] { justify-items: center; }
.icms-gallery[data-layout="hex"] figure { overflow: visible; width: 100%; }
.icms-gallery[data-layout="hex"] a { aspect-ratio: 1 / 1.1547; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.icms-gallery[data-layout="hex"] img { height: 100%; object-fit: cover; }
/* Polaroid: fotos con borde blanco, ligeramente giradas */
.icms-gallery[data-layout="polaroid"] { gap: max(var(--gap), 1rem); padding: .5rem; }
.icms-gallery[data-layout="polaroid"] figure { background: #fff; color: #222; padding: .6rem .6rem .5rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transform: rotate(-1.5deg); transition: transform .25s ease; overflow: visible; }
.icms-gallery[data-layout="polaroid"] figure:nth-child(even) { transform: rotate(1.5deg); }
.icms-gallery[data-layout="polaroid"] figure:nth-child(3n) { transform: rotate(-.5deg); }
.icms-gallery[data-layout="polaroid"] figure:hover { transform: rotate(0) scale(1.03); z-index: 1; }
.icms-gallery[data-layout="polaroid"] img { aspect-ratio: 1 / 1; object-fit: cover; }
.icms-gallery[data-layout="polaroid"] figcaption { color: #333; text-align: center; padding: .55rem .25rem .25rem; font-family: "Segoe Print", "Bradley Hand", cursive; }

/* ── Títulos de las fotos ── */
.icms-gallery[data-captions="none"] figcaption { display: none; }
.icms-gallery[data-captions="overlay"] figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.75rem .75rem .6rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); opacity: 0; transition: opacity .25s; pointer-events: none; }
.icms-gallery[data-captions="overlay"] figure:hover figcaption, .icms-gallery[data-captions="overlay"] figure:focus-within figcaption { opacity: 1; }
@media (hover: none) { .icms-gallery[data-captions="overlay"] figure figcaption { opacity: 1; } }
.icms-gallery[data-layout="polaroid"][data-captions="overlay"] figcaption { position: static; color: #333; background: none; opacity: 1; padding: .55rem .25rem .25rem; }

/* ── Efecto al pasar el cursor ── */
@media (hover: hover) {
  .icms-gallery[data-hover="zoom"] figure:hover img { transform: scale(1.08); }
  .icms-gallery[data-hover="dim"] figure:hover img { opacity: .72; }
  .icms-gallery[data-hover="gray"] img { filter: grayscale(1); }
  .icms-gallery[data-hover="gray"] figure:hover img { filter: grayscale(0); }
  .icms-gallery[data-hover="lift"] figure { transition: transform .25s ease, box-shadow .25s ease; }
  .icms-gallery[data-hover="lift"] figure:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .28); z-index: 1; }
}

/* Celular: menos columnas */
@media (max-width: 40em) {
  .icms-gallery[data-cols="3"], .icms-gallery[data-cols="4"], .icms-gallery[data-cols="5"], .icms-gallery[data-cols="6"] { --cols: 2; }
  .icms-gallery[data-layout="carousel"][data-cols] { --cols: 1; }
  .icms-gallery[data-layout="rows"] figure { height: 9rem; }
  .icms-gallery[data-layout="rows"][data-captions="below"] a { height: 9rem; }
  .icms-gallery[data-layout="collage"] figure:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce) { .icms-gallery img, .icms-gallery figure { transition: none !important; } .icms-gallery[data-layout="carousel"] { scroll-behavior: auto; } }

/* ── Visor a pantalla completa ── */
.icms-lb { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: rgba(8, 8, 10, .96); color: #fff; opacity: 0; transition: opacity .2s; touch-action: pan-y; }
.icms-lb.is-open { opacity: 1; }
.icms-lb-top { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; font-size: .875rem; }
.icms-lb-count { margin-right: auto; opacity: .85; }
.icms-lb-btn { min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: .5rem; background: transparent; color: #fff; font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; }
.icms-lb-btn:hover, .icms-lb-btn:focus-visible { background: rgba(255, 255, 255, .16); outline: none; }
.icms-lb-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .28); }
.icms-lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 3.5rem; }
.icms-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; user-select: none; -webkit-user-drag: none; transition: opacity .2s; }
.icms-lb-img.is-loading { opacity: .25; }
.icms-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 4rem; font-size: 2rem; }
.icms-lb-prev { left: .25rem; } .icms-lb-next { right: .25rem; }
.icms-lb-cap { min-height: 2.5rem; padding: .5rem 1rem; text-align: center; font-size: .9375rem; line-height: 1.4; }
.icms-lb-thumbs { display: flex; gap: .375rem; overflow-x: auto; padding: .5rem .75rem .75rem; justify-content: safe center; }
.icms-lb-thumbs[hidden] { display: none; }
.icms-lb-thumbs button { flex: 0 0 auto; width: 4rem; height: 3rem; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: #222; cursor: pointer; opacity: .6; }
.icms-lb-thumbs button[aria-current="true"] { border-color: #fff; opacity: 1; }
.icms-lb-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icms-lb-single .icms-lb-nav, .icms-lb-single .icms-lb-thumbs, .icms-lb-single .icms-lb-play, .icms-lb-single .icms-lb-thumbbtn { display: none; }
body.icms-lb-open { overflow: hidden; }
@media (max-width: 40em) { .icms-lb-stage { padding: 0; } .icms-lb-nav { width: 2.5rem; background: rgba(0, 0, 0, .35); } }
@media (prefers-reduced-motion: reduce) { .icms-lb, .icms-lb-img { transition: none; } }