/* ═══════════════════════════════════════════════════════════════════════
   MeducateED — Scholarships: the index grid and the programme page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the fund counter, in Oi (Mo, 2026-09-15) ─────────────────────────────
   ⛔ SCOPED TO THIS PAGE ON PURPOSE. `components.css .stat-num` uses Zain and
      carries a measured note explaining why: Oi runs ~0.8em per character and
      overflowed its column by 121px at 1024px on /community/press. Mo asked for
      THIS counter to be "large oi", so the override is here and nowhere else —
      every other stat on the site keeps Zain and keeps its fix.
   ⚠ Sized in `cqi`, a share of the counter's OWN box rather than the window,
     which is the property that makes a long number safe at every width. 13cqi
     is the figure the components.css note records as the Oi-safe concession. */
.fund-oi .stat-num {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 13cqi, 5.2rem);
    letter-spacing: -.01em;
}
.fund-oi .stat-cur { font-size: 1rem; }

/* ── the index grid ─────────────────────────────────────────────────────── */
.sch-grid {
    display: grid;
    /* ⚠ `min(300px, 100%)`, NOT a bare 300px. A bare minimum is a FLOOR the
       track cannot go below, so at 320px — where the container leaves ~288px —
       the track stayed 300px and pushed the document sideways (measured:
       pageOverflow true at 320x568 before this). Wrapping it in min() lets the
       track collapse to the container on a narrow screen and behave as a 300px
       minimum everywhere else. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--s-6);
}

/* ⚠ THE WHOLE CARD IS THE LINK (Mo: "ensure every card is clickable"), which is
   why this is an <a> laid out as a block and not a <div> with a button in it.
   `display: flex` on an anchor is fine; what is NOT fine is nesting another
   <a> inside, so nothing in here is a link of its own. */
.sch-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: inherit;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
    min-width: 0;
}
.sch-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-lt); }
.sch-card:focus-visible { outline: 2px solid var(--gold-live); outline-offset: 3px; }

.sch-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ink3);
    overflow: hidden;
}
.sch-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sch-body { display: flex; flex-direction: column; gap: .5rem; padding: var(--s-5); flex: 1 1 auto; min-width: 0; }
.sch-name { font-family: var(--font-subhead); font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.sch-tag  { font-size: .86rem; color: var(--gold); font-style: italic; }
.sch-sum  { font-size: .92rem; color: var(--muted); line-height: 1.55; flex: 1 1 auto; }
.sch-meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.sch-deadline { color: var(--muted); }
.sch-more { color: var(--gold-live); white-space: nowrap; }

/* ── state pill ─────────────────────────────────────────────────────────── */
.sch-state {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
    text-transform: uppercase; padding: .34em .7em; border-radius: 3px;
    background: rgba(2, 15, 36, .84); border: 1px solid currentColor;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sch-state-open    { color: #5ddc9a; }
.sch-state-closing { color: var(--gold-live); }
.sch-state-soon    { color: var(--teal-lt); }
.sch-state-closed  { color: #ff9ea0; }

/* ── how it works ───────────────────────────────────────────────────────── */
.sch-steps {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s-5); margin-top: var(--s-8); text-align: left;
}
.sch-steps > div { display: flex; gap: var(--s-3); align-items: flex-start; }
.sch-steps b {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gold-live); color: #fff;
    font-family: var(--font-mono); font-size: .8rem;
}
.sch-steps span { font-size: .92rem; color: var(--muted); line-height: 1.5; }

/* ═══ the programme page ════════════════════════════════════════════════ */

.sch-hero { position: relative; min-height: clamp(260px, 34vw, 420px); display: grid; }
.sch-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The scrim is a gradient, not a flat tint: these covers are photographs and a
   uniform overlay either washes out the image or loses the type. */
.sch-hero-ink {
    position: relative;
    display: flex; align-items: flex-end;
    padding-block: var(--s-10) var(--s-8);
    background: linear-gradient(180deg, rgba(2,15,36,.35) 0%, rgba(2,15,36,.82) 62%, rgba(2,15,36,.95) 100%);
    color: var(--paper);
}
.sch-hero-ink h1 { color: #fff; margin-block: var(--s-3) 0; }
.sch-hero-ink .lead { color: var(--peach); max-width: 60ch; }
.sch-hero .sch-state { position: static; display: inline-block; }
.sch-back {
    display: inline-block; margin-bottom: var(--s-4);
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--peach);
}
.sch-back:hover { color: var(--gold-live); }

.sch-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s-9); align-items: start; }
@media (max-width: 900px) { .sch-cols { grid-template-columns: 1fr; } }

