/*
 * PALETTE. Every colour below comes from tokens.css / style.css :root.
 *
 * When this file was lifted out of courses.html's inline <style>, the colour
 * ratchet saw it for the first time -- its scope is frontend/css and frontend/js,
 * so inline <style> in HTML had NEVER been scanned. The count jumped 196 -> 210,
 * and not one of those 14 was new: they had been sitting in the page all along,
 * unmeasured. Ten unique off-palette hexes, and eight of them were NEAR MISSES of
 * a token that already existed: one of them differed from --text-gray by a SINGLE
 * HEX DIGIT in the last position. That is the drift the ratchet exists to stop, and it was invisible
 * purely because of where the CSS lived.
 *
 * All ten now reference their token. Do not reintroduce a literal hex here --
 * NOT EVEN IN A COMMENT: the ratchet scans raw text, so the first draft of this
 * note quoted the offending value and put the count back over the ceiling.
 */

/*
 * catalogue.css — the certificate ladder and course cards.
 *
 * LIFTED OUT OF courses.html's INLINE <style> so the SAME design can serve both
 * catalogue surfaces. There are two: /courses.html (the full catalogue) and the
 * programme landing pages, whose list is built by js/programme-catalogue.js. The
 * landing page had a flat grid of every course with full titles while the
 * catalogue had the ladder — two looks for one product, and the owner caught it
 * on the live site. One stylesheet, one renderer (js/cert-ladder.js), both pages.
 *
 * Some rules here only match on /courses.html (the SSB feature block, the track
 * bands). They are inert elsewhere; that is cheaper than maintaining two files
 * that drift.
 */

/* ===== Course-family accent tokens (2026-08-06) ====================
   Every course family gets an accent so certificates, instructor
   courses, SSB practice and "not for sale" read differently at a
   glance. Previously every card wore the same navy thumbnail with the
   same graduation-cap watermark, so the families were indistinguishable.

   THREE tokens per family, deliberately:
     --ac        operative accent. Used ANYWHERE the colour carries or
                 sits behind TEXT: roundel letters, price chips, pills,
                 icons on tints. Every one of these is >= 4.5:1 against
                 white, i.e. WCAG AA for normal-size text.
     --ac-vivid  decorative accent. Rails, card top borders, the ladder
                 gradient, halo rings. Never has text on or near it, so
                 it can stay bright.
     --ac-rgb    the vivid colour as an "r,g,b" triplet, so tints can be
                 written rgba(var(--ac-rgb), .07) instead of color-mix().
                 color-mix() is still missing from older Android
                 WebViews, which is a large share of this audience.

   WHY --ac AND --ac-vivid DIFFER. The redesign brief specified only the
   vivid hexes and asserted "the given hexes do [pass AA] at the sizes
   specified". Measured against white they do not:
        B   #1e9e6a = 3.41:1     C    #d9880f = 2.81:1
        SSB #0e8f8a = 3.95:1     soon #7c8798 = 3.64:1
   all under the 4.5:1 that the same brief sets as an acceptance
   criterion, and #d9880f fails even the 3:1 large-text floor, so white
   text on a solid amber roundel would have been unreadable. The vivid
   hex therefore stays for graphics only and a darkened sibling carries
   text. A and instructor already passed, so for those two the pair is
   the same colour.
   DO NOT collapse --ac and --ac-vivid back into one variable. */
/* The seven family accents now live in css/tokens.css — the single
   source both this page and the SSB sub-app read. They were declared
   here first; duplicating them is exactly how the SSB palette drifted,
   so the copy is gone rather than kept "in sync". */
:root {
    --course-line: var(--surface-line-soft);
    --course-muted: #5b6b85;
    --course-radius: 14px;
    --course-shadow: 0 1px 2px rgba(0,45,98,.06), 0 8px 24px rgba(0,45,98,.08);
}

/* Per-family --ac wiring. Components below are written ONCE against
   --ac / --ac-vivid / --ac-rgb and inherit the right family from the
   nearest wrapper, so a card inside the B accordion is green without
   the card template knowing anything about certificate levels. */
