/* ============================================================
   wise.css — Wise-on-brand component kit (opt-in, drop-in blocks)
   ------------------------------------------------------------
   Load AFTER site.css (and sk.css where present). Token-only:
   references colors_and_type.css variables, never redefines them.
   index.html + the shared footer do NOT link this file and stay as-is.

   Blocks:  1 Headlines · 2 Buttons · 3 Section bands · 4 Comparison
            5 Callout card · 6 Split feature · 7 Why-Germany · 8 Stat band
   Uses logical properties (margin-inline / inset-inline / text-align:start /
   grid order) so RTL mirrors automatically; one [dir=rtl] rule flips arrows.
   ============================================================ */

/* ---- de-decoration: pages that opt into wise.css flatten ambient AI-ish decor ---- */
.aurora{display:none !important}
.hero-blob{display:none !important}

/* ============================================================
   1) CONFIDENT HEADLINES  (Outfit only; Dazzle reserved for numerals/wordmark)
   ============================================================ */
.wise-display{font-family:var(--font-sans);font-weight:800;font-size:clamp(46px,7vw,100px);line-height:.98;letter-spacing:-.035em;color:var(--fg1);margin:0;max-width:18ch;text-wrap:balance}
.wise-h2{font-family:var(--font-sans);font-weight:800;font-size:clamp(31px,4.4vw,58px);line-height:1.04;letter-spacing:-.03em;color:var(--fg1);margin:0;text-wrap:balance}
.wise-h3{font-family:var(--font-sans);font-weight:700;font-size:clamp(22px,2.5vw,32px);line-height:1.14;letter-spacing:-.02em;color:var(--fg1);margin:0}
.wise-sub{font-family:var(--font-sans);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--fg2);max-width:48ch;margin:16px 0 0}
.wise-eyebrow{display:inline-block;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin:0 0 12px}
.wise-caps{text-transform:uppercase;letter-spacing:-.012em}
/* one gold accent word per headline */
.wise-display em,.wise-h2 em,.wise-h3 em{font-style:normal;color:var(--gold-600)}
/* on navy bands / callouts: lighten text, gold accents pop */
.band-navy .wise-display,.band-navy .wise-h2,.band-navy .wise-h3,
.callout-ink .wise-h2,.callout-ink .wise-h3{color:var(--fg-on-ink)}
.band-navy .wise-sub,.band-navy p,.callout-ink .wise-sub{color:var(--fg-on-ink-2)}
.band-navy .wise-eyebrow,.callout-ink .wise-eyebrow{color:var(--gold-300)}
.band-navy .wise-display em,.band-navy .wise-h2 em,.band-navy .wise-h3 em,
.callout-ink .wise-h2 em{color:var(--gold-300)}

/* ============================================================
   2) PILL BUTTONS + ARROW LINK  (one solid pill + one link per action row)
   ============================================================ */
.btn-pill{border-radius:var(--r-pill)}
.btn-goldsolid{background:var(--brand-gold);color:var(--ink-900);font-weight:700;border:1px solid transparent;box-shadow:var(--shadow-sm)}
.btn-goldsolid:hover{background:var(--gold-600);color:var(--ink-900);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:16px;color:var(--blue-600);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;background:none;border:0;cursor:pointer;padding:0}
.link-arrow svg{width:17px;height:17px;flex:none;transition:transform .22s var(--ease-spring)}
.link-arrow:hover svg{transform:translateX(3px)}
.band-navy .link-arrow,.callout-ink .link-arrow{color:var(--gold-300)}
[dir="rtl"] .link-arrow svg{transform:scaleX(-1)}
[dir="rtl"] .link-arrow:hover svg{transform:translateX(-3px) scaleX(-1)}
.wise-actions{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-top:30px}

/* ============================================================
   3) FULL-BLEED SECTION BANDS  (alternate; never two same-colour adjacent)
   Each .band is a top-level section; put a .lc-container inside for content.
   ============================================================ */
.band{position:relative;padding-block:clamp(56px,7.5vw,108px)}
.band-mist{background:var(--brand-mist)}
.band-cream{background:var(--brand-cream)}
.band-gold{background:var(--gold-050)}
.band-goldstrong{background:var(--gold-100)}
.band-navy{background:linear-gradient(155deg,var(--ink-900),var(--ink-800));color:var(--fg-on-ink)}
.band-tight{padding-block:clamp(40px,5vw,72px)}

/* ============================================================
   4) WINNER-COLUMN COMPARISON TABLE  (.cmp) — the "why us" hero pattern
   Grid children flow: [corner][col×N]  then per row [label][cell×N].
   Set --cmp-cols:N on .cmp-grid. Winner column cells get .cmp-win.
   ============================================================ */
