/* [IRIDIAN AI LAYER 2026-05-26 · MODULS-B · GC 2026-09-25] Gallery wrapper IA Layer v1.
 * Scope: .iaLayer-gallery-v1. Tot ben aïllat del legacy .gallery / .gallerycontent.
 * Fase 1 (SPEC_MODULS_B.md §5 GC, §2 contracte): reescrit amb tokens del core NOMÉS
 * (--space-*, --step--1, --ial-r-*, --ial-shadow-*, --ial-t-*, --bs-*, --ial-c-*, i les receptes
 * color-mix() tancades de §1.1). [GALLERY SÒLIDA 2026-09-29] Cap --ia-* (SPEC_MODULS_B §2.7: en mode
 * core no existeixen; MB-E ho prohibeix). El hover és opt-in (per defecte cap). D1: mèdia SENSE radi (el dona el Grid); les úniques peces
 * amb radi/ombra pròpies són les variants de «card» (elevated/bordered/tinted), i només quan
 * s'activen explícitament.
 * Vars de configuració (capa Mòdul, mai de color): --iag-col-{lg,md,sm,xs} via inline style
 * (gallery.php) i --iag-brief-* via inline style (Design Brief, iailayer_design_brief_to_css_vars).
 */

.iaLayer-gallery-v1 {
    --iag-gap: var(--space-xs);
    --iag-radius: 0;
    --iag-shadow: none;
    --iag-shadow-hover: var(--ial-shadow-sm);
    --iag-img-fit: cover;
    --iag-img-position: center;
    --iag-ratio: auto;
    --iag-caption-bg: var(--bs-dark);
    --iag-caption-color: var(--ial-c-text-inverse);
    --iag-card-bg: transparent;
    --iag-card-border: 0 solid transparent;
    --iag-transition: var(--ial-t-base);

    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ── Grid (mode per defecte) ─────────────────────────────────────── */
.iaLayer-gallery-v1 .iag-grid {
    display: grid;
    grid-template-columns: repeat(var(--iag-col-xs, 1), 1fr);
    gap: var(--iag-gap);
    width: 100%;
}

@media (min-width: 576px) {
    .iaLayer-gallery-v1 .iag-grid {
        grid-template-columns: repeat(var(--iag-col-sm, 2), 1fr);
    }
}

@media (min-width: 768px) {
    .iaLayer-gallery-v1 .iag-grid {
        grid-template-columns: repeat(var(--iag-col-md, 2), 1fr);
    }
}

@media (min-width: 992px) {
    .iaLayer-gallery-v1 .iag-grid {
        grid-template-columns: repeat(var(--iag-col-lg, 3), 1fr);
    }
}

/* ── Gap variants ─────────────────────────────────────────────────── */
.iaLayer-gallery-v1.iag-gap-none { --iag-gap: 0; }
.iaLayer-gallery-v1.iag-gap-xs   { --iag-gap: var(--space-2xs); }
.iaLayer-gallery-v1.iag-gap-sm   { --iag-gap: var(--space-xs); }
.iaLayer-gallery-v1.iag-gap-md   { --iag-gap: var(--space-s); }
.iaLayer-gallery-v1.iag-gap-lg   { --iag-gap: var(--space-m); }
.iaLayer-gallery-v1.iag-gap-xl   { --iag-gap: var(--space-l); }

/* ── Item ─────────────────────────────────────────────────────────── */
.iaLayer-gallery-v1 .iag-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--iag-radius);
    background-color: var(--iag-card-bg);
    border: var(--iag-card-border);
    box-shadow: var(--iag-shadow);
    transition: box-shadow var(--iag-transition), transform var(--iag-transition);
    /* Segueix --iag-ratio; quan és "auto" (per defecte) no té cap efecte visual. */
    aspect-ratio: var(--iag-ratio);
}

.iaLayer-gallery-v1 .iag-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}
.iaLayer-gallery-v1 :where(.iag-link):focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: var(--iag-radius);
}

