/* ============================================
   KASTURI DESIGN SYSTEM V3 — Award-Level Foundation
   Authoritative Core Tokens, Editorial Components & Utilities
   
   Ecosystem:
   - Kasturi Secondary School (Montessori - Grade 10)
   - Kasturi Academy (Class 11 & 12 Science & Management)
   - Kasturi College (PU Affiliated BBA & BIT)
   - Kasturi College of Management (TU Affiliated BBS & MBS)
   ============================================ */

:root {
    /* --- Institutional Brand Anchors --- */
    --ks-navy-900: #0B1F33;
    --ks-navy-800: #133557; /* Primary Authority Navy */
    --ks-navy-700: #1C456E;
    --ks-navy-100: #EBF2F8;
    --ks-navy-50:  #F4F8FB;

    --ks-green-900: #0D2820;
    --ks-green-800: #1B4D3E; /* Heritage Pine Green */
    --ks-green-700: #246B56;
    --ks-green-100: #E8F5F1;

    /* Backward compatibility aliases */
    --kasturi-green:       var(--ks-green-800);
    --kasturi-green-dark:  var(--ks-green-900);
    --kasturi-green-light: var(--ks-green-700);
    --kasturi-navy:        var(--ks-navy-800);
    --kasturi-navy-dark:   var(--ks-navy-900);
    --kasturi-blue:        #00AEEF;
    --kasturi-sky:         #2596be;
    --kasturi-gold:        #f59e0b;
    --kasturi-gold-dark:   #d97706;

    /* --- Wing Identity Accents ---
       Three of the four wings carry the Kasturi green seal (sampled #006C30),
       so they share one green hue and are separated by depth, not by hue.
       Kasturi Academy is the only wing with a blue mark (sampled #0C3054),
       so it is the only wing with a blue accent. */

    /* Secondary School: Kasturi Green — light tier */
    --wing-sec-primary: #078348;   /* WCAG AA: 4.83 on #fff, 4.61 on #f8fafc, 4.55 on #f2faf5, and 4.83 for white-on-green (was #0E8A4F = 4.41/4.21/4.15) */
    --wing-sec-hover:   #046B3B;
    --wing-sec-tint:    rgba(14, 138, 79, 0.08);

    /* Kasturi Academy (+2): Academy Navy Blue */
    --wing-ka-primary:  #14406E;
    --wing-ka-hover:    #0E2B4C;
    --wing-ka-tint:     rgba(20, 64, 110, 0.08);

    /* Kasturi College (PU): Kasturi Green — core tier */
    --wing-col-primary: #006837;
    --wing-col-hover:   #004D29;
    --wing-col-tint:    rgba(0, 104, 55, 0.08);

    /* College of Management (TU): Kasturi Green — deep tier */
    --wing-mgmt-primary: #00512B;
    --wing-mgmt-hover:   #003C20;
    --wing-mgmt-tint:    rgba(0, 81, 43, 0.08);

    /* --- Editorial Neutrals & Surfaces --- */
    --ks-bg-canvas:     #FFFFFF;
    --ks-bg-surface:    #F8FAFC;
    --ks-bg-subtle:     #F1F5F9;
    --ks-border-subtle: #E2E8F0;
    --ks-border-medium: #CBD5E1;

    --kasturi-surface:     var(--ks-bg-canvas);
    --kasturi-bg:          #F0F9F4;
    --kasturi-border:      #C6DDD0;
    --kasturi-border-soft: var(--ks-border-subtle);

    /* --- Typography Colors --- */
    --ks-text-main:     #0F172A; /* Slate 900 */
    --ks-text-muted:    #475569; /* Slate 600 */
    --ks-text-light:    #64748B; /* Slate 500 */
    --ks-text-inverse:  #FFFFFF;

    --kasturi-text:        var(--ks-text-main);
    --kasturi-text-sub:    var(--ks-text-muted);
    --kasturi-text-muted:  var(--ks-text-light);

    /* --- Status Colors --- */
    --ks-status-success: #059669;
    --ks-status-warning: #D97706;
    --ks-status-danger:  #DC2626;
    --ks-status-info:    #2563EB;
    /* Darkened from WhatsApp's #25D366 brand green — white text on the
       brand color itself is only 1.98:1 contrast, well under WCAG AA's
       4.5:1. This shade keeps it recognizably WhatsApp-green at 5.28:1. */
    --ks-whatsapp-color: #0E7C42;

    /* --- 8pt Spatial Scale --- */
    --ks-space-1:  0.25rem;  /* 4px */
    --ks-space-2:  0.50rem;  /* 8px */
    --ks-space-3:  0.75rem;  /* 12px */
    --ks-space-4:  1.00rem;  /* 16px */
    --ks-space-6:  1.50rem;  /* 24px */
    --ks-space-8:  2.00rem;  /* 32px */
    --ks-space-10: 2.50rem;  /* 40px */
    --ks-space-12: 3.00rem;  /* 48px */
    --ks-space-16: 4.00rem;  /* 64px */
    --ks-space-20: 5.00rem;  /* 80px */
    --ks-space-24: 6.00rem;  /* 96px */

    /* Legacy spacing aliases */
    --keg-space-3xs: 2px;
    --keg-space-2xs: var(--ks-space-1);
    --keg-space-xs:  var(--ks-space-2);
    --keg-space-sm:  var(--ks-space-3);
    --keg-space-md:  var(--ks-space-4);
    --keg-space-lg:  var(--ks-space-6);
    --keg-space-xl:  var(--ks-space-8);
    --keg-space-2xl: var(--ks-space-12);
    --keg-space-3xl: var(--ks-space-16);

    /* --- Fluid Typography Scale (WCAG Minimums Enforced) --- */
    --ks-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ks-font-body:    'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-heading: var(--ks-font-display);
    --font-body:    var(--ks-font-body);

    /* Fluid Clamps: display, h1, h2, h3, h4, body, caption */
    --ks-text-display: clamp(2.25rem, 5.0vw + 1.0rem, 3.75rem); /* 36px to 60px */
    --ks-text-h1:      clamp(1.85rem, 3.5vw + 0.8rem, 2.75rem); /* 30px to 44px */
    --ks-text-h2:      clamp(1.45rem, 2.5vw + 0.6rem, 2.15rem); /* 23px to 34px */
    --ks-text-h3:      clamp(1.20rem, 1.5vw + 0.5rem, 1.50rem); /* 19px to 24px */
    --ks-text-h4:      clamp(1.05rem, 0.8vw + 0.5rem, 1.25rem); /* 17px to 20px */
    --ks-text-body:    clamp(0.95rem, 0.4vw + 0.8rem, 1.0625rem); /* 15.2px to 17px */
    --ks-text-small:   clamp(0.85rem, 0.2vw + 0.75rem, 0.90rem); /* 13.6px to 14.4px */
    --ks-text-caption: 0.8125rem; /* 13px baseline floor */

    --ks-leading-tight:  1.2;
    --ks-leading-snug:   1.35;
    --ks-leading-normal: 1.6;
    --ks-leading-loose:  1.8;

    /* --- Elevation & Shadows --- */
    --ks-shadow-sm: 0 1px 3px rgba(11, 31, 51, 0.06), 0 1px 2px rgba(11, 31, 51, 0.04);
    --ks-shadow-md: 0 4px 6px -1px rgba(11, 31, 51, 0.08), 0 2px 4px -1px rgba(11, 31, 51, 0.05);
    --ks-shadow-lg: 0 10px 15px -3px rgba(11, 31, 51, 0.09), 0 4px 6px -2px rgba(11, 31, 51, 0.04);
    --ks-shadow-xl: 0 20px 25px -5px rgba(11, 31, 51, 0.12), 0 10px 10px -5px rgba(11, 31, 51, 0.04);

    --keg-shadow-sm: var(--ks-shadow-sm);
    --keg-shadow-md: var(--ks-shadow-md);
    --keg-shadow-lg: var(--ks-shadow-lg);

    /* --- Radii --- */
    --ks-radius-xs: 4px;
    --ks-radius-sm: 6px;
    --ks-radius-md: 10px;
    --ks-radius-lg: 16px;
    --ks-radius-xl: 24px;
    --ks-radius-full: 9999px;

    /* --- Interactive & Layout Constraints --- */
    --ks-touch-min: 44px; /* WCAG 2.1 AA Target Size */
    --ks-container-max: 1240px;
    --ks-container-pad: clamp(16px, 4vw, 32px);
    --ks-card-pad: clamp(20px, 3vw, 32px);
    --ks-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wing-specific theme overrides */
.wing-theme-secondary-school { --ks-accent: var(--wing-sec-primary); --ks-accent-hover: var(--wing-sec-hover); --ks-accent-tint: var(--wing-sec-tint); }
.wing-theme-academy          { --ks-accent: var(--wing-ka-primary);  --ks-accent-hover: var(--wing-ka-hover);  --ks-accent-tint: var(--wing-ka-tint); }
.wing-theme-college          { --ks-accent: var(--wing-col-primary); --ks-accent-hover: var(--wing-col-hover); --ks-accent-tint: var(--wing-col-tint); }
.wing-theme-management       { --ks-accent: var(--wing-mgmt-primary); --ks-accent-hover: var(--wing-mgmt-hover); --ks-accent-tint: var(--wing-mgmt-tint); }

/* --- Base Resets & Layout Primitives --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--ks-font-body);
    font-size: var(--ks-text-body);
    color: var(--ks-text-main);
    background-color: var(--ks-bg-canvas);
    line-height: var(--ks-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Focus Rings (WCAG 2.1 AA) --- */
:focus-visible {
    outline: 2px solid var(--ks-accent, var(--ks-navy-800)) !important;
    outline-offset: 3px !important;
}

/* --- Container & Grids --- */
.ks-container,
.keg-container {
    width: 100%;
    max-width: var(--ks-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ks-container-pad);
    padding-right: var(--ks-container-pad);
}

.ks-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--ks-space-6);
}

