/* FYSH — Press / media page
   CR: fysh-press-2026-09-05
   Reuses the global .section / .container / .section-header / .btn system.
   Only press-specific blocks are defined here. Every content card uses a 4px
   corner radius per the FYSH design standard. */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.press-hero {
    background: linear-gradient(135deg, #0F2340 0%, #1a3559 100%);
    color: #fff;
    padding: 72px 0 64px;
    text-align: center;
}
.press-hero__eyebrow { color: #C9A84C; }
.press-hero__heading {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 600;
    line-height: 1.08;
    margin: 10px 0 14px;
    color: #fff;
}
.press-hero__sub {
    max-width: 52ch;
    margin: 0 auto 26px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.press-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ── Contact cards ────────────────────────────────────────────────────────── */
.press-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 8px;
}
@media (min-width: 720px) {
    .press-contact { grid-template-columns: repeat(3, 1fr); }
}
.press-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 4px;
}
.press-contact-card__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(201, 168, 76, 0.12);
    color: #B8922A;
}
.press-contact-card__label {
    margin: 0 0 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted, #6B7A8D);
}
.press-contact-card__value {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy, #0F2340);
    text-decoration: none;
}
a.press-contact-card__value:hover { color: #B8922A; }

/* ── What to include ──────────────────────────────────────────────────────── */
.press-note {
    margin-top: 20px;
    padding: 20px 22px;
    background: var(--cream, #F7FAFD);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 4px;
}
.press-note__title { margin: 0 0 10px; font-size: 1rem; color: var(--navy, #0F2340); }
.press-note__list { margin: 0; padding-left: 1.1rem; color: var(--muted, #4A5568); line-height: 1.7; }

/* ── Boilerplate ──────────────────────────────────────────────────────────── */
.press-boiler { max-width: 70ch; }
.press-boiler p { margin: 0 0 1rem; line-height: 1.7; color: var(--slate, #374151); }
.press-boiler p:last-child { margin-bottom: 0; }

/* ── Fast facts ───────────────────────────────────────────────────────────── */
.press-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 640px) { .press-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .press-facts { grid-template-columns: repeat(3, 1fr); } }
.press-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 4px;
}
.press-fact__k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #6B7A8D); }
.press-fact__v { font-size: 15px; font-weight: 600; color: var(--navy, #0F2340); }

/* ── Story angles ─────────────────────────────────────────────────────────── */
.press-topics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 720px) { .press-topics { grid-template-columns: repeat(2, 1fr); } }
.press-topic {
    padding: 20px;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 4px;
}
.press-topic h3 { margin: 0 0 6px; font-size: 1rem; color: var(--navy, #0F2340); }
.press-topic p { margin: 0; color: var(--muted, #4A5568); line-height: 1.6; font-size: 0.92rem; }

/* ── Media kit ────────────────────────────────────────────────────────────── */
.press-kit {
    margin-top: 18px;
    padding: 20px 22px;
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 4px;
}
.press-kit__title { margin: 0 0 6px; font-size: 1rem; color: var(--navy, #0F2340); }
.press-kit p { margin: 0; color: var(--slate, #374151); line-height: 1.6; }
.press-kit p a { color: #B8922A; font-weight: 600; }
.press-kit__download { margin-top: 14px; }
.press-kit__download:hover { color: var(--navy, #0F2340); }

/* ── Double edge accent ───────────────────────────────────────────────────────
   Two gold edges, top left and bottom right, that trace the card's own corner.
   Each is an L of two gold borders whose rounded corner uses the SAME 4px radius
   as the card and sits flush on the card edge, so it mirrors the corner exactly
   rather than floating inside or outside it. */
.press-contact-card,
.press-fact,
.press-topic { position: relative; }

.press-contact-card::before, .press-contact-card::after,
.press-fact::before,        .press-fact::after,
.press-topic::before,       .press-topic::after {
    content: "";
    position: absolute;
    width: 46px;
    height: 46px;
    border: 4px solid var(--gold, #C9A84C);
    pointer-events: none;
}
.press-contact-card::before,
.press-fact::before,
.press-topic::before {
    top: -1px; left: -1px;                 /* sit on the card's outer edge */
    border-right-width: 0;
    border-bottom-width: 0;
    border-top-left-radius: 4px;           /* mirror the card's 4px corner */
}
.press-contact-card::after,
.press-fact::after,
.press-topic::after {
    bottom: -1px; right: -1px;
    border-left-width: 0;
    border-top-width: 0;
    border-bottom-right-radius: 4px;
}

/* ── End to end journey roadmap ────────────────────────────────────────────────
   Mobile first: a vertical connected timeline. From 980px it becomes a
   horizontal stepper with nodes on one line and labels alternating above and
   below, echoing the roadmap reference. */
.press-road {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.press-road__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    --sc: var(--blue, #1E5BA8);
}
.press-road__step--c1 { --sc: #1E5BA8; }
.press-road__step--c2 { --sc: #17827D; }
.press-road__step--c3 { --sc: #2E8B57; }
.press-road__step--c4 { --sc: #C9A84C; }
.press-road__step--c5 { --sc: #0F2340; }

.press-road__node {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid var(--sc);
    background: var(--white, #fff);
    color: var(--sc);
    display: flex;
    align-items: center;
    justify-content: center;
}
.press-road__node .ti { font-size: 30px; line-height: 1; }
.press-road__num {
    position: absolute;
    top: -8px; right: -8px;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sc);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.press-road__label { padding-top: 4px; }
.press-road__title { margin: 0 0 4px; color: var(--navy, #0F2340); font-size: 1.02rem; }
.press-road__text { margin: 0; color: var(--muted, #6B7A8D); line-height: 1.55; font-size: 0.92rem; }

/* Mobile vertical connector between nodes */
.press-road__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 35px;
    top: 76px;
    bottom: -26px;
    width: 3px;
    background: repeating-linear-gradient(var(--border-strong, #CBD5E1) 0 6px, transparent 6px 12px);
    z-index: 0;
}

@media (min-width: 980px) {
    .press-road {
        flex-direction: row;
        gap: 0;
    }
    .press-road__step {
        flex: 1 1 0;
        display: grid;
        grid-template-rows: 1fr 72px 1fr;
        align-items: center;
        justify-items: center;
        gap: 0;
        text-align: center;
        min-height: 300px;
    }
    .press-road__node { grid-row: 2; }
    .press-road__label { grid-row: 3; padding: 14px 10px 0; max-width: 240px; }
    .press-road__step:nth-child(even) .press-road__label {
        grid-row: 1;
        align-self: end;
        padding: 0 10px 14px;
    }
    /* Horizontal dashed connector through the node row */
    .press-road__step:not(:last-child)::before {
        content: "";
        left: 50%;
        right: -50%;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 3px;
        transform: translateY(-1px);
        background: repeating-linear-gradient(90deg, var(--border-strong, #CBD5E1) 0 8px, transparent 8px 16px);
    }
    /* Direction arrow after the last node */
    .press-road__step:last-child::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 8px;
        width: 14px; height: 14px;
        border-top: 3px solid var(--border-strong, #CBD5E1);
        border-right: 3px solid var(--border-strong, #CBD5E1);
        transform: translateY(-50%) rotate(45deg);
    }
}

/* ── Closing CTA band ─────────────────────────────────────────────────────── */
.press-cta-band {
    background: linear-gradient(135deg, #0F2340 0%, #1a3559 100%);
    color: #fff;
    text-align: center;
    padding: 64px 0;
}
.press-cta-heading {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 600;
    margin: 0 0 10px;
    color: #fff;
}
.press-cta-sub {
    max-width: 46ch;
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
}