.track-ncc      { --ac: var(--accent-cert-c); --ac-vivid: var(--accent-cert-c-vivid); --ac-rgb: var(--accent-cert-c-rgb); }
.track-ssb      { --ac: var(--accent-ssb);    --ac-vivid: var(--accent-ssb-vivid);    --ac-rgb: var(--accent-ssb-rgb); }
.track-agniveer { --ac: var(--accent-soon);   --ac-vivid: var(--accent-soon-vivid);   --ac-rgb: var(--accent-soon-rgb); }
/* Instructor courses are a TOP-LEVEL track as of 2026-08-17, not a subgroup
   of the certificate track — see the TRACKS comment below for why. The accent
   is unchanged; only the level in the hierarchy moved. */
.track-instructor { --ac: var(--accent-inst); --ac-vivid: var(--accent-inst-vivid); --ac-rgb: var(--accent-inst-rgb); }
/* .track-subgroup-practice deliberately has NO accent override: it inherits
   the NCC track accent, which is correct (it is an NCC-track item) and avoids
   inventing a palette colour the brand-visual ratchet would flag. */
.cert-accordion-a { --ac: var(--accent-cert-a); --ac-vivid: var(--accent-cert-a-vivid); --ac-rgb: var(--accent-cert-a-rgb); }
.cert-accordion-b { --ac: var(--accent-cert-b); --ac-vivid: var(--accent-cert-b-vivid); --ac-rgb: var(--accent-cert-b-rgb); }
.cert-accordion-c { --ac: var(--accent-cert-c); --ac-vivid: var(--accent-cert-c-vivid); --ac-rgb: var(--accent-cert-c-rgb); }

/* Courses Page Specific Styles */
/* Compact hero — the UX review flagged the old 120/80px hero as
   spending ~450px of viewport on a title the visitor already clicked
   to reach. Halved so the filter bar + first courses sit above the
   fold on arrival. */
.courses-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    color: #fff;
    padding: 56px 20px 64px;
    text-align: center;
}

.courses-hero h1 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 2.1rem;
    margin-bottom: 12px;
    color: #ffffff;
}

.courses-hero p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 18px;
    color: rgba(255, 255, 255, 0.9);
}

.course-filters {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-top: -40px;
    position: relative;
    z-index: 10;
}

.filter-tabs {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-tab {
    padding: 12px 25px;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    color: #555;
}

.filter-tab:hover {
    border-color: var(--brand-navy);
    color: var(--brand-navy);
}

.filter-tab.active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

.courses-section {
    padding: 60px 20px;
}

.section-header {
    margin-bottom: 40px;
}

.section-header h2 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 2rem;
    color: var(--brand-navy);
    margin-bottom: 10px;
}

.section-header p {
    color: #666;
    font-size: 1.05rem;
}

/* ---- Product tracks + certificate accordion (2026-07-20) ---------------
   Three tracks rendered from Course.product. The accordion uses native
   <details>, so it degrades to fully-expanded content with CSS or JS off,
   and its contents stay crawlable while collapsed. */
.track { margin-bottom: var(--rhythm-section); }
.track:last-child { margin-bottom: 0; }
.track-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.5rem; color: var(--brand-navy);
    margin: 0 0 6px; padding-bottom: 10px;
    border-bottom: 2px solid var(--surface-line-soft);
}
.track-blurb { color: var(--surface-ink-muted); margin: 0 0 22px; font-size: 1rem; }

/* An empty track states plainly that nothing is for sale. It must never
   look like a product card -- honest degradation, not a placeholder. */
.track-notice {
    background: #f7f9fc; border: 1px dashed var(--surface-line);
    border-radius: 8px; padding: 16px 18px;
    color: var(--text-gray); font-size: 0.97rem;
}
.track-notice strong { color: var(--brand-navy); }
.track-notice a { color: var(--brand-navy); font-weight: 600; }

/* ---- Section identity band -------------------------------------
   Replaces the plain heading at the top of each track so the family
   announces itself by colour + icon before the visitor reads a word.
   The band is one component; the family comes from the inherited --ac. */
