/* =============================================================
   Fakta-kort — .fakta-kort-graesmarken
   Repeater-grid af kort: ren faktaboks (kun tekst) ELLER hele-kort-
   klikbart link. Billede øverst (.card__media) ELLER tekst-over-billede
   med grønt slør. 2–4 kolonner (auto-fit), blødt hover-løft, ingen JS.

   Genbruger delte komponenter: .card (+ __media/__eyebrow/__title/__body),
   .grid/.grid--N, .section-header, .eyebrow, .link-arrow, .container.
   Kun :root-tokens; 0 !important.
   ============================================================= */

/* ---- Sektion ----
   Default lodret rytme. Den fælles Stil-kontrakts is-pad-* (style.css §7,
   loader EFTER denne fil) vinder, så en bygger kan overstyre afstanden. */
.fakta-kort-graesmarken {
    padding-block: var(--section-spacing);
}


/* ---- Grid ----
   Genbruger .grid / .grid--2/--3/--4 (verificeret auto-fit i style.css).
   Her nulstilles kun <ul>-listestilen — selve grid-opsætningen kommer fra .grid. */
.fakta-kort-graesmarken__grid {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fakta-kort-graesmarken__item {
    margin: 0;            /* nulstil base 'li + li'-margin */
    display: flex;        /* lader kortet fylde hele celle-højden (ens høje kort) */
}


/* ---- Kort ----
   Genbruger .card (hvid ø, blødt hover-løft, symmetrisk --radius-lg, reduced-
   motion håndteret i style.css §5b). position:relative bærer hele-kort-link-::after. */
.fakta-kort-graesmarken__card {
    position: relative;
    width: 100%;
}

.fakta-kort-graesmarken__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Nulstil margin på genbrugte typografi-elementer (afstand styres af flex-gap). */
.fakta-kort-graesmarken__eyebrow {
    margin: 0;
}
.fakta-kort-graesmarken__text {
    margin: 0;
}


/* ---- Hele-kort-klikbart link ----
   KUN titlen ligger i <a>; ::after strækker klikfladen over hele kortet
   (jf. components.md "Konventioner"). Pseudoelementet er gennemsigtigt, så
   teksten ses igennem; klik på tekst/pil falder igennem til kort-linket.
   Det dekorative "pil-link" hæves bevidst IKKE — så hele fladen forbliver ét
   klik (skærmlæser annoncerer "Titel, link"). */
.fakta-kort-graesmarken__link {
    color: inherit;
    text-decoration: none;
}
.fakta-kort-graesmarken__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Flyt fokus-ringen fra det inline link til hele kortet via ::after. */
.fakta-kort-graesmarken__link:focus-visible {
    outline: none;
}
.fakta-kort-graesmarken__link:focus-visible::after {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-top-left-radius: var(--radius-tl-lg);
    border-top-right-radius: var(--radius-tr-lg);
    border-bottom-right-radius: var(--radius-br-lg);
    border-bottom-left-radius: var(--radius-bl-lg);
}

/* Diskret "pil-link" — rent dekorativt (aria-hidden); selve klikket er kortet. */
.fakta-kort-graesmarken__more {
    /* arver .link-arrow: inline-flex, grøn, semibold, pil-ikon */
}
.fakta-kort-graesmarken__card:hover .link-arrow__icon {
    transform: translateX(var(--space-2xs));
}


/* ---- Variant: tekst-over-billede (overlay) ----
   Fotoet fylder hele kortet bag teksten; et grøn-tonet scrim (color-mix af
   green-900, §5.1 — aldrig sort) sikrer læsbar lys tekst. isolation:isolate
   indkapsler det negative z-index-lag, så baggrunden bliver i kortet. */
.fakta-kort-graesmarken__card--overlay {
    isolation: isolate;                 /* indkapsl. det negative z-index-lag (fotoet) */
    justify-content: flex-end;          /* .card er flex column → tekstgruppe i bunden */
    aspect-ratio: var(--aspect-card);
    background-color: var(--color-green-900); /* fallback bag fotoet, aldrig hvid blink */
    border-color: transparent;
    /* Ingen overflow:hidden her — fotoet klippes på __bg, og kort-overflow ville
       klippe fokus-ringen (::after med positiv outline-offset). */
}
.fakta-kort-graesmarken__bg {
    position: absolute;
    inset: 0;
    z-index: -1;                         /* bag al in-flow-tekst, men over kort-baggrunden */
    border-radius: inherit;              /* klip fotoet til kortets runde hjørner */
    overflow: hidden;
}
.fakta-kort-graesmarken__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fakta-kort-graesmarken__scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-green-900) var(--fk-overlay, 58%), transparent);
}

/* Lys tekst på scrim + varm grøn text-shadow (§5.1 — aldrig hård sort skygge). */
.fakta-kort-graesmarken__card--overlay .card__title,
.fakta-kort-graesmarken__card--overlay .fakta-kort-graesmarken__text {
    color: var(--color-paper);
    text-shadow: var(--shadow-text);
}
.fakta-kort-graesmarken__card--overlay .fakta-kort-graesmarken__eyebrow {
    color: var(--color-green-100);
    text-shadow: var(--shadow-text);
}
.fakta-kort-graesmarken__card--overlay .fakta-kort-graesmarken__more {
    color: var(--color-paper);
}


/* ---- Justering (kontraktens is-align-center) ----
   Centrér også kort-indholdet, ikke kun løbende tekst. */
.is-align-center .fakta-kort-graesmarken__body {
    align-items: center;
    text-align: center;
}


/* ---- Reduceret bevægelse ----
   .card-løftet og .link-arrow:hover nulstilles allerede i style.css §5b; her
   dæmpes kun vores egen kort-hover-pil-glidning. */
@media (prefers-reduced-motion: reduce) {
    .fakta-kort-graesmarken__card:hover .link-arrow__icon {
        transform: none;
    }
}