/* =====================================================================
 * aka-17-cards.css — Editorial card-system v2 (Fas 0, passivt fundament)
 * ---------------------------------------------------------------------
 * Status: PASSIV. Inga befintliga komponenter använder dessa klasser
 * ännu. Filen laddas globalt (functions.php enqueue), men eftersom
 * inget element har klassnamnen .aka-card--quiet / .aka-card--accent /
 * .aka-card--feature så ändras ingenting visuellt sajten över.
 *
 * Aktiveras i migrationsfas 1+ enligt:
 *   docs/CHANGELOG.md  (entry 2026-05-13 · Design-system v2 · Fas 0)
 *   .cursor/rules/aka-design-modes.mdc
 *
 * VIKTIGT — namnkollision:
 *   .aka-card (utan modifier) är redan deklarerad i
 *   aka-05-shop-divi-builder.css för butikens produktkort. Därför är
 *   varianterna nedan STANDALONE-klasser — applicera ALDRIG
 *   `class="aka-card aka-card--quiet"`. Använd bara modifier-klassen:
 *   `class="aka-card--quiet"` etc.
 *
 * Tokens från aka-01-base-and-design-system.css (Design-system v2).
 * ===================================================================== */

/* --- Quiet: info, referens, disclaimer, sekundärt innehåll ----------- */
.aka-card--quiet {
    background: var(--aka-card-bg-quiet);
    border: 1px solid var(--aka-line);
    border-radius: var(--aka-card-radius-quiet);
    padding: var(--aka-card-pad-quiet);
    box-shadow: var(--aka-card-shadow-quiet);
    color: inherit;
}