.sch-h { margin-top: var(--s-9); margin-bottom: var(--s-4); }
.sch-crit { display: grid; gap: .6rem; padding: 0; list-style: none; }
.sch-crit li { position: relative; padding-left: 1.7rem; color: var(--ink2); line-height: 1.6; }
.sch-crit li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--gold-live);
}

/* ── FAQs ───────────────────────────────────────────────────────────────── */
.sch-faqs { display: grid; gap: .5rem; }
.sch-faq { border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); }
.sch-faq summary {
    cursor: pointer; padding: var(--s-4) var(--s-5);
    font-family: var(--font-subhead); font-size: .95rem; color: var(--ink);
    list-style: none; display: flex; justify-content: space-between; gap: var(--s-4);
}
.sch-faq summary::-webkit-details-marker { display: none; }
.sch-faq summary::after { content: "+"; color: var(--gold-live); flex: 0 0 auto; }
.sch-faq[open] summary::after { content: "\2212"; }
.sch-faq > div { padding: 0 var(--s-5) var(--s-5); color: var(--muted); line-height: 1.65; font-size: .94rem; }

/* ── the side panel ─────────────────────────────────────────────────────── */
.sch-side { position: sticky; top: 92px; }
@media (max-width: 900px) { .sch-side { position: static; } }

.sch-panel {
    background: var(--paper2); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--s-6);
}
.sch-fact { display: grid; gap: .25rem; padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.sch-fact-l { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sch-fact-v { font-size: .95rem; color: var(--ink2); line-height: 1.5; }
.sch-code { font-family: var(--font-mono); letter-spacing: .06em; color: var(--ink); }

.sch-cta { width: 100%; justify-content: center; margin-top: var(--s-2); }
.sch-note { font-size: .9rem; color: var(--muted); line-height: 1.55; margin-bottom: var(--s-4); }
.sch-sub  { font-size: .82rem; color: var(--muted); margin-top: var(--s-3); text-align: center; }

.sch-appstate {
    display: block; text-align: center; margin-bottom: var(--s-4);
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .5em; border-radius: var(--radius); border: 1px solid currentColor;
}
.sch-app-pending, .sch-app-under_review { color: var(--gold); }
.sch-app-accepted { color: var(--green); }
.sch-app-rejected { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    .sch-card:hover { transform: none; }
}


/* ── the application form ─────────────────────────────────────────────────
   Mo, checklist 25. The form itself is drawn by the site's own builder
   (`form_field_html()`), so it already inherits `.field` / `.input` /
   `.textarea` from components.css — only the page furniture lives here. */
.sch-apply-head { margin-bottom: var(--s-6); }
.sch-apply-head h1 { margin: .2em 0 .35em; }
.sch-apply-form { max-width: 62ch; }
.sch-apply-form .field { margin-bottom: var(--s-4); }
.sch-apply-form .req { color: var(--gold-live); }

/* ── the success screen ───────────────────────────────────────────────────
   ⚠ THE CONFETTI IS DECORATION AND MUST NEVER BE THE MESSAGE. It is absolutely
     positioned and `pointer-events: none`, so on a slow connection — or when
     the Lottie player never arrives at all — the confirmation, the email
     address and both buttons are already there and fully usable. A celebration
     that has to load before the student learns their application went through
     is the wrong way round.
   ⚠ `overflow: hidden` on the container: the animation is square and wider than
     the text column at small sizes, and without this it pushes the page
     sideways on a phone. */
.sch-done { position: relative; overflow: hidden; padding-top: var(--s-4); }
.sch-done h1 { margin: .2em 0 .35em; }
.sch-confetti {
    position: absolute; top: -8%; left: 50%; transform: translateX(-50%);
    width: min(520px, 118%); aspect-ratio: 1 / 1;
    pointer-events: none; z-index: 0; opacity: .9;
}
.sch-done > *:not(.sch-confetti) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    /* The one animation on this page exists to celebrate; for a visitor who has
       asked for less motion, the words do that job on their own. */
    .sch-confetti { display: none; }
}