.ks-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--ks-space-6);
}

.ks-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ks-space-6);
}

.ks-split-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
@media (max-width: 860px) {
    .ks-split-editorial {
        grid-template-columns: 1fr;
    }
}

/* --- Typography Hierarchy --- */
.ks-display { font-family: var(--ks-font-display); font-size: var(--ks-text-display); font-weight: 800; line-height: var(--ks-leading-tight); color: var(--ks-navy-900); }
.ks-h1      { font-family: var(--ks-font-display); font-size: var(--ks-text-h1); font-weight: 700; line-height: var(--ks-leading-tight); color: var(--ks-navy-900); }
.ks-h2      { font-family: var(--ks-font-display); font-size: var(--ks-text-h2); font-weight: 700; line-height: var(--ks-leading-tight); color: var(--ks-navy-900); }
.ks-h3      { font-family: var(--ks-font-display); font-size: var(--ks-text-h3); font-weight: 600; line-height: var(--ks-leading-snug); color: var(--ks-navy-900); }
.ks-h4      { font-family: var(--ks-font-display); font-size: var(--ks-text-h4); font-weight: 600; line-height: var(--ks-leading-snug); color: var(--ks-navy-900); }

/* --- Zero-CLS Media Frames --- */
.ks-media-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ks-bg-subtle);
    border-radius: var(--ks-radius-lg);
}

.ks-aspect-16-9 { aspect-ratio: 16 / 9; }
.ks-aspect-4-3  { aspect-ratio: 4 / 3; }
.ks-aspect-3-2  { aspect-ratio: 3 / 2; }
.ks-aspect-1-1  { aspect-ratio: 1 / 1; }
.ks-aspect-21-9 { aspect-ratio: 21 / 9; }

.ks-media-frame img,
.ks-media-frame video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--ks-transition);
}

.ks-media-frame:hover img {
    transform: scale(1.03);
}

/* Skeleton Pulse */
.ks-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
    animation: ksSkeletonPulse 1.5s infinite;
}
@keyframes ksSkeletonPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Facility Cards (linked, hoverable) --- */
.ks-facility-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: box-shadow 0.25s, transform 0.25s;
    position: relative;
}
.ks-facility-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    transform: translateY(-4px);
}
.ks-facility-card .ks-fc-inner {
    padding: 14px 14px 16px;
}
.ks-facility-card .ks-media-frame img {
    transition: transform 0.35s ease;
}
.ks-facility-card:hover .ks-media-frame img {
    transform: scale(1.05);
}
.ks-facility-card .ks-fc-arrow {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--wing-col-primary, #006837);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ks-facility-card:hover .ks-fc-arrow {
    opacity: 1;
    transform: scale(1);
}