.cmp{max-width:980px;margin-inline:auto;background:var(--surface-card);border:var(--card-hairline);border-radius:22px;box-shadow:var(--card-shadow);overflow:hidden}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-grid{display:grid;grid-template-columns:1.5fr repeat(var(--cmp-cols,4),minmax(0,1fr));margin-bottom:-1px;font-variant-numeric:tabular-nums;min-width:600px}
.cmp-grid>div{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 14px;border-bottom:1px solid var(--line-1);font-size:14px;color:var(--fg1)}
.cmp-corner{border-bottom:1px solid var(--line-1)}
.cmp-lbl{justify-content:flex-start;text-align:start;color:var(--fg2);font-weight:500;font-size:14.5px}
.cmp-col{flex-direction:column;gap:3px;padding-block:22px 16px;background:var(--surface-sunken)}
.cmp-col .cmp-name{font-weight:600;font-size:14px;color:var(--ink-800);line-height:1.2}
.cmp-col .cmp-price{font-weight:700;font-size:18px;color:var(--fg1);letter-spacing:-.01em}
.cmp-chip{display:inline-block;background:var(--gold-500);color:var(--ink-900);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 11px;border-radius:var(--r-pill);margin-bottom:5px;box-shadow:var(--shadow-xs)}
.cmp-row-hover:hover>div{background:rgba(92,130,202,.045)}
/* winner column */
.cmp-col.cmp-win,.cmp-cell.cmp-win{background:var(--ink-800);color:var(--fg-on-ink);border-bottom-color:rgba(255,255,255,.12)}
.cmp-col.cmp-win .cmp-name{color:#fff}
.cmp-col.cmp-win .cmp-price{color:var(--gold-300)}
.cmp-win.cmp-col{padding-block:24px 16px}
/* value glyphs */
.cmp-yes{color:var(--success);display:inline-flex}
.cmp-no{color:var(--ink-300);display:inline-flex}
.cmp-win .cmp-yes{color:var(--gold-300)}
.cmp-win .cmp-no{color:rgba(255,255,255,.34)}
.cmp-bad{color:var(--danger);font-weight:700}          /* only place red appears */
.cmp-val{font-weight:600}
.cmp-win .cmp-val{color:#fff}
/* show-more toggle row (centered link under the table) */
.cmp-more{display:flex;justify-content:center;margin-top:18px}

/* ============================================================
   5) SIGNATURE DEEP-NAVY CALLOUT CARD  (.callout-ink)
   ============================================================ */
.callout-ink{position:relative;isolation:isolate;overflow:hidden;max-width:780px;margin-inline:auto;
  background:linear-gradient(150deg,var(--ink-900),var(--ink-800));color:var(--fg-on-ink);
  border-radius:28px;padding:clamp(36px,5vw,64px);text-align:center;box-shadow:var(--shadow-ink)}
.callout-ink::after{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-14%;width:60%;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(188,158,94,.34),transparent 70%);filter:blur(24px)}
.callout-ink .chip{width:76px;height:76px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 30% 25%,#e8d29a,var(--gold-500));color:var(--ink-900);
  box-shadow:0 0 0 8px rgba(188,158,94,.16),var(--shadow-md)}
.callout-ink .chip svg{width:32px;height:32px}
.callout-ink .wise-h2{color:var(--fg-on-ink)}
.callout-ink .wise-sub{margin-inline:auto}
.callout-ink .wise-actions{justify-content:center}

/* ============================================================
   6) ALTERNATING SPLIT FEATURE  (.split / .split.rev)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.split + .split{margin-top:clamp(56px,8vw,104px)}
.split.rev .split-media{order:2}
.split-media{border-radius:28px;overflow:hidden;box-shadow:var(--card-shadow);background:var(--brand-cream);aspect-ratio:5/4}
.split-media.tint-blue{background:var(--blue-050)}
.split-media.tint-gold{background:var(--gold-050)}
.split-media img{width:100%;height:100%;object-fit:cover;display:block}
.split-body .wise-actions{margin-top:26px}

/* ============================================================
   7) WHY-STUDY-IN-GERMANY BAND  (.whyde) — client-verify the six proof points
   ============================================================ */
.whyde{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:start}
.whyde-intro .wise-eyebrow{position:relative;padding-bottom:10px}
.whyde-intro .wise-eyebrow::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:34px;height:3px;border-radius:2px;background:var(--brand-gold)}
.whyde-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.why-card{border-radius:var(--r-lg);padding:22px}
.band-navy .why-card{background:rgba(255,255,255,.05);border:1px solid var(--line-on-ink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.band-cream .why-card,.band-mist .why-card,.band-gold .why-card{background:var(--surface-card);border:1px solid var(--line-2);box-shadow:var(--card-shadow)}
.why-card .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.band-navy .why-card .ic{background:rgba(188,158,94,.16);color:var(--gold-300)}
.band-cream .why-card .ic,.band-mist .why-card .ic,.band-gold .why-card .ic{background:var(--gold-050);color:var(--gold-600)}
.why-card .ic svg{width:22px;height:22px}
.why-card h4{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--fg1)}
.band-navy .why-card h4{color:var(--fg-on-ink)}
.why-card p{margin:0;font-size:14px;line-height:1.5;color:var(--fg2)}
.band-navy .why-card p{color:var(--fg-on-ink-2)}

/* ============================================================
   8) BIG-NUMBER STAT BAND  (.stat-band) — use only with client-verified figures
   ============================================================ */
.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(20px,3vw,40px)}
.stat{text-align:center}
.stat .num{font-family:var(--font-sans);font-weight:800;font-size:clamp(38px,4.6vw,58px);letter-spacing:-.03em;line-height:1;color:var(--fg1)}
.band-navy .stat .num{color:#fff}
.stat .num em{font-style:normal;color:var(--gold-600)}
.band-navy .stat .num em{color:var(--gold-300)}
.stat .lbl{margin-top:8px;font-size:14.5px;color:var(--fg2);line-height:1.4}
.band-navy .stat .lbl{color:var(--fg-on-ink-2)}

/* ============================================================
   9) UNIVERSITY / STUDIENKOLLEG PICKER  (.uni-pick) — selectable, linked cards
   Each .uni-card is a link; hover/focus is the visual "chosen" indicator
   (lift + navy border + arrow fills navy). Fills width, no dead column.
   ============================================================ */
.perk-strip{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:20px}
.perk-strip .perk{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--fg2);line-height:1.35}
.perk-strip .perk .ic{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--gold-050);color:var(--gold-700)}
.perk-strip .perk .ic svg{width:14px;height:14px}
.band-navy .perk-strip .perk{color:var(--fg-on-ink-2)}
.band-navy .perk-strip .perk .ic{background:rgba(188,158,94,.16);color:var(--gold-300)}

