/**
 * Blog article reading system (single educational posts only).
 *
 * Enqueued by inc/blog-article.php. Pairs with lars_blog_article_normalize(),
 * which strips pasted inline styles so these rules own the article: one
 * heading scale, the site cost table (.service-area-table) for every data
 * table, stacked table cards on phones, and site-red callouts.
 *
 * Selectors are prefixed with .lars-semantic-article so they outrank the
 * Customizer's Additional CSS, which prints after theme stylesheets.
 */

/* ---------- Column ---------- */

.lars-semantic-article .blog-details-article-info > :first-child {
    margin-top: 0;
}

.lars-semantic-article .blog-details-article-info ::selection {
    background: #F6F1EA;
    color: #000;
}

/* ---------- Headings ---------- */

.lars-semantic-article .blog-details-article-info h2 {
    margin: clamp(48px, 4.4vw, 80px) 0 16px;
    color: #000;
    font-size: var(--lars-h2-md);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: left;
    text-wrap: balance;
}

.lars-semantic-article .blog-details-article-info h2::before {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    margin: 0 0 18px;
    background: var(--lars-red);
}

.lars-semantic-article .blog-details-article-info h3,
.lars-semantic-article .blog-details-article-info h2.lars-semantic-heading-visual-h3 {
    margin: clamp(32px, 2.8vw, 48px) 0 12px;
    color: #000;
    font-size: var(--lars-h3);
    font-weight: 500;
    line-height: var(--lars-h3-lh);
    letter-spacing: 0;
    text-align: left;
    text-wrap: balance;
}

.lars-semantic-article .blog-details-article-info h2.lars-semantic-heading-visual-h3::before {
    display: none;
}

.lars-semantic-article .blog-details-article-info h4 {
    margin: 28px 0 8px;
    font-size: var(--lars-body);
    font-weight: 700;
    line-height: 1.5;
}

.lars-semantic-article .blog-details-article-info :is(h2, h3, h4) :is(strong, b) {
    font-weight: inherit;
}

/* ---------- Data tables (mirrors .service-area-table) ---------- */

.lars-semantic-article .blog-details-article-info .blog-table-scroll {
    margin: 28px 0 36px;
}

