/* mobile-patterns.css — targeted responsive polish
   Loaded *after* the other stylesheets so it wins on cascade without
   fighting specificity. Desktop (>= 769px) is intentionally untouched;
   every rule here lives inside a (max-width: 768px) media query. */


/* ───────────────────────── reusable primitive ──────────────────────── */
/* .mobile-collapsible wraps a long paragraph (or any block) and, on
   mobile, clamps it to ~4 lines with a fade overlay + "View More"
   toggle. JS (js/mobile-patterns.js) toggles the `is-open` state.
   Desktop shows the full content with no toggle. */

.mobile-collapsible .mcoll-toggle { display: none; }

@media (max-width: 768px) {
    .mobile-collapsible {
        position: relative;
    }
    .mobile-collapsible .mcoll-body {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        position: relative;
    }
    .mobile-collapsible .mcoll-body::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 2.5em;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 90%);
        pointer-events: none;
    }
    /* Dark-panel variant: the fade should match a navy background. */
    .mobile-collapsible.mcoll-on-dark .mcoll-body::after {
        background: linear-gradient(to bottom, rgba(26,34,104,0) 0%, #1a2268 90%);
    }
    .mobile-collapsible.mcoll-on-light-gray .mcoll-body::after {
        background: linear-gradient(to bottom, rgba(243,244,247,0) 0%, #f3f4f7 90%);
    }

    .mobile-collapsible.is-open .mcoll-body {
        -webkit-line-clamp: unset;
        display: block;
    }
    .mobile-collapsible.is-open .mcoll-body::after { display: none; }

    .mobile-collapsible .mcoll-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        /* Keep clear of whatever sits below (often a faculty grid with
           profile photos) — without the bottom margin the pill hugs the
           next section and reads as part of the image below. */
        margin: 0.75rem auto 1.75rem;
        padding: 0.5rem 1.25rem;
        background: #c41f32;
        color: #fff;
        border: none;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        text-transform: none;
        box-shadow: 0 2px 6px rgba(196, 31, 50, 0.3);
    }
    .mobile-collapsible .mcoll-toggle:hover,
    .mobile-collapsible .mcoll-toggle:focus-visible {
        background: #a61729;
        outline: none;
    }
    /* Centre the toggle within the flow when the paragraph is centred */
    .mobile-collapsible.mcoll-center {
        text-align: center;
    }
    .mobile-collapsible.mcoll-center .mcoll-toggle {
        display: inline-flex;
    }
}


/* ─────────────────────── Dean card mobile reorder ─────────────────── */
/* Desktop: badge + text card left, photo right.
   Mobile: badge on top → photo in middle → text card last.
   Uses grid-template-areas with `display: contents` on the inner
   `.dean-left` wrapper so its children (badge/content) participate
   in the grid directly. */

@media (max-width: 768px) {
    /* pages.css sets `.dean-profile-left { display: flex }` at the top
       level (no media query) and loads *after* mobile-patterns.css via
       head.php's page-CSS slot — so we need !important on `display:
       contents` or the inner wrapper stays flex and its children never
       participate in the outer grid (making the template-areas no-op). */
    .dean-container,
    .dean-profile {
        display: grid !important;
        grid-template-areas:
            "badge"
            "photo"
            "content";
        gap: 0;
    }
    .dean-left,
    .dean-profile-left {
        display: contents !important;
    }
    .dean-profile-badge {
        grid-area: badge !important;
        border-radius: 8px 8px 0 0;
        text-align: center;
    }
    .dean-profile-photo {
        grid-area: photo !important;
        width: 100% !important;
        /* Keep the photo clear of the content card that stacks beneath
           it — without this, the red-border bottom edge of the image
           butts up against the grey name/position/bio card. */
        margin-bottom: 1rem;
    }
    .dean-profile-photo img {
        width: 100% !important;
        height: auto !important;
        max-height: 420px;
        object-fit: cover;
        border-radius: 0;
    }
    /* Same breathing room for the home-page dean photo. */
    .dean-photo {
        margin-bottom: 1rem;
    }
    .dean-profile-content {
        grid-area: content !important;
        text-align: center;
    }
    .dean-badge {
        grid-area: badge;
        border-radius: 8px 8px 0 0;
        text-align: center;
    }
    /* Home-page Dean photo: full screen width, natural (full) height —
       no cropping, no aspect-ratio clamp. The container also needs to
       break out of the section's .container padding so the image goes
       truly edge-to-edge like the mockup.
       NOTE: home.css loads AFTER mobile-patterns.css (page_css slot in
       head.php) and sets `.dean-photo { height: 300px }` +
       `.dean-photo img { object-fit: cover; height: 100% }`, both of
       which crop the image — so these rules must use !important. */
    .dean-photo {
        grid-area: photo;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        height: auto !important;
        aspect-ratio: auto !important;
        max-height: none !important;
    }
    .dean-photo picture,
    .dean-photo img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }
    .dean-content {
        grid-area: content;
        border-radius: 0 0 8px 8px;
        text-align: center;
    }
}


