/*
  page.css — Content page styles for JobEcho
  ─────────────────────────────────────────────────────────────────
  This file extends styles.css. Load it AFTER styles.css.
  It only applies to pages that link it — the homepage is unaffected.

  Components defined here:
  ─ .page-hero        Article-style hero (dark navy, not full-screen)
  ─ .breadcrumb       Navigation trail above H1
  ─ .page-title       H1 style for content pages
  ─ .page-intro       Hero supporting paragraph
  ─ .page-meta        Date / read-time line
  ─ .page-body        Article content wrapper (light background)
  ─ .page-section     Reusable content block (H2 + text)
  ─ .page-callout     Aside / tip box (dark accent)
  ─ .tip-list         Bulleted list with gold dots
  ─ .steps--page      Modifier: stacks .steps vertically on content pages
  ─ .page-faq         Background override for FAQ on content pages
*/


/* ─── PAGE HERO ──────────────────────────────────────────────── */

.page-hero {
    background: var(--navy);
    padding: calc(var(--nav-h) + 4rem) 2rem 4rem;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(245,194,66,.1) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}


/* ─── BREADCRUMB ─────────────────────────────────────────────── */

.breadcrumb {
    margin-bottom: 1.5rem;
}

.breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .72rem;
    letter-spacing: .04em;
    color: rgba(230,234,243,.35);
    font-style: italic;
}

.breadcrumb li:not(:last-child)::after {
    content: '›';
    color: rgba(230,234,243,.2);
}

.breadcrumb a {
    color: rgba(230,234,243,.45);
    text-decoration: none;
    transition: color .2s;
}

.breadcrumb a:hover {
    color: var(--gold);
}

.breadcrumb [aria-current="page"] {
    color: rgba(230,234,243,.35);
}


/* ─── PAGE TITLE + META ──────────────────────────────────────── */

.page-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 3.75rem);
    letter-spacing: .02em;
    color: var(--white);
    line-height: .95;
    max-width: 800px;
    margin-bottom: 1.25rem;
}

.page-intro {
    font-size: .9375rem;
    color: rgba(230,234,243,.82);
    max-width: 580px;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.page-meta {
    font-size: .72rem;
    color: rgba(230,234,243,.28);
    font-style: italic;
    letter-spacing: .03em;
}


/* ─── ARTICLE BODY ───────────────────────────────────────────── */

.page-body {
    background: var(--bg);
    padding: 4.5rem 2rem;
}

/* Narrows the reading column vs the homepage's full 1080px */
.page-body .container {
    max-width: 760px;
}


/* ─── PAGE SECTION (reusable content block) ──────────────────── */

.page-section {
    display: block;                      /* reset global section { display:flex } */
    padding: 0 0 3rem;                   /* reset global section { padding:5rem 2rem } */
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--border);
}

.page-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.page-section h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.625rem, 2.5vw, 2.25rem);
    letter-spacing: .02em;
    color: var(--navy);
    line-height: .95;
    margin-bottom: 1rem;
}

.page-section h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: .04em;
    color: var(--navy);
    line-height: 1.1;
    margin-bottom: .5rem;
}

.page-section p {
    font-size: .9375rem;
    color: var(--ink-light);
    line-height: 1.75;
    margin-bottom: .875rem;
}

.page-section p:last-child {
    margin-bottom: 0;
}


/* ─── CALLOUT / ASIDE ────────────────────────────────────────── */

.page-callout {
    background: var(--navy);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.375rem 1.75rem;
    margin: 2rem 0;
}

.page-callout p {
    font-size: .9rem;
    color: rgba(230,234,243,.88);
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

.page-callout strong {
    color: var(--gold);
    font-style: normal;
}


/* ─── TIP LIST ───────────────────────────────────────────────── */

.tip-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.tip-list li {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    font-size: .9rem;
    color: var(--ink-light);
    line-height: 1.65;
}

.tip-list li::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: .55rem;
}


/* ─── STEPS — page modifier ──────────────────────────────────── */
/*
  .steps from styles.css is a 3-column horizontal grid.
  .steps--page stacks them vertically for long-form content pages
  where horizontal cards don't suit a reading layout.
*/

.steps--page {
    grid-template-columns: 1fr;
    border-radius: var(--radius);
    background: var(--navy);
    margin-top: 1.5rem;
}

.steps--page .step {
    border-right: none;
    border-bottom: 1px solid rgba(230,234,243,.08);
}

.steps--page .step:last-child {
    border-bottom: none;
}


/* ─── SCRIPT CARDS ───────────────────────────────────────────── */

.script-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.script-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.375rem 1.75rem;
}

.script-card-label {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    font-family: 'Bebas Neue', sans-serif;
    display: block;
    margin-bottom: .75rem;
}

.script-card-text {
    font-size: .9375rem;
    color: var(--ink);
    line-height: 1.75;
    margin: 0;
    font-style: italic;
}


/* ─── STAT GRID (3-col case study cards) ────────────────────── */

.stat-grid {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.stat-grid li {
    background: var(--white);
    padding: 1.75rem 1.5rem;
    border-right: 1px solid var(--border);
    position: relative;
}

.stat-grid li:last-child { border-right: none; }

.stat-grid li::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gold);
    display: block;
}

.stat-grid-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 2.75vw, 3rem);
    letter-spacing: .02em;
    color: var(--blue);
    line-height: 1;
    display: block;
    margin-bottom: .5rem;
}

.stat-grid-label {
    font-size: .8125rem;
    color: var(--ink-light);
    line-height: 1.6;
    margin: 0;
}


/* ─── INTERNAL LINKS ─────────────────────────────────────────── */

.page-body a:not(.btn-primary) {
    color: var(--blue);
    text-decoration: none;
}

.page-body a:not(.btn-primary):hover {
    text-decoration: underline;
}


/* ─── PAGE FAQ ───────────────────────────────────────────────── */
/*
  Reuses all .faq-* rules from styles.css.
  Only overrides the section background.
*/

.page-faq {
    background: var(--paper);
}


/* ─── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 960px) {
    .page-body .container {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .page-hero {
        padding-top: calc(var(--nav-h) + 2.5rem);
        padding-bottom: 3rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .page-hero .btn-primary {
        display: block;
        text-align: center;
    }

    .page-body {
        padding: 3rem 1.25rem;
    }

    .page-section {
        margin-bottom: 2.25rem;
        padding-bottom: 2.25rem;
    }

    /* Stat grid: collapse 3-col to single column on phones */
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .stat-grid li {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .stat-grid li:last-child {
        border-bottom: none;
    }

    /* Script cards: tighter padding on phones */
    .script-card {
        padding: 1.125rem 1.25rem;
    }

    /* Page FAQ: tighten padding */
    .page-faq {
        padding: 3.5rem 1.25rem;
    }
}