/* [IRIDIAN AI LAYER 2026-05-27 · reescrit MODULS-B · GE 2026-09-25] Accordion wrapper IA Layer
   v1 — CSS scopejat sota .iaLayer-accordion-v1. Tokens locals --iaa-* per a presentació; els
   tokens --iag-brief-* són cross-mòdul (compartits amb Gallery i futurs Tabs/Form/Slider) i es
   consumeixen com a variable de configuració del mòdul (capa Mòdul, com --ip- i --fi-, §1.1
   SPEC_MODULS_B.md), amb reserva a un token del core — mai dins d'un color-mix(), perquè la
   llista de receptes de §1.1 és tancada i només admet currentColor/--bs-dark/--bs-primary com a
   color mesclat.

   Variants: acc_density (compact/normal/spacious), acc_dividers (none/subtle/strong),
   acc_marker (chevron/plus/arrow), acc_animation (slide/fade/none).
   Variants per plantilla: .iaa-variant-<slug> (lp45, st184, base) — vegeu el bloc
   BEGIN_IA_VARIANTS/END_IA_VARIANTS més avall: és APPEND-ONLY del generador
   (iailayer_css_append_ia_variant) i GE no l'ha tocat (§2.1: GE és propietari del fitxer, però
   el contingut d'aquell bloc és per-instal·lació/per-pàgina, no plantilla core).

   [MODULS-B · GE 2026-09-25] Fase 1 = només core: --iaa-radius/--iaa-gap/--iaa-padding-*
   ara referencien var(--ial-r-md)/var(--space-2xs)/var(--space-xs)/var(--space-s);
   --iaa-transition usa var(--ial-t-base); les receptes color-mix() són les tancades de §1.1
   (5/8/14/72% de currentColor). S'afegeix la guarda de moviment reduït (§1.6).
*/

.iaLayer-accordion-v1 {
    /* Tokens locals — defaults del core (fase 1) */
    --iaa-radius: var(--ial-r-md);
    --iaa-divider: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    --iaa-gap: var(--space-2xs);
    --iaa-padding-y: var(--space-xs);
    --iaa-padding-x: var(--space-s);
    --iaa-summary-bg: transparent;
    --iaa-summary-bg-hover: color-mix(in srgb, currentColor 8%, transparent);
    --iaa-summary-bg-open: color-mix(in srgb, currentColor 5%, transparent);
    /* [3B] = 3 % del .card-header de Bootstrap 4 (el twig el porta) amb la convenció del mòdul (currentColor); el «clean» el posa a transparent via token. */
    --iaa-summary-bg-rest: color-mix(in srgb, currentColor 3%, transparent);
    --iaa-accent: currentColor;
    --iaa-marker-size: 1em;
    --iaa-transition: var(--ial-t-base);

    display: block;
    color: inherit;
    font: inherit;
    /* [MODULS-B · FINE-1 · P0-8] L'arrel real de l'acordió és un <section> (accordion.html:22),
       que hereta `section{padding-top/padding-bottom: var(--ial-sp-7,48px)}` (32 a ≤767,
       main.css:106-116). Aquest fitxer no ho reseteja des de l'origen (a diferència de
       gallery.css:29, `padding:0`), i el bloc guanya +48/+32 px amunt i avall que no li
       pertanyen. (0,1,0), guanya trivialment l'element sol `section` (0,0,1). */
    padding-block: 0;
}

.iaLayer-accordion-v1 :where(.iaa-list) {
    display: flex;
    flex-direction: column;
    gap: var(--iaa-gap);
}

.iaLayer-accordion-v1 :where(.iaa-item) {
    border-radius: var(--iaa-radius);
    overflow: clip;
    background: var(--iaa-summary-bg);
    border: solid color-mix(in srgb, currentColor 14%, transparent);
    /* [J6 · io_variant] Gruix per costat via tokens de la peça (fallback = 1px de sempre: zero canvi). */
    border-width: var(--iaa-edge-t, 1px) var(--iaa-edge-x, 1px) var(--iaa-edge-b, 1px);
}

/* ── [J6 · io_variant] Peça pròpia (.iaa-item), mai l'arrel (l'acordió conté altres mòduls) ──
   boxed = aspecte d'avui, explícit (core_default). clean = sense caixa: sense vora lateral/superior
   ni radi; només el divisor inferior (--iaa-edge-b, 1px) separa ítems. Les regles [data-io-*]
   només declaren custom properties --iaa-* (T4 IOC-K). */
