:root { --font-main: "JioType", sans-serif; }

@font-face { font-family:"JioType"; src:url("../fonts/JioTypeW05-Light.woff") format("woff"); font-weight:300; font-style:normal; }
@font-face { font-family:"JioType"; src:url("../fonts/JioTypeW05-LightItalic.woff") format("woff"); font-weight:300; font-style:italic; }
@font-face { font-family:"JioType"; src:url("../fonts/JioTypeW05-Regular.woff") format("woff"); font-weight:400; font-style:normal; }
@font-face { font-family:"JioType"; src:url("../fonts/JioTypeW05-Italic.woff") format("woff"); font-weight:400; font-style:italic; }
@font-face { font-family:"JioType"; src:url("../fonts/JioTypeW05-Medium.woff") format("woff"); font-weight:500; font-style:normal; }
@font-face { font-family:"JioType"; src:url("../fonts/JioTypeW05-Bold.woff") format("woff"); font-weight:700; font-style:normal; }

@layer base { html,body { font-family:var(--font-main); } }

@layer components {
  /* .page-max { max-width:1366px; width:100%; margin-right:auto; margin-left:auto; } */

  .site-header {
    background:linear-gradient(to bottom,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 65%,rgba(0,0,0,0) 100%);
    transition:transform 220ms ease-in-out,background-color 220ms ease,box-shadow 220ms ease;
  }


  .header-desktop-shell { display:none; }
  .header-mobile-shell  { display:flex; }
  .mobile-only-1024     { display:block; }
  @media (min-width:1050px) {
    .header-desktop-shell { display:flex; }
    .header-mobile-shell  { display:none; }
    .mobile-only-1024     { display:none; }
  }

  .admissions-slot { position:relative; width:155px; height:44px; overflow:hidden; }
  .admissions-label,.admissions-pill-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
  .admissions-label    { animation:admissions-label-loop 4s ease-in-out 0.4s infinite; }
  .admissions-pill-wrap{ animation:admissions-pill-loop  4s ease-in-out 0.4s infinite; }
  .admissions-open-pill{ background:linear-gradient(90deg,#782a47 0%,#ca0e1f 162.38%); }

  .accordion-btn[aria-expanded="true"] .chevron { transform:rotate(180deg); }
  .accordion-content     { display:none; }
  .accordion-content.open{ display:flex; }

  /* Our Story slideshow
     Visibility is controlled exclusively via Tailwind's `hidden` class in JS.
     The first slide has no `hidden`; the rest start with `hidden`.             */
  #our-story #story-image-wrap {
    width: 100%;
    height: clamp(420px, 118vw, 700px);
    overflow: hidden;
    isolation: isolate;
  }

  @media (min-width: 768px) {
    #our-story #story-image-wrap {
      height: clamp(260px, 36vw, 512px);
    }
  }

  /* Story progress bar */
  .story-progress-fill {
    height:2px;
    background:#5d0023;
    transition:width 400ms ease;
  }

  /* Vision Aspirations grid item */
  .vision-item {
    position:relative;
    padding:32px 24px 24px;
    border-bottom:1px solid rgba(255,255,255,0.15);
  }
  .vision-item:nth-child(odd) {
    border-right:1px solid rgba(255,255,255,0.15);
  }

  /* Faculty spotlight carousel */
  .faculty-spotlight-track { display:flex; }

  /* Council tabs */
  .council-tab { cursor:pointer; transition:background 150ms ease, color 150ms ease; }
  .council-tab.active {
    background:#fff;
    color:#0d0d0d;
    font-weight:500;
  }
  .council-tab:not(.active) {
    background:transparent;
    color:#666;
  }

  /* Vision section stack */
  .vision-card-wrapper {
    position: relative;
  }

  /* School grid card */
  .school-card {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:20px;
  }

  /* Ambani photo wrap — copied from homepage */
  .ambani-photo-wrap {
    position: relative;
    height: 282px;
    overflow: hidden;
    margin-left: auto;
    margin-right: 0;
    width: 100%;
  }

  /* Partner logos ticker (same pattern as Management page) */
  .ticker-wrapper { overflow:hidden; }
  .ticker-track {
    display:flex;
    width:max-content;
    animation:ticker 28s linear infinite;
  }
  .ticker-track:hover { animation-play-state:paused; }

  /* Campus life mosaic grid
     5 columns, 2 rows: row 1 = images (fixed height), row 2 = text in centre col.
     Far-left (col1) & far-right (col5) span both rows via inline grid-row style. */
  .campus-mosaic-grid {
    grid-template-columns: 1fr 0.69fr 1.52fr 0.69fr 1fr;
    grid-template-rows: 410px auto;
    gap: 8px;
    align-items: start;
  }

  .campus-mosaic { position:relative; overflow:hidden; }

  /* Campus Life — mobile/tablet mosaic: 3 columns (narrow / wide center / narrow) sharing one band height */
  .campus-life-mobile-mosaic {
    display: grid;
    grid-template-columns: 1fr 2.4fr 1fr;
    gap: 8px;
    height: min(100vw, 540px);
    min-height: 300px;
    align-items: stretch;
  }

  .campus-life-mobile-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
  }

  /* Left column: 2 equal tiles */
  .campus-life-mobile-col--split2 > div {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  /* Right column: 3 equal tiles */
  .campus-life-mobile-col--split3 > div {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  /* Center column: both tiles locked to Figma 196×157 aspect ratio */
  .campus-mobile-center-top,
  .campus-mobile-center-bottom {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 196 / 157;
    overflow: hidden;
  }

  .campus-life-mobile-mosaic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ───────────────────────────────────────────────────────────────
     Image hover zoom — matches homepage "Stories Defining the Future"
     Scope: #faculty, #academic-plan, #campus-life
     Pattern: image scales to 1.05 on parent hover; overflow-hidden
     wrapper clips the zoom. 360ms ease-out for smooth feel.
     ─────────────────────────────────────────────────────────────── */

  /* Default state on all in-scope images: prep the transition */
  #faculty .faculty-track .snap-start img:not([aria-hidden="true"]),
  #academic-plan .overflow-hidden img,
  #campus-life .campus-mosaic-grid .overflow-hidden img,
  #campus-life .campus-life-mobile-mosaic img {
    transition: transform 360ms ease-out;
    will-change: transform;
  }

  /* Hover triggers: each section uses its own immediate wrapper */
  #faculty .faculty-track .snap-start:hover img:not([aria-hidden="true"]),
  #academic-plan .overflow-hidden:hover img,
  #campus-life .campus-mosaic-grid .overflow-hidden:hover img,
  #campus-life .campus-life-mobile-col--split2 > div:hover img,
  #campus-life .campus-life-mobile-col--split3 > div:hover img,
  #campus-life .campus-mobile-center-top:hover img,
  #campus-life .campus-mobile-center-bottom:hover img {
    transform: scale(1.05);
  }

  /* ───────────────────────────────────────────────────────────────
     Faculty card heading — animated underline on card hover
     Matches homepage "Stories Defining the Future" (.story-title span)
     Uses a background-image gradient that grows from 0% → 100%
     width. box-decoration-break: clone makes it work for names that
     wrap onto multiple lines (e.g. on narrow viewports).
     ─────────────────────────────────────────────────────────────── */
  #faculty .faculty-track .snap-start .faculty-name-hover {
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 500ms ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* Underline tracks the heading text only — NOT the whole card.
     This way hovering "Know More" doesn't also underline the heading. */
  #faculty .faculty-track .snap-start .faculty-name-hover:hover {
    background-size: 100% 2px;
  }

  /* ───────────────────────────────────────────────────────────────
     Academic Plan — arrow circle icon hover effect
     The circle scales up slightly and the inner arrow plays the
     cta-arrow-jump animation. The `.shrink-0` filter ensures we only
     match the arrow circle, never the "IN FUTURE" pill (which has no
     shrink-0). Works for both desktop (<img>) and mobile (<svg>).
     ─────────────────────────────────────────────────────────────── */
  #academic-plan .academic-school-card .border.rounded-full.shrink-0 {
    transition: transform 240ms ease-out, background-color 240ms ease-out;
    cursor: pointer;
  }

  #academic-plan .academic-school-card .border.rounded-full.shrink-0 svg,
  #academic-plan .academic-school-card .border.rounded-full.shrink-0 img {
    transition: transform 240ms ease-out;
    will-change: transform;
  }

  #academic-plan .academic-school-card .border.rounded-full.shrink-0:hover {
    transform: scale(1.08);
  }

  #academic-plan .academic-school-card .border.rounded-full.shrink-0:hover svg,
  #academic-plan .academic-school-card .border.rounded-full.shrink-0:hover img {
    animation: cta-arrow-jump 360ms ease-out;
  }

  /* Subtle zoom on the text-only school cards (image slot has no
     .academic-school-card class, so it stays unaffected). */
  #academic-plan .academic-school-card {
    transition: transform 280ms ease-out, box-shadow 280ms ease-out;
    will-change: transform;
  }

  #academic-plan .academic-school-card:hover {
    transform: scale(1.03);
    z-index: 1;
  }

  .btn-arrow-jump svg { transform:translate(0,0); }
  .btn-arrow-jump:hover svg { animation:cta-arrow-jump 240ms ease-out; }

  /* Reuse PLP arrow hover feel for About Us arrow CTAs */
  a[class*="text-[#E30614]"][class*="items-center"][class*="gap-2"] svg,
  a[class*="bg-[#e30513]"][class*="items-center"][class*="gap-2"] svg {
    transform: translate(0, 0);
  }

  a[class*="text-[#E30614]"][class*="items-center"][class*="gap-2"]:hover svg,
  a[class*="bg-[#e30513]"][class*="items-center"][class*="gap-2"]:hover svg {
    animation: cta-arrow-jump 240ms ease-out;
  }
}

