/* ─────────────────────────────────────────────────────────────────────────────
   Shams Al-Duha — programme detail pages (courses/<slug>.html)
   Hero with the programme poster in a glass frame, a two-column body
   (overview, outcomes, learning journey, FAQ + a sticky programme card),
   prev/next navigation, related programmes and the contact band.
   ───────────────────────────────────────────────────────────────────────────── */

@layer sections {

  /* ── Hero ──────────────────────────────────────────────────────────────── */
  .course-hero { padding-bottom: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }
  .course-hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .course-hero__copy { max-width: 46rem; }
  .course-hero__title { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); }
  /* The marker swash draws in once the title has landed. */
  .course-hero__title .highlight::before { animation: highlight-draw 0.9s var(--ease-out) 0.75s both; }
  .course-hero__title-sub {
    display: block;
    margin-top: 0.14em;
    font-size: 0.56em;
    line-height: 1.35;
    color: var(--red);
  }

  .course-hero__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .course-hero__chips .chip {
    min-height: 2.2rem;
    gap: var(--s-2);
    padding-inline: var(--s-4);
    background: rgb(255 255 255 / 0.72);
    color: var(--ink);
    font-size: var(--fs-small);
    box-shadow: inset 0 0 0 1px var(--gold-border), var(--shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .course-hero__chips .chip__icon { width: 0.8rem; height: 0.8rem; }

  /* The school in two real numbers: a floating glass card under the sun
     sticker; both drift against the pointer. */
  .course-hero__proof {
    position: relative;
    padding-block-start: var(--s-10);
    padding-inline-end: var(--s-6);
    animation: enter-pop 1s var(--ease-out) 0.45s backwards;
  }
  .course-hero__stats {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 15.5rem;
    padding: var(--s-3) var(--s-8);
    border-radius: var(--r-xl);
    animation: course-bob 7s ease-in-out 1.6s infinite;
  }
  .course-hero__stat {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--s-5) var(--s-2);
    text-align: center;
  }
  .course-hero__stat + .course-hero__stat { border-top: 1px solid var(--line); }
  .course-hero__stat-value {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.6rem + 1.8vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--red);
  }
  .course-hero__star {
    width: 0.6em;
    height: 0.6em;
    color: var(--gold);
    filter: drop-shadow(0 2px 4px rgb(233 178 58 / 0.45));
    animation: course-glint 3.6s ease-in-out infinite;
  }
  @keyframes course-glint {
    0%, 70%, 100% { scale: 1; rotate: 0deg; }
    80%           { scale: 1.2; rotate: 18deg; }
  }
  .course-hero__stat-label { color: var(--ink-2); font-size: var(--fs-small); font-weight: 500; line-height: 1.5; }
  .course-hero__sun {
    position: absolute;
    z-index: 2;
    top: 0;
    inset-inline-end: -0.5rem;
    width: 6.25rem;
    height: 6.25rem;
    rotate: 12deg;
    animation: sticker-float 6s ease-in-out infinite;
  }

  /* Poster banner in a glass frame; tilts toward the pointer. */
  .course-banner {
    --frame-pad: clamp(0.45rem, 0.25rem + 0.6vw, 0.8rem);
    position: relative;
    margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
    padding: var(--frame-pad);
    border-radius: var(--r-xl);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-inset), var(--shadow-lg), 0 70px 110px -70px rgb(181 18 28 / 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transform: perspective(2600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .course-banner:hover { box-shadow: var(--shadow-inset), var(--shadow-lg), 0 80px 120px -64px rgb(181 18 28 / 0.58); }
  .course-banner__frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 1516 / 484;
    border-radius: calc(var(--r-xl) - var(--frame-pad));
    background: var(--gold-soft);
  }
  .course-banner__frame picture, .course-banner__frame img { width: 100%; height: 100%; }
  .course-banner__frame img { object-fit: cover; transition: scale 1.6s var(--ease-out); }
  .course-banner:hover .course-banner__frame img { scale: 1.025; }
  /* A fine highlight on the inner edge */
  .course-banner__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.65);
    pointer-events: none;
  }
  /* A band of morning light crosses the poster once, and again on hover. */
  .course-banner__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, transparent 36%, rgb(255 255 255 / 0.45) 50%, rgb(255 240 190 / 0.12) 56%, transparent 66%);
    translate: 120% 0;
    transition: translate 1.3s var(--ease-out);
    animation: course-sheen 1.9s var(--ease-out) 1.15s;
    pointer-events: none;
  }
  .course-banner:hover .course-banner__frame::after { translate: -120% 0; }
  @keyframes course-sheen {
    from { translate: 120% 0; }
    to   { translate: -120% 0; }
  }

  .course-banner__tag {
    position: absolute;
    z-index: 2;
    bottom: calc(clamp(1.05rem, 0.85rem + 0.6vw, 1.4rem) * -1);
    inset-inline-end: clamp(1.25rem, 5vw, 4rem);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: clamp(2.4rem, 2rem + 0.8vw, 2.9rem);
    padding: 0 var(--s-5);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
    font-weight: 600;
    white-space: nowrap;
    animation: enter-pop 1s var(--ease-out) 1s backwards, course-bob 7s ease-in-out 2s infinite;
  }
  .course-banner__tag svg { width: 1rem; height: 1rem; color: var(--gold); }
  @keyframes course-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  /* ── Body: main column + sticky programme card ─────────────────────────── */
  .course-body { isolation: isolate; }
  /* The section is far taller than wide: fixed-size pools of light instead
     of the shared closest-side ellipses, which would stretch into stripes. */
  .course-body .ambient {
    background:
      radial-gradient(circle min(34rem, 80vw) at 88% 3%, rgb(247 209 74 / 0.24), transparent),
      radial-gradient(circle min(30rem, 75vw) at 10% 30%, var(--glow-red), transparent),
      radial-gradient(circle min(32rem, 80vw) at 92% 62%, rgb(247 209 74 / 0.18), transparent),
      radial-gradient(circle min(28rem, 75vw) at 6% 92%, var(--glow-red), transparent);
  }
  /* The blocks fill the first column row by row; the card, which follows the
     overview in the source, spans all four rows of the second column. */
  .course-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22.5rem);
    column-gap: clamp(2.5rem, 1rem + 4vw, 5.5rem);
    align-items: start;
  }
  .course-layout > .course-block { grid-column: 1; min-width: 0; }

  .course-block { position: relative; }
  /* "~" rather than "+": the card sits between the overview and the outcomes. */
  .course-block ~ .course-block {
    margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  }
  /* Gold rule with a spark between blocks */
  .course-block ~ .course-block::before,
  .course-block ~ .course-block::after {
    content: "";
    position: absolute;
    top: 0;
    pointer-events: none;
  }
  .course-block ~ .course-block::before {
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(to left,
      transparent, var(--gold-border) 22%, var(--gold-border) calc(50% - 1.25rem),
      transparent calc(50% - 1.25rem), transparent calc(50% + 1.25rem),
      var(--gold-border) calc(50% + 1.25rem), var(--gold-border) 78%, transparent);
  }
  .course-block ~ .course-block::after {
    left: 50%;
    width: 0.95rem;
    height: 0.95rem;
    translate: -50% -50%;
    background: var(--gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.3 7.2L21.5 12l-7.2 3.3L12 22.5l-2.3-7.2L2.5 12l7.2-3.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.3 7.2L21.5 12l-7.2 3.3L12 22.5l-2.3-7.2L2.5 12l7.2-3.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .course-block__head {
    display: grid;
    gap: var(--s-3);
    justify-items: start;
    max-width: 40rem;
    margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  }
  .course-block__title { font-size: clamp(1.8rem, 1.35rem + 1.5vw, 2.6rem); line-height: var(--lh-tight); }
  .course-block__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.8; }

  /* Overview */
  .course-quote {
    position: relative;
    padding: var(--s-6) var(--s-8);
    padding-inline-start: 4.25rem;
    border-radius: var(--r-md);
    background: linear-gradient(120deg, var(--gold-soft), rgb(255 255 255 / 0.78));
    border: 1px solid var(--gold-border);
    box-shadow: var(--shadow-sm);
  }
  .course-quote svg { position: absolute; top: 1.4rem; inset-inline-start: 1.3rem; width: 1.9rem; height: 1.9rem; color: var(--gold); }
  .course-quote p {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    font-weight: 600;
    line-height: 1.8;
    color: var(--ink);
  }
  .course-prose {
    display: grid;
    gap: var(--s-5);
    max-width: 46rem;
    margin-top: var(--s-8);
    color: var(--ink-2);
    font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.15rem);
    line-height: 2;
  }
  .course-prose p:first-child { color: var(--ink); }

  /* Outcomes */
  .outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .outcomes > li { display: grid; }
  .outcome {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    padding: var(--s-6);
    border-radius: var(--r-md);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .outcome:hover { transform: translateY(-5px); box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .outcome__icon {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--s-2);
    border-radius: 1rem;
    background: linear-gradient(150deg, var(--red-soft), var(--white));
    border: 1px solid var(--red-border);
    color: var(--red-strong);
    transition: color var(--dur-base) linear, rotate var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .outcome__icon::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .outcome__icon svg { width: 1.45rem; height: 1.45rem; }
  .outcome:hover .outcome__icon { color: var(--white); rotate: -8deg; box-shadow: 0 0 0 4px rgb(247 209 74 / 0.35), var(--shadow-red); }
  .outcome:hover .outcome__icon::before { opacity: 1; }
  .outcome__num {
    position: absolute;
    top: var(--s-5);
    inset-inline-end: var(--s-6);
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.2px rgb(233 178 58 / 0.55);
    transition: translate var(--dur-slow) var(--ease-out);
    user-select: none;
  }
  .outcome:hover .outcome__num { translate: 0 -3px; -webkit-text-stroke-color: var(--gold); }
  .outcome__title { font-size: 1.25rem; }
  .outcome__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.85; }

  /* Learning journey: numbered steps joined by a line that fills as you read */
  .journey { --node: 3.25rem; --node-top: var(--s-5); --journey-gap: var(--s-4); }
  .journey__list { display: grid; gap: var(--journey-gap); }
  .journey__step {
    position: relative;
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
  }
  .journey__step:not(:last-child)::before,
  .journey__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--node-top) + var(--node) / 2);
    inset-inline-start: calc(var(--node) / 2 - 1px);
    width: 2px;
    height: calc(100% + var(--journey-gap));
    border-radius: 2px;
    pointer-events: none;
  }
  .journey__step::before { background: rgb(215 20 31 / 0.14); }
  .journey__step::after {
    background: linear-gradient(180deg, var(--gold-bright), var(--red));
    box-shadow: 0 0 10px rgb(215 20 31 / 0.35);
    transform-origin: 50% 0;
    transform: scaleY(var(--seg, 1));
  }
  .journey.is-live .journey__step::after { transform: scaleY(var(--seg, 0)); }

  .journey__node {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: var(--node);
    height: var(--node);
    margin-top: var(--node-top);
    border-radius: 50%;
    background: var(--white);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 5px var(--bg-deep), 0 0 0 6px var(--gold-border), var(--shadow-red);
    transition: color var(--dur-base) linear, box-shadow var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
  }
  .journey__node::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .journey.is-live .journey__step:not(.is-reached) .journey__node {
    color: var(--red-strong);
    box-shadow: 0 0 0 5px var(--bg-deep), 0 0 0 6px var(--red-border), var(--shadow-sm);
  }
  .journey.is-live .journey__step:not(.is-reached) .journey__node::before { opacity: 0; }
  .journey.is-live .journey__step.is-current .journey__node {
    scale: 1.08;
    box-shadow: 0 0 0 5px var(--bg-deep), 0 0 0 7px var(--gold-bright), 0 0 26px rgb(215 20 31 / 0.45);
  }

  .journey__card {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-5) var(--s-6);
    border-radius: var(--r-md);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .journey.is-live .journey__step.is-current .journey__card {
    background: var(--white);
    border-color: var(--gold-border);
    box-shadow: var(--shadow-inset), var(--shadow-md);
  }
  .journey__label { color: var(--gold-deep); font-size: var(--fs-caption); font-weight: 600; line-height: 1.6; }
  .journey__title { font-size: var(--fs-h3); }
  .journey__text { color: var(--ink-2); line-height: 1.85; }

  /* FAQ accordion */
  .faq { display: grid; gap: var(--s-3); }
  .faq__item {
    border-radius: var(--r-md);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: background-color var(--dur-base) linear, border-color var(--dur-base) linear, box-shadow var(--dur-slow) var(--ease-out);
  }
  .faq__item:hover { box-shadow: var(--shadow-inset), var(--shadow-md); }
  .faq__item[open] {
    background: var(--white);
    border-color: var(--gold-border);
    box-shadow: var(--shadow-inset), var(--shadow-md), 0 0 0 4px rgb(247 209 74 / 0.14);
  }
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border-radius: var(--r-md);
    list-style: none;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
    font-weight: 600;
    line-height: 1.6;
    transition: color var(--dur-fast) linear;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q::marker { content: ""; }
  .faq__q:hover, .faq__item[open] .faq__q { color: var(--red-strong); }
  .faq__q:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
  .faq__icon {
    position: relative;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red-strong);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear, rotate var(--dur-slow) var(--ease-out);
  }
  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.8rem;
    height: 2px;
    margin: -1px 0 0 -0.4rem;
    border-radius: 2px;
    background: currentColor;
    transition: rotate var(--dur-slow) var(--ease-out);
  }
  .faq__icon::after { rotate: 90deg; }
  .faq__q:hover .faq__icon { background: var(--white); box-shadow: inset 0 0 0 1px var(--red-border); }
  .faq__item[open] .faq__icon { background: var(--red-strong); color: var(--white); rotate: 180deg; box-shadow: var(--shadow-red); }
  .faq__item[open] .faq__icon::after { rotate: 0deg; }
  .faq__a { padding: 0 var(--s-6) var(--s-6); color: var(--ink-2); line-height: 1.95; }
  .faq__a p { padding-top: var(--s-4); border-top: 1px dashed var(--gold-border); }
  .faq__item[open] .faq__a p { animation: course-faq-in 0.6s var(--ease-out) both; }
  @keyframes course-faq-in { from { opacity: 0; translate: 0 -6px; } }

  .faq__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-6);
    color: var(--ink-2);
  }

  /* Programme card */
  .course-aside { grid-column: 2; grid-row: 1 / span 4; min-width: 0; }
  .course-panel {
    display: grid;
    gap: var(--s-4);
    padding: clamp(1.25rem, 0.9rem + 1vw, 1.6rem);
    border-radius: var(--r-lg);
  }
  .course-panel__head { display: flex; align-items: center; gap: var(--s-3); }
  .course-panel__logo {
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 2px var(--white), 0 8px 18px -8px rgb(181 18 28 / 0.55);
  }
  .course-panel__heading { display: grid; min-width: 0; }
  .course-panel__kicker { color: var(--gold-deep); font-size: var(--fs-caption); font-weight: 600; line-height: 1.5; }
  .course-panel__title { font-size: 1.3rem; line-height: 1.4; }
  .course-panel__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  .course-facts {
    display: grid;
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.6);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset);
  }
  .course-fact {
    position: relative;
    display: grid;
    align-content: center;
    gap: 0;
    min-height: 3.6rem;
    padding: var(--s-2) var(--s-4);
    padding-inline-start: 3.85rem;
  }
  .course-fact + .course-fact { border-top: 1px solid var(--line); }
  .course-fact dt { color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.5; }
  .course-fact dd { color: var(--ink); font-weight: 500; line-height: 1.55; }
  .course-fact__icon {
    position: absolute;
    top: 50%;
    inset-inline-start: var(--s-4);
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--gold-soft);
    color: var(--gold-deep);
    box-shadow: inset 0 0 0 1px var(--gold-border);
  }
  .course-fact__icon svg { width: 1.15rem; height: 1.15rem; }

  .course-panel__actions { display: grid; gap: var(--s-1); }
  .course-panel__cta { width: 100%; }
  .course-panel__phone { padding-block: var(--s-2); }
  .course-panel__phone .icon-tile { width: 2.5rem; height: 2.5rem; }
  .course-panel__phone .icon-tile svg { width: 1.1rem; height: 1.1rem; }

  .course-toc { padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .course-toc__title { margin-bottom: var(--s-1); color: var(--ink-2); font-size: var(--fs-caption); font-weight: 500; }
  .course-toc__list { display: grid; gap: 1px; }
  .course-toc__list a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.2rem var(--s-3);
    border-radius: var(--r-xs);
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.75;
    transition: color var(--dur-fast) linear, background-color var(--dur-base) linear;
  }
  .course-toc__list a::before {
    content: "";
    flex: none;
    width: 0.9rem;
    height: 2px;
    border-radius: 2px;
    background: var(--line-strong);
    transition: width var(--dur-base) var(--ease-out);
  }
  .course-toc__list a:hover { color: var(--ink); background: rgb(255 255 255 / 0.7); }
  .course-toc__list a[aria-current] { color: var(--red-strong); background: var(--red-mist); font-weight: 500; }
  .course-toc__list a[aria-current]::before { width: 1.6rem; background: linear-gradient(to left, var(--red), var(--gold)); }

  @media (min-width: 1025px) and (min-height: 700px) {
    .course-aside { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
  }
  @media (min-width: 1025px) and (max-height: 800px) {
    .course-toc { display: none; }
  }

  /* ── Previous / next programme ─────────────────────────────────────────── */
  .course-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: var(--s-6);
    margin-top: clamp(4rem, 3rem + 3vw, 6rem);
  }
  .course-pager__link {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-width: 0;
    padding: var(--s-3);
    padding-inline-end: var(--s-6);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .course-pager__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .course-pager__link--next { flex-direction: row-reverse; padding-inline: var(--s-6) var(--s-3); }
  .course-pager__thumb {
    flex: none;
    width: clamp(7rem, 4rem + 6vw, 10.5rem);
    aspect-ratio: 1516 / 484;
    border-radius: calc(var(--r-lg) - var(--s-3));
    overflow: hidden;
    background: var(--gold-soft);
  }
  .course-pager__thumb picture, .course-pager__thumb img { width: 100%; height: 100%; }
  .course-pager__thumb img { object-fit: cover; transition: scale 1.2s var(--ease-out); }
  .course-pager__link:hover .course-pager__thumb img { scale: 1.06; }
  .course-pager__text { display: grid; gap: 2px; min-width: 0; justify-items: start; }
  .course-pager__link--next .course-pager__text { justify-items: end; text-align: end; }
  .course-pager__dir { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--red-strong); font-size: var(--fs-caption); font-weight: 500; }
  .course-pager__dir svg { width: 1rem; height: 1rem; transition: transform var(--dur-base) var(--ease-out); }
  .course-pager__link--prev:hover .course-pager__dir svg { transform: translateX(3px); }
  .course-pager__link--next:hover .course-pager__dir svg { transform: translateX(-3px); }
  .course-pager__title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem);
    font-weight: 700;
    line-height: 1.45;
  }

  .course-pager__center { display: grid; align-self: center; justify-items: center; gap: var(--s-1); }
  .course-pager__count { display: flex; align-items: baseline; gap: var(--s-2); direction: ltr; font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
  .course-pager__count > .num { font-size: 1.9rem; color: var(--red); }
  .course-pager__of { color: var(--ink-2); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; }
  .course-pager__dots { display: flex; align-items: center; }
  .course-pager__dots a { position: relative; display: block; width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); }
  .course-pager__dots a::before {
    content: "";
    position: absolute;
    inset: 50% 0.3rem auto;
    height: 4px;
    translate: 0 -50%;
    border-radius: var(--r-pill);
    background: var(--red-border);
    transition: background-color var(--dur-base) var(--ease-out), inset var(--dur-base) var(--ease-out);
  }
  .course-pager__dots a:hover::before { background: var(--gold); }
  .course-pager__dots a[aria-current="page"]::before { inset-inline: 0.05rem; background: linear-gradient(to left, var(--red), var(--gold)); }
  .course-pager__dots a:focus-visible { outline-offset: 0; border-radius: var(--r-pill); }

  /* ── Other programmes ──────────────────────────────────────────────────── */
  .course-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .course-related__grid > li { display: grid; }

  /* ── Responsive ────────────────────────────────────────────────────────── */
  @media (max-width: 1024px) {
    /* One column in source order: the card comes straight after the overview. */
    .course-layout { grid-template-columns: minmax(0, 1fr); }
    .course-aside { grid-column: 1; grid-row: auto; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
    .course-toc { display: none; }
  }
  @media (min-width: 641px) and (max-width: 1024px) {
    .course-panel {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas: "head facts" "chips facts" "actions facts";
      column-gap: var(--s-8);
      align-items: start;
    }
    .course-panel__head { grid-area: head; }
    .course-panel__chips { grid-area: chips; }
    .course-panel__actions { grid-area: actions; }
    .course-facts { grid-area: facts; align-self: center; }

    .course-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-related__grid > li:nth-child(3) { grid-column: 1 / -1; }
    .course-related__grid > li:nth-child(3) .course-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--s-2);
    }
    .course-related__grid > li:nth-child(3) .course-card__body { padding-top: var(--s-3); }
  }
  @media (max-width: 900px) {
    .course-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
    /* The two numbers become a slim glass strip under the buttons. */
    .course-hero__proof { justify-self: start; width: min(100%, 30rem); padding: 0; }
    .course-hero__sun { display: none; }
    .course-hero__stats {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      min-width: 0;
      padding: var(--s-1) var(--s-2);
      border-radius: var(--r-md);
      animation: none;
    }
    .course-hero__stat {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      justify-items: start;
      column-gap: var(--s-3);
      padding: var(--s-3);
      text-align: start;
    }
    .course-hero__stat + .course-hero__stat { border-top: 0; border-inline-start: 1px solid var(--line); }
    .course-hero__stat-value { font-size: 1.9rem; }
    .course-hero__stat-label { font-size: var(--fs-caption); line-height: 1.45; }
    .course-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
    .course-pager__center { grid-column: 1 / -1; grid-row: 2; }
  }
  @media (max-width: 640px) {
    .course-hero__proof { width: 100%; }
    .course-hero__stat { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 0; padding: var(--s-3) var(--s-2); text-align: center; }
    .course-hero__stat-value { font-size: 1.75rem; }
    .course-banner { border-radius: var(--r-lg); }
    .course-banner__frame { border-radius: calc(var(--r-lg) - var(--frame-pad)); }
    .course-banner__tag { inset-inline-end: auto; left: 50%; translate: -50% 0; }
    .course-quote { padding: var(--s-5); padding-inline-start: 3.5rem; }
    .course-quote svg { top: 1.15rem; inset-inline-start: 1rem; width: 1.6rem; height: 1.6rem; }
    .outcomes { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
    /* Icon beside the text, so short cards don't stand tall and empty */
    .outcome { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); padding: var(--s-5); }
    .outcome__icon { grid-row: span 2; width: 3rem; height: 3rem; margin-bottom: 0; }
    .outcome__title { padding-inline-end: 2.5rem; align-self: center; }
    .outcome__text { grid-column: 2; }
    .outcome__num { top: var(--s-4); inset-inline-end: var(--s-5); font-size: 1.6rem; }
    .journey { --node: 2.75rem; --node-top: var(--s-4); }
    .journey__step { gap: var(--s-3); }
    .journey__card { padding: var(--s-4) var(--s-5); }
    .faq__q { padding: var(--s-4) var(--s-5); }
    .faq__a { padding: 0 var(--s-5) var(--s-5); }
    .course-pager { gap: var(--s-3); }
    .course-pager__link,
    .course-pager__link--next {
      flex-direction: column;
      align-items: stretch;
      gap: var(--s-3);
      padding: var(--s-2) var(--s-2) var(--s-4);
    }
    .course-pager__thumb { width: 100%; border-radius: calc(var(--r-lg) - var(--s-2)); }
    .course-pager__text { padding-inline: var(--s-2); }
    .course-related__grid { grid-template-columns: minmax(0, 1fr); }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .course-hero__title .highlight::before, .course-hero__proof, .course-hero__stats, .course-hero__star, .course-hero__sun,
    .course-banner__tag, .course-banner__frame::after, .faq__item[open] .faq__a p { animation: none; }
    .course-banner, .course-banner__frame img, .course-banner__frame::after,
    .outcome, .outcome__icon, .outcome__icon::before, .outcome__num,
    .journey__node, .journey__node::before, .journey__card,
    .faq__item, .faq__q, .faq__icon, .faq__icon::before, .faq__icon::after,
    .course-toc__list a, .course-toc__list a::before,
    .course-pager__link, .course-pager__thumb img, .course-pager__dir svg, .course-pager__dots a::before { transition-duration: 0.01ms; }
  }
}

/* Smoothly open and close the answers where the browser can animate
   <details> content (kept apart: an unknown pseudo-element would void
   any rule it shares a selector list with). */
@supports selector(::details-content) {
  @layer sections {
    .faq__item::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 0.5s var(--ease-out), content-visibility 0.5s allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; }
  }
  @layer motion {
    @media (prefers-reduced-motion: reduce) {
      .faq__item::details-content { transition: none; }
    }
  }
}