.iaLayer-gallery-v1 .iag-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.iaLayer-gallery-v1 .iag-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: var(--iag-img-fit);
    object-position: var(--iag-img-position);
    transition: transform var(--iag-transition), filter var(--iag-transition);
    aspect-ratio: var(--iag-ratio);
}

/* ── Aspect ratio variants ────────────────────────────────────────── */
.iaLayer-gallery-v1.iag-ratio-auto    { --iag-ratio: auto; }
.iaLayer-gallery-v1.iag-ratio-1-1     { --iag-ratio: 1 / 1; }
.iaLayer-gallery-v1.iag-ratio-4-3     { --iag-ratio: 4 / 3; }
.iaLayer-gallery-v1.iag-ratio-3-4     { --iag-ratio: 3 / 4; }
.iaLayer-gallery-v1.iag-ratio-16-9    { --iag-ratio: 16 / 9; }
.iaLayer-gallery-v1.iag-ratio-3-2     { --iag-ratio: 3 / 2; }

/* ── Card style variants (D1: només aquí hi ha radi/ombra propis) ─── */
.iaLayer-gallery-v1.iag-card-flat     { --iag-shadow: none; --iag-card-border: 0 solid transparent; }
.iaLayer-gallery-v1.iag-card-elevated { --iag-shadow: var(--ial-shadow-sm); --iag-radius: var(--ial-r-md); }
.iaLayer-gallery-v1.iag-card-bordered { --iag-card-border: 1px solid color-mix(in srgb, currentColor 14%, transparent); --iag-radius: var(--ial-r-md); }
.iaLayer-gallery-v1.iag-card-tinted   { --iag-card-bg: color-mix(in srgb, currentColor 5%, transparent); --iag-radius: var(--ial-r-md); }

/* ── Hover effects (§1.5: cap translateY; només fons/ombra/opacitat) ──
 * Per defecte la plantilla emet iag-hover-none: zoom/fade/tilt són opt-in (gal_hover). */
.iaLayer-gallery-v1:where(.iag-hover-none) :where(.iag-item):hover { box-shadow: var(--iag-shadow); }
.iaLayer-gallery-v1:where(.iag-hover-none) :where(.iag-img):hover { transform: none; }

.iaLayer-gallery-v1:where(.iag-hover-zoom) :where(.iag-item):hover { box-shadow: var(--iag-shadow-hover); }
.iaLayer-gallery-v1:where(.iag-hover-zoom) :where(.iag-link:hover) .iag-img { transform: scale(1.06); }

.iaLayer-gallery-v1:where(.iag-hover-fade) :where(.iag-link:hover) .iag-img { filter: brightness(.85); }

.iaLayer-gallery-v1:where(.iag-hover-tilt) .iag-item { transition: box-shadow var(--iag-transition); }
.iaLayer-gallery-v1:where(.iag-hover-tilt) :where(.iag-item):hover { box-shadow: var(--iag-shadow-hover); }

/* ── Caption variants ─────────────────────────────────────────────── */
.iaLayer-gallery-v1 .iag-caption {
    display: none;
    font-size: var(--step--1);
    color: color-mix(in srgb, currentColor 72%, transparent);
}

.iaLayer-gallery-v1:where(.iag-cap-below) .iag-caption {
    display: block;
    padding: var(--space-2xs) var(--space-xs);
    text-align: center;
}

.iaLayer-gallery-v1:where(.iag-cap-overlay-hover) .iag-caption,
.iaLayer-gallery-v1:where(.iag-cap-overlay-always) .iag-caption {
    display: block;
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-xs) var(--space-s);
    background-color: var(--iag-caption-bg);
    color: var(--iag-caption-color);
    font-size: var(--step--1);
    transition: opacity var(--iag-transition), transform var(--iag-transition);
}

.iaLayer-gallery-v1:where(.iag-cap-overlay-hover) .iag-caption {
    opacity: 0;
    transform: translateY(20%);
}
.iaLayer-gallery-v1:where(.iag-cap-overlay-hover) :where(.iag-item:hover) .iag-caption {
    opacity: 1;
    transform: translateY(0);
}