/* ─── About-SEAS "Dean's Message" block — same image/text reorder ─── */
/* Desktop has the Dean's Profile card left and a landscape Dean photo
   right. The about-seas markup uses `.dean-section-about` wrapping
   either `.dean-about-left + .dean-about-photo` or the same
   dean-container/dean-left/dean-photo pattern. We handle both. */

@media (max-width: 768px) {
    .dean-section-about .dean-container,
    .dean-about-container {
        display: grid !important;
        grid-template-areas:
            "badge"
            "photo"
            "content";
        gap: 0;
    }
    .dean-section-about .dean-left,
    .dean-about-left {
        display: contents;
    }

    /* about-seas uses a different class — `.dean-about-grid` — with a
       single text column and a video thumb beside it. On mobile the
       mockup puts the video/photo first, text below. */
    .dean-about-grid {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
    }
    .dean-about-grid .dean-about-video { order: -1; }
    .dean-about-grid .dean-about-text { text-align: center; }
    .dean-about-grid .dean-about-video img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
}


/* ─────────── Holistic Development — pillar ordering per mockup ─────
   Mockup walk-through (mobile s3–s6):
     • Individual Skill Dev (s3→s4) : isd-1 → title → text → isd-2
     • Academic Excellence  (s4)    : title → text → ae-1 → ae-2/3
     • Entrepreneurial Mind.(s4→s5) : title → text → em-1 → em-2/3/4
     • Global Vision        (s5→s6) : title → text → banner-gv (after)
   Desktop markup order (title → text → gallery) already matches the
   AE, EM and GV mobile mockup flow — leave those alone. Only the
   Individual Skill Development section needs its gallery pulled above
   the title, so we scope the reorder to that one pillar (marked with
   id="pillars" in holistic-development.php). */

@media (max-width: 768px) {
    .hd-pillar#pillars .container {
        display: flex;
        flex-direction: column;
    }
    /* Flatten the gallery so its two <img> children become direct flex
       items of the container — lets us order isd-1 above the title and
       isd-2 after the text, matching mockup s3→s4 ("isd-1 → title →
       subtitle → text → isd-2"). */
    .hd-pillar#pillars .hd-gallery {
        display: contents;
    }
    .hd-pillar#pillars .hd-gallery img:nth-child(1) {
        order: 1;
        width: 100%;
        height: auto;
        margin-bottom: 1.25rem;
        border-radius: 8px;
    }
    .hd-pillar#pillars .container > .section-title      { order: 2; }
    .hd-pillar#pillars .container > .hd-pillar-subtitle { order: 3; }
    .hd-pillar#pillars .container > .page-intro-text    { order: 4; }
    .hd-pillar#pillars .hd-gallery img:nth-child(2) {
        order: 5;
        width: 100%;
        height: auto;
        margin-top: 1.25rem;
        border-radius: 8px;
    }
}


/* ─ Academic Excellence + Entrepreneurial Mindset — lead + thumb-row
   swap on mobile. Mockup s4–s5 shows one large lead photo with a row
   of smaller thumbnails beneath; tapping a thumbnail promotes it into
   the lead slot. Both sections share the same pattern: AE uses
   `.hd-gallery-1-2` with `.hd-col-left` (lead) + `.hd-col-right`
   (thumbs); EM uses `.hd-em-layout` with `.hd-em-row-bottom` (lead —
   em-4) + `.hd-em-row-top` (thumbs em-1/2/3). Desktop is untouched. */