.uni-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px;margin-top:26px}
.uni-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:14px 15px;border-radius:16px;text-align:start;
  background:var(--surface-card);border:1px solid var(--line-2);box-shadow:var(--card-shadow);
  transition:transform .22s var(--ease-spring),box-shadow .22s var(--ease-soft),border-color .2s}
.uni-card:hover,.uni-card:focus-visible{transform:translateY(-3px);border-color:var(--ink-800);box-shadow:var(--card-shadow-hover);outline:none}
.uni-card:focus-visible{box-shadow:var(--card-shadow-hover),0 0 0 3px var(--focus-ring)}
.uni-card .mono{width:48px;height:48px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--ink-800),var(--blue-700));color:#fff;font-family:var(--font-display);font-size:14px;letter-spacing:.02em}
/* real university logo on a clean white chip; falls back to the navy monogram if the image is missing */
.uni-card .mono.has-logo{background:#fff;border:1px solid var(--line-1);padding:7px}
.uni-card .mono.has-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

/* institution logo chip for page heroes (foundation-year / Studienkolleg pages) — white so it reads on dark or light heroes */
.hero-logo{display:flex;align-items:center;justify-content:center;width:fit-content;background:#fff;border:1px solid var(--line-1);border-radius:14px;padding:10px 15px;min-height:54px;margin:0 0 15px;box-shadow:var(--shadow-sm)}
.hero-logo img{max-height:34px;max-width:180px;width:auto;height:auto;object-fit:contain;display:block}

/* Foundation "what you pay" cards: the fee table sets min-width:480 and lives in a
   .spec-wrap{overflow-x:auto} scroller. Grid/flex items default to min-width:auto, which lets
   that min-width push the whole grid wider than a phone screen. min-width:0 lets the card shrink
   so the table scrolls inside its wrapper instead of overflowing the page. */
.cost-card,.cost-note,.fee-card{min-width:0}
.spec-wrap{max-width:100%}
/* Phones: let the apply grid shrink and its long CTA label wrap instead of forcing the card
   (and the whole page) wider than the screen. */
@media(max-width:600px){
  .apply-grid>*{min-width:0}
  .apply-card .btn{white-space:normal}
}
.uni-card .uc-body{min-width:0}
.uni-card .uc-body h4{margin:0;font-size:14.5px;font-weight:600;color:var(--fg1);line-height:1.22;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.uni-card .uc-body p{margin:2px 0 0;font-size:12.5px;color:var(--ink-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uni-card .uc-arw{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(30,43,66,.06);color:var(--ink-700);transition:background-color .2s var(--ease-soft),color .2s,transform .22s var(--ease-spring)}
.uni-card .uc-arw svg{width:16px;height:16px}
.uni-card:hover .uc-arw,.uni-card:focus-visible .uc-arw{background:var(--ink-800);color:#fff;transform:translateX(2px)}
[dir="rtl"] .uni-card .uc-arw svg{transform:scaleX(-1)}
[dir="rtl"] .uni-card:hover .uc-arw,[dir="rtl"] .uni-card:focus-visible .uc-arw{transform:translateX(-2px)}
.uni-more{margin-top:18px;display:flex;justify-content:center}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:var(--s-6)}
  .split.rev .split-media,.split-media{order:-1}   /* media first when stacked */
  .whyde{grid-template-columns:1fr;gap:var(--s-6)}
}
@media(max-width:560px){
  .whyde-grid{grid-template-columns:1fr}
  .wise-actions{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .btn-goldsolid:hover,.link-arrow:hover svg{transform:none}
}

/* ============================================================
   COMPARISON COLUMN CHOOSER (.cmp-pick) - see compare.js
   Nobody compares seven things at once; they compare two and
   swap. The chips narrow a wide .cmp table to the columns the
   reader actually cares about, which is the difference between
   a usable comparison and 1,000px of sideways scrolling on a
   phone. Columns hide via one data-off attribute on the table.
   ============================================================ */
.cmp-pick{max-width:980px;margin:0 auto 16px}
.cmp-pick-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cmp-pick-h{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-500)}
html.lang-ar .cmp-pick-h{letter-spacing:0;text-transform:none;font-size:13px}
.cmp-pick-note{margin:0;font-size:12.5px;color:var(--ink-400)}
.cmp-pick-note.is-warn{color:var(--gold-700);font-weight:600}
.cmp-pick-chips{display:flex;flex-wrap:wrap;gap:8px}
.cmp-pick-chip{font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
  padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface-card);color:var(--ink-500);
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.cmp-pick-chip:hover{border-color:var(--line-3);color:var(--fg1)}
.cmp-pick-chip.is-on{background:var(--ink-800);border-color:var(--ink-800);color:#fff}
.cmp-pick-chip:focus-visible{outline:2.5px solid var(--blue-500);outline-offset:2px}
.cmp-pick-chip:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.cmp-pick-chip{transition:none}.cmp-pick-chip:active{transform:none}}

/* Column hiding. data-off holds the 1-based indices of the compared columns
   that are off, so column N maps to nth-child(N+1) past the row-label cell. */
.cmp[data-off~="1"] tr>:nth-child(2),
.cmp[data-off~="2"] tr>:nth-child(3),
.cmp[data-off~="3"] tr>:nth-child(4),
.cmp[data-off~="4"] tr>:nth-child(5),
.cmp[data-off~="5"] tr>:nth-child(6),
.cmp[data-off~="6"] tr>:nth-child(7),
.cmp[data-off~="7"] tr>:nth-child(8),
.cmp[data-off~="8"] tr>:nth-child(9){display:none}

/* ============================================================
   FOUNDATION-PAGE BASE COMPONENTS

   These two lived only in sk.css, which the Studienkolleg pages
   do not link (partner-universities.html, partner.html and
   university.html do). Pages that inlined their own copy looked
   fine; pages that did not rendered at browser defaults, and the
   gap is invisible until two siblings sit side by side.

   rheinisches-studienkolleg.html shipped its intake table - the
   one that tells a student which start date they qualify for -
   with no card, no borders and no cell padding. studienkolleg-
   dsseldorf.html shipped its deadline banner as loose body text.
   Both are fixed by living here, in the stylesheet every page in
   the family already loads. Pages keeping an inline copy simply
   override with the same values.

   text-align is start, not left, so the Arabic build flips.
   ============================================================ */
.simple-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface-card);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.simple-table th,.simple-table td{text-align:start;padding:13px 18px;border-bottom:1px solid var(--line-1)}
.simple-table thead th{background:var(--ink-050);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-500);font-weight:600}
.simple-table tbody tr:last-child td{border-bottom:none}
.simple-table td{color:var(--fg2)}
.simple-table td b{color:var(--fg1)}
html.lang-ar .simple-table thead th{letter-spacing:0;text-transform:none;font-size:12.5px}

.alert{background:var(--brand-gold);color:var(--ink-900);text-align:center;font-weight:600;font-size:14px;padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:9px}
.alert i,.alert svg{width:16px;height:16px;flex:none}