/* ── Layout: masonry (CSS columns, sense JS) ─────────────────────── */
.iaLayer-gallery-v1:where(.iag-layout-masonry) .iag-grid {
    display: block;
    column-gap: var(--iag-gap);
    column-count: var(--iag-col-xs, 1);
}
@media (min-width: 576px) { .iaLayer-gallery-v1:where(.iag-layout-masonry) .iag-grid { column-count: var(--iag-col-sm, 2); } }
@media (min-width: 768px) { .iaLayer-gallery-v1:where(.iag-layout-masonry) .iag-grid { column-count: var(--iag-col-md, 2); } }
@media (min-width: 992px) { .iaLayer-gallery-v1:where(.iag-layout-masonry) .iag-grid { column-count: var(--iag-col-lg, 3); } }

.iaLayer-gallery-v1:where(.iag-layout-masonry) .iag-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--iag-gap);
    break-inside: avoid;
    aspect-ratio: auto;
}
.iaLayer-gallery-v1:where(.iag-layout-masonry) .iag-img { aspect-ratio: auto; }

/* ── Layout: justified (línies amb alçada igual, ample variable) ── */
.iaLayer-gallery-v1:where(.iag-layout-justified) .iag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iag-gap);
}
.iaLayer-gallery-v1:where(.iag-layout-justified) .iag-item {
    flex: 1 1 220px;
    max-width: 100%;
    aspect-ratio: auto;
}
.iaLayer-gallery-v1:where(.iag-layout-justified) .iag-img {
    height: 220px;
    aspect-ratio: auto;
    object-fit: cover;
}

/* ── Carrusel clàssic (Swiper · themes/irtheme/modules/galleryCarroussel.html) ──
 * Arrel .iaLayer-gallery-v1.iag-carousel. Sense radi al mèdia (D1), sense hover per defecte; fletxes
 * i punts amb tokens del core (--bs-*, --ial-c-*) i cap literal de color. Swiper llegeix --swiper-*;
 * el moduls.css genèric deixava el punt actiu en blanc fix. Selectors amb :where() (≤ (0,2,0)) i
 * prefixats per l'arrel: no toquen cap altre Swiper del web. El focus és el global (§1.6). */
.iaLayer-gallery-v1:where(.iag-carousel) {
    --iag-nav-size: 40px;
    --swiper-navigation-size: 16px;
    --swiper-navigation-color: var(--bs-dark);
    --swiper-theme-color: var(--bs-primary);
}
.iaLayer-gallery-v1:where(.iag-carousel) .swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.iaLayer-gallery-v1:where(.iag-carousel) .single-post-slide-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--iag-radius);
}
.iaLayer-gallery-v1:where(.iag-carousel) :where(.single-post-slide-wrap) a {
    display: block;
    cursor: zoom-in;
}
.iaLayer-gallery-v1:where(.iag-carousel) :where(.single-post-slide-wrap) a:focus-visible {
    outline-offset: -2px;
}
.iaLayer-gallery-v1:where(.iag-carousel) .single-post-slide-wrap :where(picture, img) {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.iaLayer-gallery-v1:where(.iag-carousel) .swiper-button-next,
.iaLayer-gallery-v1:where(.iag-carousel) .swiper-button-prev {
    width: var(--iag-nav-size);
    height: var(--iag-nav-size);
    margin-top: calc(var(--iag-nav-size) / -2);
    border-radius: 50%;
    background-color: var(--ial-c-surface);
    box-shadow: var(--ial-shadow-sm), 0 0 0 1px color-mix(in srgb, currentColor 50%, transparent);
    transition: opacity var(--iag-transition), color var(--iag-transition);
}
.iaLayer-gallery-v1:where(.iag-carousel) .swiper-button-next:hover,
.iaLayer-gallery-v1:where(.iag-carousel) .swiper-button-prev:hover {
    --swiper-navigation-color: var(--bs-primary);
}
.iaLayer-gallery-v1:where(.iag-carousel) .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    opacity: .8;
    background-color: var(--ial-c-surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 50%, transparent);
}
.iaLayer-gallery-v1:where(.iag-carousel) .swiper-pagination-bullet-active,
.iaLayer-gallery-v1:where(.iag-carousel) .swiper-pagination-bullet-active:hover {
    width: 10px;
    opacity: 1;
    background-color: var(--bs-primary);
}

