/* =============================================================================
   /scholarships and /scholarships/<slug>

   Both pages are built from the university page's V3 components — v3-panel,
   v3-hero, v3-tabs, v3-filters, v3-row, v3-stats, v3-strip, v3-checklist,
   v3-chips, v3-btn — and load university-v3.css first. This file adds ONLY what
   those pages need and V3 does not have. Every colour is a V3 or site token, so
   dark mode follows without a second palette.
   ============================================================================= */

/* ------------------------------------------------------------ tab counts */

.sch-tab__n {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-surface-2);
    vertical-align: 1px;
}
.v3-tab.is-active .sch-tab__n { color: var(--v3-accent); background: var(--v3-accent-weak); }

/* --------------------------------------------------------------- filters */

/* The search box borrows the select's box so the two controls match. */
.sch-search { width: 100%; padding: 9px 12px; font: inherit; color: inherit; }
.sch-search::placeholder { color: var(--text-muted); }

/* A count after each checkbox label, pushed to the right edge. */
.sch-check__n {
    margin-left: auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* ------------------------------------------------------ results header */

.sch-sort { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.sch-sort .v3-linkbtn { color: var(--text-secondary); font-weight: 500; }
.sch-sort .v3-linkbtn.is-active { color: var(--v3-accent); font-weight: 700; }

/* ------------------------------------------------------------------ rows */

.sch-row .v3-row__name { margin-bottom: 3px; }
.sch-row .v3-row__name a { color: inherit; text-decoration: none; }
.sch-row .v3-row__name a:hover { color: var(--v3-accent); }

.sch-row__provider { font-size: 13px; color: var(--text-secondary); }

/* The amount is the one figure on the row, set like a hero stat. */
.sch-row__amount {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    padding: 2px 0 4px !important;
}
.sch-row__amount small { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }

/* --------------------------------------------------------------- pager */

.sch-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

/* --------------------------------------------------------------- detail */

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

.sch-detail .v3-hero__side { padding-right: 26px; }

/* Three-step ribbon: title over one short line. */
.sch-strip .v3-strip__step > div { min-width: 0; }
.sch-strip .v3-strip__step strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.sch-strip .v3-strip__step p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 760px) {
    .sch-strip { grid-auto-flow: row; }
    .sch-strip .v3-strip__step + .v3-strip__step { padding-left: 20px; }
    .sch-strip .v3-strip__step + .v3-strip__step::before { display: none; }
}

/* Label / value rows for "What you get". */
.sch-kv > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 14px;
}
.sch-kv > div:first-child { border-top: 0; padding-top: 2px; }
.sch-kv span   { color: var(--text-secondary); flex: none; }
.sch-kv strong { color: var(--text-primary); text-align: right; font-weight: 700; }
.sch-kv__soft  { font-weight: 500 !important; color: var(--text-secondary) !important; }

.sch-lede { margin: 0 0 12px; font-size: 14px; color: var(--text-secondary); }
.sch-lede--after { margin: 12px 0 0; font-size: 13px; }

/* Contact rows in the rail. */
.sch-contact > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.45;
}
.sch-contact .v3-i { color: var(--text-muted); margin-top: 2px; }
.sch-contact a { color: var(--v3-accent); text-decoration: none; word-break: break-word; }
.sch-contact a:hover { text-decoration: underline; }
.sch-btn-gap { margin-top: 12px; }

.sch-source p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.sch-source p:last-child { margin-bottom: 0; }
.sch-source a { color: var(--v3-accent); }

/* v3-results__head is display:block, which beats v3-sectionhead's flex when both
   are on one element. Restore the header bar so the sort sits on the right. */
.v3-results__head.v3-sectionhead { display: flex; align-items: flex-end; }
.v3-results__head.v3-sectionhead h2 { margin-bottom: 4px; }

/* The wide slot for the hero exists in V3 only under .v3-prog-head (the programme
   header). Same rule here, or a 3:1 wordmark such as Sojitz's is clipped by the
   circle. Body copied from university-v3.css so the two cannot drift in spirit. */
.sch-detail .v3-hero__logo--wordmark {
    width: auto;
    height: 46px;
    max-width: min(190px, 34vw);
    border-radius: 8px;
    border: 0;
    background: transparent;
}

/* ------------------------------------------- landing: destination carousel */