/* --- Buttons & Touch Controls --- */

.ks-btn,
.keg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ks-space-2);
    min-height: var(--ks-touch-min);
    min-width: var(--ks-touch-min);
    padding: var(--ks-space-3) var(--ks-space-6);
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-body);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    /* CTAs standardise on the pill. Measured across the site, the pill is what
       the primary actions already use (Apply, Enquire, the wing CTAs — 27+
       instances), while this design-system button sat at 10px and the legacy
       .btn-primary/.btn-secondary pair at 8px. Three radius conventions for the
       same role is the fragmentation; the shape a visitor reads as "the button
       on this site" should not depend on which stylesheet won. */
    border-radius: var(--ks-radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--ks-transition);
    white-space: nowrap;
}

.ks-btn-primary {
    background: var(--ks-accent, var(--ks-navy-800));
    color: #FFFFFF !important;
    box-shadow: var(--ks-shadow-sm);
}
.ks-btn-primary:hover {
    background: var(--ks-accent-hover, var(--ks-navy-900));
    box-shadow: var(--ks-shadow-md);
    transform: translateY(-1px);
}

.ks-btn-secondary {
    background: var(--ks-navy-800);
    color: #FFFFFF !important;
}
.ks-btn-secondary:hover {
    background: var(--ks-navy-900);
    transform: translateY(-1px);
}

.ks-btn-ghost {
    background: transparent;
    color: var(--ks-text-main);
    border-color: var(--ks-border-medium);
}
.ks-btn-ghost:hover {
    background: var(--ks-bg-subtle);
    border-color: var(--ks-text-muted);
}

.ks-btn-whatsapp {
    background: var(--ks-whatsapp-color);
    color: #FFFFFF !important;
    font-weight: 700;
}
.ks-btn-whatsapp:hover {
    background: #0A6B37;
    transform: translateY(-1px);
}

/* --- Cards & Feature Panels --- */
.ks-card,
.keg-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    background: var(--ks-bg-canvas);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-card-pad);
    box-shadow: var(--ks-shadow-sm);
    transition: transform var(--ks-transition), box-shadow var(--ks-transition), border-color var(--ks-transition);
}

.ks-card:hover,
.keg-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ks-shadow-lg);
    border-color: var(--ks-border-medium);
}

.ks-stat-card {
    background: var(--ks-bg-canvas);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-6);
    text-align: center;
    box-shadow: var(--ks-shadow-sm);
}
.ks-stat-num {
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-h1);
    font-weight: 800;
    color: var(--ks-accent, var(--ks-navy-800));
    line-height: 1;
    margin-bottom: var(--ks-space-2);
}
.ks-stat-label {
    font-size: var(--ks-text-small);
    color: var(--ks-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Callout Box --- */
.ks-callout {
    background: var(--ks-bg-surface);
    border-left: 4px solid var(--ks-accent, var(--ks-navy-800));
    border-radius: var(--ks-radius-sm);
    padding: var(--ks-space-4) var(--ks-space-6);
    margin: var(--ks-space-6) 0;
}

/* --- Badges & Pills --- */
.ks-badge,
.keg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--ks-radius-full);
    background: var(--ks-bg-subtle);
    color: var(--ks-text-main);
    border: 1px solid var(--ks-border-subtle);
    line-height: 1.3;
}

.ks-badge-coral  { background: rgba(255, 122, 89, 0.12); color: #BF3E09; border-color: rgba(255, 122, 89, 0.25); }
.ks-badge-green  { background: rgba(5, 150, 105, 0.12); color: #047857; border-color: rgba(5, 150, 105, 0.25); }
.ks-badge-blue   { background: rgba(37, 99, 235, 0.12); color: #1D4ED8; border-color: rgba(37, 99, 235, 0.25); }
.ks-badge-amber  { background: rgba(217, 119, 6, 0.12); color: #AE4D03; border-color: rgba(217, 119, 6, 0.25); }

/* --- Section Headers --- */
.ks-section-header {
    margin-bottom: clamp(28px, 4vw, 48px);
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.ks-section-header.text-left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* The header's bottom margin separates it from content inside the same
   section. Where it is the section's only child — the Academy facilities hero,
   whose cards live in the next section — that margin stacks on top of the
   section's own padding and opens ~137px of dead space above the first card. */
.ks-section-header:last-child {
    margin-bottom: 0;
}

.ks-eyebrow {
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ks-accent, var(--ks-navy-800));
    margin-bottom: var(--ks-space-2);
    display: block;
}

.ks-title {
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-h2);
    font-weight: 700;
    color: var(--ks-navy-900);
    line-height: var(--ks-leading-tight);
    margin-bottom: var(--ks-space-3);
}

.ks-lead {
    font-family: var(--ks-font-body);
    font-size: var(--ks-text-body);
    color: var(--ks-text-muted);
    line-height: var(--ks-leading-normal);
}

/* --- Interactive Tabs --- */
.ks-tabs-nav {
    display: flex;
    gap: var(--ks-space-2);
    border-bottom: 2px solid var(--ks-border-subtle);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--ks-space-6);
}
.ks-tabs-nav::-webkit-scrollbar { display: none; }

.ks-tab-btn {
    min-height: var(--ks-touch-min);
    padding: var(--ks-space-3) var(--ks-space-6);
    font-family: var(--ks-font-display);
    font-weight: 600;
    font-size: var(--ks-text-body);
    color: var(--ks-text-muted);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -4px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ks-transition), border-color var(--ks-transition);
}

.ks-tab-btn.active {
    color: var(--ks-accent, var(--ks-navy-800));
    border-bottom-color: var(--ks-accent, var(--ks-navy-800));
}

.ks-tab-pane {
    display: none;
}
.ks-tab-pane.active {
    display: block;
    animation: ksFadeIn 0.3s ease-out;
}

@keyframes ksFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Accordions --- */
.ks-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-3);
}
.ks-accordion-item {
    background: var(--ks-bg-canvas);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-md);
    overflow: hidden;
}
.ks-accordion-header {
    width: 100%;
    min-height: var(--ks-touch-min);
    padding: var(--ks-space-4) var(--ks-space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--ks-font-display);
    font-weight: 600;
    font-size: var(--ks-text-body);
    color: var(--ks-navy-900);
    cursor: pointer;
}
.ks-accordion-header:hover {
    background: var(--ks-bg-surface);
}
.ks-accordion-header .icon {
    transition: transform var(--ks-transition);
}
.ks-accordion-item.active .ks-accordion-header .icon {
    transform: rotate(180deg);
}
.ks-accordion-content {
    display: none;
    padding: 0 var(--ks-space-6) var(--ks-space-4);
    color: var(--ks-text-muted);
    line-height: var(--ks-leading-normal);
}
.ks-accordion-item.active .ks-accordion-content {
    display: block;
}

