/* ═══════════════════════════════════════════════════════════════
   SafePremium Academy: Articles section
   Created 2026-09-21 (Chat G).

   Loaded AFTER /css/shared.css and /css/marketing.css by
   /articles and by every file under /articles/. It owns the whole
   section: the reading column, the index cards, the figure block,
   the end-of-article calls to action and the standing disclaimer.

   Nothing here is page-specific. A new article needs no CSS.
   The palette, the type stack and the footer come from shared.css
   and are not restated; only the overrides the reading column
   needs are declared below.
   ═══════════════════════════════════════════════════════════════ */

/* shared.css sets body{display:flex;flex-direction:column} so the footer
   sits at the bottom of short pages. Keep that and let main grow. */
.art-main { flex: 1 1 auto; }

/* The fixed nav in shared.css is 64px tall and overlays content. */
.art-top { height: 64px; }

/* ── Reading column ──────────────────────────────────────────── */
.art-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 24px 72px;
}
@media (max-width: 640px) {
    .art-wrap { padding: 36px 18px 56px; }
}

.art-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

/* shared.css uppercases h1 sitewide. An article title is sentence case. */
.art-wrap h1,
.art-index h1 {
    text-transform: none;
    font-size: clamp(30px, 4.2vw, 44px);
    line-height: 1.16;
    margin-bottom: 16px;
}

.art-standfirst {
    font-size: clamp(18px, 2.2vw, 21px);
    line-height: 1.55;
    color: var(--slate);
    margin-bottom: 22px;
}

.art-meta {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: 0.8;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--grey);
    margin-bottom: 34px;
}
.art-meta span + span::before { content: "·"; margin: 0 10px; opacity: 0.6; }

/* ── Body copy ───────────────────────────────────────────────── */
.art-body { font-size: 18px; line-height: 1.72; color: #33485C; }
.art-body p { margin-bottom: 20px; }
.art-body h2 {
    font-size: clamp(21px, 2.6vw, 27px);
    line-height: 1.25;
    margin: 44px 0 16px;
}
.art-body h2:first-child { margin-top: 0; }
.art-body strong { color: var(--navy); font-weight: 600; }
.art-body a { color: var(--cyan-dark); text-decoration: underline; }
.art-body a:hover { color: var(--cyan); }

.art-body ol.art-path {
    list-style: none;
    counter-reset: step;
    margin: 0 0 24px;
    padding: 0;
}
.art-body ol.art-path li {
    counter-increment: step;
    position: relative;
    padding-left: 44px;
    margin-bottom: 13px;
}
.art-body ol.art-path li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 2px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 28px;
    text-align: center;
}

.art-pull {
    border-left: 4px solid var(--cyan);
    padding: 4px 0 4px 22px;
    margin: 32px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(19px, 2.4vw, 23px);
    line-height: 1.35;
    color: var(--navy);
}

/* ── Figure ──────────────────────────────────────────────────── */
.art-figure {
    margin: 38px 0;
    padding: 26px 22px 20px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: 12px;
}
.art-figure-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--navy);
    margin-bottom: 4px;
}
.art-figure-sub { font-size: 14px; color: var(--slate); margin-bottom: 20px; }
.art-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .art-panels { grid-template-columns: 1fr; } }
.art-panels svg { display: block; width: 100%; height: auto; }
.art-figure-note {
    font-size: 12.5px;
    color: var(--slate);
    opacity: 0.85;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--grey);
}

/* ── End of article: the two calls to action ─────────────────── */
.art-cta {
    margin-top: 52px;
    padding-top: 34px;
    border-top: 1px solid var(--grey);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 640px) { .art-cta { grid-template-columns: 1fr; } }
.art-cta-card {
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: 12px;
    padding: 24px 22px;
}
.art-cta-card h3 { font-size: 18px; margin-bottom: 8px; }
.art-cta-card p { font-size: 15px; line-height: 1.6; color: var(--slate); margin-bottom: 16px; }
.art-cta-links { display: flex; flex-wrap: wrap; gap: 10px; }
.art-btn {
    display: inline-block;
    padding: 11px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
}
.art-btn-gold { background: var(--gold); color: var(--navy) !important; }
.art-btn-gold:hover { filter: brightness(1.05); color: var(--navy) !important; }
.art-btn-line {
    background: transparent;
    color: var(--cyan-dark) !important;
    border: 1.5px solid var(--grey);
}
.art-btn-line:hover { border-color: var(--cyan); color: var(--cyan-dark) !important; }

/* ── Standing disclaimer, on every article and on the index ──── */
.art-disclaimer {
    margin-top: 40px;
    padding: 16px 18px;
    background: var(--grey);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--slate);
}

/* ── Index ───────────────────────────────────────────────────── */
.art-index-intro {
    font-size: clamp(17px, 2.1vw, 20px);
    line-height: 1.6;
    color: var(--slate);
    max-width: 44em;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--grey);
}
.art-list { display: flex; flex-direction: column; gap: 20px; }
.art-card {
    display: block;
    background: var(--white);
    border: 1px solid var(--grey);
    border-radius: 12px;
    padding: 26px 24px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.art-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 14px 34px -24px rgba(28, 61, 90, 0.5);
}
.art-card-meta {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    opacity: 0.8;
    margin-bottom: 10px;
}
.art-card-meta span + span::before { content: "·"; margin: 0 8px; opacity: 0.6; }
.art-card h2 {
    font-size: clamp(20px, 2.4vw, 25px);
    line-height: 1.25;
    margin-bottom: 8px;
}
.art-card p { font-size: 15.5px; line-height: 1.6; color: var(--slate); margin: 0; }
.art-card-more {
    display: inline-block;
    margin-top: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--cyan-dark);
}

/* shared.css declares .footer-links as a non-wrapping flex row. index.html
   patches that at 640px inside its own page style, which these pages do not
   load, so the patch is restated here. Without it the five footer links push
   the document wider than the phone viewport and the whole page scrolls
   sideways. */
@media (max-width: 760px) {
    .footer-inner { justify-content: center; text-align: center; }
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 14px 20px; }
    .footer-bottom { justify-content: center; text-align: center; }
}

/* ── Footer gloss, matching index.html ───────────────────────── */
.footer-gloss {
    max-width: 780px;
    margin: 0 auto;
    padding: 22px 24px 4px;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}