@layer utilities {
  .tracking-design { letter-spacing:-0.04em; }
  .no-scrollbar::-webkit-scrollbar { display:none; }
  .no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

  /* Advantage section: vanilla JS card-stack.
     - EVERY card-wrapper (including the last) is position:sticky at the same
       top offset, so successive cards land at the same viewport spot and
       visually stack via DOM paint order (later DOM = on top).
     - The JS in template-about.php fades each card out as the NEXT card
       approaches. The last card has no "next" so it stays fully visible.
     - Mobile uses top:80px to clear the fixed navbar; desktop uses 12vh,
       matching the NTP stack rhythm on the homepage. */
  #our-advantage .card-wrapper {
    position: sticky;
    top: 12vh;
    z-index: 1;
  }
  #our-advantage .card-wrapper .card {
    will-change: opacity, transform;
    transform-origin: center center;
    transition: opacity 80ms linear, transform 80ms linear;
  }

  @media (max-width: 768px) {
    #our-advantage {
      padding-top: 48px;
      padding-bottom: 48px;
    }
    #our-advantage .card-wrapper {
      top: 80px;
      margin-bottom: 24px;
    }
    #our-advantage .card-wrapper:last-child {
      margin-bottom: 0;
    }
  }
}

/* ── Year intro slot-machine digits ── */
.digit-slot {
  overflow: hidden;
  height: clamp(100px, 17.8vw, 237px);
  flex-shrink: 0;
}
.digit-reel {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.digit-num {
  font-family: var(--font-main);
  font-size: clamp(67px, 11.9vw, 158px);
  font-weight: 400;
  line-height: 1.5;
  height: clamp(100px, 17.8vw, 237px);
  color: #BD040F;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* md (≥768px) */
@media (min-width: 768px) {
  .ambani-photo-wrap {
    position: absolute;
    right: 0;
    width: 310px;
    bottom: 0px;
    scale: 1.1;
  }
  .our-vision-gradient{
    background: linear-gradient(180deg, #5d0023 0%, #ca0e1f 202.83%);
          /* padding-bottom: clamp(100px, 14vw, 180px); */
  }
  .future-gradient-bg{
    background: linear-gradient(180deg, #5D0023 0%, #CA0E1F 202.83%);
  }
}
/* lg (≥1024px) */
@media (min-width: 1024px) {
  .ambani-photo-wrap {
    height: 500px;
    margin-top: -100px;
  }
}
/* xl (≥1280px) */
@media (min-width: 1280px) {
  .ambani-photo-wrap {
    position: relative;
    right: 0;
    width: 510px;
  }
}

/* Pill flip keyframes (admissions-label-loop / admissions-pill-loop) intentionally
   live in homepage.css + main.css (loaded globally). Don't redefine them here — a
   duplicate @keyframes here loads last on the About page and overrides the shared
   "rolling" animation with a divergent one. */
@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-33.333%); }
}
@keyframes cta-arrow-jump {
  0%   { transform:translate(0,0) scale(1);      opacity:1; }
  40%  { transform:translate(7px,-10px) scale(1.02); opacity:0.15; }
  41%  { transform:translate(-3px,4px) scale(0.98); opacity:0; }
  100% { transform:translate(0,0) scale(1);      opacity:1; }
}

button{
  cursor: pointer;
}

body.nav-up #about-subnav, body.nav-up #mobile-sec-nav {
    top: 0;
}
#about-subnav, #mobile-sec-nav {
    transition: top 220ms ease-in-out;
}

