/* ==========================================================================
   Compliance Training - courses index + single course template.

   Sprint 2.2. Shares hub.css design tokens (:root vars, .bh-subnav).
   All classes prefixed .ct- to avoid collisions with .bh-* on the hub page.

   Rule 14/15 compliance:
     - No color:rgba(255,255,255,<1) for text on dark navy anywhere.
     - Dark-navy sections use solid #ffffff with class-level specificity.
     - No smart quotes, no em-dashes, no ellipsis.
   ========================================================================== */

/* -------------------- Shared bits -------------------- */

.ct-section {
    background: #ffffff;
    padding: 72px 32px;
}
.ct-section--panel {
    background: #f5f7fb;
    border-top: 1px solid #e6e9f2;
    border-bottom: 1px solid #e6e9f2;
}
.ct-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.ct-section__inner--narrow {
    max-width: 880px;
}
.ct-section__head {
    text-align: center;
    margin-bottom: 40px;
}
.ct-section__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #F26B1D;
    margin-bottom: 12px;
}
.ct-section__title {
    font-family: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 800;
    color: #0e1a34;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
}
.ct-section__sub {
    max-width: 640px;
    margin: 8px auto 0;
    color: #3a4763;
    font-size: 16px;
    line-height: 1.6;
}

.ct-prose p {
    color: #3a4763;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 16px 0;
}
.ct-prose__p {
    color: #3a4763;
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
}

/* -------------------- Buttons + badges -------------------- */