/* --- Editorial Tables --- */
.ks-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--ks-space-4) 0;
    border-radius: var(--ks-radius-md);
    border: 1px solid var(--ks-border-subtle);
}
.ks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ks-text-body);
    text-align: left;
}
.ks-table th {
    background: var(--ks-bg-subtle);
    padding: var(--ks-space-3) var(--ks-space-4);
    font-family: var(--ks-font-display);
    font-weight: 700;
    color: var(--ks-navy-900);
    border-bottom: 2px solid var(--ks-border-medium);
}
.ks-table td {
    padding: var(--ks-space-3) var(--ks-space-4);
    border-bottom: 1px solid var(--ks-border-subtle);
    color: var(--ks-text-main);
}
.ks-table tr:last-child td {
    border-bottom: none;
}
.ks-table tr:hover td {
    background: var(--ks-bg-surface);
}

/* --- Breadcrumbs --- */
.ks-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ks-space-2);
    font-size: var(--ks-text-small);
    color: var(--ks-text-light);
    margin-bottom: var(--ks-space-4);
}
.ks-breadcrumb a {
    color: var(--ks-text-muted);
    text-decoration: none;
    transition: color var(--ks-transition);
}
.ks-breadcrumb a:hover {
    color: var(--ks-accent, var(--ks-navy-800));
}
.ks-breadcrumb .separator {
    opacity: 0.5;
}
.ks-breadcrumb .current {
    color: var(--ks-text-main);
    font-weight: 600;
}

/* --- Timeline Primitives --- */
.ks-timeline {
    position: relative;
    padding-left: var(--ks-space-8);
    margin: var(--ks-space-6) 0;
}
.ks-timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 11px;
    width: 2px;
    background: var(--ks-border-subtle);
}
.ks-timeline-item {
    position: relative;
    padding-bottom: var(--ks-space-6);
}
.ks-timeline-item:last-child {
    padding-bottom: 0;
}
.ks-timeline-dot {
    position: absolute;
    left: calc(-1 * var(--ks-space-8) + 4px);
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ks-accent, var(--ks-navy-800));
    border: 3px solid var(--ks-bg-canvas);
    box-shadow: 0 0 0 2px var(--ks-border-subtle);
}
.ks-timeline-title {
    font-family: var(--ks-font-display);
    font-weight: 700;
    font-size: var(--ks-text-h4);
    color: var(--ks-navy-900);
    margin-bottom: var(--ks-space-1);
}
.ks-timeline-meta {
    font-size: var(--ks-text-small);
    color: var(--ks-text-light);
    margin-bottom: var(--ks-space-2);
}
.ks-timeline-body {
    color: var(--ks-text-muted);
    line-height: var(--ks-leading-normal);
}

/* --- Step Cards (Admissions & Academic Roadmaps) --- */
.ks-step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ks-space-6);
    margin: var(--ks-space-6) 0;
}
.ks-step-card {
    position: relative;
    background: var(--ks-bg-canvas);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-3);
    transition: transform var(--ks-transition), box-shadow var(--ks-transition);
}
.ks-step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ks-shadow-md);
    border-color: var(--ks-accent, var(--ks-border-medium));
}
.ks-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ks-accent-tint, var(--ks-navy-50));
    color: var(--ks-accent, var(--ks-navy-800));
    font-family: var(--ks-font-display);
    font-weight: 800;
    font-size: var(--ks-text-body);
}

/* --- Standardized Section Heading Eyebrow / Kicker --- */
.ks-kicker {
    display: inline-block;
    font-size: var(--ks-text-caption);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-accent, var(--ks-navy-800));
    margin-bottom: var(--ks-space-2);
}
.ks-section-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--ks-space-10);
}
.ks-section-heading.text-left {
    text-align: left;
    margin-left: 0;
}
.ks-section-heading h2 {
    font-size: var(--ks-text-h2);
    color: var(--ks-navy-900);
    margin-bottom: var(--ks-space-3);
}
.ks-section-heading p {
    font-size: var(--ks-text-body);
    color: var(--ks-text-muted);
    line-height: var(--ks-leading-normal);
}

/* --- Wing Badges --- */
.ks-badge-secondary  { background: rgba(14, 138, 79, 0.12); color: #078348; }
.ks-badge-academy    { background: rgba(20, 64, 110, 0.12); color: #14406E; }
.ks-badge-college    { background: rgba(0, 104, 55, 0.12); color: #006837; }
.ks-badge-management { background: rgba(0, 81, 43, 0.12); color: #00512B; }

/* --- Faculty Profile Card --- */
.ks-faculty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--ks-space-6);
    margin: var(--ks-space-6) 0;
}
.ks-faculty-card {
    background: var(--ks-bg-canvas);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform var(--ks-transition), box-shadow var(--ks-transition);
}
.ks-faculty-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ks-shadow-md);
}
.ks-faculty-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--ks-space-4);
    background: var(--ks-bg-subtle);
    border: 3px solid var(--ks-accent-tint, var(--ks-border-subtle));
}
.ks-faculty-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ks-faculty-name {
    font-family: var(--ks-font-display);
    font-weight: 700;
    font-size: var(--ks-text-h4);
    color: var(--ks-navy-900);
    margin-bottom: var(--ks-space-1);
}
.ks-faculty-role {
    font-size: var(--ks-text-small);
    color: var(--ks-accent, var(--ks-navy-800));
    font-weight: 600;
    margin-bottom: var(--ks-space-2);
}
.ks-faculty-desc {
    font-size: var(--ks-text-caption);
    color: var(--ks-text-muted);
    line-height: var(--ks-leading-normal);
}