@media (max-width: 768px) {
    /* ── Academic Excellence ──────────────────────────────────── */
    .hd-gallery-1-2 {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
    }
    .hd-gallery-1-2 .hd-col-left {
        width: 100%;
        order: 1;
    }
    .hd-gallery-1-2 .hd-col-left picture,
    .hd-gallery-1-2 .hd-col-left img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 8px;
    }
    .hd-gallery-1-2 .hd-col-right {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem;
        order: 2;
    }
    .hd-gallery-1-2 .hd-col-right picture {
        flex: 1;
        min-width: 0;
        cursor: pointer;
    }
    .hd-gallery-1-2 .hd-col-right img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 6px;
        transition: transform .15s, opacity .15s;
    }
    .hd-gallery-1-2 .hd-col-right picture:active img {
        transform: scale(0.97);
        opacity: 0.8;
    }

    /* ── Entrepreneurial Mindset ──────────────────────────────── */
    /* em-4 (`.hd-em-row-bottom`) is the hero; em-1/2/3 become thumbs.
       Override `.hd-em-row-top`'s desktop `grid-template-columns`. */
    .hd-em-layout {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
    }
    .hd-em-layout .hd-em-row-bottom {
        order: 1;
    }
    .hd-em-layout .hd-em-row-bottom img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 8px;
    }
    .hd-em-layout .hd-em-row-top {
        order: 2;
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: unset !important;
        gap: 0.5rem;
    }
    .hd-em-layout .hd-em-row-top img {
        flex: 1;
        min-width: 0;
        cursor: pointer;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 6px;
        transition: transform .15s, opacity .15s;
    }
    .hd-em-layout .hd-em-row-top img:active {
        transform: scale(0.97);
        opacity: 0.8;
    }
}


/* ───────────────────── Faculty profile-card spacing ──────────────── */
/* The faculty grid ("Department of …" sections) collapses to one or
   two columns on phones. Without vertical gap between cards the
   photo of the next professor pushes straight against the credentials
   of the previous one. */

@media (max-width: 768px) {
    .faculty-grid-4,
    .faculty-grid {
        row-gap: 1.75rem !important;
    }
    .faculty-card-item,
    .faculty-card {
        margin-bottom: 1rem;
    }
}


/* ─────────────── Two-column photo+text sections (generic) ──────────── */
/* Mark any 2-col photo+text block with `.photo-text-swap` and the photo
   side with `.photo-text-swap__photo`; on mobile the photo jumps above
   the text. This is the generic hook the PHP pages can use when a
   future section needs the same treatment without hand-rolled CSS. */

@media (max-width: 768px) {
    .photo-text-swap {
        display: flex !important;
        flex-direction: column;
    }
    .photo-text-swap .photo-text-swap__photo { order: -1; }
}


/* ────────── Faculty-intro + body copy centering on mobile ────────── */
/* Multiple sections set `text-align: left` on body copy at 640px in
   responsive.css; the mockups (s13, s14) centre it instead. Only apply
   to clearly centered-on-mockup classes to avoid regressing true
   left-aligned bodies. */

@media (max-width: 640px) {
    .welcome-paragraph,
    .faculty-intro-desc,
    .welcome-section .section-text,
    .programs-intro-text,
    .alumni-intro,
    .recognition-intro,
    .dean-bio,
    .dean-about-bio {
        text-align: center !important;
    }
}


/* ──────────── Feature-tile descriptions — mobile collapse ─────────── */
/* The 4 numbered feature tiles on the home page (01-04) have
   multi-line captions. Mockup s2 clamps them and adds a "View More"
   button per tile. Styles live under .feature-tile-text. */

@media (max-width: 768px) {
    .feature-tile .feature-tile-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .feature-tile.is-open .feature-tile-text {
        -webkit-line-clamp: unset;
        display: block;
    }
    .feature-tile .feature-tile-toggle {
        display: inline-block;
        margin: 0.5rem 0 1.25rem;
        background: #e6e9ef;
        color: #1a2268;
        border: none;
        border-radius: 999px;
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
    }
}
.feature-tile-toggle { display: none; }


/* ─────────────────── Hero safety on small screens ─────────────────── */
/* A few page heroes have `.page-hero { min-height: 350px }` which
   feels oversized on 360-400px phones. Scale down only below 480px. */

@media (max-width: 480px) {
    .page-hero { min-height: 240px; }
    .page-hero-content { padding: 0 20px; }
    .page-hero-content h1 { font-size: 1.5rem; }
}


/* ───── Faculty-individual hero: already stacks at 900px (pages.css)
        but centre the info column and tighten spacing on phones. ───── */

