/*==================================================
    GERMAINE — SHARED ACADEMIC SCHOOLS SIDEBAR
    This is the SINGLE Academic Schools navigation used on
    BOTH the Academics page (courses.html) and every View
    Programmes page (courses-*.html) — same markup, same
    CSS, same data source (assets/js/school-data.js), driven
    by assets/js/academic-schools-showcase.js. No separate/
    duplicate sidebar system exists anywhere else.
      LEFT  ".ash-sidebar"  — sticky, solid navy-blue panel,
                              one item per Academic School.
      RIGHT ".ash-panel"    — Academics page only: live
                              preview that swaps in-page (no
                              reload) to show the selected
                              school's photo, a short
                              description and an "Explore
                              Programmes" button. On View
                              Programmes pages there is no
                              panel — sidebar items are real
                              links to each school's own page,
                              with the current one highlighted;
                              everything else on that page is
                              unchanged.
    Reuses the site's real tokens (--primary, --primary-dark,
    --glass-*, --radius*, --font-*) — no new palette.
==================================================*/

.ash-shell{ padding:60px 0 70px; }

.ash-shell-inner{
    display:grid;
    grid-template-columns:288px 1fr;
    gap:24px;
    align-items:start;
}

/*==================================================
    LEFT — sticky sidebar navigation
    Solid navy-blue (no gradient), ~15-20% smaller footprint
    than the previous plain-glass version.
==================================================*/
.ash-sidebar{
    position:sticky;
    top:calc(var(--header-height, 151px) + 16px);
    background:#0B1F4D;
    border:none;
    border-right:1px solid rgba(255, 255, 255, .08);
    border-radius:20px;
    box-shadow:0 10px 28px rgba(0, 0, 0, .25);
    padding:16px 12px;
    overflow:visible;
}

