/* ============================================================
   LAGHBANI CONSULTING · foundation years in Direction 2
   ------------------------------------------------------------
   Loaded LAST on the eight foundation-year pages (the hub and the
   seven colleges), after each page's own <style>, so it restyles the
   parts they share without touching their copy:
     1. numbered sections: a gold Dazzle numeral leads the eyebrow
     2. headlines in a light weight with one medium phrase (<b>)
     3. cards without outlines: white ones float, the first in a grid
        is a solid blue field and the last a cream one
     4. the navy capsule with a gold circle (white on navy)
     5. pill tabs, editorial tables, the timeline, the FAQ accordion
     6. the campus photo with frosted labels (glass only on photos)
     7. language as a code (EN / DE), never a flag
   Every page keeps its own accent (FH Aachen stays teal).
   ============================================================ */

:root{
  --fy-float:0 1px 2px rgba(30,43,66,.06),0 16px 40px rgba(30,43,66,.08);
  --fy-float-hi:0 2px 4px rgba(30,43,66,.07),0 22px 50px rgba(30,43,66,.13);
  --fy-r:28px;
}

/* ---------- 1. numbered sections ---------- */
body{counter-reset:fy-sec}
.section :is(.sec-head .eyebrow,.prose > .eyebrow,.apply-grid > :first-child > .eyebrow){counter-increment:fy-sec;display:inline-flex;align-items:center;gap:14px}
.section :is(.sec-head .eyebrow,.prose > .eyebrow,.apply-grid > :first-child > .eyebrow)::before{content:counter(fy-sec,decimal-leading-zero);font-family:var(--font-display);font-weight:300;font-size:34px;line-height:.8;letter-spacing:0;color:var(--brand-gold);font-variant-numeric:tabular-nums}
.section :is(.sec-head,.prose,.apply-grid > :first-child) > hr{display:none}
.section .sec-head{max-width:820px}

/* ---------- 2. light headlines with one medium phrase ---------- */
.section :is(.sec-head h2,.prose > h2.lc-h2,.apply-grid h2.lc-h2){font-weight:300;font-size:clamp(28px,3.4vw,42px);line-height:1.12;letter-spacing:-.022em;text-wrap:balance}
.section :is(.sec-head h2,.prose > h2.lc-h2,.apply-grid h2.lc-h2) b{font-weight:600}
html.lang-ar .section :is(.sec-head h2,.prose > h2.lc-h2,.apply-grid h2.lc-h2){letter-spacing:0;line-height:1.4}
.page-hero .wise-display{font-weight:300;letter-spacing:-.03em}
.page-hero .wise-display em,.page-hero .wise-display b{font-weight:600}
html.lang-ar .page-hero .wise-display{letter-spacing:0;line-height:1.25}

/* ---------- 3. cards: no outlines; white floats, filled sits flat ---------- */
:is(.adv,.xcard,.cost-card,.why,.w,.hl,.explain,.ctype,.rc,.fee-card,.exam-card,.combi-card,.partner-card,.kpanel,.cx-panel,.sx-panel,.tx-panel,.step){
  border:0;border-radius:var(--fy-r);box-shadow:var(--fy-float);transition:box-shadow .25s var(--ease-out,ease)}
:is(.adv,.xcard,.cost-card,.why,.w,.hl,.explain,.ctype,.rc,.fee-card,.exam-card,.combi-card,.partner-card,.kpanel,.cx-panel,.sx-panel,.tx-panel,.step):hover{
  transform:none;box-shadow:var(--fy-float-hi)}

/* in a grid of like cards, the first is a solid blue field and the last a
   cream one, so no row reads as a stack of identical white boxes */