/* Visually hidden, still read out and still an h1 for the page. */
.sch-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The strip is the landing's hero: no panel chrome, room above for the art.
   Cards are a fraction of the strip so a whole number always fits: five on a
   desktop, six on a wide screen, three on a tablet, a fixed width on a phone. */
.sch-dest { position: relative; margin: 4px 0 6px; --sch-cols: 5; --sch-gap: 16px; }

.sch-dest__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--sch-cols) - 1) * var(--sch-gap)) / var(--sch-cols));
    gap: var(--sch-gap);
    padding: 0 0 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sch-dest__track::-webkit-scrollbar { display: none; }

/* One card = the art out of flow behind the plate and rising above it. The
   card is the link; padding-top reserves the art's height so a card whose
   picture has not landed yet keeps its plate level with the others. */
.sch-dest__card {
    position: relative;
    display: block;
    padding-top: 118px;
    overflow: visible;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    transition: transform .28s ease;
}
.sch-dest__art {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 30%;
    width: 108%;
    max-width: none;
    transform: translateX(-50%);
    object-fit: contain;
    pointer-events: none;
    transition: transform .28s ease;
}
.sch-dest__plate {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 80px;
    padding: 14px 16px 16px 20px;
    border-radius: 20px;
    /* Frosted: the picture continues faintly behind the plate. */
    background: color-mix(in srgb, var(--sch-panel) 76%, transparent);
    -webkit-backdrop-filter: blur(7px) saturate(1.15);
    backdrop-filter: blur(7px) saturate(1.15);
    box-shadow: 0 10px 25px rgba(20, 35, 65, .10);
    transition: box-shadow .28s ease;
}
.sch-dest__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sch-dest__text strong { font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--sch-text); letter-spacing: -.01em; }
.sch-dest__count { font-size: 13px; color: var(--sch-text); opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-dest__card--empty .sch-dest__count { opacity: .55; }
.sch-dest__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--sch-accent);
    color: #fff;
    transition: transform .28s ease;
}
.sch-dest__go svg { width: 18px; height: 18px; stroke-width: 2.4; }
.sch-dest__card--empty .sch-dest__go { opacity: .6; }

.sch-dest__card.is-active .sch-dest__plate { box-shadow: 0 0 0 2px var(--sch-accent), 0 10px 25px rgba(20, 35, 65, .14); }
.sch-dest__card:hover, .sch-dest__card:focus-visible { transform: translateY(-4px); outline: none; }
.sch-dest__card:hover .sch-dest__art, .sch-dest__card:focus-visible .sch-dest__art { transform: translate(-50%, -3px); }
/* Hover: a soft glow in the country's own accent, under the plate only — the picture is never tinted. */
.sch-dest__card:hover .sch-dest__plate, .sch-dest__card:focus-visible .sch-dest__plate { box-shadow: 0 14px 30px rgba(20, 35, 65, .12), 0 0 0 1px color-mix(in srgb, var(--sch-accent) 30%, transparent), 0 8px 28px color-mix(in srgb, var(--sch-accent) 28%, transparent); }
.sch-dest__card.is-active:hover .sch-dest__plate { box-shadow: 0 0 0 2px var(--sch-accent), 0 8px 28px color-mix(in srgb, var(--sch-accent) 28%, transparent); }
.sch-dest__card:focus-visible .sch-dest__plate { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
.sch-dest__card:hover .sch-dest__go, .sch-dest__card:focus-visible .sch-dest__go { transform: translateX(3px); }

/* Prev / next: round, floating at the strip's edges, level with the plates. */
.sch-dest__nav {
    position: absolute;
    z-index: 3;
    top: 118px;
    margin-top: 40px;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-elevated, var(--bg-surface));
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .2s ease, background-color .2s ease;
}
.sch-dest__nav svg { width: 22px; height: 22px; }
.sch-dest__nav--prev { left: -10px; }
.sch-dest__nav--next { right: -10px; }
.sch-dest__nav:hover { background: var(--bg-surface-2); }
.sch-dest__nav[disabled] { opacity: 0; pointer-events: none; }

/* Dark theme: the pale panel becomes a tint of the accent over the surface,
   and the name falls back to the theme's primary ink. */
