/* [IRIDIAN AI LAYER 2026-05-26] Gallery wrapper IA Layer v1.
 * Scope: .iaLayer-gallery-v1. Tot ben aïllat del legacy .gallery / .gallerycontent.
 * Vars: --iag-col-{lg,md,sm,xs} via inline style (set by gallery.php from BlocGaleria).
 * Tokens consumits: --space-*, --radius-*, --shadow-*, --transition-* (Design System v2).
 * Variants modificades via classes iag-layout-*, iag-gap-*, iag-card-*, iag-hover-*, iag-ratio-*, iag-cap-*.
 */

.iaLayer-gallery-v1 {
    --iag-gap: var(--space-md, 16px);
    --iag-radius: var(--radius-md, 12px);
    --iag-shadow: none;
    --iag-shadow-hover: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.12));
    --iag-img-fit: cover;
    --iag-img-position: center;
    --iag-ratio: auto;
    --iag-caption-bg: rgba(0,0,0,.55);
    --iag-caption-color: #fff;
    --iag-card-bg: transparent;
    --iag-card-border: 0 solid transparent;
    --iag-transition: var(--transition-base, 220ms cubic-bezier(.4,0,.2,1));

    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-xs, 4px); }
.iaLayer-gallery-v1.iag-gap-sm   { --iag-gap: var(--space-sm, 8px); }
.iaLayer-gallery-v1.iag-gap-md   { --iag-gap: var(--space-md, 16px); }
.iaLayer-gallery-v1.iag-gap-lg   { --iag-gap: var(--space-lg, 24px); }
.iaLayer-gallery-v1.iag-gap-xl   { --iag-gap: var(--space-xl, 36px); }

/* ── Item ─────────────────────────────────────────────────────────── */
.iaLayer-gallery-v1 .iag-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--iag-radius);
    background: var(--iag-card-bg);
    border: var(--iag-card-border);
    box-shadow: var(--iag-shadow);
    transition: box-shadow var(--iag-transition), transform var(--iag-transition);
}

.iaLayer-gallery-v1 .iag-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}

.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; }

/* Si ratio != auto, el .iag-item també l'agafa (per omplir si img encara no carrega) */
.iaLayer-gallery-v1:not(.iag-ratio-auto) .iag-item { aspect-ratio: var(--iag-ratio); }

/* ── Card style variants ──────────────────────────────────────────── */
.iaLayer-gallery-v1.iag-card-flat     { --iag-shadow: none; --iag-card-border: 0 solid transparent; }
.iaLayer-gallery-v1.iag-card-elevated { --iag-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.08)); }
.iaLayer-gallery-v1.iag-card-bordered { --iag-card-border: 1px solid var(--c-border, #e5e7eb); }
.iaLayer-gallery-v1.iag-card-tinted   { --iag-card-bg: var(--c-bg-soft, #f6f7f9); }

/* ── Hover effects ────────────────────────────────────────────────── */
.iaLayer-gallery-v1.iag-hover-none .iag-item:hover { box-shadow: var(--iag-shadow); }
.iaLayer-gallery-v1.iag-hover-none .iag-img:hover { transform: none; }

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

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

.iaLayer-gallery-v1.iag-hover-tilt .iag-item { transition: transform var(--iag-transition), box-shadow var(--iag-transition); }
.iaLayer-gallery-v1.iag-hover-tilt .iag-item:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--iag-shadow-hover); }

/* ── Caption variants ─────────────────────────────────────────────── */
.iaLayer-gallery-v1 .iag-caption {
    display: none;
    font-size: var(--fs-small, .85rem);
    color: var(--c-text-secondary, #4b5563);
}

.iaLayer-gallery-v1.iag-cap-below .iag-caption {
    display: block;
    padding: var(--space-xs, 6px) var(--space-sm, 10px);
    text-align: center;
}

.iaLayer-gallery-v1.iag-cap-overlay-hover .iag-caption,
.iaLayer-gallery-v1.iag-cap-overlay-always .iag-caption {
    display: block;
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-sm, 10px) var(--space-md, 14px);
    background: linear-gradient(to top, var(--iag-caption-bg) 0%, transparent 100%);
    color: var(--iag-caption-color);
    font-size: var(--fs-small, .85rem);
    transition: opacity var(--iag-transition), transform var(--iag-transition);
}

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

/* ── Layout: masonry (CSS columns, sense JS) ─────────────────────── */
.iaLayer-gallery-v1.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.iag-layout-masonry .iag-grid { column-count: var(--iag-col-sm, 2); } }
@media (min-width: 768px) { .iaLayer-gallery-v1.iag-layout-masonry .iag-grid { column-count: var(--iag-col-md, 2); } }
@media (min-width: 992px) { .iaLayer-gallery-v1.iag-layout-masonry .iag-grid { column-count: var(--iag-col-lg, 3); } }

.iaLayer-gallery-v1.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.iag-layout-masonry .iag-img { aspect-ratio: auto; }

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

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

.iaLayer-gallery-v1 .iag-link:focus-visible {
    outline: 2px solid var(--c-accent, #2563eb);
    outline-offset: 2px;
    border-radius: var(--iag-radius);
}

/* ──────────────────────────────────────────────────────────────────
 * [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[style*="--iag-brief-accent"]  .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 */