.iaLayer-accordion-v1:where([data-io-variant="boxed"]) :where(.iaa-item) {
    --iaa-radius: var(--ial-r-md);
    --iaa-edge-t: 1px;
    --iaa-edge-x: 1px;
    --iaa-edge-b: 1px;
}
.iaLayer-accordion-v1:where([data-io-variant="clean"]) :where(.iaa-item) {
    --iaa-radius: 0;
    --iaa-edge-t: 0;
    --iaa-edge-x: 0;
    --iaa-summary-bg-rest: transparent;
    --iaa-summary-bg-open: transparent;
    --iaa-summary-bg-open-hover: var(--iaa-summary-bg-hover);
}

.iaLayer-accordion-v1 :where(.iaa-summary) {
    list-style: none;
    cursor: pointer;
    padding: var(--iaa-padding-y) var(--iaa-padding-x);
    user-select: none;
    background-color: var(--iaa-summary-bg-rest);
    transition: background-color var(--iaa-transition);
}
.iaLayer-accordion-v1 :where(.iaa-summary)::-webkit-details-marker { display: none; }
.iaLayer-accordion-v1 :where(.iaa-summary)::marker { display: none; }
.iaLayer-accordion-v1 :where(.iaa-summary:hover) { background-color: var(--iaa-summary-bg-hover); }
.iaLayer-accordion-v1 :where(.iaa-item[open] > .iaa-summary) { background-color: var(--iaa-summary-bg-open); }
.iaLayer-accordion-v1 :where(.iaa-item[open] > .iaa-summary:hover) { background-color: var(--iaa-summary-bg-open-hover, var(--iaa-summary-bg-open)); }
.iaLayer-accordion-v1 :where(.iaa-summary:focus-visible) {
    outline: 2px solid var(--iaa-accent);
    outline-offset: -2px;
}

