/* widgets/cta/cta.css
   CTA-sektion — én stor, blød boks med eyebrow + overskrift + tekst + knap,
   og et valgfrit græs-motiv langs bunden (stedets signatur, ren dekoration).
   Kun var(--token); BEM med -graesmarken-suffix; 0 !important; ingen JS.

   Variant-temaet (is-variant-rolig/accent/inverse) ligger på BOKSEN, så §7's
   descendant-regler (h-tags/links på inverse) virker direkte på indholdet. */

.cta-graesmarken {
    padding-block: var(--section-spacing);
}

/* ---- Boksen ----
   Diagonal signatur-asymmetri (design-stil §2.1): tl+br blødt rundet (lg),
   tr+bl små — én flade pr. komponent; knapperne forbliver symmetriske. */
.cta-graesmarken__box {
    --cta-grass-h: clamp(2.75rem, 6vw, 4.5rem);
    position: relative;
    overflow: hidden;
    border: var(--border-card);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-sm);
    padding: clamp(var(--space-xl), 6vw, var(--space-3xl));
    box-shadow: var(--shadow-sm);
}
.cta-graesmarken__box.is-variant-inverse {
    border-color: transparent;
}
/* Plads til græsset, så tekst/knap aldrig står i stråene. */
.cta-graesmarken__box--grass {
    padding-block-end: calc(clamp(var(--space-xl), 6vw, var(--space-3xl)) + var(--cta-grass-h) * 0.7);
}

/* ---- Stilart: ren (uden boks) ----
   Ingen flade, kant, skygge eller padding — indholdet står direkte på siden.
   Dobbelt selector-led (0,2,0) slår §7's is-variant-baggrund (0,1,0), så
   varianten her KUN bidrager med tekstfarver (brugbart på mørke sektioner). */
.cta-graesmarken .cta-graesmarken__box--bare {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible; /* knap-græsset må stikke ud over kanten */
}

/* ---- Indhold ---- */
.cta-graesmarken__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.cta-graesmarken__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--color-heading);
    text-wrap: balance;
    max-width: var(--measure-tight);
    margin: 0;
}
/* Italic-Lora-accenten (§9.3): tone-trin, aldrig ny kulør. */
.cta-graesmarken__title em {
    font-style: italic;
    font-weight: var(--fw-regular);
    color: var(--color-green-700);
}
.cta-graesmarken__box.is-variant-inverse .cta-graesmarken__title em {
    color: var(--color-green-100);
}
.cta-graesmarken__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-width: var(--measure);
    margin: 0;
}
/* Inverse: dæmp via opacity-trin af den arvede paper-farve (§3.1) — ingen ny farve. */
.cta-graesmarken__box.is-variant-inverse .cta-graesmarken__text {
    color: inherit;
    opacity: 0.85;
}
/* Eyebrow på den mørke flade: mos-trinet i den grønne trappe. */
.cta-graesmarken__box.is-variant-inverse .cta-graesmarken__eyebrow {
    color: var(--color-green-300);
}
.cta-graesmarken__box.is-variant-inverse .cta-graesmarken__eyebrow.eyebrow--with-rule::before {
    background-color: var(--color-green-300);
}

/* ---- Knapper ---- */
.cta-graesmarken__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    margin-top: var(--space-sm);
}
/* Sekundær (outline) knap på inverse: paper-kant via currentColor-chrome (§3),
   hover = byttet-rundt-opskriften (paper flade, mørk tekst). */
.cta-graesmarken__box.is-variant-inverse .btn--secondary {
    color: var(--color-paper);
    border-color: color-mix(in oklab, currentColor 45%, transparent);
}
.cta-graesmarken__box.is-variant-inverse .btn--secondary:hover {
    background-color: var(--color-paper);
    border-color: var(--color-paper);
    color: var(--color-green-900);
}

/* Kontraktens is-align-center: flex-børn flyttes ikke af text-align (jf.
   components.md) — centrér actions og de measure-begrænsede blokke eksplicit. */
.is-align-center .cta-graesmarken__actions {
    justify-content: center;
}
.is-align-center .cta-graesmarken__title,
.is-align-center .cta-graesmarken__text {
    margin-inline: auto;
}

