/* ===== About Us page — extends design tokens from style.css ===== */

/* Hero — mirrors the contact page hero: full-bleed image, left-aligned text */
.about-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 460px;
  display: flex;
  align-items: center;
}
.about-hero-media {
  position: absolute; inset: 0;
}
.about-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-hero-fallback {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--gold);
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
}
.about-hero-fallback svg { width: 52px; height: 52px; }
.about-hero-fallback span { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #cfe0ee; }
.about-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,37,66,0.94) 0%, rgba(8,37,66,0.82) 38%, rgba(8,37,66,0.35) 62%, rgba(8,37,66,0.08) 100%);
}
.about-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 70px 24px 90px;
  text-align: left;
  box-sizing: border-box;
}
.about-hero-inner .hero-text {
  max-width: 620px;
  margin-left: 0;
  margin-right: auto;
}

/* "About Us" — big white heading, sized/styled exactly like the Contact page's
   "CONTACT US" hero heading (.contact-hero-heading in contact-page.css) */
.about-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(2.2rem, 8vw, 5.2rem);
  color: #fff;
  line-height: 1;
  margin-bottom: 18px;
}

/* "The story behind ..." — gold subheading, sized/styled like the Contact
   page's gold subheading (.contact-hero-subheading in contact-page.css) */
.about-hero-subheading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  color: var(--gold);
  margin-bottom: 16px;
  max-width: 560px;
}