/* ── A11y / motion preferences ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .iaLayer-gallery-v1 .iag-item,
    .iaLayer-gallery-v1 .iag-img,
    .iaLayer-gallery-v1 .iag-caption,
    .iaLayer-gallery-v1:where(.iag-carousel) .swiper-button-next,
    .iaLayer-gallery-v1:where(.iag-carousel) .swiper-button-prev {
        transition: none;
    }
    .iaLayer-gallery-v1 :where(.iag-link:hover) .iag-img { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────
 * [DESIGN BRIEF HOOK]
 * Si el bloc rep `--iag-brief-*` inline (via gallery.php → iailayer_design_brief_to_css_vars),
 * sobreescriuen els defaults d'aquest mòdul SENSE haver de canviar el twig.
 * Tot el que vingui del Brief és OPCIONAL — si no s'aplica, els defaults d'amunt manen.
 * ────────────────────────────────────────────────────────────────── */
.iaLayer-gallery-v1[style*="--iag-brief-radius"]  { --iag-radius: var(--iag-brief-radius); }
.iaLayer-gallery-v1[style*="--iag-brief-shadow"]  { --iag-shadow-hover: var(--iag-brief-shadow); }
.iaLayer-gallery-v1[style*="--iag-brief-gap"]     { --iag-gap: var(--iag-brief-gap); }
.iaLayer-gallery-v1:where([style*="--iag-brief-accent"]) :where(.iag-link):focus-visible { outline-color: var(--iag-brief-accent); }

/* ──────────────────────────────────────────────────────────────────
 * [SCOPE VARIANTS PER PLANTILLA — generats per IA]
 * Aquí l'AI Block Generator apilarà blocs per variant scopejada,
 * un per cada plantilla de línia (lp<id>) o estructura de pàgina (st<id>).
 *
 * Patró: `.iaLayer-gallery-v1.iag-variant-<slug> { ... }`.
 * RECOMANACIONS de cosa a modificar (no obligat — la IA pot afegir més):
 *   - Tokens locals: --iag-radius, --iag-shadow, --iag-gap, --iag-shadow-hover
 *   - Hover personalitzat: `.iaLayer-gallery-v1.iag-variant-X .iag-link:hover .iag-img { ... }`
 *   - Caption personalitzat: `.iaLayer-gallery-v1.iag-variant-X .iag-caption { ... }`
 *
 * REGLA D'OR: NO modificar selectors fora de `.iaLayer-gallery-v1.iag-variant-<slug>` —
 * això trencaria altres scopes. Tot l'override viu dins el selector scopejat.
 *
 * Aquesta zona és APPEND-ONLY pel generador. Els humans poden editar manualment
 * per ajustaments puntuals, però en la propera regeneració del Brief seran reemplaçats.
 * ────────────────────────────────────────────────────────────────── */

/* /BEGIN_IA_VARIANTS — no editar manualment dins aquest bloc */

/* @variant lp45 */
.iaLayer-gallery-v1.iag-variant-lp45 {
  --iag-radius: 16px;
  --iag-shadow-hover: 0 6px 18px rgba(0,0,0,.08);
  --iag-gap: 28px;
  --iag-accent: #e67a00;
}
.iaLayer-gallery-v1.iag-variant-lp45 .iag-link:hover .iag-img { opacity: .82; transition: transform .25s ease, opacity .25s ease, filter .25s ease; }
.iaLayer-gallery-v1.iag-variant-lp45 .iag-caption { color: #1d1d1f; background: #e8f1fb; }
.iaLayer-gallery-v1.iag-variant-lp45 .iag-link:focus-visible { outline-color: #e67a00; outline-offset: 3px; }
/* @end-variant lp45 */
/* /END_IA_VARIANTS */