@media (max-width: 640px) {
    .fi-hero-info { text-align: center; }
    .fi-hero-name { font-size: 1.6rem !important; }
    .fi-hero-bio { font-size: 0.85rem; }
}


/* ================================================================
   About-SEAS page — mobile-only polish                             
   ================================================================ */

/* 1. Vision & Mission — centre title + body on phones, and swap in
      the mockup-mobile backgrounds (taller aspect, 661×421 / 481) so
      the card art doesn't stretch across the wider desktop crop.
      Inline `style="background-image: url('…desktop…')"` on the
      markup is overridden with `!important` below, mobile-only. */
@media (max-width: 768px) {
    .vm-card {
        text-align: center;
    }
    .vm-heading,
    .vm-body {
        text-align: center !important;
    }
    .vm-vision {
        background-image: url('../images/about-us/mobile/vision_background.jpg') !important;
    }
    .vm-mission {
        background-image: url('../images/about-us/mobile/mission_background.jpg') !important;
    }
}


/* 2. Dean's Message — video thumbnail first (already handled above
      via the `.dean-about-grid` reorder), plus truncated bio so
      mobile ends at "...in the workplace.". The `<span class="dean-
      bio-more">` wraps the second half in the PHP markup; we hide
      it under 768px. The existing "Read More" button stays visible
      and navigates to seas-faculty.php, which carries the full bio. */
@media (max-width: 768px) {
    .dean-bio-more {
        display: none;
    }
}


/* 3. Accreditations & Affiliations — on mobile: campus photo on
      top at true full viewport width, then the four logos as a 2×2
      grid that spans edge-to-edge.
      Two earlier blockers have now been fixed in this rule set:
        • `.container` wraps everything in 15px side padding, so we
          override it for this section only;
        • `pages.css` carries `.accreditation-card img { padding:0
          !important; object-fit: initial }` at top level which
          defeated our mobile padding/fit unless we match !important. */
@media (max-width: 768px) {
    .accreditations-section .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .accreditation-layout {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        max-width: none !important;
        margin: 0 !important;
        align-content: flex-start;
    }
    /* Campus photo — full viewport width, natural aspect ratio so
       the entire image (mobile mockup is 660×761 portrait) is
       visible without cropping. Desktop tablet-sized breakpoint in
       pages.css caps `.accreditation-center { max-height: 320px }`
       and the base rule forces `img { height: 100%; object-fit:
       cover }` which together clipped the bottom of the image —
       both are overridden below. */
    .accreditation-center {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        max-height: none !important;
        overflow: visible !important;
        line-height: 0;
    }
    .accreditation-center picture {
        display: block;
        width: 100%;
    }
    .accreditation-center img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        display: block;
        border-radius: 8px;
    }
    /* `display: contents` collapses the two `.accreditation-col`
       wrappers so the four cards become direct flex siblings of
       `.accreditation-layout`, which lets them wrap into a 2×2. */
    .accreditation-layout > .accreditation-col {
        display: contents;
    }
    .accreditation-layout > .accreditation-col > .accreditation-card {
        order: 2;
        flex: 0 0 calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px !important;
        overflow: hidden;
    }
    .accreditation-card img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        padding: 0.75rem !important;
        display: block;
        margin: 0 !important;
    }
}


/* 5. Beyond the Classroom — SEAS Society carousel. Desktop keeps
      prev/next arrows flanking the slide at left/right 50%. On
      mobile we drop the 50px side padding (gives the slide the
      full viewport), flip the slide itself to column (photo on
      top, logo below), and move the prev/next arrows to a centred
      row beneath the slide — the same "carousel" feel as desktop
      but laid out for a narrow screen. The JS in
      `js/mobile-patterns.js :: mountSocietyCarousel()` wires the
      arrows to cycle whatever `.society-slide` elements exist;
      with a single slide it gracefully disables the arrows. */