.about-hero-lede { font-family: var(--font-display); color: #d6e4f0; font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 560px; margin: 0; }

/* ===================================================================
   Our History — the photo floats beside the copy for its own height;
   once the paragraphs run past the bottom of the image, the remaining
   text automatically continues at full container width (left edge to
   right edge). This is plain CSS float wrap, not a two-column grid.
   =================================================================== */
.history-quote {
  font-family: var(--font-display); font-weight: 900;
  font-size: 4.5rem; line-height: 0.6; color: var(--gold);
  margin-bottom: 6px;
}
.about-history .eyebrow-lg { font-size: 2.1rem; margin-bottom: 16px; }
.about-history-heading { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.about-history-subheading { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 30px; clear: both; }
.about-history-text p { color: #000; font-size: 1.1rem; line-height: 1.85; }
.about-history-commitment {
  font-family: var(--font-display); font-weight: 800; font-style: normal;
  color: var(--gold-deep) !important; font-size: 1.2rem !important; line-height: 1.6 !important;
  margin-top: 6px;
}

.about-history-text {
  overflow: hidden; /* clearfix so the section wrapper accounts for the float's height */
  column-count: 1 !important; /* guard against any global multi-column rule */
  columns: auto !important;
}
.about-history-photo {
  float: right;
  width: 420px;
  max-width: 45%;
  margin: 0 0 24px 40px;
}
@media (max-width: 980px) {
  .about-history-photo { float: none; max-width: 380px; width: 100%; margin: 0 auto 24px; }
}

/* General heading/sub-heading sizing — matched to the home page's
   body.home-page h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
   and body.home-page .section-head p sizing, so About Us reads consistently
   with the rest of the site */
.section h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.section .section-head p { font-size: 1.06rem; color: #000; line-height: 1.75; }

/* "Our Campus" eyebrow — sized even larger than the standard eyebrow-lg,
   dash removed (inherits from eyebrow-lg), per request to increase it a lot */
.about-campus-eyebrow { font-size: clamp(2rem, 4vw, 3.1rem) !important; }

/* Our Objectives -> Our Campus: sit back-to-back with minimal gap, so they
   read as one continuous visual block instead of two separated sections */
.about-objectives { padding-bottom: 24px; }
.about-campus-connect { padding-top: 0; }

.about-photo-1x1 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  box-shadow: var(--shadow-md);
}
.about-photo-1x1 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-photo-fallback {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--gold);
  border: 2px dashed rgba(240,180,41,0.5);
  border-radius: var(--radius);
}
.about-photo-fallback svg { width: 42px; height: 42px; }
.about-photo-fallback span { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #cfe0ee; }

/* Our Vision / Our Mission — centered uppercase titles, small 1:1 placeholder, text below */
.vm-card { text-align: center; }
.vm-card h3 { text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.3rem; margin-bottom: 18px; }
.vm-card p { color: #000; font-size: 1.06rem; line-height: 1.75; margin-top: 18px; }
.vm-photo-sm { width: 150px; max-width: 150px; margin: 0 auto; }

/* ===================================================================
   A Word From Leadership — Chairman's Message only. The photo floats
   beside the copy for its own height (same technique as Our History,
   mirrored: image on the LEFT here instead of the right); once the
   paragraphs run past the bottom of the image, the remaining text
   continues at full width (left edge to right edge).

   FIX: this block was rendering as two split columns instead of a
   normal float-wrap. That happens when a `column-count`/`columns`
   rule (usually a global ".card"/".msg-block" rule elsewhere) applies
   multi-column text flow on top of the float. Everything below is
   explicitly reset to a single-column block flow so only the float
   controls the wrap — exactly like Our History.
   =================================================================== */
.leadership-heading { font-size: clamp(2rem, 4.2vw, 2.8rem); }

.leadership-stack { display: grid; gap: 40px; }

.msg-block {
  overflow: hidden; /* clearfix for the floated photo */
  column-count: 1 !important; /* kill any inherited multi-column layout */
  columns: auto !important;
  column-gap: 0 !important;
  display: block !important;
  width: 100% !important;
}
.msg-block > * {
  display: block;
  width: auto;
  max-width: none;
  break-inside: auto;
  -webkit-column-break-inside: auto;
  column-span: none;
}
.msg-photo {
  float: left;
  width: 320px;
  max-width: 45%;
  margin: 0 32px 20px 0;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
}
.msg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-photo-fallback {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--gold);
  border: 2px dashed rgba(240,180,41,0.5);
  border-radius: 12px;
}
.msg-photo-fallback svg { width: 40px; height: 40px; }
.msg-photo-fallback span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #cfe0ee; }
.msg-block h4 { font-size: 1.3rem; margin-top: 8px; }
.msg-block .msg-tagline {
  font-family: var(--font-display); font-weight: 800; font-style: normal;
  color: var(--gold-deep); font-size: 1rem; letter-spacing: 0.01em;
  margin: 0 0 14px;
}
.msg-quote { color: #000; font-size: 1.05rem; line-height: 1.8; margin: 0 0 14px; }
.msg-quote strong { font-weight: 800; }
.msg-highlight {
  color: var(--navy-deep); font-weight: 700; font-style: italic;
  font-size: 1.08rem; line-height: 1.8; margin: 0 0 14px;
  padding-left: 16px; border-left: 3px solid var(--gold-deep);
}
/* Role line under the signature — cursive/italic, bold, pure black */
.msg-block .role {
  display: block;
  clear: both;
  font-style: italic;
  font-weight: 700;
  color: #000;
  margin-top: 4px;
}

/* Objectives / Campus cards — bigger pure-black body copy */
.about-cards-black .card p { color: #000; font-size: 1.14rem; line-height: 1.8; }
.about-cards-black .card h3 { font-size: 1.2rem; }

@media (max-width: 1080px) {
  .msg-photo { float: none; max-width: 320px; width: 100%; margin: 0 auto 20px; }
}
@media (max-width: 760px) {
  .about-hero-inner { padding: 50px 20px 60px; }
}

/* =========================================================
   Scroll animations — repeat every time an element enters or
   leaves the viewport (not just once). Paired with a small
   IntersectionObserver script at the bottom of about.html that
   toggles the `.in-view` class on/off as elements scroll past,
   so the effects replay on every scroll up or down.
   ========================================================= */
.sa {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.sa.in-view { opacity: 1; transform: none; }

.sa-fade-up   { transform: translateY(55px); }
.sa-fade-left { transform: translateX(-70px); }
.sa-fade-right{ transform: translateX(70px); }
.sa-zoom      { transform: scale(0.82); }

/* Bounce — springy overshoot on the way in */
.sa-bounce {
  transform: scale(0.55) rotate(-4deg);
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sa-bounce.in-view { transform: scale(1) rotate(0deg); }

/* Continuous gentle float, active only while the element is in view */
.sa-float.in-view { animation: saFloat 3.4s ease-in-out infinite; }
@keyframes saFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Staggered entrance for card grids — each successive card in a
   .sa-grid fires slightly after the one before it */
.sa-grid .sa:nth-child(1) { transition-delay: 0s; }
.sa-grid .sa:nth-child(2) { transition-delay: 0.08s; }
.sa-grid .sa:nth-child(3) { transition-delay: 0.16s; }
.sa-grid .sa:nth-child(4) { transition-delay: 0.24s; }
.sa-grid .sa:nth-child(5) { transition-delay: 0.32s; }
.sa-grid .sa:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .sa, .sa-bounce, .sa-float.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}