/* --- Accent: navigationskort, relations-CTAs, kategori-puffar -------- */
.aka-card--accent {
    background: var(--aka-card-bg);
    border: 1px solid var(--aka-line);
    border-radius: var(--aka-card-radius-accent);
    padding: var(--aka-card-pad-accent);
    box-shadow: var(--aka-card-shadow-accent);
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.aka-card--accent:hover {
    box-shadow: var(--aka-card-shadow-accent-hover);
    transform: translateY(-1px);
}

/* --- Feature: verkliga hjälte-CTAs, hub-toppen, premium-hooks -------- */
/* Max 1 per sektion. Topplinje är tillåten ENDAST här (≤ 2px). */
.aka-card--feature {
    background: var(--aka-card-bg);
    border: 1px solid var(--aka-line);
    border-radius: var(--aka-card-radius-feature);
    padding: var(--aka-card-pad-feature);
    box-shadow: var(--aka-card-shadow-feature);
    color: inherit;
}

/* Färgmarkör-mönster (välj ett per kort, aldrig flera) ---------------- */
/*  .aka-card--accent.is-pillar-care  → vänster 2px bård i pillar-färg
 *  .aka-card--feature.is-pillar-care → topplinje 2px (max) i pillar-färg
 *  Pillar-keys speglar befintliga --color-*: brand|care|food|treat|
 *  disease|anat|social|product|tool|family|research|rights|other      */
.aka-card--accent.is-pillar-brand   { border-left: 2px solid var(--color-brand);   padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-care    { border-left: 2px solid var(--color-care);    padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-food    { border-left: 2px solid var(--color-food);    padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-treat   { border-left: 2px solid var(--color-treat);   padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-disease { border-left: 2px solid var(--color-disease); padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-anat    { border-left: 2px solid var(--color-anat);    padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-social  { border-left: 2px solid var(--color-social);  padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-tool    { border-left: 2px solid var(--color-tool);    padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-family  { border-left: 2px solid var(--color-family);  padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-research{ border-left: 2px solid var(--color-research);padding-left: calc(var(--aka-card-pad-accent) - 1px); }
.aka-card--accent.is-pillar-rights  { border-left: 2px solid var(--color-rights);  padding-left: calc(var(--aka-card-pad-accent) - 1px); }

.aka-card--feature.is-pillar-brand   { border-top: 2px solid var(--color-brand); }
.aka-card--feature.is-pillar-care    { border-top: 2px solid var(--color-care); }
.aka-card--feature.is-pillar-food    { border-top: 2px solid var(--color-food); }
.aka-card--feature.is-pillar-treat   { border-top: 2px solid var(--color-treat); }
.aka-card--feature.is-pillar-disease { border-top: 2px solid var(--color-disease); }
.aka-card--feature.is-pillar-anat    { border-top: 2px solid var(--color-anat); }
.aka-card--feature.is-pillar-social  { border-top: 2px solid var(--color-social); }
.aka-card--feature.is-pillar-tool    { border-top: 2px solid var(--color-tool); }
.aka-card--feature.is-pillar-family  { border-top: 2px solid var(--color-family); }
.aka-card--feature.is-pillar-research{ border-top: 2px solid var(--color-research); }
.aka-card--feature.is-pillar-rights  { border-top: 2px solid var(--color-rights); }

/* Mjuk pillar-bakgrund (endast feature, ersätter topplinje om vald) --- */
.aka-card--feature.is-bg-brand   { background: var(--color-brand-bg); }
.aka-card--feature.is-bg-care    { background: var(--color-care-bg); }
.aka-card--feature.is-bg-food    { background: var(--color-food-bg); }
.aka-card--feature.is-bg-treat   { background: var(--color-treat-bg); }
.aka-card--feature.is-bg-social  { background: var(--color-social-bg); }
.aka-card--feature.is-bg-tool    { background: var(--color-tool-bg); }
.aka-card--feature.is-bg-family  { background: var(--color-family-bg); }
.aka-card--feature.is-bg-research{ background: var(--color-research-bg); }
.aka-card--feature.is-bg-rights  { background: var(--color-rights-bg); }

/* Inre semantiska byggstenar (frivilliga, lågspecificerade) ----------- */
.aka-card--quiet > .aka-card__kicker,
.aka-card--accent > .aka-card__kicker,
.aka-card--feature > .aka-card__kicker {
    display: block;
    font-size: .75rem;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-brand);
    margin: 0 0 .35rem 0;
}

.aka-card--quiet > .aka-card__title,
.aka-card--accent > .aka-card__title,
.aka-card--feature > .aka-card__title {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 .35rem 0;
}
.aka-card--feature > .aka-card__title {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.aka-card--quiet > .aka-card__lead,
.aka-card--accent > .aka-card__lead,
.aka-card--feature > .aka-card__lead {
    margin: 0 0 .75rem 0;
    color: #4a4a45;
    line-height: 1.5;
}

.aka-card--quiet > .aka-card__cta,
.aka-card--accent > .aka-card__cta,
.aka-card--feature > .aka-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-brand);
}
.aka-card--quiet > .aka-card__cta:hover,
.aka-card--accent > .aka-card__cta:hover,
.aka-card--feature > .aka-card__cta:hover {
    text-decoration: underline;
}

/* Lista som ersätter perfekta 3-kol-grids (Nästa steg, Mer stöd, m.fl.) */
/* Användning: <ul class="aka-list-editorial">…</ul> eller liknande.    */
.aka-list-editorial {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aka-list-editorial > li {
    border-top: 1px solid var(--aka-line);
    padding: 14px 4px;
}
.aka-list-editorial > li:last-child {
    border-bottom: 1px solid var(--aka-line);
}
.aka-list-editorial > li > a {
    display: grid;
    grid-template-columns: 28px 1fr 16px;
    gap: 12px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}
.aka-list-editorial > li > a:hover {
    background: var(--aka-card-bg-quiet);
}
.aka-list-editorial .aka-list-editorial__ico {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: var(--color-brand);
}
.aka-list-editorial .aka-list-editorial__title {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-brand);
}
.aka-list-editorial .aka-list-editorial__lead {
    grid-column: 2 / 3;
    font-size: .95rem;
    color: #555;
    margin: .15rem 0 0 0;
    line-height: 1.45;
}
.aka-list-editorial .aka-list-editorial__chevron {
    align-self: center;
    color: #999;
}