.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
    white-space: nowrap;
}
.ct-btn--primary        { background:#F26B1D; color:#ffffff; }
.ct-btn--primary:hover  { background:#D95810; color:#ffffff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(242,107,29,.28); text-decoration:none; }
.ct-btn--ghost          { background:#ffffff; color:#001052; border-color:#e6e9f2; }
.ct-btn--ghost:hover    { border-color:#F26B1D; color:#F26B1D; text-decoration:none; }
.ct-btn--block          { display:flex; width:100%; }
/* White + outline-white variants for dark navy CTA bands. Rule 14 compliant. */
.ct-btn--white          { background:#ffffff; color:#001052; }
.ct-btn--white:hover    { background:#f5f7fb; color:#001052; text-decoration:none; transform:translateY(-1px); }
.ct-btn--outline-white  { background:transparent; color:#ffffff; border:1.5px solid #ffffff; }
.ct-btn--outline-white:hover { background:#ffffff; color:#001052; text-decoration:none; }

.ct-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.4;
}
.ct-badge--category   { background:#FFF2E5; color:#D95810; }
.ct-badge--duration   { background:#f5f7fb; color:#001052; }
.ct-badge--cpd        { background:#00B67A; color:#ffffff; }
.ct-badge--sm         { padding:3px 8px; font-size:11px; }

/* -------------------- SINGLE COURSE - HERO -------------------- */

.ct-course-hero {
    background: linear-gradient(135deg, #001052 0%, #0e2a47 55%, #12306e 100%);
    color: #ffffff;
    padding: 56px 32px 72px;
    position: relative;
    overflow: hidden;
}
.ct-course-hero::before {
    content: "";
    position: absolute;
    top: -160px; right: -180px;
    width: 520px; height: 520px;
    background: radial-gradient(circle at center, rgba(242,107,29,.24) 0%, rgba(242,107,29,0) 70%);
    pointer-events: none;
}
.ct-course-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.ct-course-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
/* Rule 14: solid white for hero copy on dark navy. */
.ct-course-hero .ct-course-hero__title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 44px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff !important;
    margin: 0 0 16px 0;
}
.ct-course-hero .ct-course-hero__lead {
    font-size: 18px;
    line-height: 1.6;
    color: #ffffff !important;
    margin: 0 0 24px 0;
    max-width: 640px;
}
.ct-course-hero__accreds {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ct-course-hero__accreds li {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: 600;
}
.ct-course-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* At-a-glance card (sits on the right of the hero, white on navy) */
.ct-course-hero__card {
    background: #ffffff;
    color: #001052;
    padding: 28px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 16, 82, 0.3);
}
.ct-course-hero__card .ct-course-hero__card-title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0e1a34;
    letter-spacing: -0.01em;
    margin: 0 0 16px 0;
}
.ct-course-hero__facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 0 20px 0;
}
.ct-course-hero__facts > div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f8;
    font-size: 14px;
}
.ct-course-hero__facts > div:last-child { border-bottom: none; }
.ct-course-hero__facts dt {
    font-weight: 700;
    color: #6b7591;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    padding-top: 2px;
}
.ct-course-hero__facts dd {
    margin: 0;
    color: #0e1a34;
    line-height: 1.5;
}

/* -------------------- SPLIT (2-col) sections -------------------- */

.ct-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.ct-split__col .ct-section__eyebrow { text-align: left; }
.ct-split__col .ct-section__title   { text-align: left; font-size: 26px; margin-bottom: 20px; }

.ct-check-list,
.ct-people-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.ct-check-list li,
.ct-people-list li {
    position: relative;
    padding-left: 32px;
    font-size: 16px;
    line-height: 1.55;
    color: #3a4763;
}
.ct-check-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 20px;
    background: #00B67A;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}
.ct-people-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #FFF2E5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D95810' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 20c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

/* -------------------- Modules list -------------------- */

.ct-module-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
    counter-reset: mod;
}
.ct-module-list__item {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid #e6e9f2;
    border-left: 4px solid #F26B1D;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(14, 26, 52, .04);
}
.ct-module-list__num {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #F26B1D;
    letter-spacing: -0.02em;
}
.ct-module-list__label {
    font-size: 16.5px;
    font-weight: 600;
    color: #0e1a34;
    line-height: 1.45;
}

/* -------------------- FAQ (single course) -------------------- */

.ct-faq { display: grid; gap: 10px; }
.ct-faq__item {
    background: #ffffff;
    border: 1px solid #e6e9f2;
    border-radius: 12px;
    padding: 18px 22px;
}
.ct-faq__item[open] {
    border-color: #F26B1D;
    box-shadow: 0 4px 20px rgba(14, 26, 52, .08);
}
.ct-faq__item summary {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: #0e1a34;
    cursor: pointer;
    list-style: none;
    padding-right: 32px;
    position: relative;
    line-height: 1.4;
}
.ct-faq__item summary::-webkit-details-marker { display: none; }
.ct-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    color: #F26B1D;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    transition: transform .15s ease;
}
.ct-faq__item[open] summary::after { content: "−"; }
.ct-faq__a {
    margin-top: 12px;
    color: #3a4763;
    font-size: 15.5px;
    line-height: 1.6;
}

/* -------------------- Legislation block -------------------- */

.ct-legislation {
    margin-top: 20px;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px dashed #cfd6e6;
}
.ct-legislation__title {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7591;
    margin: 0 0 8px 0;
}
.ct-legislation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.ct-legislation li {
    font-size: 14.5px;
    color: #0e1a34;
    font-weight: 600;
}

/* -------------------- Related courses -------------------- */

.ct-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.ct-related-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6e9f2;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ct-related-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 16, 82, .12);
    border-color: #F26B1D;
}
.ct-related-card__cat {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #F26B1D;
}
.ct-related-card__title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: #0e1a34;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
}
.ct-related-card__desc {
    color: #3a4763;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-related-card__meta {
    color: #6b7591;
    font-size: 13px;
    font-weight: 600;
    margin-top: auto;
}

/* -------------------- CTA band (dark navy) -------------------- */

.ct-cta-band {
    background: linear-gradient(135deg, #001052 0%, #0e2a47 55%, #12306e 100%);
    color: #ffffff;
    padding: 60px 32px;
}
.ct-cta-band__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
/* Rule 14: solid #ffffff for CTA band copy. */
.ct-cta-band .ct-cta-band__title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
}
.ct-cta-band .ct-cta-band__sub {
    color: #ffffff !important;
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
}
.ct-cta-band__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

/* -------------------- INDEX (view-all courses) -------------------- */

.ct-index-hero {
    background: #ffffff;
    padding: 48px 32px 24px;
}
.ct-index-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.ct-index-hero__eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #F26B1D;
    margin-bottom: 12px;
}
.ct-index-hero__title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #0e1a34;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 12px 0;
}
.ct-index-hero__sub {
    color: #3a4763;
    font-size: 17px;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 720px;
}