/* ---- Græs-motivet ----
   Rolig silhuet i to lag (opacity-trin i SVG'en). Farven følger varianten via
   tone-trappen; ren dekoration (aria-hidden, pointer-events: none) der kan
   fjernes uden at indholdet bryder (design-stil §2.2). */
.cta-graesmarken__grass {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 0;
    width: 100%;
    height: var(--cta-grass-h);
    display: block;
    pointer-events: none;
    color: var(--color-green-700);
}
.cta-graesmarken__box.is-variant-inverse .cta-graesmarken__grass {
    color: var(--color-green-300);
}

/* ---- Knapformen med græs (ren-stilart) ----
   Knappen ER en af fire håndtegnede SVG'er (knap-{140,200,280,360}.svg i denne
   mappe): afrundet flade + græs-tuer der gror op af overkanten. widget.php
   vælger filen efter knaptekstens længde (nærmeste naturlige bredde), og
   preserveAspectRatio="none" strækker den til knappens faktiske bredde — så
   strækket er minimalt. Teksten er ægte HTML ovenpå (z-index 1); SVG'en er
   dekorativ (aria-hidden, pointer-events: none). Farverne styres HER via
   tokens — hex'erne i SVG-filerne er kun no-CSS-fallback. Selectorerne har et
   ekstra led, så de slår §7's variant-regler på boksen (sidst i filen = vinder
   specificity-uafgjorte). */
.cta-graesmarken__actions .btn.cta-graesmarken__btn--shape {
    position: relative;
    background-color: transparent;
    border-color: transparent;
    margin-top: 2.5em; /* stråene fylder 40/48 af knaphøjden over knappen */
}
/* Hover-løftet (transform) beholdes; flade/skygge hører til SVG-formen. */
.cta-graesmarken__actions .btn.cta-graesmarken__btn--shape:hover {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}
.cta-graesmarken__btn-label {
    position: relative;
    z-index: 1;
}
.cta-graesmarken__btn-shape {
    position: absolute;
    inset: auto 0 0 0;
    height: calc(100% * 88 / 48); /* viewBox er 88 høj; knapfladen (rect) de nederste 48 */
    max-width: none;   /* base-resettens img/svg-max-width må ikke klemme bredden */
    overflow: visible;
    display: block;
    pointer-events: none;
    z-index: 0;
}
/* Strå-tonerne (grøn-trappen) + knapfladen, der følger knappens egne farver. */
.cta-graesmarken__btn-shape .gs-dark  { stroke: var(--color-green-900); }
.cta-graesmarken__btn-shape .gs-mid   { stroke: var(--color-green-700); }
.cta-graesmarken__btn-shape .gs-light { stroke: var(--color-green-300); }
.cta-graesmarken__btn-shape .gs-face {
    fill: var(--color-btn-bg);
    transition: fill var(--dur-base) var(--ease-out);
}
.cta-graesmarken__actions .btn--primary:hover .gs-face {
    fill: var(--color-btn-bg-hover);
}
/* Sekundær (outline): gennemsigtig flade med kant; hover = fyldt (tekstfarven
   skifter via .btn--secondary:hover's egen regel). */
.cta-graesmarken__actions .btn--secondary .gs-face {
    fill: transparent;
    stroke: var(--color-green-700);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.cta-graesmarken__actions .btn--secondary:hover .gs-face {
    fill: var(--color-green-700);
}
/* Inverse-teksttema (mørk baggrund): løft strå-tonerne ét lyst trin, og
   outline-fladen får paper-kant (samme opskrift som boksens sekundær). */
.cta-graesmarken__box--bare.is-variant-inverse .gs-dark  { stroke: var(--color-green-100); }
.cta-graesmarken__box--bare.is-variant-inverse .gs-mid   { stroke: var(--color-green-300); }
.cta-graesmarken__box--bare.is-variant-inverse .gs-light { stroke: var(--color-paper); }
.cta-graesmarken__box--bare.is-variant-inverse .btn--secondary .gs-face { stroke: var(--color-paper); }
.cta-graesmarken__box--bare.is-variant-inverse .btn--secondary:hover .gs-face { fill: var(--color-paper); }