/* --- Section Padding Utilities --- */
.ks-section {
    padding: clamp(48px, 7vw, 96px) 0;
}
.ks-section-sm {
    padding: clamp(32px, 5vw, 64px) 0;
}

/* --- Bilingual Language Switcher --- */
.ks-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(19, 53, 87, 0.06);
    border: 1px solid var(--ks-border-subtle);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
}
.ks-lang-btn {
    color: var(--ks-text-muted);
    text-decoration: none;
    padding: 4px 4px;
    border-radius: 9999px;
    transition: all var(--ks-transition);
}
.ks-lang-btn:hover {
    color: var(--ks-navy-900);
}
.ks-lang-btn.active {
    background: var(--ks-navy-800);
    color: #fff;
}
.ks-lang-sep {
    color: var(--ks-border-medium);
    font-size: 0.75rem;
}

/* --- Campus Facilities & Transit Explorer Primitives --- */
.ks-campus-filter-bar {
    display: flex;
    gap: var(--ks-space-2);
    overflow-x: auto;
    padding: var(--ks-space-2) var(--ks-space-1) var(--ks-space-4);
    margin-bottom: var(--ks-space-6);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ks-campus-filter-bar::-webkit-scrollbar {
    display: none;
}
.ks-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    min-height: 44px;
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-small);
    font-weight: 700;
    color: var(--ks-text-muted);
    background: var(--ks-bg-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--ks-transition);
    text-decoration: none;
}
.ks-filter-chip:hover {
    color: var(--ks-navy-900);
    border-color: var(--ks-border-medium);
    background: var(--ks-bg-subtle);
}
.ks-filter-chip.active,
.ks-filter-chip[aria-pressed="true"] {
    background: var(--ks-navy-800);
    color: #fff;
    border-color: var(--ks-navy-800);
    box-shadow: var(--ks-shadow-sm);
}
.ks-filter-chip:focus-visible {
    outline: var(--ks-focus-ring);
    outline-offset: 2px;
}

.ks-spec-list {
    list-style: none;
    padding: 0;
    margin: var(--ks-space-4) 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ks-spec-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--ks-text-small);
    color: var(--ks-text-main);
    line-height: var(--ks-leading-normal);
}
.ks-spec-item i {
    color: var(--ks-emerald-600);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* ============================================
   CAMPUS FACILITY GRID
   ============================================
   .ks-campus-grid and .ks-facility-card are used by facilities.php,
   ka/facilities.php and college/facilities.php, but were never defined in any
   stylesheet. The markup was therefore rendering as an unstyled block stack:
   at 1280px every card ran the full container width with a 720px-tall image,
   so six facilities came to a 7,528px page — taller on desktop than on mobile,
   which is the signature of a missing grid rather than a layout choice.

   Treatment follows the facility tiles established on the Kasturi Academy
   homepage: the photograph leads and the chrome stays out of its way. These
   items carry more than a caption, though — a description plus four
   specification bullets — so the text needs a quiet bound rather than none at
   all. A hairline and a surface tint do that; there is no shadow and no filled
   panel competing with the photograph above it.

   auto-fill rather than auto-fit: college/facilities.php holds five items, and
   auto-fit would stretch the trailing two to half-width each, leaving rows of
   visibly unequal cards. auto-fill keeps the empty track and every facility
   the same size, which is also the honest reading — none of them is featured. */
.ks-campus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--ks-space-6);
    align-items: start;
}

/* Above 1200px auto-fill would open a fourth track and squeeze each card to
   ~342px while the viewport grows — four specification bullets do not read
   well at that width. Three is the ceiling. The pairs modifier is for the
   four-item Academy laboratory set, where 2x2 beats a row of three with one
   card stranded underneath. */
@media (min-width: 1200px) {
    .ks-campus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ks-campus-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ks-facility-card {
    display: flex;
    flex-direction: column;
    background: var(--ks-bg-canvas);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-lg);
    overflow: hidden;
    height: 100%;
    transition: border-color var(--ks-transition), box-shadow var(--ks-transition);
}

.ks-facility-card:hover {
    border-color: var(--ks-border-medium);
    box-shadow: var(--ks-shadow-md);
}

/* The frame's own radius would show through the card's clipped corners. */
.ks-facility-card .ks-media-frame {
    border-radius: 0;
}

.ks-facility-content {
    display: flex;
    flex-direction: column;
    padding: var(--ks-space-5);
    flex: 1 1 auto;
}

/* The badge row above the title. It was inline flex with space-between on both
   the gateway and College pages; at a 411px card the wing label wraps to two
   lines and the two badges collide. They wrap instead, and sit left with the
   title rather than being pushed to opposite edges of a narrow card. */
.ks-facility-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ks-space-2);
    margin-bottom: var(--ks-space-3);
}

.ks-facility-title {
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-h4);
    font-weight: 700;
    line-height: var(--ks-leading-snug);
    color: var(--ks-navy-900);
    margin: 0 0 var(--ks-space-2);
}

.ks-facility-desc {
    font-size: var(--ks-text-small);
    line-height: var(--ks-leading-relaxed);
    color: var(--ks-text-muted);
    margin: 0;
}

