/* Article — long-form article layout in a 672px centered column. The wrapper
   block (acf/article) renders the section + column; content is composed of
   the article-* module blocks (text, notice, number grid, steps, cards,
   checklist) via InnerBlocks. All module styles live here, keyed off
   .article-block__module classes, so the modules need no own stylesheets.

   Values come from Figma node 2848:974. Legacy dist/styles/index.css styles
   bare h2/h3/h4/p with !important (black headings, uppercase h4, p 16px/18px),
   so color/size/margin/transform declarations here carry !important to win —
   same approach as .circla-heading in style.css. */

/* Tokens are defined on the modules too (not just the wrapper) so a module
   rendered standalone — e.g. the inserter hover preview — keeps its colors. */
.article-block,
.article-block__module {
    /* Design tokens (Figma) */
    --article-ink: #161616;                     /* body text (UI/UI Black) */
    --article-heading: #2c3536;                 /* h2/h3/h4 */
    --article-green: #688d78;                   /* number circles, checks (NyaCirclagrön) */
    --article-green-dark: #233129;              /* dark box bg, box emphasis text */
    --article-green-light: #f3f8ea;             /* summary / green info box bg */
    --article-badge-green: #e9f9ce;             /* badge pills */
    --article-border: #e5e5e4;                  /* box/card borders (UI/Light Grey) */
    --article-radius: 16px;
    --article-gap-chapter: 64px;                /* before an h2-led module */
    --article-gap-section: 40px;                /* default gap between modules */
    --article-font-heading: "Neue Augenblick Bold", "Neue Augenblick", sans-serif;

}

.article-block {
    background-color: #fff;
    padding: 64px 0 88px;
}

/* 672px content column (Figma: 1264 container − 2×296 indent), 32px gutter. */
.article-block__inner {
    max-width: 736px; /* 672 + 2×32 gutter */
    margin: 0 auto;
    padding: 0 32px;
}

/* -------------------------------------------------------------------------
 * Module spacing.
 * Default 40px between modules; 64px before a module that starts a new
 * chapter (leads with an h2); tighter gaps where a box/grid directly
 * follows its heading/intro text (values from Figma auto-layout gaps).
 * :has() is progressive enhancement — without it chapters fall back to 40px.
 * ---------------------------------------------------------------------- */
.article-block__module + .article-block__module {
    margin-top: var(--article-gap-section);
}

.article-block__module + .article-block__module:has(> h2:first-child) {
    margin-top: var(--article-gap-chapter);
}

/* "Kort sagt"-style green box (no icon) hugs its intro text; cards hug their
   heading; a notice right after the cards grid hugs it too (Figma gaps). */
.article-block__text + .article-block__notice--green:not(.article-block__notice--has-icon),
.article-block__text + .article-block__cards,
.article-block__cards + .article-block__notice {
    margin-top: 16px;
}

.article-block__text + .article-block__ngrid,
.article-block__text + .article-block__checklist {
    margin-top: 24px;
}

/* Editor only: InnerBlocks wraps every module in a .wp-block div, so the
   sibling rules above can't match there — approximate the rhythm instead. */
.block-editor-block-list__layout .wp-block[data-type^="acf/article-"] + .wp-block[data-type^="acf/article-"] {
    margin-top: var(--article-gap-section, 40px);
}

/* -------------------------------------------------------------------------
 * Text module (wysiwyg: h2, h3, p, strong, links).
 * ---------------------------------------------------------------------- */
.article-block__text h2 {
    margin: 0 0 8px !important;
    font-family: var(--article-font-heading) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 40px !important;
    color: var(--article-heading) !important;
}

.article-block__text h2:not(:first-child) {
    margin-top: var(--article-gap-chapter) !important;
}

.article-block__text h3 {
    margin: 0 0 8px !important;
    font-family: var(--article-font-heading) !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 25px !important;
    color: var(--article-heading) !important;
}

.article-block__text h3:not(:first-child) {
    margin-top: var(--article-gap-section) !important;
}

.article-block__text p {
    margin: 0 0 10px;
    font-family: "Open Sans";
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--article-ink);
}

.article-block__text p:last-child {
    margin-bottom: 0;
}

/* Lede: the paragraph right after the article's very first h2 is set larger
   and semibold (Figma: Open Sans Semibold 18/26). Automatic — no field. */
.article-block__inner > .article-block__text:first-child > h2:first-child + p {
    font-size: 18px !important;
    font-weight: 600;
    line-height: 26px !important;
}

.article-block__text a {
    color: var(--article-green-dark);
}

/* -------------------------------------------------------------------------
 * Notice box — one module, three styles:
 *   --green  light green (e.g. "Kort sagt" / "Viktigt")
 *   --white  white with border
 *   --dark   dark green with badge pill (e.g. "Nyhet 2026")
 * Green/white can add an info icon (--has-icon).
 * ---------------------------------------------------------------------- */
.article-block__notice {
    border-radius: var(--article-radius);
}

.article-block__notice--green {
    background-color: var(--article-green-light);
    padding: 24px 28px;
}

