/* Shell for the public content pages: topics, courses, about, industries,
 * corporate training, FAQ and contact.
 *
 * ONE stylesheet for all of them rather than an inline <style> per template.
 * Eight pages sharing one hashed, immutable file means a reader who lands on
 * the service-excellence page and then opens the CSEO course pays for these
 * rules once. The same reasoning that moved the shell out of base_learn.html.
 *
 * Everything here is layout and rhythm. Colour tokens come from base.css and
 * are not redefined: a second definition of --brand is how two pages end up
 * almost the same blue.
 */

/* ── Page head ───────────────────────────────────────────────────────── */
.pg-hero { padding: 3rem 0 2.2rem; border-bottom: 1px solid var(--line); }
.pg-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--brand); margin-bottom: .9rem;
}
.pg-hero h1 {
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
}
/* The lede is the paragraph Google most often quotes and the one an answer
   engine lifts, so it is sized to be read rather than skimmed past. */
.pg-lede {
    margin-top: 1rem; max-width: 62ch;
    font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft);
}

/* ── Prose ───────────────────────────────────────────────────────────── */
.pg-section { padding: 2.4rem 0; }
.pg-section + .pg-section { border-top: 1px solid var(--line); }
.pg-prose { max-width: 68ch; }
.pg-prose h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    line-height: 1.25; color: var(--ink); margin-bottom: .9rem;
}
.pg-prose h3 { font-size: 1.08rem; color: var(--ink); margin: 1.4rem 0 .5rem; }
.pg-prose p { margin-bottom: 1rem; line-height: 1.7; color: var(--ink-soft); }
.pg-prose p:last-child { margin-bottom: 0; }
.pg-prose a { color: var(--brand); }
.pg-prose ul { margin: 0 0 1rem 1.1rem; }
.pg-prose li { margin-bottom: .5rem; line-height: 1.65; color: var(--ink-soft); }

/* Inline "read more about this" row under a section. */
.pg-jumps { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.pg-jump {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .85rem; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface);
    font-size: .88rem; font-weight: 600; color: var(--brand);
    text-decoration: none;
}
.pg-jump:hover { border-color: var(--brand); background: var(--surface-alt); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.pg-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pg-card {
    display: flex; flex-direction: column; gap: .55rem;
    padding: 1.3rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface);
    text-decoration: none; color: inherit;
}
a.pg-card:hover { border-color: var(--brand); box-shadow: 0 6px 24px rgba(23,48,122,.09); }
.pg-card h2, .pg-card h3 { font-size: 1.06rem; color: var(--ink); line-height: 1.3; }
.pg-card p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
/* ── Badges ──────────────────────────────────────────────────────────────
   The foot of a card, as a row of small pills rather than a line of
   icon-and-text fragments.

   The old .pg-card-meta was a sentence in disguise: "-> Requirements" and
   "book Syllabus" side by side in muted 13px, each a bare link with a glyph in
   front of it. At a glance it read as one run of grey text, and the two things
   you could actually DO from the card were the least visible part of it.

   Two kinds, and the difference matters:

     .pg-chip   a FACT about the thing -- 21 modules, about 14 hours, CSEO.
                Not a link, no hover, no border. It states.
     .pg-badge  an ACTION -- Requirements, Syllabus. A link, bordered, and it
                responds to the pointer. It goes somewhere.

   Named .pg-chip, NOT .pg-fact: .pg-fact was already taken further down this
   file by the <dl> on the syllabus page, and because that rule is declared
   after this one it won -- the pills came out 46px tall with a square left
   edge and no radius, which looks like a broken badge rather than like a
   name collision.

   Keeping the two visually distinct is the whole point. A row where a fact and
   a link look identical teaches a reader to click the facts. */
.pg-badges {
    margin-top: auto; padding-top: .8rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.pg-chip, .pg-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .26rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; line-height: 1.35;
    white-space: nowrap;
}
.pg-chip {
    background: var(--surface-alt);
    color: var(--ink-muted);
}
.pg-badge {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--brand);
    text-decoration: none;
}
.pg-badge:hover, .pg-badge:focus-visible {
    border-color: var(--brand);
    background: var(--surface-alt);
}
/* The level tag. Takes the certification's own tier colour where the page has
   one to give it, and falls back to the neutral fact pill where it does not,
   so it never depends on a variable that may not be set. */