/* Badges & Tags */
.ks-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    background: var(--ks-bg-subtle, #f1f5f9);
    color: var(--ks-navy-900, #0f172a);
    line-height: 1.2;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.ks-badge-coral {
    background: rgba(255, 122, 89, 0.12);
    color: #d94826;
    border-color: rgba(255, 122, 89, 0.25);
}
.ks-badge-navy {
    background: rgba(15, 39, 68, 0.1);
    color: #0f2744;
    border-color: rgba(15, 39, 68, 0.2);
}
.ks-badge-green {
    background: rgba(5, 150, 105, 0.12);
    color: #047857;
    border-color: rgba(5, 150, 105, 0.25);
}
.ks-badge-amber {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.25);
}

/* Spec lists inside facility cards */
.ks-spec-list {
    list-style: none;
    padding: 0;
    margin: var(--ks-space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ks-spec-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ks-text-muted);
}
.ks-spec-item i {
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 0.95rem;
}
.ks-spec-item span {
    flex: 1;
}

.ks-facility-card .ks-spec-list {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ks-facility-card,
    .ks-facility-card .ks-media-frame img,
    .ks-facility-card:hover .ks-media-frame img { transition: none; transform: none; }
}

/* A facility we hold no authentic photograph of. Rather than reuse a stand-in
   image, the card opens on a labelled placeholder band; see the MEDIA_REQUIRED
   notes in the facilities routes. */
.ks-facility-media-note {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ks-space-2);
    padding: 0 var(--ks-space-5);
    text-align: center;
    font-size: var(--ks-text-small);
    font-weight: 600;
    color: var(--ks-text-muted);
    background: var(--ks-bg-subtle);
    border-bottom: 1px solid var(--ks-border-subtle);
}

.ks-transit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--ks-space-5);
    margin-top: var(--ks-space-5);
}
.ks-transit-card {
    background: var(--ks-bg-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-3);
    transition: transform var(--ks-transition), box-shadow var(--ks-transition);
}
.ks-transit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ks-shadow-md);
    border-color: var(--ks-navy-800);
}
.ks-transit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ks-space-2);
}
.ks-transit-title {
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-h4);
    font-weight: 700;
    color: var(--ks-navy-900);
    margin: 0;
}
.ks-transit-badge {
    padding: 4px 8px;
    border-radius: var(--ks-radius-full);
    font-size: var(--ks-text-caption);
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(19, 53, 87, 0.08);
    color: var(--ks-navy-800);
}
.ks-transit-stops {
    font-size: var(--ks-text-small);
    color: var(--ks-text-muted);
    line-height: var(--ks-leading-relaxed);
    margin: 0;
}

.ks-tour-cta-bar {
    background: linear-gradient(135deg, var(--ks-navy-900) 0%, var(--ks-navy-800) 100%);
    color: #fff;
    border-radius: var(--ks-radius-xl);
    padding: clamp(24px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-5);
    margin-top: var(--ks-space-10);
    box-shadow: var(--ks-shadow-lg);
}
@media (min-width: 768px) {
    .ks-tour-cta-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.ks-tour-cta-copy h3 {
    font-family: var(--ks-font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.ks-tour-cta-copy p {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--ks-text-small);
    margin: 0;
    max-width: 540px;
}
/* The tour bar sits on a dark navy panel, where the ghost button's default
   dark-on-light treatment disappears. Scoped rather than a new global variant —
   this bar is the only dark surface these buttons appear on. */
.ks-tour-cta-bar .ks-btn-ghost {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.32);
}
.ks-tour-cta-bar .ks-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.55);
}

.ks-tour-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ks-space-3);
    align-items: center;
}

/* --- Academic Program Matrix Primitives --- */
.ks-program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--ks-space-6);
    margin: var(--ks-space-6) 0;
}
.ks-program-card {
    background: var(--ks-bg-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-xl);
    padding: var(--ks-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-4);
    transition: transform var(--ks-transition), box-shadow var(--ks-transition), border-color var(--ks-transition);
}
.ks-program-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ks-shadow-lg);
    border-color: var(--ks-accent, var(--ks-navy-800));
}
.ks-program-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-2);
}
.ks-program-title {
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-h3);
    font-weight: 700;
    color: var(--ks-navy-900);
    margin: 0;
}
.ks-program-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ks-space-2);
    margin-top: var(--ks-space-1);
}
.ks-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--ks-bg-subtle);
    border-radius: var(--ks-radius-full);
    font-size: var(--ks-text-caption);
    font-weight: 600;
    color: var(--ks-text-muted);
}
.ks-meta-pill i {
    color: var(--ks-accent, var(--ks-navy-800));
}
.ks-career-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--ks-space-2);
}
.ks-career-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(19, 53, 87, 0.05);
    color: var(--ks-navy-800);
    border: 1px solid var(--ks-border-subtle);
}

/* --- Entrance Quiz & Assessment Primitives --- */
.ks-quiz-container {
    background: var(--ks-bg-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-xl);
    padding: clamp(20px, 4vw, 36px);
    max-width: 800px;
    margin: 0 auto;
    box-shadow: var(--ks-shadow-md);
}
.ks-quiz-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--ks-bg-subtle);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: var(--ks-space-6);
}
.ks-quiz-progress-fill {
    height: 100%;
    background: var(--ks-coral-500);
    transition: width 0.3s ease;
}
.ks-quiz-question-title {
    font-family: var(--ks-font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-weight: 700;
    color: var(--ks-navy-900);
    margin-bottom: var(--ks-space-5);
    line-height: var(--ks-leading-snug);
}
.ks-quiz-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-3);
    margin-bottom: var(--ks-space-6);
}
.ks-quiz-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 48px;
    border: 1px solid var(--ks-border-medium);
    border-radius: var(--ks-radius-md);
    cursor: pointer;
    background: var(--ks-bg-canvas);
    transition: all var(--ks-transition);
    font-size: var(--ks-text-body);
    color: var(--ks-text-main);
}
.ks-quiz-option:hover {
    border-color: var(--ks-coral-500);
    background: rgba(255, 122, 89, 0.04);
}
.ks-quiz-option.selected {
    border-color: var(--ks-coral-500);
    background: rgba(255, 122, 89, 0.08);
    font-weight: 600;
    color: var(--ks-coral-700);
}
.ks-quiz-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ks-coral-500);
    flex-shrink: 0;
}
.ks-quiz-result-card {
    background: var(--ks-bg-subtle);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-6);
    border: 1px solid var(--ks-border-subtle);
    text-align: center;
    margin-top: var(--ks-space-6);
}