.track-band {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: rgba(var(--ac-rgb), .07);
    border: 1px solid rgba(var(--ac-rgb), .22);
    border-radius: var(--course-radius);
    padding: 16px 20px;
    margin: 0 0 24px;
}
.track-band-icon {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    background: var(--ac); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.track-band-text { flex: 1 1 260px; min-width: 0; }
/* The band supplies the separation the old rule under the title gave. */
.track-band .track-title,
.track-band .track-subtitle { border-bottom: none; padding-bottom: 0; margin: 0 0 3px; }
.track-band .track-blurb,
.track-band .track-subblurb { margin: 0; font-size: .95rem; }
.track-band-count {
    margin-left: auto; flex: none;
    background: #fff; color: var(--ac);
    border: 1px solid rgba(var(--ac-rgb), .35);
    border-radius: 999px; padding: 5px 13px;
    font-size: .78rem; font-weight: 700; white-space: nowrap;
}

.track-subgroup { margin-top: 34px; }
.track-subtitle {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.12rem; color: var(--brand-navy); margin: 0 0 4px;
}
.track-subblurb { color: var(--surface-ink-muted); margin: 0 0 18px; font-size: 0.95rem; }

/* ---- Certificate ladder ----------------------------------------
   A -> B -> C is a progression, so the three levels are drawn as a
   connected ladder: one vertical rail running A-blue to C-amber, with
   a short tick joining each row to it.

   STILL native <details>/<summary>, deliberately. The redesign brief
   asked for <button aria-expanded> + <div aria-controls>; that would be
   a regression. <details> already exposes the correct expanded state to
   assistive tech for free, keeps the collapsed course titles in the DOM
   and crawlable (the long-tail queries worth ranking for), and keeps
   working if this page's script fails. This is a restyle only. */
.cert-ladder { position: relative; padding-left: 26px; margin: 0 0 4px; }
.cert-ladder::before {
    content: ''; position: absolute; left: 0; top: 26px; bottom: 26px;
    width: 3px; border-radius: 3px;
    background: linear-gradient(var(--accent-cert-a-vivid), var(--accent-cert-b-vivid), var(--accent-cert-c-vivid));
}
.cert-accordion {
    position: relative;
    background: #fff; border: 1px solid var(--surface-line);
    border-radius: 12px; margin-bottom: 14px; overflow: hidden;
    box-shadow: var(--course-shadow);
}
/* The tick that joins this row to the ladder rail. */
.cert-accordion::before {
    content: ''; position: absolute; left: -26px; top: 32px;
    width: 20px; height: 3px; background: var(--ac-vivid);
}
.cert-accordion[open] { box-shadow: 0 2px 18px rgba(0,45,98,.10); }
/* A/B/C are three different products at three different prices. Rendered
   identically, an expanded B was indistinguishable from an expanded C.
   Each level keeps its own accent rail + title colour. */
.cert-accordion-a { border-left: 5px solid var(--ac-vivid); }
.cert-accordion-b { border-left: 5px solid var(--ac-vivid); }
.cert-accordion-c { border-left: 5px solid var(--ac-vivid); }
.cert-accordion-title { color: var(--ac); }
.cert-accordion[open] > .cert-accordion-summary { background: rgba(var(--ac-rgb), .06); }
.cert-accordion-summary {
    cursor: pointer; list-style: none;
    padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
    font-weight: 700; color: var(--brand-navy);
}
.cert-accordion-summary::-webkit-details-marker { display: none; }
/* Letter roundel. Filled with --ac (not --ac-vivid) because it carries
   white text: on the vivid amber the letter would sit at 2.8:1. */
.cert-roundel {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background: var(--ac); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.2rem; font-weight: 800;
    box-shadow: 0 0 0 5px rgba(var(--ac-rgb), .14);
}
.cert-accordion-head { flex: 1 1 auto; min-width: 0; }
.cert-accordion-title { font-size: 1.08rem; display: block; }
/* The level descriptor moves out of the meta line to sit under the
   title, where it reads as a subtitle instead of a third meta chip.
   Reuses the existing translated courses.accordion.note.* strings --
   no new English-only prose that would leak into Hindi. */
.cert-accordion-note {
    display: block; font-size: .85rem; font-weight: 500;
    color: var(--course-muted); margin-top: 2px;
}
.cert-accordion-meta {
    margin-left: auto; display: flex; flex-wrap: wrap; gap: 7px;
    justify-content: flex-end;
}
.cert-chip {
    font-size: .75rem; font-weight: 600; color: var(--surface-ink-muted);
    background: var(--surface-panel); border-radius: 999px; padding: 4px 11px;
    white-space: nowrap;
}
/* Price chip sits on solid --ac with white text, so it needs the
   AA-safe accent, not the vivid one. */
.cert-chip-price { color: #fff; background: var(--ac); font-weight: 700; }
.cert-accordion-chevron { color: var(--course-muted); transition: transform .2s ease; flex: none; }
.cert-accordion[open] > .cert-accordion-summary .cert-accordion-chevron { transform: rotate(90deg); }
.cert-accordion-summary:hover { background: rgba(var(--ac-rgb), .05); }
.cert-accordion-summary:focus-visible { outline: 3px solid var(--ac); outline-offset: -3px; }
.cert-accordion-body { padding: 6px 20px 20px; margin-bottom: 0; }

@media (max-width: 760px) {
    /* The secondary chips fold away, but the PRICE CHIP STAYS. Hiding
       it would force a click to discover cost, contradicting the site's
       promise that every course shows its price before signup -- the
       reason price was put in the summary in the first place. The brief
       said to hide all meta chips here; that part is not followed. */
    .cert-accordion-meta { flex-basis: 100%; margin-left: 58px; justify-content: flex-start; }
    .cert-chip { display: none; }
    .cert-chip-price { display: inline-block; }
    .cert-accordion-summary { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .cert-ladder { padding-left: 16px; }
    .cert-accordion::before { left: -16px; width: 12px; }
    .cert-accordion-summary { padding: 14px 16px; gap: 12px; }
    .cert-accordion-body { padding: 4px 14px 16px; }
    .cert-roundel { width: 38px; height: 38px; font-size: 1.05rem; }
    .cert-accordion-meta { margin-left: 50px; }
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
    gap: 22px;
}

/* A certificate always has exactly FOUR wings, and auto-fit was fitting
   three of them: four columns need 4x255 + 3x22 = 1086px and the accordion
   body offers 1064px (it carries 20px of side padding), so it fell to three
   and stranded the fourth wing on its own row. The instructor grid on this
   same page already renders four columns at 267px, so the width is not the
   problem -- 22px is. Ask for four explicitly rather than shaving the
   minimum, so the wings stay a set of four at every desktop width. */
@media (min-width: 1100px) {
    .cert-accordion-body {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Between the two: 2x2 is balanced, 3+1 is not. Below this the base
   auto-fit rule already collapses to two and then one. */
@media (min-width: 620px) and (max-width: 1099px) {
    .cert-accordion-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Course card ------------------------------------------------
   The old card led with a 200px navy thumbnail carrying the same
   graduation-cap watermark on every course, so an A-cert Navy course,
   a PRCN instructor course and the SSB simulator were visually
   identical and the fold was spent on decoration. The thumbnail is
   gone. Identity now comes from a 5px top border in the family accent
   plus a wing/track icon tile, which costs ~44px instead of ~200px. */
.course-card {
    background: #fff;
    border-radius: var(--course-radius);
    box-shadow: var(--course-shadow);
    border-top: 5px solid var(--ac, var(--brand-navy));
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    /* Grid items default to min-width:auto, which refuses to shrink
       below the content's min-content width. On a 360px screen that
       pushed the card wider than its column and the accordion's
       overflow:hidden then clipped the CTAs. */
    min-width: 0;
}
.course-card > .course-content { min-width: 0; }

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,45,98,.14);
}

.course-content {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.course-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.course-card-tags {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; justify-content: flex-end;
}

.course-icon {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    background: rgba(var(--ac-rgb, 0,45,98), .12);
    color: var(--ac, var(--brand-navy));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

.course-category {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(var(--ac-rgb, 0,45,98), .10);
    color: var(--ac, var(--brand-navy));
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
}

/* "Live" keeps its meaning but no longer needs a big floating badge. */
.course-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .75rem; font-weight: 600; color: var(--course-muted);
}
.course-status::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #1e9e6a; flex: none;
}

.course-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.12rem;
    color: var(--brand-navy);
    margin: 0;
}

/* Clamped to 3 lines so one long instructor blurb cannot stretch its
   whole row. The full text stays in the DOM for crawlers and screen
   readers, and the detail page carries it in full.
   NOTE: the SSB course keeps its affiliation disclaimer in the LAST
   sentence of its description, so the SSB card is deliberately NOT
   clamped -- see .ssb-feature below. If a disclaimer is ever added to
   a certificate or instructor description, that card must come out of
   the clamp too. */
/* The rung note: one sentence per certificate level, above its four wing
   cards. Quiet by design -- it is context, not a claim competing with the
   cards. See CERT_LEVELS.rungNote for why it lives here and not on each card. */
/* Restores the separator lost when the meta line was split from one joined
   string into two spans -- the syllabus half needs its own data-i18n, so it
   had to become its own element. Decorative, hence aria-hidden. */
.course-price-sep { margin: 0 .35rem; opacity: .55; }

.cert-rung-note {
    margin: 0 0 14px;
    padding: 9px 14px;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--text-gray);
    background: var(--surface-panel);
    border-left: 3px solid var(--ac, #002d62);
    border-radius: 0 8px 8px 0;
}

.course-description {
    color: #666;
    line-height: 1.6;
    font-size: .88rem;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    /* 7, not 3. At 3 lines every one of the 16 descriptions was cut mid
       sentence -- the cards are ~24 characters wide, so 3 lines is ~74
       characters and roughly 70% of each description was invisible. 6 left
       C (Army), the longest, still clipping; 7 clears every card AND leaves
       headroom, which matters because the translations run longer than the
       English. Measured at each step, not guessed. */
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* NOT CLAMPED. These three descriptions END with the non-affiliation
   disclaimer, and at 3 lines of 11-14 it was being truncated away on the live
   catalogue -- the legal shield was not reaching the reader. The rule at the
   top of this block already said a card carrying a disclaimer must come out
   of the clamp; the instructor disclaimers were added later and nobody lifted
   it. The disclaimer sentence alone is 111 characters, so no amount of
   shortening would ever make it fit. Same treatment as .ssb-feature. */
#instructor .course-description,
.cards-instructor .course-description {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
}

.course-price-row {
    display: flex; align-items: baseline; gap: 10px;
    /* wrap, or the meta is clipped: at four-across the card is 250px and
       "₹199 · one-time" + "Beginner · 12 weeks" needs 253px on one line.
       Measured overflow was 43px. */
    flex-wrap: wrap;
    border-top: 1px solid var(--course-line);
    padding-top: 12px;
}
.course-price-meta {
    margin-left: auto; font-size: .8rem; color: var(--course-muted);
    text-align: right;
    /* once wrapped the auto margin would strand it against the right edge
       on its own line; align it with the price instead. */
    min-width: 0;
}
@media (min-width: 1100px) {
    .cert-accordion-body .course-price-meta { margin-left: 0; text-align: left; }
}

.course-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat {
    flex: 1;
    text-align: center;
}

.stat-value {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-navy);
    display: block;
}

.stat-label {
    font-size: 0.85rem;
    color: #666;
}

/* .course-price is shared with the index.html live grid via style.css,
   so its spacing is corrected here rather than there. */
.course-price-row .course-price { margin: 0; font-size: 1.25rem; }
/* "· one-time" was breaking to "one-" / "time" in the narrow column
   inside an expanded accordion on a 360px screen. */
.course-price-row .course-price-note,
.course-price-meta { white-space: nowrap; }

/* One solid primary + a plain text link, instead of two equal-weight
   outlined buttons that made the visitor choose between two things
   that looked the same. Both hrefs are unchanged. */
.course-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* At four-across the card is 250px and the primary button plus the
   "Course details" link cannot sit side by side -- the button text broke
   to three lines ("Get / this / course"), which reads as a broken control.
   Stack them so the button keeps a single line and stays a full-width
   target, which is also easier to hit on a small screen. */
@media (min-width: 1100px) {
    .cert-accordion-body .course-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .cert-accordion-body .course-actions .btn { width: 100%; text-align: center; }
    .cert-accordion-body .course-details-link { text-align: center; }
}

.course-details-link {
    flex: none;
    font-size: .86rem;
    font-weight: 600;
    color: var(--brand-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.course-details-link:hover { color: var(--ac, var(--brand-navy)); }
.course-details-link:focus-visible,
.course-card .btn-enroll:focus-visible {
    outline: 2px solid var(--ac, var(--brand-navy));
    outline-offset: 2px;
}

.btn-enroll {
    flex: 1;
    padding: 11px 18px;
    background: var(--brand-navy);
    color: #fff;
    border: 2px solid var(--brand-navy);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.btn-enroll:hover {
    background: var(--brand-navy-dark);
    border-color: var(--brand-navy-dark);
}

/* ---- SSB feature card -------------------------------------------
   The SSB track holds exactly one course, which left a single card
   sitting in a multi-column grid beside empty space. One course gets
   one full-width feature card instead. Falls back to the normal grid
   automatically if a second SSB course is ever published. */
.ssb-feature,
.free-feature {
    display: grid;
    grid-template-columns: 270px 1fr;
    background: #fff;
    border-radius: var(--course-radius);
    box-shadow: var(--course-shadow);
    overflow: hidden;
    /* No bottom margin: the enclosing .track owns the space below it.
       A child margin here stacked with the track's own and produced a
       276px hole above the Agniveer banner. */
}
.ssb-feature-left,
.free-feature-left {
    /* ends on --accent-ssb, not --ac-vivid: the vivid end is #0e8f8a and white
       text on it measures 3.95:1, under AA. The start was always fine (7.81:1),
       so only the far end was failing — and only for the text sitting over it. */
    background: linear-gradient(150deg, var(--accent-ssb), var(--accent-ssb));
    color: #fff;
    padding: 26px 22px;
    display: flex; flex-direction: column; gap: 12px;
}
.ssb-feature-left .ssb-bigicon,
.free-feature-left .ssb-bigicon { font-size: 2rem; }
.ssb-feature-tag,
.free-feature-tag {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.35);
    padding: 5px 10px; border-radius: 7px; align-self: flex-start;
}
.ssb-feature-left p,
.free-feature-left p { font-size: .85rem; color: rgba(255,255,255,.9); margin: 0; }
.ssb-feature-right,
.free-feature-right {
    padding: 24px 26px;
    display: flex; flex-direction: column; gap: 11px;
}
.ssb-feature-right .course-title,
.free-feature-right .course-title { font-size: 1.25rem; }
/* NOT clamped, deliberately. This course's description ends with the
   affiliation disclaimer ("VSVSV ... is not affiliated with the NCC,
   the SSBs, the Armed Forces or the Ministry of Defence"), and a
   3-line clamp truncated exactly that sentence. A disclaimer that
   needs a click is not a disclaimer. */
.ssb-feature-right .course-description,
.free-feature-right .course-description {
    display: block; overflow: visible; font-size: .9rem;
    -webkit-line-clamp: none; line-clamp: none;
}
.ssb-exercises { display: flex; flex-wrap: wrap; gap: 7px; }
.ssb-exercise {
    font-size: .75rem; font-weight: 600; color: var(--surface-ink-muted);
    background: var(--surface-panel); border-radius: 999px; padding: 4px 11px;
}
.ssb-feature .course-price-row { flex-wrap: wrap; }
.ssb-feature .course-actions { margin-left: auto; }

/* ---- Coming-soon banner ------------------------------------------
   Dashed + grey is the deliberate signal for "not purchasable". It is
   the ONLY dashed element on the page, so nothing sellable can be
   mistaken for it and vice versa. Derived from the track being empty,
   never hand-written -- static "coming soon" cards were written and
   deleted twice here after outliving the thing they described. */
.track-empty .track-notice {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: rgba(var(--ac-rgb), .06);
    border: 2px dashed rgba(var(--ac-rgb), .55);
    border-radius: var(--course-radius);
    padding: 16px 22px;
    color: var(--text-gray); font-size: .95rem;
}
.track-empty .track-notice .track-notice-icon {
    font-size: 1.3rem; color: var(--ac); flex: none;
}
.track-empty .track-notice a { margin-left: auto; }
.track-empty .track-band { background: none; border: none; padding: 0; margin-bottom: 14px; }
.track-empty .track-band-icon { background: var(--ac); }

.specialization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 25px;
}

.spec-card {
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid var(--brand-navy);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.spec-card:hover {
    transform: translateX(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-left-color: var(--brand-sky-light);
}

.spec-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.spec-icon i {
    font-size: 1.8rem;
    color: var(--brand-sky-light);
}

.spec-card h3 {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--brand-navy);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.spec-card p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 15px;
}

.spec-card .btn {
    width: 100%;
}

.info-section {
    background: #f8f9fa;
    padding: 60px 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.info-card {
    text-align: center;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.info-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon i {
    font-size: 2rem;
    color: var(--brand-sky-light);
}

.info-card h3 {
    color: var(--brand-navy);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.info-card p {
    color: #666;
    line-height: 1.7;
}

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 760px) {
    /* The 270px teal panel cannot hold its column on a phone; stacking
       it was the one thing causing horizontal scroll at 360px. */
    .ssb-feature { grid-template-columns: 1fr; }
    .ssb-feature-left { padding: 20px; }
    .ssb-feature .course-actions { margin-left: 0; width: 100%; }
    .ssb-feature .course-price-row { gap: 12px; }
    .track-empty .track-notice a { margin-left: 0; }
}

@media (max-width: 768px) {
    .courses-hero h1 {
        font-size: 2rem;
    }

    /* .courses-grid is NOT forced to one column here any more. The old
       card needed it because its 350px minimum could not fit a tablet;
       the new card's auto-fit track collapses on its own, so a 768px
       screen gets two columns instead of one very wide one. */

    .filter-tabs {
        flex-direction: column;
    }

    .filter-tab {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    /* The band's count pill is the least load-bearing thing in the
       header, so it is what goes when the row runs out of width --
       never the title or the price. */
    .track-band-count { display: none; }
    .track-band { padding: 14px 16px; gap: 12px; }
    .course-content { padding: 16px; }
    /* No .courses-grid override is needed here: the base track is
       minmax(min(255px, 100%), 1fr), and the min() lets it collapse
       below 255px inside the accordion's narrow inner column. A bare
       255px floor could not, and the grid was clipped by the
       accordion's overflow:hidden. */
    /* Price and its meta each take a full line rather than competing
       for a ~220px row inside an expanded accordion. */
    .course-price-row { flex-wrap: wrap; row-gap: 4px; }
    .course-price-row .course-price { flex: 1 1 100%; }
    .course-price-meta { margin-left: 0; text-align: left; }
    /* Claw back horizontal room for the card column. */
    .cert-ladder { padding-left: 14px; }
    .cert-accordion::before { left: -14px; width: 10px; }
    .cert-accordion-body { padding: 4px 10px 14px; }
    /* Block, not flex-wrap. The two CTAs sit in a grid cell whose
       min-content width was being driven by their combined intrinsic
       width, so flex-basis:100% still laid them out side by side and
       the card overflowed (and was then clipped by the accordion's
       overflow:hidden). Block layout has no such interaction. */
    .course-actions { display: block; }
    .course-actions .btn-enroll { display: block; width: 100%; }
    .course-details-link {
        display: block; width: 100%;
        text-align: center; margin-top: 10px;
    }
}


/* ---- Free mock: the SAME feature block as SSB ---------------------------
   It used to be a full-width plain card sitting under a "Free practice" band,
   directly above the certificate ladder, and it dominated the top of the page --
   a free 1-day practice test reading louder than the ₹1,499 product beneath it.
   It is a single standalone item exactly like the SSB course, so it gets the
   same two-column treatment: identity panel on the left, detail and CTA on the
   right. Layout comes from the .ssb-feature rules above; only the accent differs.

   The green is --accent-cert-b, an existing token. An earlier attempt here used
   an --accent-free that DOES NOT EXIST, and an undefined var() fails silently to
   no colour at all, so nothing looked wrong until it was measured. */
.free-feature-left {
    background: linear-gradient(150deg, var(--accent-cert-b), var(--accent-cert-b));
}
/* NOT clamped, for the same reason as the SSB card: this description ENDS with
   "Preparation only — not an official selection test and not a certificate."
   A clamp truncates exactly that sentence, and a disclaimer that needs a click
   is not a disclaimer. */
.free-feature-right .course-description {
    display: block; overflow: visible;
    -webkit-line-clamp: none; line-clamp: none;
}
.free-feature-right .course-price-row { margin-top: auto; }

@media (max-width: 760px) {
    .ssb-feature,
    .free-feature { grid-template-columns: 1fr; }
}


/* ---- Separating the free item from the paid ladder ----------------------
   Measured at ZERO pixels: the free block's bottom edge and the A rung's top
   edge were touching, so a free practice test and a ₹199 course read as one
   continuous slab. The free block already has its own green identity panel;
   what was missing was any separation at all.

   Both wrappers get it -- .track-subgroup-practice on /courses.html and
   .pcat-lead on the programme landing pages -- because the same free block
   renders in both and the owner asked for the change on both. Kept in this
   shared file rather than either page, or they drift apart again. */
.track-subgroup-practice,
.pcat-lead {
    margin-bottom: 38px;
    padding-bottom: 30px;
    position: relative;
}
/* A hairline, not a heavy rule: it marks the boundary without competing with
   the ladder's own coloured spine directly beneath it. Inset from both edges so
   it reads as a separator rather than a container border. */
.track-subgroup-practice::after,
.pcat-lead::after {
    content: "";
    position: absolute;
    left: 8%; right: 8%; bottom: 0;
    height: 1px;
    background: var(--surface-line);
}