.article-block__notice--white {
    background-color: #fff;
    border: 1px solid var(--article-border);
    padding: 25px;
}

.article-block__notice--dark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background-color: var(--article-green-dark);
    padding: 24px;
}

.article-block__notice--has-icon {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.article-block__box-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px; /* optical alignment with the first text line (Figma pt-1) */
}

.article-block__notice-body {
    min-width: 0;
}

.article-block__notice-body p {
    margin: 0 0 10px;
    font-family: "Open Sans";
    font-size: 15px !important;
    line-height: 24px !important;
    color: var(--article-ink);
}

.article-block__notice-body p:last-child {
    margin-bottom: 0;
}

/* Green text is all dark green (incl. its bold prefix); without the icon it
   is the larger "Kort sagt" variant (16px, Figma 2848:984). */
.article-block__notice--green .article-block__notice-body p {
    color: var(--article-green-dark);
}

.article-block__notice--green:not(.article-block__notice--has-icon) .article-block__notice-body p {
    font-size: 16px !important;
}

.article-block__notice--dark .article-block__notice-body p {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.article-block__notice-badge {
    display: inline-block;
    background-color: var(--article-badge-green);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--article-font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 19.2px;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--article-green-dark);
}

/* -------------------------------------------------------------------------
 * Shared number circle (numbered grid + steps). Auto-numbered in PHP.
 * ---------------------------------------------------------------------- */
.article-block__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--article-green);
    border-radius: 16px;
    font-family: var(--article-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #fff;
}

/* -------------------------------------------------------------------------
 * Numbered grid — 3 columns of number + short text.
 * ---------------------------------------------------------------------- */
.article-block__ngrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-block__ngrid-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 8px 10px 0;
}

.article-block__ngrid-text {
    margin: 0;
    font-family: "Open Sans";
    font-size: 14px !important;
    line-height: 22px !important;
    color: var(--article-ink);
}

/* -------------------------------------------------------------------------
 * Numbered steps — full-width vertical list, number + title + rich text.
 * ---------------------------------------------------------------------- */
.article-block__steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-block__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 8px 8px 0;
}

.article-block__step-title {
    margin: 0 !important; /* beat the legacy h3 margin-top:38px on mobile */
    font-family: var(--article-font-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 25px !important;
    color: var(--article-ink) !important;
}

.article-block__step-text p {
    margin: 0 0 10px;
    font-family: "Open Sans";
    font-size: 14px !important;
    line-height: 22px !important;
    color: var(--article-ink);
}

.article-block__step-text p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Comparison cards — 2-column grid of badge + title + text cards.
 * ---------------------------------------------------------------------- */
.article-block__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.article-block__card {
    background-color: #fff;
    border: 1px solid var(--article-border);
    border-radius: var(--article-radius);
    padding: 24px;
}

.article-block__card--highlight {
    background-color: rgba(243, 248, 234, 0.3);
}

.article-block__card-badge {
    display: inline-block;
    background-color: #f6f6f6;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--article-font-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 18.2px;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: #767676;
}

.article-block__card--highlight .article-block__card-badge {
    background-color: var(--article-badge-green);
    color: var(--article-green-dark);
}

.article-block__card-title {
    margin: 17px 0 10px !important;
    font-family: var(--article-font-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 26.25px !important;
    color: var(--article-heading) !important;
    text-transform: none !important; /* legacy h4 is uppercase !important */
}

.article-block__card-text p {
    margin: 0 0 10px;
    font-family: "Open Sans";
    font-size: 14px !important;
    line-height: 22px !important;
    color: var(--article-ink);
}

.article-block__card-text p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Checklist — check icon + text rows.
 * ---------------------------------------------------------------------- */
.article-block__checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-block__checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: "Open Sans";
    font-size: 15px;
    line-height: 22.5px;
    color: var(--article-ink);
}

.article-block__check-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 4px; /* optical alignment with the first text line (Figma pt-4) */
}

/* Editor-only placeholder when a module has no content yet. Hard values —
   it can render outside any token scope. */
.article-block__placeholder {
    margin: 0;
    font-family: "Open Sans";
    font-size: 15px !important;
    color: #767676;
    text-align: center;
    padding: 24px;
    border: 1px dashed #e5e5e4;
    border-radius: 16px;
}

/* -------------------------------------------------------------------------
 * Mobile. The design only ships desktop; breakpoints follow the theme's
 * other blocks (16px gutter + tighter rhythm ≤768, grids collapse).
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
    .article-block {
        padding: 40px 0 56px;
        --article-gap-chapter: 48px;
        --article-gap-section: 32px;
    }
    .article-block__inner {
        padding: 0 15px;
    }
    .article-block__text h2 {
        font-size: 28px !important; /* legacy sets bare h2 32px !important ≤680 */
        line-height: 34px !important;
    }
    .article-block__text p {
        /* legacy bumps bare p to 18px !important ≤680 — keep the article at 16 */
        font-size: 16px !important;
    }
    .article-block__cards {
        grid-template-columns: 1fr;
    }
    .article-block__ngrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .article-block__ngrid {
        grid-template-columns: 1fr;
    }
}