/* --- Alumni Story Card Primitives --- */
.ks-alumni-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--ks-space-6);
    margin: var(--ks-space-6) 0;
}
.ks-alumni-card {
    background: var(--ks-bg-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-xl);
    padding: var(--ks-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-4);
    transition: transform var(--ks-transition), box-shadow var(--ks-transition), border-color var(--ks-transition);
}
.ks-alumni-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ks-shadow-lg);
    border-color: var(--ks-navy-800);
}
.ks-alumni-header {
    display: flex;
    align-items: center;
    gap: var(--ks-space-4);
}
.ks-alumni-avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--ks-radius-full);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--ks-border-subtle);
    background: var(--ks-bg-subtle);
}
.ks-alumni-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ks-alumni-name {
    font-family: var(--ks-font-display);
    font-size: var(--ks-text-h4);
    font-weight: 700;
    color: var(--ks-navy-900);
    margin: 0 0 4px;
}
.ks-alumni-role {
    font-size: var(--ks-text-small);
    color: var(--ks-text-muted);
    font-weight: 600;
    margin: 0;
}
.ks-alumni-quote {
    font-size: 0.875rem;
    color: var(--ks-text-main);
    line-height: var(--ks-leading-relaxed);
    font-style: italic;
    margin: 0;
    padding-left: var(--ks-space-3);
    border-left: 3px solid var(--ks-accent, var(--ks-navy-800));
}

/* --- Official Document & Download Hub Primitives --- */
.ks-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--ks-space-5);
    margin: var(--ks-space-6) 0;
}
.ks-doc-card {
    background: var(--ks-bg-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ks-space-3);
    transition: transform var(--ks-transition), box-shadow var(--ks-transition), border-color var(--ks-transition);
}
.ks-doc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ks-shadow-md);
    border-color: var(--ks-navy-800);
}
.ks-doc-header {
    display: flex;
    align-items: flex-start;
    gap: var(--ks-space-3);
}
.ks-doc-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ks-radius-md);
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.ks-doc-icon.doc-docx {
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
}
.ks-doc-title {
    font-family: var(--ks-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ks-navy-900);
    margin: 0;
    line-height: var(--ks-leading-snug);
}
.ks-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ks-text-muted);
}
.ks-doc-actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: var(--ks-space-2);
}

/* --- Campus Visit & Counseling Primitives --- */
.ks-visit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--ks-space-8);
    margin: var(--ks-space-6) 0;
}
.ks-visit-card {
    background: var(--ks-bg-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-xl);
    padding: clamp(var(--ks-space-5), 4vw, var(--ks-space-8));
    box-shadow: var(--ks-shadow-md);
}
.ks-visit-form-group {
    margin-bottom: var(--ks-space-5);
}
.ks-visit-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}
.ks-visit-label {
    display: block;
    font-size: var(--ks-text-small);
    font-weight: 700;
    color: var(--ks-navy-900);
    margin-bottom: var(--ks-space-2);
}
.ks-visit-input,
.ks-visit-select,
.ks-visit-textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--ks-border-medium);
    border-radius: var(--ks-radius-md);
    background: var(--ks-bg-canvas);
    font-size: var(--ks-text-body);
    color: var(--ks-text-main);
    font-family: inherit;
    transition: border-color var(--ks-transition), box-shadow var(--ks-transition);
}
.ks-visit-input:focus,
.ks-visit-select:focus,
.ks-visit-textarea:focus {
    outline: none;
    border-color: var(--ks-coral-500);
    box-shadow: var(--ks-shadow-sm);
}
.ks-visit-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ks-space-3);
}
.ks-visit-slot-btn {
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--ks-border-medium);
    border-radius: var(--ks-radius-md);
    background: var(--ks-bg-canvas);
    color: var(--ks-text-main);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all var(--ks-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ks-visit-slot-btn:hover {
    border-color: var(--ks-coral-500);
    background: rgba(255, 122, 89, 0.04);
}
.ks-visit-slot-btn.active {
    border-color: var(--ks-coral-500);
    background: rgba(255, 122, 89, 0.08);
    color: var(--ks-coral-700);
    font-weight: 700;
}
.ks-visit-info-box {
    background: var(--ks-bg-subtle);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-lg);
    padding: var(--ks-space-5);
    margin-bottom: var(--ks-space-4);
}
.ks-visit-info-box .btn-secondary {
    background: var(--ks-navy-900);
    color: #ffffff !important;
    border: 1px solid var(--ks-navy-900);
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--ks-radius-md);
    text-decoration: none;
}
.ks-visit-info-box .btn-secondary:hover {
    background: var(--ks-navy-800);
    border-color: var(--ks-navy-800);
    color: #ffffff !important;
}

/* Callout Box Buttons */
.ks-cta-btn-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff !important;
    color: #0f2744 !important;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.ks-cta-btn-phone:hover,