:root[data-theme="dark"] .sch-dest__plate { background: color-mix(in srgb, var(--sch-accent) 22%, color-mix(in srgb, var(--bg-surface) 82%, transparent)); box-shadow: 0 10px 25px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .sch-dest__text strong, :root[data-theme="dark"] .sch-dest__count { color: var(--text-primary); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sch-dest__plate { background: color-mix(in srgb, var(--sch-accent) 22%, color-mix(in srgb, var(--bg-surface) 82%, transparent)); box-shadow: 0 10px 25px rgba(0, 0, 0, .35); }
    :root:not([data-theme="light"]) .sch-dest__text strong, :root:not([data-theme="light"]) .sch-dest__count { color: var(--text-primary); }
}

@media (min-width: 1800px) { .sch-dest { --sch-cols: 6; } }
@media (min-width: 2200px) { .sch-dest { --sch-cols: 7; } }
@media (max-width: 1100px) { .sch-dest { --sch-cols: 4; } }
@media (max-width: 1023px) { .sch-dest { --sch-cols: 3; } }
@media (max-width: 720px) {
    .sch-dest__track { grid-auto-columns: 272px; gap: 14px; }
    .sch-dest__art { width: 100%; bottom: 30%; }
    .sch-dest__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sch-dest__card, .sch-dest__art, .sch-dest__plate, .sch-dest__go, .sch-dest__nav { transition: none; }
}

/* In-place swaps: the body dims while the next page loads, then crossfades. */
.sch-body { transition: opacity .18s ease; view-transition-name: sch-body; }
.sch-body.is-loading { opacity: .55; pointer-events: none; }
::view-transition-old(sch-body), ::view-transition-new(sch-body) { animation-duration: .22s; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* A destination on the map before its list is built. */
.sch-nodata { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sch-nodata h2 { margin: 0; }
.sch-nodata p { margin: 0 0 6px; color: var(--text-secondary); max-width: 60ch; }

/* ==================================================== filter card polish */

/* Group title: icon + label on the left, working chevron on the right. */
.v3-filters .v3-fgroup__title { cursor: default; }
.v3-filters .v3-fgroup[data-collapsible] .v3-fgroup__title { cursor: pointer; user-select: none; }
.v3-filters .v3-fgroup__title > span { display: inline-flex; align-items: center; gap: 8px; }
.v3-filters .v3-fgroup__title > span .v3-i { width: 16px; height: 16px; color: var(--v3-accent); }
.v3-filters .v3-fgroup__title > .v3-i { transition: transform .18s ease; }
.v3-filters .v3-fgroup.is-collapsed .v3-fgroup__title > .v3-i { transform: rotate(180deg); }
.v3-filters .v3-fgroup.is-collapsed .v3-fgroup__title { margin-bottom: 0; }
.v3-filters .v3-fgroup.is-collapsed .v3-fgroup__body { display: none; }
.v3-filters .v3-fgroup__title:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 3px; border-radius: 4px; }

/* Option rows: the whole row is the target, and it says so on hover. */
.v3-filters .v3-check {
    margin: 0 -8px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .12s ease;
}
.v3-filters .v3-check:hover { background: var(--v3-accent-weak); color: var(--text-primary); }
.v3-filters .v3-check input[type="radio"] { width: 16px; height: 16px; accent-color: var(--v3-accent); }

/* Counts as quiet pills, tabular so a column of them lines up. */
.sch-check__n {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-surface-2);
    font-weight: 600;
    min-width: 26px;
    text-align: center;
}
.v3-filters .v3-check:hover .sch-check__n { background: var(--bg-surface); }

/* The search box gets the same treatment as the select. */
.sch-search { border-color: var(--border-strong); }
.sch-search:focus { outline: none; border-color: var(--v3-accent); box-shadow: 0 0 0 3px var(--v3-accent-weak); }

/* Active filters above the results: removable chips + clear-all. */
.sch-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface-2);
}
.sch-active__chip { text-decoration: none; font-size: 12.5px; padding: 4px 10px 4px 12px; background: var(--bg-surface); }
.sch-active__chip .v3-i { width: 13px; height: 13px; color: var(--text-muted); }
.sch-active__chip:hover { border-color: var(--v3-accent); }
.sch-active__chip:hover .v3-i { color: var(--v3-accent); }
.sch-active__clear { margin-left: auto; font-size: 13px; }

/* Window chips inside the row cell and the "when" step. The row cell's own
   `div` rule already lays chips out; the step needs the same. */
.sch-step-windows { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.sch-step-windows .v3-intake { display: flex; }
.sch-step-windows .v3-status { margin-top: 0; }
.v3-row__cell .v3-status { margin: 2px 0 4px; }