/* editorial.css — cross-page typography (lead, eyebrow, pull-quote, section title, magazine). */

/* ─── Lead text ────────────────────────────────────────────────── */
.lead {
    font-size: var(--fs-lg);
    color: var(--color-muted);
    max-width: 65ch;
    margin-bottom: var(--space-5);
    text-wrap: pretty;
}
.lead--xl { font-size: var(--fs-xl); line-height: 1.45; }
.content { max-width: 70ch; }
.content > * + * { margin-top: var(--space-3); }
.content h2 { margin-top: var(--space-6); }
.content h3 { margin-top: var(--space-5); }

/* ─── Eyebrow — editorial overline label ───────────────────────────
   Small caps with wide tracking. Optional numeric prefix and gold
   hairline for that "magazine spread" feel without flash. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-head);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-green-dark);
    margin: 0 0 var(--space-3);
    line-height: 1;
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--color-gold);
    opacity: .9;
}
.eyebrow--center {
    justify-content: center;
}
.eyebrow--center::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--color-gold);
    opacity: .9;
}
.eyebrow__num {
    font-variant-numeric: tabular-nums;
    color: var(--color-gold);
    font-weight: var(--fw-bold);
}

/* ─── Pull-quote — editorial blockquote ─────────────────────────────
   Used to break long-form prose with a single statement that carries
   the page's conviction. Large italic serif-feel via Plus Jakarta Sans
   italic + tight tracking + decorative open-quote glyph. */
.pullquote {
    position: relative;
    max-width: 38ch;
    margin: var(--space-8) auto;
    padding: var(--space-6) var(--space-5) var(--space-5);
    font-family: var(--font-head);
    font-size: var(--fs-display);
    font-weight: var(--fw-medium);
    font-style: italic;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--color-ink);
    text-wrap: balance;
    text-align: center;
}
/* Oversized open-quote glyph above the text — gold, decorative, low
   opacity. Positioned absolute so it doesn't push the type baseline. */
.pullquote::before {
    content: '\201C';
    position: absolute;
    top: -0.15em;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 4.5em;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    color: var(--color-gold);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.pullquote > * { position: relative; z-index: 1; }
.pullquote__attribution {
    display: block;
    margin-top: var(--space-4);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-green-dark);
}
.pullquote__attribution::before {
    content: '— ';
    color: var(--color-gold);
    margin-right: var(--space-1);
}

/* Premium section title — paired with eyebrow, generous below-spacing. */
.section__title--editorial {
    font-size: var(--fs-display);
    letter-spacing: -0.022em;
    line-height: 1.1;
    max-width: 22ch;
    text-wrap: balance;
    margin-bottom: var(--space-4);
}
.section__title--editorial.section__title--center {
    margin-inline: auto;
}

/* Spacious editorial section — used for showcase/featured blocks. */
.section--showcase {
    padding-block: var(--space-9);
    position: relative;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%,
            color-mix(in srgb, var(--color-green) 6%, transparent) 0%,
            transparent 55%),
        radial-gradient(ellipse 50% 40% at 0% 100%,
            color-mix(in srgb, var(--color-gold) 6%, transparent) 0%,
            transparent 55%),
        var(--color-bg);
}
@media (min-width: 768px) {
    .section--showcase { padding-block: var(--space-10); }
}

/* Section divider — gold hairline used between editorial sections.
   Visually quiet, purely decorative. */
.section-divider {
    border: 0;
    height: 1px;
    width: 64px;
    background: var(--color-gold);
    opacity: .5;
    margin: var(--space-7) auto;
}

/* ─── Magazine-style featured grid ─────────────────────────────────
   First child becomes a hero tile (spans 2 cols / 2 rows on desktop);
   the rest fill in around it. Mobile collapses to a single column. */
.featured-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .featured-grid {
        gap: var(--space-5);
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
    }
}
@media (min-width: 1024px) {
    .featured-grid {
        grid-template-columns: 2fr 1fr 1fr;
        grid-auto-rows: minmax(0, 1fr);
    }
    .featured-grid > .card--feature {
        grid-column: 1 / span 1;
        grid-row: 1 / span 2;
    }
}

.card--feature {
    padding: 0;
    overflow: hidden;
}
/* Gold L-corner editorial mark — 22px arms in the top-left, signals
   "featured" without a textual label. Drawn as an SVG-shaped pseudo
   element layered above the image so it remains visible regardless
   of card content. */
.card--feature::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    width: 22px;
    height: 22px;
    border-top: 2px solid var(--color-gold);
    border-left: 2px solid var(--color-gold);
    pointer-events: none;
    z-index: 2;
    opacity: .85;
}
.card--feature img,
.card--feature .svg-placeholder {
    aspect-ratio: 16 / 11;
    margin: 0;
    border-radius: 0;
}
.card--feature .card__body {
    padding: var(--space-5);
}
.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.card__kicker {
    display: inline-block;
    font-family: var(--font-head);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-2);
}
.card__more {
    margin-top: auto;
    padding-top: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-green-dark);
    letter-spacing: 0.02em;
    transition: gap var(--duration-base) var(--ease);
}
.card:hover .card__more {
    gap: var(--space-3);
}
[data-theme="dark"] .card__more { color: var(--color-green); }

/* Adjust default cards to the body+more pattern when used with .card__body */
.card .card__body h3 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
.card .card__body p { margin: 0; color: var(--color-muted); }
.card--feature .card__body h3 { font-size: var(--fs-xl); }