.ks-cta-btn-phone:focus-visible {
    background: #f8fafc !important;
    color: #0f2744 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.ks-cta-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: #25D366 !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.ks-cta-btn-whatsapp:hover,
.ks-cta-btn-whatsapp:focus-visible {
    background: #20bd5a !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


/* --- Reduced Motion Safety --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   TAP TARGETS — footer navigation
   ============================================
   Measured at 390px: footer list links rendered 22px tall with zero vertical
   padding, the hit area being just the text line-box. 1,456 such elements
   across 87 patterns, the largest single interaction defect on mobile.

   Standards position, stated precisely because the previous report was loose
   about it:
     - WCAG 2.1 AA — the level this project tests against — contains NO minimum
       target-size criterion. 22px is therefore not a 2.1 AA failure.
     - WCAG 2.2 AA 2.5.8 Target Size (Minimum) requires 24x24 CSS px. Against
       that criterion these links do fail, though its "inline" exception covers
       links sitting inside a run of prose (e.g. the footer-bottom sentence).
     - WCAG 2.1/2.2 AAA 2.5.5 requires 44x44.

   The internal design target adopted here is 40px, which clears 2.5.8 with
   margin and approaches 2.5.5 without inflating a dense footer to AAA size.

   Implemented as vertical padding, not a larger font: type stays on the scale
   and the visual density of the footer is preserved. min-height with centred
   content keeps single- and double-line links aligned. */
.ka-footer-col ul li a,
.ka-resource-group ul li a,
.sec-footer-col ul li a,
.kc-footer-resource-list a,
.km-footer-resource-list a,
.gateway-footer-meta a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding-block: var(--ks-space-1);
}

/* Some footer links carry no class at all (a bare <a> in a <ul>, or the
   "All Wings Home" link sitting directly in a container div), so they cannot be
   reached by the class list above. Scope structurally to the wing footers
   instead. The *-footer-bottom region is excluded deliberately: those links sit
   inside a run of prose, which is exactly the case WCAG 2.5.8 exempts, and
   forcing them to 40px would break the sentence they belong to. */
.ka-footer ul li a,
.sec-footer ul li a,
.kc-footer ul li a,
.km-footer ul li a,
.kc-footer > .kc-container > div > div > a,
.km-footer > .km-container > div > div > a {
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Correction to the previous pass. These were blanket-exempted as "inline in
   prose", but inspecting the markup shows that is not what they are: the
   copyright sentence lives in its own <span> and contains no links at all,
   while every link in this region sits in a separate bullet-separated wing row.
   A row of links joined by bullets is navigation, not a sentence — the same
   reasoning already applied to breadcrumbs — so WCAG 2.5.8's Inline exception
   does not cover it. Given a real hit area while staying on one line.

   .gateway-footer-copy genuinely is a sentence, so it keeps the exemption. */
.ka-footer-bottom a,
.sec-footer-bottom a,
.kc-footer-bottom a,
.km-footer-bottom a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.gateway-footer-copy a {
    min-height: 0;
    display: inline;
}

/* tel: and mailto: links on the contact pages. These were the last two targets
   under 24px, and they are the least defensible place to have them: on a phone,
   tapping the number to call is the primary action of a contact page. They are
   the sole content of their container rather than words inside a sentence, so
   no inline exception applies. */
.ka-contact-info-value a,
.ks-contact-info-value a,
.kc-contact-info-value a,
.km-contact-info-value a,
.sec-contact-info-value a,
a[href^="tel:"],
a[href^="mailto:"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* ...except where such a link genuinely does sit inside a sentence — the footer
   copyright line and inline prose keep their natural line-box. */
.gateway-footer-copy a[href^="tel:"],
.gateway-footer-copy a[href^="mailto:"],
p a[href^="tel:"],
p a[href^="mailto:"] {
    min-height: 0;
    display: inline;
}

/* Breadcrumb links and hub-card links were the last two shared patterns below
   24px. Breadcrumbs sit in a horizontal row rather than prose, so they are not
   covered by 2.5.8's inline exception. inline-flex keeps the row on one line
   while giving each crumb a real hit area. */
.ka-breadcrumb a,
.ks-breadcrumb a,
.kc-breadcrumb a,
.km-breadcrumb a,
.sec-breadcrumb a,
.ka-hub-card a,
.ks-hub-card a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* Neighbouring targets must not end up touching once they grow. 2.5.8 allows a
   spacing exemption, but adjacent 40px rows with no separation are unpleasant
   to hit accurately regardless of what the criterion permits. */
.ka-footer-col ul li + li,
.sec-footer-col ul li + li,
.kc-footer-resource-list li + li,
.km-footer-resource-list li + li {
    margin-top: var(--ks-space-1);
}

/* ============================================
   GLOBAL RESPONSIVE MEDIA (all wings)
   ============================================
   Prevents images, video and iframes from
   overflowing their containers on any viewport.
   Applied sitewide via kasturi-system.css.
   ============================================ */

/* Native images never wider than container */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Native <video> elements fill their container correctly */
video {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Responsive iframe embed wrapper ─────────────────
   Usage:  <div class="ks-video-wrap"> <iframe …> </div>
   Default ratio is 16:9; override with --ks-vid-ratio. */
.ks-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ks-vid-ratio, 16 / 9);
    overflow: hidden;
    border-radius: var(--ks-radius-md, 12px);
    background: #061827;
}

.ks-video-wrap iframe,
.ks-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Standalone iframes that weren't wrapped should
   still never exceed the viewport width            */
iframe {
    max-width: 100%;
}

/* Constrain any bare <video> or <iframe> inside
   wing-specific card components                    */
.ks-card iframe,
.kc-card iframe,
.ka-card iframe,
.km-card iframe,
.ks-card video,
.kc-card video,
.ka-card video,
.km-card video {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    border: none;
}

/* Modal video containers sitewide */
#videoPlayerContainer,
.video-wrapper,
.modal-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

#videoPlayerContainer iframe,
#videoPlayerContainer video,
.video-wrapper iframe,
.video-wrapper video,
.modal-video-wrap iframe,
.modal-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ============================================
   MOBILE RESPONSIVENESS & TOUCH OPTIMIZATIONS
   ============================================ */
@media (max-width: 640px) {
    .ks-tabs-nav,
    .ka-stream-tabs,
    .kc-degree-tabs,
    .km-tabs-nav {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 4px 12px 10px !important;
        margin-bottom: 20px !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid var(--ks-border-subtle) !important;
    }
    .ks-tabs-nav::-webkit-scrollbar,
    .ka-stream-tabs::-webkit-scrollbar,
    .kc-degree-tabs::-webkit-scrollbar,
    .km-tabs-nav::-webkit-scrollbar {
        display: none !important;
    }
    .ks-tab-btn,
    .ka-tab-btn,
    .kc-tab-btn,
    .km-tab-btn {
        flex: 0 0 auto !important;
        padding: 8px 16px !important;
        font-size: 13.5px !important;
        border-radius: 20px !important;
        background: var(--ks-bg-surface) !important;
        border: 1px solid var(--ks-border-subtle) !important;
        margin-bottom: 0 !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    .ks-tab-btn.active,
    .ka-tab-btn.active,
    .kc-tab-btn.active,
    .km-tab-btn.active {
        background: var(--ks-accent, var(--ks-navy-800)) !important;
        color: #ffffff !important;
        border-color: var(--ks-accent, var(--ks-navy-800)) !important;
        box-shadow: var(--ks-shadow-sm) !important;
    }
}

@media (max-width: 480px) {
    .ks-container,
    .km-container,
    .kc-container,
    .ka-container {
        padding-inline: 16px !important;
    }
    .ks-card,
    .keg-card,
    .km-card,
    .kc-card,
    .ka-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }
    .ks-btn,
    .km-btn,
    .kc-btn,
    .ka-btn {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    .ka-subject-tags {
        gap: 6px !important;
    }
    .ka-subject-tag {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
}