.pg-chip-tier {
    background: var(--paper, var(--surface-alt));
    color: var(--tier-ink, var(--ink-muted));
    box-shadow: inset 0 0 0 1px var(--metal, transparent);
}

/* The "Who:" line on a card. Quieter and one size down from the positioning
   above it: on a card the positioning is the claim and this is the qualifier,
   and at the same weight the two competed and the card read as three equal
   paragraphs. */
.pg-who { font-size: .86rem; color: var(--ink-muted); }
.pg-who strong { color: var(--ink-soft); font-weight: 700; }

.pg-card-meta {
    margin-top: auto; padding-top: .5rem;
    font-size: .82rem; color: var(--ink-muted);
    display: flex; flex-wrap: wrap; gap: .9rem;
}
.pg-card-meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* ── Syllabus ────────────────────────────────────────────────────────── */
.pg-modules { display: grid; gap: .7rem; counter-reset: mod; }
.pg-module {
    display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem;
    padding: 1rem 1.1rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface);
}
.pg-module-no {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--surface-alt); color: var(--brand);
    font-weight: 700; font-size: .92rem;
}
.pg-module h3 { font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }
.pg-module p { font-size: .91rem; line-height: 1.6; color: var(--ink-soft); }
.pg-module-time { font-size: .8rem; color: var(--ink-muted); margin-top: .35rem; }

/* ── Facts strip ─────────────────────────────────────────────────────── */
.pg-facts {
    display: grid; gap: 1rem; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pg-fact {
    padding: .9rem 1rem; border-left: 3px solid var(--brand);
    background: var(--surface-alt); border-radius: 0 10px 10px 0;
}
.pg-fact dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.pg-fact dd { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: .2rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
/* <details>, not a JS accordion. The answers are in the DOM whether or not
   the summary is open, which is what both a crawler and a reader with
   JavaScript disabled need, and it costs no script at all. */
.pg-faq { max-width: 72ch; display: grid; gap: .6rem; }
.pg-faq details {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); padding: .2rem .2rem;
}
.pg-faq summary {
    cursor: pointer; list-style: none; padding: .85rem 1rem;
    font-weight: 600; color: var(--ink); line-height: 1.45;
    display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
    content: "\002B"; color: var(--ink-muted); font-weight: 400;
    font-size: 1.2rem; line-height: 1; flex-shrink: 0;
}
.pg-faq details[open] summary::after { content: "\2212"; }
.pg-faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; }
.pg-faq details > p { padding: 0 1rem 1rem; line-height: 1.7; color: var(--ink-soft); margin: 0; }

/* ── Call to action ──────────────────────────────────────────────────── */
.pg-cta {
    margin-top: 2rem; padding: 1.6rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-alt);
}
.pg-cta h2 { font-size: 1.2rem; color: var(--ink); margin-bottom: .5rem; }
.pg-cta p { color: var(--ink-soft); line-height: 1.65; margin-bottom: 1rem; max-width: 60ch; }
.pg-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.3rem; border-radius: 10px;
    background: var(--brand); color: #fff; font-weight: 600;
    text-decoration: none;
}
.pg-btn:hover { background: var(--brand-dark); }
.pg-btn-ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); }
.pg-btn-ghost:hover { background: var(--surface); border-color: var(--brand); }
.pg-btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ── Definition list for contact ─────────────────────────────────────── */
.pg-contact { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pg-contact div { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pg-contact h2 { font-size: 1rem; color: var(--ink); margin-bottom: .4rem; }
.pg-contact p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
.pg-contact a { color: var(--brand); }

@media (max-width: 640px) {
    .pg-hero { padding: 2.2rem 0 1.7rem; }
    .pg-section { padding: 1.9rem 0; }
    .pg-module { grid-template-columns: 1fr; gap: .5rem; }
    .pg-module-no { width: 2.2rem; height: 2.2rem; font-size: .85rem; }
}

/* Visually hidden but announced. Used for the "Module 3:" prefix on syllabus
   headings: the number is drawn in the circle beside the title, which is
   aria-hidden because it is decoration there, so without this a screen reader
   hears twenty-one headings with no ordinal at all.
   clip-path rather than display:none, which removes it from the a11y tree
   too, and no width:0, which stops some readers announcing it. */
.learn-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}