.ct-index {
    background: #f5f7fb;
    padding: 40px 32px 72px;
}
.ct-index__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* Filter sidebar */
.ct-index__filters {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6e9f2;
    padding: 24px;
    display: grid;
    gap: 24px;
    position: sticky;
    top: 24px;
}
.ct-filter-block__label {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7591;
    margin-bottom: 10px;
}
.ct-filter-search {
    position: relative;
    display: flex;
    align-items: center;
}
.ct-filter-search svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: #6b7591;
}
.ct-filter-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 10px;
    border: 1.5px solid #e6e9f2;
    font-family: inherit;
    font-size: 14px;
    color: #0e1a34;
    background: #ffffff;
}
.ct-filter-search input:focus {
    outline: none;
    border-color: #F26B1D;
    box-shadow: 0 0 0 3px rgba(242, 107, 29, .12);
}

.ct-filter-head {
    display: none;
}
.ct-filter-head__label {
    font-weight: 700;
    color: #0e1a34;
}
.ct-filter-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid #e6e9f2;
    border-radius: 999px;
    background: #ffffff;
    color: #001052;
    cursor: pointer;
    padding: 0;
}
.ct-filter-close svg {
    width: 16px;
    height: 16px;
}
.ct-filter-close:hover {
    border-color: #F26B1D;
    color: #F26B1D;
}
.ct-index__searchbar {
    display: none;
}

.ct-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}
.ct-filter-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #0e1a34;
    line-height: 1.3;
    transition: background .12s ease;
}
.ct-filter-list label:hover { background: #f5f7fb; }
.ct-filter-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    flex-shrink: 0;
    border: 1.5px solid #cfd6e6;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    display: inline-block;
}
.ct-filter-list input[type="checkbox"]:checked {
    background: #F26B1D;
    border-color: #F26B1D;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}
.ct-filter-list span:not(.ct-filter-list__count) {
    flex: 1;
}
.ct-filter-list__count {
    font-size: 12px;
    color: #6b7591;
    font-weight: 600;
}

/* Results toolbar */
.ct-index__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
}
.ct-index__count {
    font-size: 14px;
    font-weight: 700;
    color: #0e1a34;
}
.ct-index__filter-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1.5px solid #e6e9f2;
    border-radius: 999px;
    color: #001052;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.ct-index__filter-toggle svg { width: 16px; height: 16px; }

/* Sort dropdown + toolbar right cluster */
.ct-index__toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ct-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 14px;
    background: #ffffff;
    border: 1.5px solid #e6e9f2;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ct-sort:hover,
.ct-sort:focus-within {
    border-color: #001052;
    box-shadow: 0 0 0 3px rgba(0, 16, 82, 0.08);
}
.ct-sort__label {
    font-size: 13px;
    font-weight: 700;
    color: #6b7591;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ct-sort__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001052' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 6px center;
    background-size: 16px 16px;
    border: none;
    padding: 4px 26px 4px 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #0e1a34;
    cursor: pointer;
    outline: none;
    max-width: 220px;
}
.ct-sort__select:focus { outline: none; }

/* Card grid */
.ct-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.ct-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6e9f2;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    min-height: 260px;
}
.ct-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 16, 82, .12);
    border-color: #F26B1D;
}
.ct-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ct-card__cpd {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 3px 8px;
    border-radius: 999px;
    background: #00B67A;
    color: #ffffff;
}
.ct-card__title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: #0e1a34;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
}
.ct-card__desc {
    color: #3a4763;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.ct-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #eef2f8;
    margin-top: auto;
}
.ct-card__duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7591;
}
.ct-card__duration svg { width: 14px; height: 14px; }
.ct-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #F26B1D;
}
.ct-card__link svg { width: 14px; height: 14px; }