.iaLayer-accordion-v1 :where(.iaa-title) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.iaLayer-accordion-v1 :where(.iaa-label) { flex: 1 1 auto; }
.iaLayer-accordion-v1 :where(.iaa-icon) {
    flex: 0 0 auto;
    inline-size: var(--iaa-marker-size);
    block-size: var(--iaa-marker-size);
    display: inline-block;
    background-color: currentColor;
    transition: transform var(--iaa-transition);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* [MODULS-B · GE, Xavi 25/09 punt 1] El .content-text quedava enganxat al summary en
   desplegar (sense padding superior). Espai coherent amb el cos «obert» del panell: el mateix
   --iaa-padding-y que ja separa el summary del cos per baix. */
.iaLayer-accordion-v1 :where(.iaa-body) {
    padding: var(--iaa-padding-y) var(--iaa-padding-x) var(--iaa-padding-y);
}

/* ── Marcador (icone +/chevron/arrow) — màscares SVG inline, currentColor ────────────── */
.iaLayer-accordion-v1.iaa-marker-chevron :where(.iaa-icon) {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M16.6 8.6L12 13.2 7.4 8.6 6 10l6 6 6-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M16.6 8.6L12 13.2 7.4 8.6 6 10l6 6 6-6z'/%3E%3C/svg%3E");
}
.iaLayer-accordion-v1.iaa-marker-plus :where(.iaa-icon) {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
}
.iaLayer-accordion-v1.iaa-marker-arrow :where(.iaa-icon) {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9 5l7 7-7 7'  stroke='currentColor' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7'  stroke='currentColor' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}
.iaLayer-accordion-v1.iaa-marker-arrow :where(.iaa-item[open] > .iaa-summary .iaa-icon) { transform: rotate(90deg); }
.iaLayer-accordion-v1.iaa-marker-chevron :where(.iaa-item[open] > .iaa-summary .iaa-icon) { transform: rotate(180deg); }
.iaLayer-accordion-v1.iaa-marker-plus :where(.iaa-item[open] > .iaa-summary .iaa-icon) { transform: rotate(45deg); }

/* ── Densitat ───────────────────────────────────────────────────────────
   [J6 · io_density] L'arrel porta SEMPRE .iaa-density-<x> (accordion.html), (0,2,0): un
   [data-io-density] de (0,1,0) mai no el guanyaria. Les 3 classes passen a :where() (0,1,0, el
   mateix resultat computat: cap altra regla de l'acordió declara aquests tokens amb (0,1,0)) i
   `compact` va l'ÚLTIM, unit a [data-io-density="compact"]: l'opció d'instància guanya la classe
   IA (normal/spacious) per ordre de font. */
.iaLayer-accordion-v1:where(.iaa-density-normal)   { --iaa-padding-y: var(--space-xs); --iaa-gap: var(--space-2xs); }
.iaLayer-accordion-v1:where(.iaa-density-spacious) { --iaa-padding-y: var(--space-s); --iaa-gap: var(--space-xs); }
.iaLayer-accordion-v1:where(.iaa-density-compact,[data-io-density="compact"]) { --iaa-padding-y: var(--space-2xs); --iaa-gap: var(--space-3xs); }

/* ── Dividers ─────────────────────────────────────────────────────────── */
.iaLayer-accordion-v1.iaa-dividers-none :where(.iaa-item) { border-color: transparent; }
.iaLayer-accordion-v1.iaa-dividers-strong :where(.iaa-item) { border-color: color-mix(in srgb, currentColor 72%, transparent); }

/* ── Animacions ────────────────────────────────────────────────────────── */
.iaLayer-accordion-v1.iaa-anim-slide :where(.iaa-body)  { transition: max-height var(--iaa-transition), padding var(--iaa-transition); }
.iaLayer-accordion-v1.iaa-anim-fade :where(.iaa-body)   { transition: opacity var(--iaa-transition); }
.iaLayer-accordion-v1.iaa-anim-none :where(.iaa-icon)   { transition: none; }
.iaLayer-accordion-v1.iaa-anim-none :where(.iaa-summary) { transition: none; }

/* ──────────────────────────────────────────────────────────────────
 * [DESIGN BRIEF HOOK] (GE 2026-09-25: --iag-brief-* és una variable de configuració del mòdul,
 * es consumeix amb reserva a un token del core i MAI dins d'un color-mix() — la llista de
 * receptes de §1.1 és tancada. S'ha tret l'override de background amb l'accent del brief perquè
 * no hi ha cap recepta tancada que l'admeti; l'estat obert conserva la recepta per defecte
 * (--iaa-summary-bg-open). Es conserva l'outline de focus amb l'accent del brief, que és un
 * var() directe, no un color-mix().)
 * Si rep --iag-brief-* inline (via accordion.php → iailayer_design_brief_to_css_vars),
 * sobreescriuen els defaults d'aquest mòdul SENSE haver de canviar el twig.
 * Cross-mòdul: el namespace --iag-brief-* és compartit amb Gallery i futurs.
 * ────────────────────────────────────────────────────────────────── */
.iaLayer-accordion-v1[style*="--iag-brief-radius"] { --iaa-radius: var(--iag-brief-radius); }
.iaLayer-accordion-v1[style*="--iag-brief-gap"] { --iaa-gap: var(--iag-brief-gap); }
.iaLayer-accordion-v1[style*="--iag-brief-accent"] { --iaa-accent: var(--iag-brief-accent); }
.iaLayer-accordion-v1[style*="--iag-brief-accent"] :where(.iaa-summary:focus-visible) { outline-color: var(--iaa-accent); }

/* ──────────────────────────────────────────────────────────────────
 * Moviment reduït (§1.6) — cobreix les transicions declarades més amunt.
 * ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .iaLayer-accordion-v1 :where(.iaa-summary),
  .iaLayer-accordion-v1 :where(.iaa-icon),
  .iaLayer-accordion-v1.iaa-anim-slide :where(.iaa-body),
  .iaLayer-accordion-v1.iaa-anim-fade :where(.iaa-body) { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────
 * [SCOPE VARIANTS PER PLANTILLA — generats per IA / per B3 apply]
 * Patró: `.iaLayer-accordion-v1.iaa-variant-<slug> { ... }`.
 * REGLA D'OR: NO modificar selectors fora del scope. Tot override viu DINS
 * dels marcadors. APPEND-ONLY pel generador (iailayer_css_append_ia_variant).
 * ────────────────────────────────────────────────────────────────── */

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

/* @variant lp45 */
.iaLayer-accordion-v1.iaa-variant-lp45 {
  --iaa-radius: 16px;
  --iaa-gap: 28px;
  --iaa-accent: #e67a00;
  color: #1d1d1f;
}
.iaLayer-accordion-v1.iaa-variant-lp45 .iaa-item[open] > .iaa-summary { background: color-mix(in srgb, #e67a00 12%, transparent); }
.iaLayer-accordion-v1.iaa-variant-lp45 .iaa-summary:focus-visible { outline: 2px solid #e67a00; outline-offset: -2px; }
.iaLayer-accordion-v1.iaa-variant-lp45 .iaa-summary:hover { background: #e8f1fb; }
.iaLayer-accordion-v1.iaa-variant-lp45 .iaa-item { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
/* @end-variant lp45 */
/* /END_IA_VARIANTS */