/* ---------------------------------------------------------------------------
   Single article — insight.php

   Loaded after insights.css, which already provides .blog-grid / .blog-card /
   .blog-card-tag. This file adds only what a full article needs: a readable
   measure, prose typography for body markup the CMS produces, and the closing
   CTA. Everything is expressed in existing tokens so an article inherits any
   future change to the scale.
   --------------------------------------------------------------------------- */

.insight-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--sp-8, 40px) var(--sp-5, 24px) var(--sp-10, 72px);
}

/* A single column at roughly 68 characters. Long-form text is the one place on
   the site where the wide grid actively hurts: past ~75 characters the eye
   loses the start of the next line. */
.insight-article {
    max-width: 720px;
    margin: 0 auto;
}

/* Breadcrumb — shared .breadcrumbs component (css/03-components.css), built
   from the same $crumbs array as this page's BreadcrumbList JSON-LD. */

/* --- Header -------------------------------------------------------------- */

.insight-header {
    margin-bottom: var(--sp-7, 32px);
    padding-bottom: var(--sp-6, 28px);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.insight-tag { display: inline-block; margin-bottom: var(--sp-4, 18px); }

.insight-header h1 {
    font-size: clamp(28px, 4.5vw, 40px);
    line-height: 1.2;
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: var(--sp-4, 18px);
}

/* The excerpt doubles as the standfirst — larger than body copy, lighter
   weight, so it reads as an introduction rather than a first paragraph. */
.insight-standfirst {
    font-size: var(--fs-lg, 18px);
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: var(--sp-5, 24px);
}

.insight-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm, 14px);
    color: var(--text-muted, #6b7280);
}

/* --- Body ---------------------------------------------------------------- */

/* Descendant selectors are deliberate here. The body is CMS markup passed
   through sanitize_html(), so it arrives as bare tags with no classes to hook
   — styling has to come from the element names themselves. */

.insight-body {
    font-size: calc(var(--fs-base, 16px) + 1px);
    line-height: 1.75;
    color: var(--text-main);
}

.insight-body > * + * { margin-top: var(--sp-5, 24px); }

.insight-body h2 {
    font-size: clamp(22px, 3vw, 27px);
    line-height: 1.3;
    font-weight: 800;
    color: var(--dark-bg);
    margin-top: var(--sp-8, 44px);
}

.insight-body h3 {
    font-size: var(--fs-lg, 19px);
    line-height: 1.4;
    font-weight: 700;
    color: var(--dark-bg);
    margin-top: var(--sp-7, 34px);
}

/* Gradient underline: painted as a background layer so it can carry the brand
   sweep; grows on hover. Falls back to nothing exotic — the color alone still
   marks the link. */
.insight-body a {
    color: var(--primary-color);
    text-decoration: none;
    background-image: var(--grad-brand);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    transition: background-size var(--dur-1) var(--ease-out);
}

.insight-body a:hover { background-size: 100% 2px; }

.insight-body ul,
.insight-body ol { padding-left: 1.35em; }

.insight-body li + li { margin-top: 10px; }

.insight-body li::marker { color: var(--primary-color); }

.insight-body strong { color: var(--dark-bg); font-weight: 700; }

.insight-body blockquote {
    border-left: 3px solid var(--primary-color);
    padding: 4px 0 4px var(--sp-5, 22px);
    color: var(--dark-bg);
    font-size: var(--fs-lg, 18px);
    line-height: 1.6;
}

.insight-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--surface-alt, #f3f4f6);
    border-radius: 4px;
    padding: 2px 6px;
}

.insight-body pre {
    background: var(--dark-bg, #0f172a);
    color: #e5e7eb;
    border-radius: var(--radius-md, 10px);
    padding: var(--sp-5, 22px);
    overflow-x: auto;          /* long lines scroll rather than widening the page */
}

.insight-body pre code { background: none; padding: 0; color: inherit; }

.insight-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 10px);
}

.insight-body hr {
    border: 0;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin-top: var(--sp-8, 40px);
}

/* Tables scroll inside their own box; without this a wide table is the one
   element that can force the whole page to scroll sideways on a phone. */
.insight-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--fs-sm, 14px);
}

.insight-body th,
.insight-body td {
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 10px 12px;
    text-align: left;
}

.insight-body th { background: var(--surface-alt, #f9fafb); font-weight: 700; }

/* --- Closing CTA --------------------------------------------------------- */

.insight-cta {
    margin-top: var(--sp-9, 56px);
    padding: var(--sp-7, 32px);
    border-radius: var(--radius-lg, 14px);
    background: var(--surface-alt, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
}

.insight-cta h2 {
    font-size: var(--fs-xl, 22px);
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: var(--sp-3, 12px);
}

.insight-cta p {
    font-size: var(--fs-sm, 15px);
    line-height: 1.7;
    color: var(--text-main);
    margin-bottom: var(--sp-5, 22px);
}

.insight-cta-actions {
    display: flex;
    flex-wrap: wrap;      /* the two buttons stack on narrow screens */
    gap: 12px;
}

/* --- More posts ---------------------------------------------------------- */

.insight-more {
    max-width: 1100px;
    margin: var(--sp-10, 72px) auto 0;
    padding-top: var(--sp-8, 44px);
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.insight-more h2 {
    font-size: var(--fs-xl, 24px);
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: var(--sp-6, 28px);
}

@media (max-width: 600px) {
    .insight-main { padding: var(--sp-6, 28px) var(--sp-4, 18px) var(--sp-8, 48px); }
    .insight-cta  { padding: var(--sp-6, 24px); }
}