.swappable-bg-gradient{
  height: 355px;
background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.9) 0%,
  rgba(0, 0, 0, 0.68) 42%,
  rgba(0, 0, 0, 0.32) 72%,
  rgba(0, 0, 0, 0.12) 88%,
  rgba(0, 0, 0, 0) 100%
);
}

.story-title span {
    display: inline;
    text-decoration: none;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 0.5s ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.story-title:hover span {
    background-size: 100% 2px;
}

.story-title-link span {
    display: inline;
    text-decoration: none;
    background-image: linear-gradient(#E30513, #E30513);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 0.5s ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.story-title-link:hover span {
    background-size: 100% 2px;
}
.no-icon-anim:hover svg {
    animation: none !important;
    transform: none !important;
}

@media (max-width:768px) {
.page-max{
  padding-inline: 16px;
}
.future-text{
font-size: 18vw !important;
}
}
@media (max-width:767px) {
.our-vision-gradient{
  background:linear-gradient(118.31deg, #5D0023 32.5%, #CA0E1F 152.04%);

}
.future-gradient-bg{
  background: linear-gradient(118.31deg, #5D0023 32.5%, #CA0E1F 152.04%);

}
.ambani-photo-wrap {
  height: auto;
}
}

/* ── Hero media carousel (homepage pattern reused on About Us) ── */
.hero-media-carousel { overflow: hidden; }
.hero-media-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-media-slide.is-active { opacity: 1; }
.hero-media-object {
  /* position: absolute;
  inset: 0; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero description — honour Enter-key line breaks typed into the ACF
   `about_hero_description` textarea. The \A survives esc_html() into the
   markup; this only stops the browser collapsing it. Spaces still collapse
   and long lines still soft-wrap, so it behaves like a normal paragraph. */
section:has(> .hero-media-carousel) h1 + p { white-space: pre-line; }


/* Jio University Advantage — accordion body open/close animation.
   Closed state: max-height 0 + padding-bottom 0 + overflow hidden +
   opacity 0 so the row collapses fully (zeroing padding-bottom is what
   removes the leftover gap from the markup's `pb-4` Tailwind class) and
   the text fades out before max-height finishes.
   Open state: `.is-open` restores `pb-4`'s 1rem padding-bottom alongside
   max-height. The `.is-open` max-height is a CSS fallback used only
   before about.js runs; on click + on load, the JS in about.js
   (toggleAdvAcc + the load-time sync) sets an inline max-height equal
   to scrollHeight so the transition runs against the content's exact
   size. The selector is scoped under `#our-advantage` so it wins over
   the Tailwind `.pb-4` utility on the same element. */
#our-advantage .adv-acc-body {
  overflow: hidden;
  max-height: 0;
  padding-bottom: 0;
  opacity: 0;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding-bottom 0.4s ease,
    opacity 0.2s ease;
}
#our-advantage .adv-acc-body.is-open {
  max-height: 2000px;
  padding-bottom: 1rem;
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════
   TEMPORARY — About Us section ordering, added 26 Aug 2026.
   Added via Theme File Editor because deployment access wasn't
   available yet. REMOVE THIS ENTIRE BLOCK before/when the proper
   git-based implementation is deployed, or the two sets of order
   rules will both be live.
   ═══════════════════════════════════════════════════════════════ */
main { display: flex; flex-direction: column; }
main > * { flex: 0 0 auto; order: 99; }

main > section.bg-black  { order: 1; }   /* Hero */
main > #about-subnav,
main > #mobile-sec-nav   { order: 2; }   /* Section nav — keep both equal */
main > #our-story        { order: 3; }
main > #our-vision       { order: 4; }
main > #our-mission      { order: 5; }
main > #our-leaders      { order: 6; }
main > #hear-faculty     { order: 2; }
main > #faculty          { order: 8; }
main > #our-advantage    { order: 9; }
main > div.my-\[40px\]   { order: 10; }  /* International Collaborations */
main > #future-plan      { order: 11; }
main > #academic-plan    { order: 12; }
main > #campus-life      { order: 13; }
/* ═══════════════ END TEMPORARY BLOCK ═══════════════ */