@media (max-width: 768px) {
    .society-showcase {
        padding: 0 !important;
        display: grid !important;
        grid-template-areas:
            "slide slide"
            "prev  next";
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 1rem;
        justify-items: center;
    }
    .society-slide {
        grid-area: slide;
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
    .society-nav {
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }
    .society-nav.prev { grid-area: prev; justify-self: end; }
    .society-nav.next { grid-area: next; justify-self: start; }
    .society-nav[aria-disabled="true"] {
        opacity: 0.35;
        cursor: default;
    }
    .society-slide .society-logo-box {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .society-slide .society-photo-box {
        order: 2;
        width: 100%;
    }
    .society-slide .society-photo-box img,
    .society-slide .society-logo-box img {
        width: 100%;
        height: auto;
        max-width: 240px;
    }
    .society-slide .society-photo-box img {
        max-width: none;
        border-radius: 8px;
    }
}


/* 6. Industrial Linkages partner logos — scroll horizontally on
      mobile so the row of 12 logos fits any screen width without
      squishing. A simple overflow-x scroller; snap points keep
      swipes feeling deliberate. Desktop keeps the wrap-grid. */
@media (max-width: 768px) {
    .partner-logos {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding: 1rem 1rem 1.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .partner-logos .partner-logo {
        /* Each card takes ~78% of the viewport width so one logo
           dominates the screen while ~20% of the next peeks in — a
           familiar "swipe for more" cue. Cap at 340px so it doesn't
           look oversized on tablets that still fall below 768px. */
        flex: 0 0 78%;
        max-width: 340px;
        scroll-snap-align: start;
        aspect-ratio: 3 / 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
    }
    .partner-logos .partner-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: transparent;
        padding: 1.25rem;
    }
}


/* 7. Co-Work Pro Initiative — first image large, others as
      thumbnails with click-to-swap. Uses the same JS primitive as
      Academic Excellence + Entrepreneurial Mindset. Markup already
      has `.cowork-hero` (lead) and `.cowork-row` (thumbs). */
@media (max-width: 768px) {
    .cowork-gallery {
        display: flex !important;
        flex-direction: column;
        gap: 0.75rem;
    }
    .cowork-gallery .cowork-hero {
        order: 1;
        width: 100%;
    }
    .cowork-gallery .cowork-hero img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 8px;
    }
    .cowork-gallery .cowork-row {
        order: 2;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem;
    }
    .cowork-gallery .cowork-row img {
        flex: 1;
        min-width: 0;
        cursor: pointer;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 6px;
        transition: transform .15s, opacity .15s;
    }
    .cowork-gallery .cowork-row img:active {
        transform: scale(0.97);
        opacity: 0.8;
    }
}


/* ================================================================
   Home page — mobile-only polish                                   
   ================================================================ */

/* Fan-card info panel (BS/AD/MS pill row + title). Hidden on
   desktop so the original fan layout shows image-only; revealed
   on mobile where each card becomes a vertical program tile. */
.fan-card-info { display: none; }

@media (max-width: 768px) {
    /* 1. Program cards — mockup s3–s5 shows each as a full-width
          vertical tile: image on top, pill row (AD/BS/MS) centred,
          program name (centred, bold) below. Desktop's fan layout
          (absolute positioning + hover rotation) is overridden to a
          simple flex column here. */
    .program-fan-container {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 1.25rem !important;
        padding: 1rem !important;
        height: auto !important;
        perspective: none !important;
        max-width: 420px;
        margin: 0 auto;
    }
    .fan-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
        transform-style: flat;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .fan-card:hover {
        transform: none !important;
    }
    .fan-card img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
    }
    .fan-card-info {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        padding: 1rem 1rem 1.25rem;
        text-align: center;
    }
    .fan-card-levels {
        display: inline-flex;
        gap: 0.35rem;
    }
    .fan-card-level {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2rem;
        padding: 0.2rem 0.6rem;
        border: 1px solid #d1d5db;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
        color: #374151;
        background: #fff;
    }
    .fan-card-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1a2268;
        line-height: 1.3;
    }

    /* 2. Why Choose GIFT stats — mockup s5–s6 shows a vertical
          stack, each stat on its own line, number centred and huge
          above the label. Desktop has a horizontal grid which we
          override here. */
    .stats-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 1.75rem !important;
        align-items: center;
    }
    .stat-item {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
    }
    .stat-number {
        font-size: 2.5rem !important;
    }
}


/* 3. Welcome copy — mockup s1 shows the full paragraph visible
      with no "View More" control. The PHP previously wrapped it in
      `.mobile-collapsible` (hiding the tail on mobile) — that
      wrapper has been removed, so no extra CSS is needed here; the
      paragraph's natural flow centred text matches the mockup. */


/* Staggered-gallery "View More" on mobile only.
   Desktop: the `.staggered-rest` wrapper is invisible (nothing
   layout-shifts) and its children behave as normal flex siblings
   thanks to `display: contents`. Mobile: `.staggered-rest` collapses
   via the toggle button, revealing tiles 2-4 when opened. */