:is(.adv-grid,.why-grid,.hl-grid,.explain-grid,.xgrid) > :first-child{background:var(--blue-700);color:#fff;box-shadow:none}
:is(.adv-grid,.why-grid,.hl-grid,.explain-grid,.xgrid) > :first-child :is(h3,h4,strong,b){color:#fff}
:is(.adv-grid,.why-grid,.hl-grid,.explain-grid,.xgrid) > :first-child :is(p,li,span:not([class])){color:rgba(255,255,255,.84)}
:is(.adv-grid,.why-grid,.hl-grid,.explain-grid,.xgrid) > :first-child :is(.ai,.ic,.eic,.wi,.hic){background:rgba(255,255,255,.14);color:var(--gold-300);border:0}
:is(.adv-grid,.why-grid,.hl-grid,.explain-grid,.xgrid) > :first-child svg{color:var(--gold-300)}
:is(.adv-grid,.why-grid,.hl-grid,.explain-grid,.xgrid) > :last-child:not(:first-child){background:var(--brand-cream);box-shadow:none}
.sec-warm :is(.adv-grid,.why-grid,.hl-grid,.explain-grid,.xgrid) > :last-child:not(:first-child){background:#fff;box-shadow:var(--fy-float)}
:is(.adv-grid,.why-grid,.hl-grid,.explain-grid,.xgrid) :is(.ai,.ic,.eic,.wi,.hic){border-radius:14px}

/* ---------- 4. buttons: capsules, the main one with a gold circle ----------
   Navy capsule on light grounds; white capsule on the three dark heroes
   (hub, Paderborn, FH Aachen), the navy application band and the closing
   panel. The other five college heroes are light. */
.btn-goldsolid{background:var(--ink-800);color:#fff;gap:12px;padding-inline:24px 6px;border:0;font-weight:600}
.btn-goldsolid:hover{background:var(--ink-900);color:#fff}
:is(.sk-hero,.pb-hero,.a-hero,.callout-ink,.sec-ink) .btn-goldsolid{background:#fff;color:var(--ink-800);box-shadow:none}
:is(.sk-hero,.pb-hero,.a-hero,.callout-ink,.sec-ink) .btn-goldsolid:hover{background:#fff;color:var(--ink-800);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.btn-goldsolid svg{width:38px!important;height:38px!important;padding:11px;border-radius:50%;background:var(--brand-gold);color:var(--ink-800);box-sizing:border-box;flex:none;transition:transform .2s var(--ease-out,ease)}
.btn-goldsolid:hover svg{transform:translateX(3px)}
[dir="rtl"] .btn-goldsolid svg.flip-rtl,[dir="rtl"] .btn-goldsolid .flip-rtl{transform:scaleX(-1)}
[dir="rtl"] .btn-goldsolid:hover svg.flip-rtl{transform:scaleX(-1) translateX(3px)}
.page-hero .btn-soft{background:transparent;color:var(--fg1);border:1.5px solid var(--line-3);backdrop-filter:none;-webkit-backdrop-filter:none}
.page-hero .btn-soft:hover{background:rgba(255,255,255,.7);border-color:var(--ink-400)}
:is(.sk-hero,.pb-hero,.a-hero) .btn-soft{color:#fff;border-color:rgba(255,255,255,.34)}
:is(.sk-hero,.pb-hero,.a-hero) .btn-soft:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);color:#fff}

/* hero facts as a stat row: figures on a fine rule, no boxes */
.page-hero :is(.glance .g,.meta-strip .m){background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;box-shadow:none;padding:14px 0 0}
:is(.sk-hero,.pb-hero,.a-hero) .glance .g{border-top-color:var(--line-on-ink)}
.page-hero .glance .g .v{font-size:19px}

/* hero device cards: no outline or blur. On the dark heroes a solid navy
   panel; on the light heroes they keep their own fill and float. */
:is(.seat-card,.journey-card,.selector,.lang-switch,.start-card,.guard,.ft-card){border:0;border-radius:var(--fy-r);backdrop-filter:none;-webkit-backdrop-filter:none}
:is(.seat-card,.journey-card){background:#22314f;box-shadow:0 24px 60px rgba(8,14,30,.35)}
:is(.selector,.lang-switch,.start-card,.guard,.ft-card){box-shadow:var(--fy-float-hi)}

/* ---------- 5a. pill tabs (the track explorers) ---------- */
.tablist{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border:0;border-radius:999px;background:var(--ink-050)}
.tablist .tab{border:0;border-radius:999px;background:transparent;min-height:44px;padding:8px 18px;color:var(--fg2);font-weight:600;box-shadow:none}
.tablist .tab:hover{background:rgba(255,255,255,.7);color:var(--fg1)}
.tablist .tab[aria-selected="true"]{background:var(--ink-800);color:#fff;box-shadow:0 6px 16px -8px rgba(30,43,66,.6)}
.tablist .tab[aria-selected="true"] svg{color:var(--gold-300)}
@media (max-width:640px){.tablist{display:flex;border-radius:22px}.tablist .tab{flex:1 1 auto;justify-content:center}}

/* track panels: a soft head instead of a gradient bar */
.kpanel-head{background:var(--blue-050);border-bottom:0}
.kletter,.tk{border-radius:14px}
.chips .c{border:0;background:var(--ink-050)}
.chips .c.fsp{background:var(--blue-100);color:var(--blue-700)}

/* ---------- 5b. editorial tables ---------- */
:is(.spec-wrap,.tablewrap,.dates-wrap){border:0;border-radius:22px;box-shadow:var(--fy-float);background:#fff}
:is(.spec-table,.simple-table,.dates-table) thead th{background:#fff;color:var(--navy-500,#5a6a85);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line-2)}
html.lang-ar :is(.spec-table,.simple-table,.dates-table) thead th{letter-spacing:.02em}
:is(.spec-table,.simple-table,.dates-table) tbody th{background:transparent}
:is(.spec-table,.simple-table,.dates-table) tbody tr{transition:background .2s var(--ease-out,ease),color .2s}
:is(.spec-table,.simple-table,.dates-table) tbody tr:hover > *{background:var(--ink-800);color:#fff}
:is(.spec-table,.simple-table,.dates-table) tbody tr:hover .amt-cell{color:var(--gold-300)}
:is(.spec-table,.simple-table,.dates-table) tbody tr:hover .kcode{background:rgba(255,255,255,.14);color:#fff}

/* filled notes beside a card: a soft field, no outline */
:is(.cost-note,.note-callout,.partner-note){border:0;border-radius:var(--fy-r);box-shadow:none}

/* ---------- 5c. the timeline: round nodes on one gold line ---------- */
.fmeta{display:flex;flex-direction:column;gap:3px}
.flow::before{height:2px;background:var(--gold-300);opacity:1}
.fnode{border-radius:50%;border:0;background:#fff;box-shadow:var(--fy-float)}
.fnode.goal{background:var(--brand-gold);color:var(--ink-900)}
@media (max-width:760px){.flow::before{width:2px}}

/* ---------- 5d. the application band: a solid blue field ---------- */
.sec-ink .apply-card{background:var(--blue-700);border:0;border-radius:var(--fy-r);box-shadow:none}
.sec-ink .apply-card .checklist .ic{background:rgba(255,255,255,.14);color:var(--gold-300)}
.sec-ink .req li::before{background:var(--brand-gold)}

/* ---------- 5e. FAQ as an accordion of rows ---------- */
.faq details{border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;margin:0;box-shadow:none}
.faq details:first-child{border-top:1px solid var(--line-2)}
.faq details:hover{transform:none;box-shadow:none}
.faq summary{padding-block:20px;padding-inline:0 56px;font-size:17px;font-weight:600}
[dir="rtl"] .faq summary{padding-inline:0 56px}
.faq details > p{padding-inline:0 56px}

/* ---------- 5f. the closing call: a navy panel, light headline ---------- */
.callout-ink{border-radius:36px}
.callout-ink .wise-h2{font-weight:300;font-size:clamp(28px,3.6vw,44px)}
.callout-ink .wise-h2 b{font-weight:600}
.callout-ink .chip{background:var(--brand-gold);color:var(--ink-800);border:0;box-shadow:none}
html.lang-ar .callout-ink .wise-h2{letter-spacing:0;line-height:1.35}

/* ---------- 5g. the hub's seven routes as editorial rows ----------
   Photo, name and fit on the left, the four deciding facts in the middle,
   one round action. Rows that do not match the filters dim and drop below
   the ones that do (order), so the answer is always at the top. */
#matchGrid{display:flex;flex-direction:column;gap:12px}
#matchGrid .rc{display:grid;grid-template-columns:220px minmax(0,1.1fr) minmax(0,1fr) 52px;grid-template-rows:auto auto auto auto 1fr;column-gap:28px;padding:14px;align-items:start;background:#fff}
#matchGrid .rc.dim{order:2}
#matchGrid .rc-photo{grid-column:1;grid-row:1/-1;width:100%;height:100%;min-height:176px;margin:0;border:0;border-radius:20px}
#matchGrid .rc h3{grid-column:2;grid-row:1;margin:10px 0 2px;font-size:21px;letter-spacing:-.01em}
#matchGrid .rc .loc{grid-column:2;grid-row:2;margin-bottom:10px}
#matchGrid .rc .codes{grid-column:2;grid-row:3;margin-bottom:8px}
#matchGrid .rc-tags{grid-column:2;grid-row:4;margin-bottom:8px;gap:4px 14px}
#matchGrid .rc-tag{background:none;border:0;padding:0;font-size:13px;font-weight:500;color:var(--fg2)}
#matchGrid .rc .best{grid-column:2;grid-row:5;margin:2px 0 8px;padding:0;background:none;color:var(--fg2);font-size:13.5px}
#matchGrid .rc .best b{color:var(--gold-700)}
#matchGrid .rc-facts{grid-column:3;grid-row:1/-1;align-self:center;margin:0;padding:6px 0 6px 24px;border-inline-start:1px solid var(--line-1);gap:10px}
[dir="rtl"] #matchGrid .rc-facts{padding:6px 24px 6px 0}
#matchGrid .rc .go{grid-column:4;grid-row:1/-1;align-self:center;width:52px;height:52px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:var(--ink-800);color:#fff}
#matchGrid .rc .go span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#matchGrid .rc .go svg{width:18px!important;height:18px!important}
#matchGrid .rc:not(.dim):hover{box-shadow:var(--fy-float-hi)}
#matchGrid .rc:not(.dim):hover .go{background:var(--brand-gold);color:var(--ink-800)}
@media (max-width:900px){
  #matchGrid .rc{grid-template-columns:minmax(0,1fr) 52px;grid-template-rows:none;column-gap:14px;padding:0 0 18px;overflow:hidden}
  #matchGrid .rc-photo{grid-column:1/-1;grid-row:auto;min-height:0;height:auto;aspect-ratio:16/9;border-radius:0;margin-bottom:14px}
  #matchGrid .rc > :not(.rc-photo):not(.go){grid-column:1;grid-row:auto;margin-inline:18px}
  #matchGrid .rc-facts{border:0;padding:4px 0 0;margin-top:6px}
  #matchGrid .rc .go{grid-column:2;grid-row:2/span 2;margin-inline-end:18px;width:46px;height:46px}
}

/* ---------- 6. the campus photo, with frosted labels ---------- */
.page-hero:has(+ .fy-photo){padding-bottom:110px}
.fy-photo{position:relative;z-index:3;max-width:940px;margin:-68px auto 0;padding-inline:20px}
.fy-photo-in{position:relative;margin:0;border-radius:36px;overflow:hidden;aspect-ratio:21/9;background:var(--ink-100);box-shadow:0 30px 60px -28px rgba(22,32,58,.55)}
.fy-photo-in img{display:block;width:100%;height:100%;object-fit:cover}
.fy-place,.fy-facts{position:absolute;color:#fff;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.fy-place{inset-block-start:18px;inset-inline-start:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(22,32,58,.32);font-size:13.5px;font-weight:600}
.fy-place svg{width:15px;height:15px}
.fy-facts{inset-block-end:18px;inset-inline-end:18px;display:flex;gap:4px;padding:6px;border-radius:22px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28)}
.fy-fact{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:16px}
.fy-fact + .fy-fact{border-inline-start:1px solid rgba(255,255,255,.26);border-radius:0}
.fy-fact span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}
html.lang-ar .fy-fact span{letter-spacing:0}
.fy-fact b{font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fy-place{background:rgba(22,32,58,.72)}.fy-facts{background:rgba(22,32,58,.72)}}
@media (max-width:760px){
  .page-hero:has(+ .fy-photo){padding-bottom:48px}
  .fy-photo{margin-top:20px;padding-inline:16px}
  .fy-photo-in{aspect-ratio:4/3;border-radius:26px}
  .fy-facts{inset-inline:10px;inset-block-end:10px;justify-content:space-between}
  .fy-fact{padding:6px 8px}
  .fy-fact b{font-size:13.5px;white-space:normal}
}

/* ---------- 7. teaching language as a code, never a flag ---------- */
.lcode{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 7px;border-radius:8px;background:var(--blue-100);color:var(--blue-700);font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1}
.lcode + .lcode{margin-inline-start:4px}
.lcode.de{background:var(--ink-050);color:var(--ink-800)}
.fy-fact .lcode,.fy-fact .lcode.de{background:rgba(255,255,255,.22);color:#fff}
:is(.page-hero,.sec-ink,.journey-card) .lcode{background:rgba(255,255,255,.14);color:#fff}

@media (prefers-reduced-motion:reduce){.btn-goldsolid svg,:is(.spec-table,.simple-table,.dates-table) tbody tr{transition:none}}