/* ─────────────────────────────────────────────────────────────────────────────
   Shams Al-Duha — «الدورات» catalog page
   Hero with a fanned deck of programme posters, a sticky glass filter bar over
   the course grid, the journey through the stages, what sets the programmes
   apart, and the contact band.
   ───────────────────────────────────────────────────────────────────────────── */

@layer sections {

  /* ── Hero ──────────────────────────────────────────────────────────────── */
  @media (min-width: 901px) {
    .page-hero__grid.courses-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  }
  /* The marker draws in once the title has settled. */
  .courses-hero__title .highlight::before { animation: highlight-draw 0.9s var(--ease-out) 0.7s both; }
  .courses-hero__down { transition: transform var(--dur-base) var(--ease-out); }
  .btn:hover .courses-hero__down { transform: translateY(3px); }

  /* One row of three pills; on narrow desktops their text wraps instead of
     leaving one pill alone on a second row. */
  .courses-hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s-2); margin-top: var(--s-3); }
  .courses-hero__fact {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.6rem;
    padding-block: var(--s-1);
    padding-inline: var(--s-1) var(--s-4);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.62);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.4;
  }
  .courses-hero__fact strong { font-family: var(--font-display); font-size: 1.15em; font-weight: 700; color: var(--red); }
  .courses-hero__fact-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--red-soft), var(--white));
    box-shadow: inset 0 0 0 1px var(--red-border);
    color: var(--red-strong);
  }
  .courses-hero__fact-icon svg { width: 1rem; height: 1rem; }
  .courses-hero__fact:first-child .courses-hero__fact-icon { background: linear-gradient(150deg, var(--gold-soft), var(--white)); box-shadow: inset 0 0 0 1px var(--gold-border); color: var(--gold); }

  /* Fanned deck of posters */
  .courses-fan {
    position: relative;
    justify-self: center;
    width: min(100%, 33rem);
    padding-block: var(--s-8) var(--s-10);
  }
  .courses-fan__rays {
    position: absolute;
    inset: -12% -16%;
    z-index: -1;
    background:
      radial-gradient(closest-side, rgb(247 209 74 / 0.36), transparent 72%),
      repeating-conic-gradient(from 0deg, rgb(247 209 74 / 0.22) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 76%);
    mask: radial-gradient(closest-side, #000 22%, transparent 76%);
    animation: rays-spin 110s linear infinite;
    pointer-events: none;
  }
  /* The cards stack in flow, each tucked under the next by about a third of a
     poster. Captions sit above the posters, so the overlap only ever covers
     artwork; percentage margins follow the deck's width, like the posters. */
  .courses-fan__deck {
    --fan-scroll: 0;
    --fan-w: 80%;
    position: relative;
    display: grid;
    align-content: start;
    transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .fan-card {
    --lift: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--fan-w);
    padding: 0.5rem;
    border-radius: var(--r-md);
    background: linear-gradient(150deg, rgb(255 255 255 / 0.95), rgb(255 250 244 / 0.8));
    border: 1px solid rgb(255 255 255 / 0.95);
    box-shadow:
      var(--shadow-inset),
      0 0 0 1px rgb(245 198 189 / 0.55),
      0 34px 60px -32px rgb(120 32 20 / 0.5),
      0 10px 20px -14px rgb(120 32 20 / 0.24);
    transform:
      translate3d(0, calc(var(--lift) + var(--fan-scroll) * var(--fan-drift, 0px)), var(--fan-z, 0px))
      rotate(var(--fan-r, 0deg));
    transition: transform 0.7s var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
    animation: fan-in 1.1s var(--ease-out) backwards;
    animation-delay: calc(0.25s + var(--fan-i, 0) * 0.14s);
  }
  .fan-card + .fan-card { margin-top: calc(var(--fan-w) * -0.1); }
  .fan-card--back  { --fan-i: 0; --fan-r: 4deg;    --fan-z: 0px;  --fan-drift: -34px; justify-self: start; }
  .fan-card--mid   { --fan-i: 1; --fan-r: -3.5deg; --fan-z: 40px; --fan-drift: -12px; justify-self: end; }
  .fan-card--front { --fan-i: 2; --fan-r: 1.5deg;  --fan-z: 80px; --fan-drift: 18px;  justify-self: start; margin-inline-start: 7%; }
  /* Pointing at the deck opens the fan a little further. */
  .courses-fan__deck:hover .fan-card--back  { --lift: -14px; --fan-r: 7deg; }
  .courses-fan__deck:hover .fan-card--mid   { --fan-r: -6deg; }
  .courses-fan__deck:hover .fan-card--front { --lift: 12px; --fan-r: 1deg; }

  .fan-card__poster {
    position: relative;
    aspect-ratio: 1516 / 484;
    border-radius: calc(var(--r-md) - 0.5rem);
    overflow: hidden;
    background: var(--gold-soft);
  }
  .fan-card__poster picture, .fan-card__poster img { width: 100%; height: 100%; }
  .fan-card__poster img { object-fit: cover; }
  /* Morning light glancing across the glass */
  .fan-card__poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.42) 46%, transparent 60%);
    translate: 130% 0;
    animation: fan-glint 7s var(--ease-out) 1.8s infinite;
    pointer-events: none;
  }
  .fan-card--mid .fan-card__poster::after { animation-delay: 2.4s; }
  .fan-card--back .fan-card__poster::after { animation-delay: 3s; }
  .fan-card__cap {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    min-width: 0;
    padding: 0.1rem 0.35rem 0.45rem;
  }
  .fan-card__title {
    font-family: var(--font-display);
    font-size: clamp(0.92rem, 0.8rem + 0.35vw, 1.1rem);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fan-card__cap .chip { flex: none; }

  .courses-fan__sun {
    position: absolute;
    z-index: 2;
    top: 40%;
    inset-inline-start: -5%;
    width: clamp(4.5rem, 3rem + 4vw, 7rem);
    height: auto;
    aspect-ratio: 1;
    rotate: 10deg;
    animation: sticker-float 6s ease-in-out infinite;
  }
  /* Pinned like a sticker to the corner of the front poster, clear of every caption. */
  .courses-fan__badge {
    position: absolute;
    z-index: 2;
    bottom: 2%;
    inset-inline-end: -4%;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-5);
    border-radius: var(--r-md);
    animation: courses-bob 7s ease-in-out 1.2s infinite;
  }
  .courses-fan__badge-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--red); }
  .courses-fan__badge-label { color: var(--ink-2); font-size: var(--fs-caption); font-weight: 500; line-height: 1.5; }

  @keyframes fan-in {
    from { opacity: 0; transform: translate3d(0, 90px, 0) rotate(0deg) scale(0.9); }
  }
  @keyframes fan-glint {
    0%        { translate: 130% 0; }
    22%, 100% { translate: -130% 0; }
  }
  @keyframes courses-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }

  /* ── Catalog ───────────────────────────────────────────────────────────── */
  .catalog { isolation: isolate; }
  .catalog .ambient { --glow-a: 88% 18%; --glow-b: 12% 70%; }
  .catalog .section-head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

  /* Glass filter bar: stays under the header while the grid is being read. */
  .catalog-bar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
    padding: 0.4rem;
    border-radius: var(--r-pill);
    transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) linear, top var(--dur-slow) var(--ease-out);
  }
  .catalog-bar.is-stuck {
    background: linear-gradient(140deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.72));
    box-shadow: var(--shadow-inset), var(--shadow-lg), 0 0 0 1px rgb(245 198 189 / 0.5);
  }
  @media (min-width: 901px) {
    .catalog-bar { position: sticky; top: calc(var(--s-3) * 2 + var(--header-h)); }
    :root:has(.site-header.is-compact) .catalog-bar { top: calc(var(--s-3) * 2 + 64px); }
    /* A card link reached with the keyboard scrolls into view below the bar,
       not under it. This adds to the page's scroll-padding (header + 1.5rem). */
    .catalog__grid a { scroll-margin-top: calc(var(--s-3) * 2 + var(--catalog-bar-h, 4.25rem) + var(--s-4) - var(--s-6)); }
  }

  .catalog-filters {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-1);
    min-width: 0;
    padding: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .catalog-filters::-webkit-scrollbar { display: none; }
  /* If the chips ever overflow, the hidden side fades out as a hint. */
  .catalog-filters.can-scroll-forward { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem); mask-image: linear-gradient(to right, transparent, #000 3rem); }
  .catalog-filters.can-scroll-back { -webkit-mask-image: linear-gradient(to left, transparent, #000 3rem); mask-image: linear-gradient(to left, transparent, #000 3rem); }
  .catalog-filters.can-scroll-back.can-scroll-forward { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }

  .filter-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: var(--s-2);
    min-height: 2.85rem;
    padding-inline: var(--s-5) var(--s-2);
    border-radius: var(--r-pill);
    color: var(--ink-2);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--dur-base) linear, background-color var(--dur-base) linear, box-shadow var(--dur-base) var(--ease-out);
  }
  .filter-chip:hover { color: var(--ink); background: rgb(255 255 255 / 0.7); }
  .filter-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; border-radius: var(--r-pill); }
  .filter-chip[aria-pressed="true"] { color: var(--white); background: var(--red-strong); box-shadow: var(--shadow-red); }
  .filter-chip__count {
    display: grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding-inline: 0.4rem;
    border-radius: var(--r-pill);
    background: var(--bg-deep);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    font-weight: 600;
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear, scale var(--dur-base) var(--ease-out);
  }
  .filter-chip:hover .filter-chip__count { background: var(--gold-soft); color: var(--gold-deep); }
  .filter-chip[aria-pressed="true"] .filter-chip__count { background: rgb(255 255 255 / 0.2); color: var(--white); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); }

  /* With the script, a red pill glides between the chips instead. */
  .catalog-filters__pill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pill-w, 0);
    height: var(--pill-h, 0);
    translate: var(--pill-x, 0) var(--pill-y, 0);
    border-radius: var(--r-pill);
    background: linear-gradient(160deg, var(--red) 0%, var(--red-strong) 55%, var(--red-deeper));
    box-shadow: var(--shadow-red), inset 0 1px 0 rgb(255 255 255 / 0.28);
    opacity: var(--pill-o, 0);
    pointer-events: none;
    transition:
      translate 0.6s var(--ease-out),
      width 0.6s var(--ease-out),
      opacity var(--dur-fast) linear;
  }
  .catalog-filters__pill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.3) 50%, transparent 70%);
    opacity: 0;
  }
  .catalog-filters__pill.is-moving::after { animation: pill-sheen 0.7s var(--ease-out); }
  .catalog-filters__pill.is-instant { transition: none; }
  .catalog-filters.has-pill .filter-chip[aria-pressed="true"] { background: transparent; box-shadow: none; }
  @keyframes pill-sheen {
    from { opacity: 1; translate: 60% 0; }
    to   { opacity: 0; translate: -60% 0; }
  }

  .catalog-bar__status {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: var(--s-2);
    padding-inline: var(--s-4) var(--s-5);
    color: var(--ink-2);
    font-size: var(--fs-small);
    white-space: nowrap;
  }
  .catalog-bar__status::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgb(247 209 74 / 0.28);
  }
  .catalog-bar__status.is-updated::before { animation: status-ping 0.9s var(--ease-out); }
  @keyframes status-ping {
    0%   { box-shadow: 0 0 0 0 rgb(215 20 31 / 0.45); background: var(--red); }
    100% { box-shadow: 0 0 0 10px rgb(247 209 74 / 0); }
  }

  /* Course grid */
  /* align-content: start keeps rows at their natural height while the grid's
     own height eases after a filter change. */
  .catalog__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: var(--s-6);
  }
  .catalog__item, .catalog__cell { display: grid; min-width: 0; }
  /* Reveal stagger follows the reading order of each row: 3, then 2, then 1 column. */
  .catalog__item:nth-child(3n+2) > .catalog__cell { --i: 1; }
  .catalog__item:nth-child(3n) > .catalog__cell { --i: 2; }
  .catalog__item { transform-origin: 50% 40%; }
  .catalog .course-card__desc { -webkit-line-clamp: 3; }
  .catalog .course-card { background: rgb(255 255 255 / 0.82); }
  @supports selector(:has(*)) {
    .course-card__title a:focus-visible { outline: none; }
    .course-card:has(.course-card__title a:focus-visible) { outline: 2px solid var(--red); outline-offset: 4px; }
    .journey-stop__title a:focus-visible { outline: none; }
    .journey-stop__card:has(.journey-stop__title a:focus-visible) { outline: 2px solid var(--red); outline-offset: 4px; }
  }

  /* ── Journey ───────────────────────────────────────────────────────────── */
  .journey {
    --journey-gap: clamp(1rem, 0.4rem + 2vw, 2rem);
    --node: 4.25rem;
    isolation: isolate;
  }
  .journey .ambient { --glow-a: 12% 30%; --glow-b: 86% 78%; }
  .journey__sun { width: 112px; height: 112px; flex: none; rotate: -8deg; animation: sticker-float 6s ease-in-out infinite; }

  .journey__stops {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--journey-gap);
  }
  .journey-stop {
    --step-delay: 0ms;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    gap: var(--s-6);
    min-width: 0;
  }
  .journey-stop:nth-child(2) { --step-delay: 800ms; }
  .journey-stop:nth-child(3) { --step-delay: 1600ms; }

  /* The gold path runs from each station to the next one (to its left). */
  .journey-stop__path {
    position: absolute;
    top: calc(var(--node) / 2 - 3px);
    inset-inline-start: 50%;
    width: calc(100% + var(--journey-gap));
    height: 6px;
    border-radius: var(--r-pill);
    background: rgb(233 178 58 / 0.2);
    box-shadow: inset 0 0 0 1px rgb(233 178 58 / 0.14);
    overflow: hidden;
  }
  .journey-stop__path-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to left, var(--gold), var(--gold-bright) 50%, var(--gold));
    box-shadow: 0 0 12px rgb(247 209 74 / 0.6);
    transform-origin: right center;
    transition: scale 0.75s cubic-bezier(0.55, 0.1, 0.35, 1);
  }
  /* The stations light up one after another only while the path is drawing. */
  .journey.has-motion:not(.is-settled) .journey-stop__path-fill { transition-delay: calc(var(--step-delay) + 150ms); }
  .journey.has-motion:not(.is-settled) .journey-stop__node { transition-delay: var(--step-delay); }
  /* A soft glint keeps travelling along the path. */
  .journey-stop__path-fill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 28%;
    background: linear-gradient(to left, transparent, rgb(255 255 255 / 0.95), transparent);
    animation: path-glint 2.8s ease-in-out infinite;
    animation-delay: calc(var(--step-delay) + 1.2s);
  }
  @keyframes path-glint {
    from { translate: 100% 0; }
    to   { translate: -400% 0; }
  }
  .journey.has-motion:not(.is-drawn) .journey-stop__path-fill { scale: 0 1; }

  .journey-stop__node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--node);
    height: var(--node);
    border-radius: 50%;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    color: var(--white);
    box-shadow: 0 0 0 5px var(--white), 0 0 0 7px var(--gold), 0 0 0 14px rgb(247 209 74 / 0.18), 0 22px 34px -14px rgb(149 14 23 / 0.6);
    transition:
      background-color 0.5s var(--ease-out),
      color 0.5s var(--ease-out),
      box-shadow 0.6s var(--ease-out),
      scale 0.6s var(--ease-out);
  }
  .journey-stop__node > svg { width: 1.7rem; height: 1.7rem; }
  .journey.has-motion:not(.is-drawn) .journey-stop__node {
    background: var(--white);
    color: var(--red);
    box-shadow: 0 0 0 1px var(--gold-border), 0 0 0 7px rgb(247 209 74 / 0), var(--shadow-sm);
    scale: 0.86;
  }
  /* A light that wakes as the path arrives */
  .journey-stop__node::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px solid rgb(247 209 74 / 0.7);
    opacity: 0;
    pointer-events: none;
  }
  .journey.is-drawn .journey-stop__node::before { animation: node-ring 1.1s var(--ease-out) both; animation-delay: var(--step-delay); }
  @keyframes node-ring {
    0%   { opacity: 0.9; scale: 0.7; }
    100% { opacity: 0; scale: 1.35; }
  }
  /* A short dashed stem down to the card */
  .journey-stop__node::after {
    content: "";
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    width: 2px;
    height: calc(var(--s-6) - 7px);
    translate: -50% 0;
    background: repeating-linear-gradient(to bottom, var(--gold) 0 4px, transparent 4px 8px);
  }
  .journey-stop__num {
    position: absolute;
    top: -0.35rem;
    inset-inline-end: -0.35rem;
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--gold-bright), var(--gold));
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px var(--white), var(--shadow-sm);
  }
  .journey-stop:hover .journey-stop__node { scale: 1.08; }

  .journey-stop__card {
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-6);
    border-radius: var(--r-lg);
    background: rgb(255 255 255 / 0.8);
    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);
  }
  .journey-stop__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-inset), var(--shadow-lg), 0 0 0 1px var(--gold-border); }
  .journey-stop__step {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--gold-deep);
    font-size: var(--fs-caption);
    font-weight: 600;
  }
  .journey-stop__step::before { content: ""; width: 1.2rem; height: 2px; border-radius: 2px; background: linear-gradient(to left, var(--gold), var(--gold-bright)); }
  .journey-stop__title { font-size: var(--fs-h3); line-height: 1.35; }
  .journey-stop__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
  .journey-stop__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; }
  .journey-stop__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .journey-stop__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-2);
    color: var(--red-strong);
    font-size: var(--fs-small);
    font-weight: 500;
  }
  .journey-stop__cta svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out); }
  .journey-stop__card:hover .journey-stop__cta svg { transform: translateX(-4px); }

  /* The three stations gather into the programmes that accompany them all. */
  .journey__stubs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--journey-gap);
    height: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  }
  .journey__stubs span {
    justify-self: center;
    width: 2px;
    height: 55%;
    background: repeating-linear-gradient(to bottom, var(--gold) 0 5px, transparent 5px 10px);
    background-size: 2px 10px;
    animation: stub-flow 0.9s linear infinite;
  }
  .journey__stubs::before {
    content: "";
    position: absolute;
    top: 55%;
    inset-inline: calc((100% - var(--journey-gap) * 2) / 6);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to left, rgb(233 178 58 / 0.5), var(--gold) 20%, var(--gold) 80%, rgb(233 178 58 / 0.5));
  }
  .journey__stubs::after {
    content: "";
    position: absolute;
    top: 55%;
    bottom: 0;
    left: 50%;
    width: 2px;
    translate: -50% 0;
    background: linear-gradient(to bottom, var(--gold), rgb(233 178 58 / 0.4));
  }
  @keyframes stub-flow { to { background-position: 0 -10px; } }

  .journey__along {
    position: relative;
    display: grid;
    gap: var(--s-6);
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem) clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
    border-radius: var(--r-xl);
  }
  /* A small gold bead where the branch meets the panel */
  .journey__along::before {
    content: "";
    position: absolute;
    top: -0.45rem;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    translate: -50% 0;
    rotate: 45deg;
    border-radius: 3px;
    background: linear-gradient(160deg, var(--gold-bright), var(--gold));
    box-shadow: 0 0 0 3px var(--white), 0 0 14px rgb(247 209 74 / 0.8);
  }
  /* Centred under the gold bead, so the branch reads straight into it. */
  .journey__along-head { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
  .journey__along-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--gold-bright), var(--gold));
    color: var(--white);
    box-shadow: 0 0 0 5px rgb(247 209 74 / 0.22), 0 12px 24px -12px rgb(150 100 10 / 0.6);
  }
  .journey__along-icon svg { width: 1.45rem; height: 1.45rem; }
  .journey__along-copy { display: grid; gap: var(--s-2); justify-items: center; max-width: 40rem; }
  .journey__along-title { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem); line-height: 1.35; }
  .journey__along-text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; }

  .journey__lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
  .journey__lanes > li { display: grid; min-width: 0; }
  .journey-lane {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-3) var(--s-4);
    padding-inline-start: var(--s-3);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.82);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .journey-lane:hover { transform: translateY(-3px); box-shadow: var(--shadow-inset), var(--shadow-md), 0 0 0 1px var(--red-border); }
  .journey-lane__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red-strong);
    box-shadow: inset 0 0 0 1px var(--red-border);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear, rotate var(--dur-slow) var(--ease-out);
  }
  .journey-lane__icon svg { width: 1.25rem; height: 1.25rem; }
  .journey-lane:hover .journey-lane__icon { background: var(--red-strong); color: var(--white); rotate: -8deg; }
  .journey-lane__text { display: grid; gap: 0.15rem; min-width: 0; }
  .journey-lane__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
  .journey-lane__tag { color: var(--gold-deep); font-size: var(--fs-caption); line-height: 1.4; }
  .journey-lane__arrow { flex: none; width: 1.1rem; height: 1.1rem; margin-inline-start: auto; color: var(--red-strong); transition: transform var(--dur-base) var(--ease-out); }
  .journey-lane:hover .journey-lane__arrow { transform: translateX(-4px); }

  /* ── What sets our programmes apart ────────────────────────────────────── */
  .perks__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .perks__grid > li { display: grid; min-width: 0; }
  .perk {
    --lift: 0px;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-3) var(--s-6);
    border-radius: var(--r-lg);
    background: rgb(255 255 255 / 0.8);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transform: perspective(900px) translateY(var(--lift)) 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);
  }
  .perk:hover { --lift: -6px; box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .perk__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 0.8;
    margin-bottom: var(--s-2);
    border-radius: calc(var(--r-lg) - var(--s-3));
    overflow: hidden;
    background:
      radial-gradient(closest-side at 50% 52%, rgb(247 209 74 / 0.36), transparent),
      radial-gradient(120% 60% at 50% 100%, rgb(215 20 31 / 0.08), transparent 60%),
      linear-gradient(180deg, var(--white), var(--red-mist));
    box-shadow: inset 0 0 0 1px rgb(245 198 189 / 0.45);
  }
  .perk__rays {
    position: absolute;
    inset: -30%;
    background: repeating-conic-gradient(from 0deg, rgb(247 209 74 / 0.22) 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(closest-side, #000 14%, transparent 70%);
    mask: radial-gradient(closest-side, #000 14%, transparent 70%);
    animation: rays-spin 80s linear infinite;
    pointer-events: none;
  }
  .perk__num {
    position: absolute;
    top: 0.5rem;
    inset-inline-start: 0.9rem;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.8rem + 1.4vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.2px rgb(233 178 58 / 0.7);
    pointer-events: none;
    user-select: none;
  }
  .perk__floor {
    position: absolute;
    bottom: 13%;
    left: 50%;
    width: 42%;
    height: 8%;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(120 20 20 / 0.24), transparent);
    transition: scale var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
  }
  .perk__art {
    position: relative;
    width: 56%;
    transition: translate var(--dur-slow) var(--ease-out), rotate var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
  }
  .perk__art img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 16px 18px rgb(149 14 23 / 0.2));
    animation: courses-bob 5.5s ease-in-out infinite;
  }
  .perks__grid > li:nth-child(2) .perk__art img { animation-delay: -1.4s; }
  .perks__grid > li:nth-child(3) .perk__art img { animation-delay: -2.8s; }
  .perks__grid > li:nth-child(4) .perk__art img { animation-delay: -4.2s; }
  .perk:hover .perk__art { translate: 0 -8px; rotate: -6deg; scale: 1.07; }
  .perk:hover .perk__floor { scale: 0.8; opacity: 0.7; }
  .perk__title { padding-inline: var(--s-3); font-size: var(--fs-h3); line-height: 1.35; }
  /* Cards in a row share their rows, so a title that wraps never pushes its
     text out of line with the neighbours'. */
  @supports (grid-template-rows: subgrid) {
    .perks__grid > li { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .perk { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: var(--s-3); }
  }
  .perk__text { padding-inline: var(--s-3); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.85; }

  /* ── Contact band: its light fades from the deep ground above ──────────── */
  .courses-cta .cta-band__media::after {
    background:
      radial-gradient(closest-side at 76% 48%, rgb(255 251 246 / 0.55), transparent),
      linear-gradient(to bottom, var(--bg-deep), transparent 14%, transparent 84%, var(--bg-deep));
  }

  /* ── Responsive ────────────────────────────────────────────────────────── */
  /* Below 1100px the chips and the longest status line («تعرض الصفحة دورتين
     من فئة القيم واللغات») no longer share one row: the status moves under
     the chips, and the chips wrap (centred) rather than hide off-screen. */
  @media (max-width: 1100px) {
    .catalog { --catalog-bar-h: 6.5rem; }
    .catalog-bar { flex-direction: column; align-items: stretch; gap: var(--s-1); border-radius: var(--r-lg); padding: 0.4rem 0.4rem var(--s-2); }
    .catalog-filters { flex-wrap: wrap; justify-content: center; overflow: visible; }
    .catalog-bar__status { justify-content: center; padding-inline: var(--s-3); }
  }

  @media (max-width: 1080px) {
    .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog__item:nth-child(n) > .catalog__cell { --i: 0; }
    .catalog__item:nth-child(2n) > .catalog__cell { --i: 1; }
    .perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .courses-cta .cta-band__media::after { background: linear-gradient(to bottom, var(--bg-deep), transparent 18%, transparent 70%, var(--bg)); }
  }

  @media (max-width: 900px) {
    .courses-fan { width: min(100%, 27rem); padding-block: var(--s-4) var(--s-8); }

    /* The path turns vertical down the start side. */
    .journey { --node: 3.5rem; }
    .section-head .journey__sun { display: none; }
    .journey__stops { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); --journey-gap: var(--s-5); }
    .journey-stop { grid-template-columns: var(--node) minmax(0, 1fr); grid-template-rows: auto; justify-items: stretch; align-items: start; gap: var(--s-4); }
    .journey-stop__node > svg { width: 1.4rem; height: 1.4rem; }
    .journey-stop__node::after {
      top: 50%;
      left: auto;
      inset-inline-start: calc(100% + 7px);
      width: calc(var(--s-4) - 7px);
      height: 2px;
      translate: 0 -50%;
      background: repeating-linear-gradient(to left, var(--gold) 0 4px, transparent 4px 8px);
    }
    .journey-stop__path {
      top: calc(var(--node) / 2);
      inset-inline-start: calc(var(--node) / 2 - 3px);
      width: 6px;
      height: calc(100% + var(--journey-gap));
    }
    .journey-stop__path-fill { transform-origin: center top; background: linear-gradient(to bottom, var(--gold), var(--gold-bright) 50%, var(--gold)); }
    .journey-stop__path-fill::after { inset: 0 0 auto; width: auto; height: 28%; background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 0.95), transparent); animation-name: path-glint-down; }
    .journey.has-motion:not(.is-drawn) .journey-stop__path-fill { scale: 1 0; }
    .journey-stop__card { padding: var(--s-5); }

    .journey__stubs { display: flex; justify-content: center; height: 2.75rem; }
    .journey__stubs::before, .journey__stubs::after, .journey__stubs span:not(:nth-child(2)) { display: none; }
    .journey__stubs span { height: 100%; }
    .journey__lanes { grid-template-columns: minmax(0, 1fr); }
  }
  @keyframes path-glint-down {
    from { translate: 0 -100%; }
    to   { translate: 0 400%; }
  }

  /* Wherever one row of pills would not fit (the narrow two-column hero and
     phones), the three facts become a row of small glass tiles. */
  @media (min-width: 901px) and (max-width: 1199px), (max-width: 640px) {
    .courses-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .courses-hero__fact {
      flex-direction: column;
      justify-content: flex-start;
      gap: var(--s-1);
      padding: var(--s-3) var(--s-2);
      border-radius: var(--r-md);
      font-size: var(--fs-caption);
      line-height: 1.5;
      text-align: center;
    }
  }

  @media (max-width: 640px) {
    .catalog__grid { grid-template-columns: minmax(0, 1fr); }
    .catalog__item:nth-child(n) > .catalog__cell { --i: 0; }
    /* All five chips stay in sight: slimmer chips share two rows and grow to fill them. */
    .catalog-bar { padding: 0.3rem 0.3rem var(--s-2); }
    .filter-chip { flex: 1 1 auto; justify-content: center; gap: 0.35rem; min-height: 2.6rem; padding-inline: 0.65rem var(--s-1); font-size: 0.875rem; }
    .filter-chip__count { min-width: 1.5rem; height: 1.5rem; padding-inline: 0.3rem; }
    .courses-fan__sun { inset-inline-start: 0; }
    .courses-fan__badge { padding: var(--s-2) var(--s-4); inset-inline-end: 0; }
    .courses-fan__badge-num { font-size: 2rem; }
    .courses-fan__deck { --fan-w: 82%; }
    .fan-card { padding: 0.4rem; }
    .fan-card--back  { --fan-r: 3deg; }
    .fan-card--mid   { --fan-r: -2.5deg; }
    .fan-card--front { --fan-r: 1deg; margin-inline-start: 5%; }
    .fan-card__cap .chip { display: none; }
  }
  @media (max-width: 560px) {
    .perks__grid { grid-template-columns: minmax(0, 1fr); }
    .perk__stage { aspect-ratio: 16 / 9; }
    .perk__art { width: 36%; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .courses-hero__title .highlight::before,
    .courses-fan__rays, .fan-card, .fan-card__poster::after, .courses-fan__sun, .courses-fan__badge,
    .catalog-filters__pill.is-moving::after, .catalog-bar__status.is-updated::before,
    .journey__sun, .journey-stop__path-fill::after, .journey.is-drawn .journey-stop__node::before,
    .journey__stubs span, .perk__rays, .perk__art img { animation: none; }
    .fan-card__poster::after { opacity: 0; }
    .courses-fan__deck, .fan-card, .catalog-bar, .filter-chip, .filter-chip__count, .catalog-filters__pill,
    .journey-stop__path-fill, .journey-stop__node, .journey-stop__card, .journey-stop__cta svg,
    .journey-lane, .journey-lane__icon, .journey-lane__arrow, .perk, .perk__art, .perk__floor,
    .courses-hero__down { transition-duration: 0.01ms; transition-delay: 0s; }
  }
}