.staggered-toggle {
    display: none;
}
.staggered-rest {
    display: contents;
}

@media (max-width: 768px) {
    .staggered-rest {
        display: none;
    }
    .staggered-gallery.is-expanded .staggered-rest {
        display: contents;
    }
    .staggered-toggle {
        display: inline-flex;
        align-self: center;
        margin: 0.5rem auto 0;
        padding: 0.55rem 1.6rem;
        background: #c41f32;
        color: #fff;
        border: 0;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(196, 31, 50, 0.3);
    }
    .staggered-toggle:hover,
    .staggered-toggle:focus-visible {
        background: #a61729;
        outline: none;
    }
    /* When expanded, push the toggle ("View Less" at that point)
       to the bottom of the gallery so it sits AFTER the 4th tile's
       caption instead of staying in its "View More" position
       between tile 1 and tile 2. This works because mobile-expanded
       `.staggered-rest { display: contents }` promotes tiles 2–4 to
       direct flex siblings of the gallery, so flex `order` can
       reorder across them. */
    .staggered-gallery.is-expanded .staggered-toggle {
        order: 99;
        margin-top: 0.75rem;
    }
}


/* Welcome section staggered tiles — mobile only.
   Current desktop CSS lets the images render at natural aspect
   (661×991 portrait), which on a 400px phone balloons each tile
   to ~600px tall and floods the viewport. Mockup s2 shows them as
   compact landscape thumbnails, so we crop to a 4:3 ratio with
   object-fit:cover. Also drops the 60px side padding and tightens
   the staggered top-margins that were designed for the wide
   desktop fan layout. */
@media (max-width: 768px) {
    .staggered-gallery {
        padding: 0 1rem !important;
        gap: 1.25rem !important;
    }
    .staggered-item {
        margin-top: 0 !important;
    }
    .staggered-image {
        border-radius: 10px;
        overflow: hidden;
    }
    .staggered-image picture,
    .staggered-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        display: block;
    }
    .staggered-caption {
        font-size: 1rem !important;
        line-height: 1.4;
        margin-top: 0.6rem !important;
    }
}


/* SEAS Programs section — mobile ordering + View All pill.
   Source markup order (desktop fan):
     1 DA · 2 DS · 3 SE · 4 CS · 5 M&AI · 6 CM · 7 Math
   Mockup s3–s5 order on mobile:
     CS · SE · DS · DA · CM · Math · M&AI
   Desktop is OK, so we reorder only with flex `order` inside the
   mobile media query. */
@media (max-width: 768px) {
    .program-fan-container .fan-card-4 { order: 1; } /* Computer Science */
    .program-fan-container .fan-card-3 { order: 2; } /* Software Engineering */
    .program-fan-container .fan-card-2 { order: 3; } /* Data Science */
    .program-fan-container .fan-card-1 { order: 4; } /* Data Analytics */
    .program-fan-container .fan-card-6 { order: 5; } /* Computational Mathematics */
    .program-fan-container .fan-card-7 { order: 6; } /* Mathematics */
    .program-fan-container .fan-card-5 { order: 7; } /* Mathematics & AI */

    /* View All pill — matches mockup's red SEAS CTA (`#c41f32`
       filled pill, white text). Override the .btn-light ghost
       style that used to sit on this anchor for desktop's
       dark-navy programs panel. */
    .programs-cta {
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }
    .programs-view-all,
    .programs-cta .programs-view-all {
        background: #c41f32 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0.7rem 2.25rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(196, 31, 50, 0.3);
        text-decoration: none;
    }
    .programs-view-all:hover,
    .programs-view-all:focus-visible {
        background: #a61729 !important;
        color: #fff !important;
        outline: none;
    }
}


/* Why Choose GIFT — enlarge stat sizes on mobile to match mockup
   s5–s6 (huge numbers, prominent labels, larger green-campus icon).
   Desktop keeps its compact row layout. */
@media (max-width: 768px) {
    .stats-title {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    .stat-number {
        font-size: 3.5rem !important;
        line-height: 1 !important;
        margin-bottom: 0.5rem !important;
    }
    .stat-label {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }
    /* Stat icons — mockup s5–s6 shows large stylized number glyphs
       (icon-1..6) plus the circular Green Campus icon (icon-7). The
       number glyphs have varying widths, so default to height-driven
       sizing; the leaf stays a square. */
    .stat-item-icon .stat-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.5rem;
        min-height: 56px;
    }
    .stat-item-icon .stat-icon img {
        width: auto !important;
        height: 56px !important;
        max-width: 100% !important;
        max-height: 56px !important;
        object-fit: contain;
    }
    .stat-item-icon .stat-icon-leaf img {
        width: auto !important;
    }
    .stats-cta .btn {
        font-size: 0.95rem !important;
        padding: 0.7rem 1.5rem !important;
    }
}