/* Empty state */
.ct-empty {
    background: #ffffff;
    border: 1px dashed #cfd6e6;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}
.ct-empty h3 {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #0e1a34;
    margin: 0 0 8px 0;
}
.ct-empty p {
    color: #3a4763;
    margin: 0 0 20px 0;
}

/* -------------------- Responsive -------------------- */

@media (max-width: 1024px) {
    .ct-course-hero__inner { grid-template-columns: 1fr; }
    .ct-course-hero__card { max-width: 480px; }
    .ct-split { grid-template-columns: 1fr; gap: 40px; }
    .ct-index__inner { grid-template-columns: minmax(0, 1fr); }
    .ct-index__results { min-width: 0; }
    .ct-index__filters { position: static; display: none; }
    .ct-index__filters.is-open { display: grid; }
    .ct-index__filter-toggle { display: inline-flex; }
    .ct-filter-head { display: flex; align-items: center; justify-content: space-between; }
    .ct-index__searchbar { display: flex; margin-bottom: 14px; }
    .ct-related-grid { grid-template-columns: 1fr 1fr; }
    .ct-cta-band__inner { grid-template-columns: 1fr; }
    .ct-cta-band__ctas { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .ct-section { padding: 56px 20px; }
    .ct-section__title { font-size: 26px; }
    .ct-course-hero { padding: 40px 20px 56px; }
    .ct-course-hero .ct-course-hero__title { font-size: 32px; }
    .ct-course-hero__facts > div { grid-template-columns: 88px 1fr; }
    .ct-index-hero { padding: 32px 20px 16px; }
    .ct-index-hero__title { font-size: 30px; }
    .ct-index { padding: 24px 16px 56px; }
    .ct-index__toolbar { flex-wrap: wrap; row-gap: 10px; }
    .ct-index__toolbar-right { width: 100%; min-width: 0; justify-content: space-between; }
    .ct-sort { flex: 1 1 auto; min-width: 0; }
    .ct-sort__select { width: 100%; min-width: 0; }
    .ct-card-grid { grid-template-columns: 1fr; }
    .ct-related-grid { grid-template-columns: 1fr; }
    .ct-cta-band { padding: 48px 20px; }
    .ct-cta-band .ct-cta-band__title { font-size: 24px; }
    .ct-module-list__item { grid-template-columns: 40px 1fr; padding: 14px 16px; }
    .ct-module-list__num { font-size: 18px; }
    .ct-module-list__label { font-size: 15px; }
}

/* -------------------- CATEGORY PAGE: More about + Siblings -------------------- */
/* Sprint 2.3: category landing page adds an SEO "More about ..." paragraph
   and an "Explore other topics" grid below the course listing. */

.ct-more {
    background: #f5f7fb;
    padding: 60px 32px;
    border-top: 1px solid #e6e9f2;
}
.ct-more__inner {
    max-width: 900px;
    margin: 0 auto;
}
.ct-more__title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #001052;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 14px 0;
    text-transform: capitalize;
}
.ct-more__body {
    font-size: 15.5px;
    line-height: 1.65;
    color: #3a4763;
    margin: 0;
}

.ct-siblings {
    background: #ffffff;
    padding: 60px 32px;
    border-top: 1px solid #e6e9f2;
}
.ct-siblings__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.ct-siblings__title {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #001052;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 24px 0;
}
.ct-siblings__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.ct-sibling {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: #f5f7fb;
    border: 1.5px solid #e6e9f2;
    border-radius: 14px;
    text-decoration: none;
    color: #001052;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ct-sibling:hover {
    border-color: #A81E2A;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 16, 82, 0.08);
    text-decoration: none;
}
.ct-sibling__name {
    font-size: 16px;
    font-weight: 800;
    color: #001052;
    letter-spacing: -0.01em;
}
.ct-sibling:hover .ct-sibling__name {
    color: #A81E2A;
}
.ct-sibling__desc {
    font-size: 13.5px;
    color: #6b7591;
    line-height: 1.4;
}
.ct-sibling__meta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #A81E2A;
    letter-spacing: 0.01em;
}
.ct-sibling__meta svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
.ct-sibling--all {
    background: #001052;
    border-color: #001052;
    color: #ffffff;
}
.ct-sibling--all:hover {
    border-color: #001052;
    background: #0a1f44;
}
.ct-sibling--all .ct-sibling__name { color: #ffffff; }
.ct-sibling--all:hover .ct-sibling__name { color: #ffffff; }
.ct-sibling--all .ct-sibling__desc { color: #ffffff; }
.ct-sibling--all .ct-sibling__meta { color: #01FCC2; }

@media (max-width: 640px) {
    .ct-more { padding: 44px 20px; }
    .ct-siblings { padding: 44px 20px; }
    .ct-more__title,
    .ct-siblings__title { font-size: 21px; }
}