.lars-semantic-article .blog-details-article-info table.lars-article-table {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-family: "Noto Sans", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

.lars-semantic-article .blog-details-article-info .lars-article-table :is(thead, tbody, tr) {
    border: 0;
}

.lars-semantic-article .blog-details-article-info .lars-article-table caption {
    caption-side: top;
    padding: 0 0 10px;
    color: var(--lars-red);
    font-size: var(--lars-eyebrow);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.14em;
    text-align: left;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-article-table caption :is(strong, b, em) {
    font: inherit;
}

.lars-semantic-article .blog-details-article-info .lars-article-table :is(th, td) {
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid rgba(15, 15, 15, 0.1);
    background: #fff;
    color: #000;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: var(--lars-body-sm);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.lars-semantic-article .blog-details-article-info .lars-article-table :is(th, td) + :is(th, td) {
    border-left: 6px solid #fff;
}

.lars-semantic-article .blog-details-article-info .lars-article-table thead th {
    border-bottom: 6px solid #fff;
    background: #0f0f0f;
    color: #fff;
    font-size: var(--lars-eyebrow);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-article-table thead th:nth-child(2),
.lars-semantic-article .blog-details-article-info .lars-article-table thead th:nth-child(5) {
    background: #a11d20;
}

.lars-semantic-article .blog-details-article-info .lars-article-table thead th:nth-child(3) {
    background: #3b2c2b;
}

.lars-semantic-article .blog-details-article-info .lars-article-table thead th:nth-child(4) {
    background: #6b2324;
}

.lars-semantic-article .blog-details-article-info .lars-article-table tbody th {
    font-weight: 600;
}

.lars-semantic-article .blog-details-article-info .lars-article-table tbody th > a:not(:only-child) {
    display: block;
    margin-top: 4px;
    color: #555;
    font-size: var(--lars-caption);
    font-weight: 300;
}

.lars-semantic-article .blog-details-article-info .lars-article-table :is(th, td) :is(strong, b) {
    font-weight: 600;
}

.lars-semantic-article .blog-details-article-info .lars-article-table a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lars-semantic-article .blog-details-article-info .lars-article-table a:hover {
    color: var(--lars-red);
}

.lars-semantic-article .blog-details-article-info .lars-article-table :is(p, ul) {
    margin: 0;
    font-size: inherit;
}

.lars-semantic-article .blog-details-article-info .lars-article-table tbody tr:nth-child(even) > * {
    background: #f7f3ec;
}

.lars-semantic-article .blog-details-article-info .lars-article-table tbody tr:last-child > * {
    border-bottom: 2px solid var(--lars-red);
}

/* Phones: each row becomes a card so every price tier is visible. */
@media (max-width: 767px) {
    .lars-semantic-article .blog-details-article-info .blog-table-scroll {
        margin: 24px 0 32px;
        overflow: visible;
    }

    .lars-semantic-article .blog-details-article-info table.lars-article-table,
    .lars-semantic-article .blog-details-article-info .lars-article-table :is(caption, tbody, tr, th, td) {
        display: block;
        width: auto;
        min-width: 0;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table tbody tr {
        margin: 0 0 16px;
        border-bottom: 2px solid var(--lars-red);
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table tbody tr:nth-child(n) > * {
        border-left: 0;
        border-bottom: 1px solid rgba(15, 15, 15, 0.1);
        background: #fff;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table tbody tr:nth-child(n) > *:last-child {
        border-bottom: 0;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table tbody tr:nth-child(n) > th {
        padding: 12px 16px;
        background: #0f0f0f;
        color: #fff;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table tbody th > a:not(:only-child) {
        color: #d4d4d4;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table td {
        display: grid;
        grid-template-columns: minmax(88px, 40%) minmax(0, 1fr);
        gap: 12px;
        padding: 12px 16px;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table tbody tr:nth-child(n) > td:nth-child(odd) {
        background: #f7f3ec;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table td::before {
        content: attr(data-label);
        color: var(--lars-red);
        font-size: var(--lars-micro);
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table td[data-label=""] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lars-semantic-article .blog-details-article-info .lars-article-table td[data-label=""]::before {
        display: none;
    }
}

/* ---------- Key takeaways ---------- */

.lars-semantic-article .blog-details-article-info .lars-key-takeaways {
    margin: 32px 0 40px;
    padding: 24px 28px 10px;
    border-left: 4px solid var(--lars-red);
    background: #F6F1EA;
}

.lars-semantic-article .blog-details-article-info .lars-key-takeaways > :is(h2, h3, p):first-child {
    margin: 0 0 14px;
    color: var(--lars-red);
    font-size: var(--lars-eyebrow);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-key-takeaways > :is(h2, h3):first-child::before {
    display: none;
}

.lars-semantic-article .blog-details-article-info .lars-key-takeaways ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lars-semantic-article .blog-details-article-info .lars-key-takeaways li {
    position: relative;
    margin: 0 0 14px;
    padding: 0 0 0 20px;
    line-height: 1.6;
}

.lars-semantic-article .blog-details-article-info .lars-key-takeaways li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--lars-red);
}

/* ---------- Case-study cards and quotations ---------- */

.lars-semantic-article .blog-details-article-info .lars-case-heading--h2 {
    margin: 4px 0 8px;
    color: #000;
    font-size: var(--lars-h3-sm);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-case-heading--h2::before {
    display: none;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__band {
    padding: 18px 24px;
    border-left: 4px solid var(--lars-red);
    background: #0f0f0f;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__band p {
    margin: 0 0 4px;
}

.lars-semantic-article .blog-details-article-info .lars-case-heading--h3 {
    margin: 0;
    color: #fff;
    font-size: var(--lars-body);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-semantic-quote-scroll {
    margin: 32px 0;
    overflow: visible;
}

.lars-semantic-article .blog-details-article-info .lars-semantic-quote-scroll > .lars-semantic-pullquote {
    display: block;
    width: auto;
    min-width: 0;
    margin: 0;
    border-left: 4px solid var(--lars-red);
    background: #F6F1EA;
}

.lars-semantic-article .blog-details-article-info .lars-semantic-pullquote__cell {
    display: block;
    padding: 28px 32px 24px;
}

.lars-semantic-article .blog-details-article-info .lars-semantic-pullquote__quote {
    margin: 0 0 18px;
    color: #1a1a1a;
    font-family: Georgia, serif;
    font-size: max(22px, var(--lars-quote));
    font-style: italic;
    font-weight: 400;
    line-height: 1.65;
}

.lars-semantic-article .blog-details-article-info .lars-case-accent {
    color: var(--lars-red);
}

.lars-semantic-article .blog-details-article-info .lars-semantic-pullquote__cite {
    display: block;
    margin: 0;
    color: #444;
    font-size: var(--lars-eyebrow);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Class-based case-study markup (docs/templates/case-study-template.html).
   Values mirror what the legacy inline-styled blocks rendered on 2026-10-30. */

.lars-semantic-article .blog-details-article-info .lars-case-card {
    margin: 0 0 32px;
    border: 1px solid #e6ded2;
    border-left: 4px solid var(--lars-red);
    background: #F6F1EA;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__head {
    padding: 28px 32px 24px;
    border-bottom: 1px solid #e6ded2;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__label,
.lars-semantic-article .blog-details-article-info .lars-case-card__band-label {
    margin: 0 0 14px;
    color: var(--lars-red);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__band-label {
    margin: 0 0 4px;
    color: #ef8d90;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__band .lars-case-card__band-title {
    margin: 0;
    color: #fff;
    font-size: var(--lars-body);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__project {
    margin: 0;
    color: #2b2b2b;
    font-family: Georgia, serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.04em;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: #fff;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__stat {
    display: flex;
    flex: 1 1 140px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 20px 22px;
    border-right: 1px solid #e6ded2;
    border-bottom: 1px solid #e6ded2;
    text-align: center;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__stat:last-child {
    border-right: 0;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__stat :where(p) {
    margin: 0;
    line-height: 1.5;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__value {
    margin: 0 0 6px;
    color: var(--lars-red);
    font-size: 34px;
    font-weight: 700;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__stat .lars-case-card__value {
    margin-bottom: 6px;
    line-height: 1;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__stat .lars-case-card__value--word {
    font-size: 22px;
    letter-spacing: -0.01em;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__stat .lars-case-card__unit {
    margin-bottom: 2px;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-case-card__note {
    color: #595959;
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: italic;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey {
    margin: 0 0 32px;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__row {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 24px 22px;
    border: 1px solid #e6ded2;
    border-top: 0;
    background: #fff;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__rows > .lars-case-journey__row:nth-child(even) {
    background: #F6F1EA;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__when,
.lars-semantic-article .blog-details-article-info .lars-case-journey__phase {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 110px;
    padding-right: 20px;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__phase {
    width: 160px;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__what {
    flex: 1 1 200px;
    min-width: 200px;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__row p {
    margin: 0;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__row .lars-case-journey__key {
    margin-bottom: 8px;
    color: #595959;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__date {
    color: var(--lars-red);
    font-size: var(--lars-body);
    font-weight: 700;
    line-height: 1.2;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__phase-name {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.lars-semantic-article .blog-details-article-info .lars-case-journey__what > p:not(.lars-case-journey__key) {
    color: #2b2b2b;
    font-size: 15px;
    line-height: 1.65;
}

@media (max-width: 767px) {
    .lars-semantic-article .blog-details-article-info .lars-semantic-quote-scroll > .lars-semantic-pullquote {
        min-width: 0;
    }

    .lars-semantic-article .blog-details-article-info .lars-semantic-pullquote__cell {
        padding: 22px 20px 18px;
    }
}

/* ---------- Captions and source notes ---------- */

.lars-semantic-article .blog-details-article-info :is(.wp-caption-text, figcaption) {
    font-size: var(--lars-caption);
    line-height: 1.55;
    color: #555;
}

.lars-semantic-article .blog-details-article-info p.lars-source-note {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #e6e6e6;
    color: #555;
    font-size: var(--lars-caption);
    line-height: 1.55;
}

/* ---------- TOC and author box: square corners, site red ---------- */

.lars-semantic-article .blog-toc,
.lars-semantic-article .blog-author-box {
    border-radius: 0;
}

.lars-semantic-article .blog-toc-item a::before {
    color: var(--lars-red);
}

.lars-semantic-article .blog-toc-item a:hover,
.lars-semantic-article .blog-toc-item a:focus {
    color: var(--lars-red);
}

@media (min-width: 768px) and (max-width: 1199px) {
    .lars-semantic-article .blog-toc-toggle {
        padding: 14px 18px;
        font-size: 13px;
    }

    .lars-semantic-article .blog-toc-toggle-icon {
        width: 12px;
        height: 12px;
    }

    .lars-semantic-article .blog-toc-toggle-icon::before,
    .lars-semantic-article .blog-toc-toggle-icon::after {
        height: 2px;
    }

    .lars-semantic-article .blog-toc-panel {
        padding: 16px 18px;
    }

    .lars-semantic-article .blog-toc-item a {
        padding: 10px 0 10px 34px;
    }

    .lars-semantic-article .blog-toc-item a::before {
        top: 10px;
    }

    .lars-semantic-article .blog-toc-level-3 a {
        padding-left: 50px;
    }

    .lars-semantic-article .blog-toc-level-3 a::before {
        left: 16px;
    }
}