/* Holistic Development section — mobile tweaks.
   1. Mockup s7 shows a visible gap between the stats row above
      and the infograph SVG; desktop had no top margin because
      the decorative SVG crops tight. Add breathing room below
      768px only.
   2. The "Read More" button beneath the infograph (mockup s8)
      is a cyan filled pill on the dark-navy section — not the
      SEAS red. Restyle the CTA on mobile to match. */
@media (max-width: 768px) {
    .holistic-section {
        padding-top: 2rem;
    }
    .holistic-infographic-mobile {
        margin-top: 1.5rem;
    }
    .holistic-cta {
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
        padding: 0 1rem 1rem;
    }
}


/* Student / Alumni "meet … name … role" card — mobile only.
   Mockup s8–s11 shows these cards with a large script "meet",
   prominent name in SEAS red, and a clearly readable role line.
   Desktop base sizes (home.css: meet 1.5rem, name 1.4rem,
   role 0.85rem) feel cramped on phones. Bump each up. */
@media (max-width: 768px) {
    .carousel-info {
        text-align: center !important;
        padding: 0 0.75rem !important;
    }
    .carousel-meet {
        font-size: 2.25rem !important;
        line-height: 1 !important;
        margin-bottom: 0.35rem !important;
    }
    .carousel-name {
        font-size: 2rem !important;
        line-height: 1.15 !important;
        margin-bottom: 0.6rem !important;
    }
    .carousel-role {
        font-size: 1.05rem !important;
        line-height: 1.45 !important;
    }
}


/* Student testimonial card (Asad Ur Rehman section) — mobile
   styling to match mockup s9.
   Structure in index.php:
     .testimonial-box
       .testimonial-photo (img)            ← moves to top on mobile
       .testimonial-content
         .testimonial-name (name | program)
         .mobile-collapsible
           p.testimonial-text              ← clamped with View More
   home.css already flips `.testimonial-box` to flex-column below
   768px, so the photo already leads. The rules below:
     • crop the photo to a portrait-ish 4:5 aspect with rounded corners
     • render name + program on two centred red lines (instead of
       the desktop "name | program" single row with grey program)
     • style the bio block as a light-gray card with a red View More
       pill at the bottom (handled by `.mobile-collapsible` primitive). */
@media (max-width: 768px) {
    .students-section .testimonial-box {
        align-items: center !important;
        gap: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .students-section .testimonial-photo {
        width: 160px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 12px;
        overflow: hidden;
        margin: 0 auto 0 !important;
    }
    .students-section .testimonial-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 12px;
    }
    /* Content card: transparent, rounded, padded */
    .students-section .testimonial-content {
        background: transparent;
        border-radius: 12px;
        margin-top: -2.5rem;  /* overlap photo slightly for continuity */
        padding: 3.25rem 1.5rem 1.5rem !important;
        text-align: center;
        width: 100%;
    }
    /* Name + program inline, separated by "|", both in SEAS red — matches mockup */
    .students-section .testimonial-name {
        font-size: 1.15rem !important;
        color: #c41f32 !important;
        margin: 0 0 0.5rem !important;
        line-height: 1.3;
        font-weight: 700 !important;
    }
    .students-section .testimonial-name [data-student-name],
    .students-section .testimonial-name [data-student-program] {
        display: inline !important;
        color: #c41f32 !important;
        font-size: inherit !important;
        font-weight: 700 !important;
    }
    .students-section .testimonial-name [data-student-program] {
        white-space: nowrap;
    }
    .students-section .testimonial-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: #4b5563;
    }
    /* Tighten the "View More" pill's spacing inside this card */
    .students-section .mobile-collapsible .mcoll-toggle {
        margin: 0.9rem auto 0.25rem !important;
    }
}


/* ───── Home-page faculty grid (3 HOD cards + "View More") — hidden on
        mobile per mockup. Desktop view is untouched. ───── */
@media (max-width: 768px) {
    .faculty-grid-section {
        display: none !important;
    }
}