.ash-sidebar-head{ padding:0 8px 14px; margin-bottom:8px; border-bottom:1px solid rgba(255, 255, 255, .12); }
.ash-sidebar-head .section-tag{ display:block; margin-bottom:5px; color:#F8B4D9; }
.ash-sidebar-head h2{ font-family:var(--font-heading); font-size:1.05rem; color:#FFFFFF; }

.ash-sidebar-nav{ display:flex; flex-direction:column; gap:8px; }

/* Title-only items — no leading icons, no programme counts.
   Real <a> links on View Programmes pages, buttons on the Academics
   page (panel-swap). Inactive/hover/active are three distinct states;
   none uses a solid pink fill and nothing flashes or pulsates. */
.ash-nav-item{
    position:relative; isolation:isolate;
    display:flex; align-items:center; gap:10px;
    width:100%;
    padding:12px 14px;
    border:1px solid rgba(255, 255, 255, .1);
    background:rgba(255, 255, 255, .05);
    border-radius:12px;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
    font-family:var(--font-body);
    font-size:.84rem;
    font-weight:600;
    color:rgba(255, 255, 255, .82);
    transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.ash-nav-name{ line-height:1.3; flex:1; min-width:0; }

/* hover — slight lift + soft shadow + thin pink border, no fill */
.ash-nav-item:hover{
    background:rgba(255, 255, 255, .08);
    border-color:rgba(236, 72, 153, .4);
    color:#FFFFFF;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0, 0, 0, .22);
}

/* active — rich navy card + bright 4px pink left border + subtle glow, static */
.ash-nav-item.is-active{
    background:#132A5E;
    border-color:rgba(236, 72, 153, .35);
    border-left:4px solid #EC4899;
    padding-left:11px;
    color:#FFFFFF;
    box-shadow:0 0 0 1px rgba(236, 72, 153, .12), 0 8px 22px rgba(236, 72, 153, .18);
}

/*==================================================
    DEPARTMENT CARDS (Academics school overview)
    Compact, title-only glass cards — no image, no description,
    no separate button. The whole card is the link. Desktop 3
    columns, tablet 2, mobile 1.
==================================================*/
.ash-deptcards{ margin-top:22px; padding-top:20px; border-top:1px solid rgba(16, 42, 92, .08); }
.ash-deptcards-title{
    font-family:var(--font-heading,'Poppins',sans-serif); font-weight:800;
    font-size:1rem; color:var(--text-heading); margin:0 0 12px;
}
.ash-deptcards-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.ash-deptcard{
    position:relative; isolation:isolate; overflow:hidden;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px; border-radius:16px; text-decoration:none;
    background:rgba(255, 255, 255, .08);
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid rgba(16, 42, 92, .12);
    box-shadow:0 10px 28px rgba(0, 0, 0, .06);
    transition:transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.ash-deptcard:hover,
.ash-deptcard:focus-visible{
    transform:translateY(-3px);
    border-color:rgba(236, 72, 153, .5);
    background:rgba(236, 72, 153, .06);
    box-shadow:0 16px 34px rgba(236, 72, 153, .16);
}
.ash-deptcard-name{
    font-family:var(--font-heading,'Poppins',sans-serif); font-weight:700;
    font-size:.85rem; line-height:1.3; color:var(--text-heading);
}
.ash-deptcard-arrow{
    flex-shrink:0; font-size:.72rem; color:#EC4899;
    opacity:0; transform:translateX(-4px);
    transition:opacity .25s ease, transform .25s ease;
}
.ash-deptcard:hover .ash-deptcard-arrow,
.ash-deptcard:focus-visible .ash-deptcard-arrow{ opacity:1; transform:none; }

@media(max-width:900px){
    .ash-deptcards-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:560px){
    .ash-deptcards-grid{ grid-template-columns:1fr; }
}

@media(min-width:993px){
    .ash-sidebar{ display:block; }
}

/*==================================================
    RIGHT — live preview panel (swaps per selected school)
==================================================*/
.ash-panel{
    position:relative;
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border:var(--glass-border);
    border-radius:var(--glass-radius);
    box-shadow:var(--glass-shadow);
    overflow:hidden;
    min-height:560px;
}
.ash-panel-inner{ animation:ashPanelFade .35s ease; }
@keyframes ashPanelFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* FULL-BLEED school image — spans the entire card width, edge to edge.
   No horizontal padding or margin sits between the image and the card
   border, and `cover` guarantees the frame is completely filled (no
   letterbox gaps at the sides). The panel's own overflow:hidden +
   border-radius keep the top corners correctly rounded. */
.ash-preview-image{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;

    /* VERTICAL CROP CONTROL — the old fixed 300px height made the frame
       roughly 2.7:1 against source photos that are nearer 4:3, so the
       top and bottom of every image (heads, hands, equipment) was being
       cut away. A 16:9 aspect ratio brings the frame much closer to the
       source shape, revealing far more of each photo top-to-bottom while
       the width still runs edge to edge. The max-height keeps the panel
       from becoming unbalanced on very wide screens. */
    aspect-ratio:16 / 9;
    height:auto;
    min-height:230px;
    max-height:430px;

    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;   /* keeps the main subject centred */

    border-radius:var(--glass-radius) var(--glass-radius) 0 0;
    position:relative;
    overflow:hidden;
    transition:transform .6s cubic-bezier(.25,.8,.25,1);
}

/* browsers without aspect-ratio support still get a taller frame than before */
@supports not (aspect-ratio: 16 / 9){
    .ash-preview-image{ height:400px; }
}

/* the panel must not introduce side padding of its own around the image */
.ash-panel{ padding:0; }

.ash-panel:hover .ash-preview-image{ transform:scale(1.02); }
.ash-preview-image::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(16, 42, 92, .4) 0%, transparent 55%);
}
.ash-preview-body{ padding:36px 40px 42px; }
.ash-preview-body .section-tag{ display:inline-block; margin-bottom:10px; }
.ash-preview-body h2{ font-family:var(--font-heading); font-size:clamp(1.5rem,2.6vw,2rem); color:var(--text-heading); margin-bottom:14px; }
.ash-preview-body p{ font-size:.92rem; line-height:1.6; color:var(--text-body); margin-bottom:22px; max-width:640px; }
.ash-preview-cta{ display:inline-flex; align-items:center; gap:10px; }

/*==================================================
    PANEL CONTENT BLOCKS
    Used for both the school view and the department view.
==================================================*/
.ash-desc{ margin-bottom:20px; }
.ash-desc p{ font-size:.92rem; line-height:1.65; color:var(--text-body); margin:0 0 10px; max-width:640px; }
.ash-desc p:last-child{ margin-bottom:0; }

/* Entry requirements — no fees shown anywhere on this page */
.ash-reqs{
    background:rgba(255, 255, 255, .55); border:1px solid rgba(16, 42, 92, .08);
    border-radius:14px; padding:14px 18px; margin-bottom:20px;
}
.ash-reqs-title,
.ash-careers-title,
.ash-progs-title{
    display:flex; align-items:center; gap:7px; margin-bottom:10px;
    font-family:var(--font-button,'Montserrat',sans-serif); font-weight:700;
    font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--primary,#EC4899);
}
.ash-reqs ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ash-reqs li{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.8rem; color:var(--text-heading); }
.ash-reqs li b{ font-weight:600; color:rgba(16, 42, 92, .68); }

/* Department programme list */
.ash-progs{ margin-bottom:20px; }
.ash-progs-table{
    border:1px solid rgba(16, 42, 92, .08); border-radius:14px; overflow:hidden;
    max-height:320px; overflow-y:auto;
}
.ash-prog-row{
    display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px;
    padding:9px 14px; border-bottom:1px solid rgba(16, 42, 92, .06); font-size:.79rem;
}
.ash-prog-row:last-child{ border-bottom:none; }
.ash-prog-row:nth-child(odd){ background:rgba(16, 42, 92, .022); }
.ash-prog-name{ color:var(--text-heading); font-weight:500; }
.ash-prog-dur{ color:rgba(16, 42, 92, .6); font-size:.72rem; white-space:nowrap; }
.ash-prog-dur i{ color:var(--primary,#EC4899); font-size:.66rem; }
.ash-prog-lvl{
    font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:50px; white-space:nowrap;
    background:rgba(236, 72, 153, .1); color:var(--primary,#EC4899);
}
.ash-prog-lvl.lvl-diploma{ background:rgba(16, 42, 92, .1); color:#102A5C; }
.ash-prog-lvl.lvl-artisan{ background:rgba(236, 72, 153, .14); color:#B01458; }

/* Department career opportunities */
.ash-careers{ margin-bottom:20px; }
.ash-careers ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
.ash-careers li{ display:flex; align-items:flex-start; gap:8px; font-size:.79rem; line-height:1.45; color:var(--text-heading); }
.ash-careers li i{ color:var(--primary,#EC4899); font-size:.68rem; margin-top:4px; flex-shrink:0; }

/*==================================================
    CAREER PORTALS — centred heading + pill buttons
==================================================*/
.ash-portals{ text-align:center; margin:0 0 24px; padding-top:6px; }
.ash-portals-title{
    font-family:var(--font-heading,'Poppins',sans-serif); font-weight:800;
    font-size:1.15rem; color:var(--text-heading); margin:0 0 5px;
}
.ash-portals-sub{ font-size:.82rem; line-height:1.5; color:var(--text-body); margin:0 auto 14px; max-width:480px; }
.ash-portals-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.ash-portal-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 18px; border-radius:50px;
    background:rgba(255, 255, 255, .6);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(16, 42, 92, .09);
    box-shadow:0 4px 12px rgba(16, 42, 92, .05);
    font-size:.78rem; font-weight:600; color:var(--text-heading); text-decoration:none;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.ash-portal-pill i{ font-size:.66rem; color:var(--primary,#EC4899); }
.ash-portal-pill:hover{
    transform:translateY(-2px);
    border-color:rgba(236, 72, 153, .45);
    background:rgba(255, 255, 255, .8);
    box-shadow:0 10px 22px rgba(16, 42, 92, .1);
}

@media(max-width:700px){
    /* keep the 16:9 framing on small screens too — only the caps change,
       so phones show the same amount of each photo as desktop */
    .ash-preview-image{ height:auto; min-height:180px; max-height:260px; }
    .ash-preview-body{ padding:26px 22px 30px; }
    .ash-careers ul{ grid-template-columns:1fr; }
    .ash-prog-row{ grid-template-columns:1fr; gap:4px; }
}
@media (prefers-reduced-motion: reduce){
    .ash-panel-inner{ animation:none; }
}

/*==================================================
    RESPONSIVE
    Desktop (>992px): fixed sticky column, content scrolls
    independently (default rules above).
    Tablet (769-992px): sidebar stays a vertical column but
    narrower, still sticky.
    Mobile (<=768px): collapses to a horizontal scrollable
    chip row above the content (a sticky column doesn't work
    once stacked) — quick to scan, no functionality lost.
==================================================*/
@media(max-width:992px) and (min-width:769px){
    .ash-shell-inner{ grid-template-columns:230px 1fr; gap:18px; }
    .ash-sidebar{ padding:14px 10px; }
    .ash-nav-item{ padding:11px 12px; font-size:.8rem; }
}

/* Mobile — stays a vertical list, stacked above the content, just
   tighter and un-stuck. */
@media(max-width:768px){
    .ash-shell-inner{ grid-template-columns:1fr; gap:18px; }
    .ash-sidebar{ position:static; padding:14px 12px; }
    .ash-nav-item{ padding:11px 13px; }
    .ash-nav-item:hover{ transform:none; }
}

/*==================================================
    ACADEMICS PAGE HERO — simple, Sensei-style
    Plain text over a real Germaine campus photo: a small tag,
    one heading, one short line. No glass card, no CTA button,
    no travelling-light animation — kept deliberately minimal.
==================================================*/
.acad-hero-simple{
    position:relative; isolation:isolate; overflow:hidden;
    padding:64px 0 72px;
}
.acad-hero-simple-bg{
    position:absolute; inset:0; z-index:-2;
    background-size:cover; background-position:center;
}
.acad-hero-simple-overlay{
    position:absolute; inset:0; z-index:-1;
    background:linear-gradient(100deg, rgba(16, 42, 92, .88) 0%, rgba(16, 42, 92, .74) 55%, rgba(236, 72, 153, .38) 100%);
}
.acad-breadcrumb{ margin-bottom:22px; }
.acad-breadcrumb a,
.acad-breadcrumb span{ color:rgba(255, 255, 255, .8); }
.acad-breadcrumb i{ color:rgba(255, 255, 255, .5); }

.acad-hero-simple-tag{
    display:inline-block; margin-bottom:14px;
    font-family:var(--font-button,'Montserrat',sans-serif); font-weight:700; font-size:.74rem;
    letter-spacing:1.6px; text-transform:uppercase; color:#F8B4D9;
}
.acad-hero-simple-title{
    font-family:var(--font-heading,'Poppins',sans-serif); font-weight:800;
    font-size:clamp(1.9rem,3.8vw,2.7rem); line-height:1.15; color:#FFFFFF; margin:0 0 14px; max-width:720px;
}
.acad-hero-simple-sub{
    font-size:1rem; line-height:1.6; color:rgba(255, 255, 255, .88); max-width:560px; margin:0;
}

@media(max-width:640px){
    .acad-hero-simple{ padding:44px 0 52px; }
}