/* ==========================================================
   home.css - Andrews 2027 homepage
   Built on the AU Design System tokens (Web Design Guide v1.0).
   Values mirror the guide but are declared in px so the shell's
   root font-size cannot rescale them, and every class is scoped
   au27- so it cannot collide with the unprefixed .card/.btn/
   .section in the site's index.css.
   ========================================================== */

.au27 {
  /* COLOR: Primary */
  --au-navy:       #003366;
  --au-navy-deep:  #001a33;
  --au-navy-light: #004080;
  --au-gold:       #C6952B;
  --au-gold-light: #E8B84B;
  --au-gold-pale:  #FDF5E6;
  /* COLOR: Neutral */
  --au-cream:      #FAF8F5;
  --au-white:      #FFFFFF;
  --au-warm-gray:  #6B6560;
  --au-gray-200:   #E8E4DF;
  --au-gray-300:   #D1CBC4;
  --au-gray-400:   #B5AFA8;
  --au-text:       #2A2522;
  /* COLOR: Semantic */
  --au-success:    #2D7D46;
  --au-error:      #B83232;
  --au-info:       #2868A6;
  /* TYPOGRAPHY */
  --font-display:  'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-body:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;
  /* TYPE SCALE (Major Third, one step up from the guide's base) */
  --text-xs:   13px;
  --text-sm:   16px;
  --text-base: 18px;
  --text-md:   20px;
  --text-lg:   23px;
  --text-xl:   28px;
  --text-2xl:  35px;
  --text-3xl:  44px;
  --text-4xl:  56px;
  /* SPACING (8px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-8: 48px; --space-10: 64px; --space-12: 80px; --space-16: 100px;
  /* LAYOUT */
  --max-width:        1200px;
  --max-width-narrow: 900px;
  --max-width-text:   700px;
  --gutter:           40px;
  /* SURFACES */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.14);
  /* MOTION */
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--au-text);
  line-height: 1.6;
}
.au27 *, .au27 *::before, .au27 *::after { box-sizing: border-box; }

/* ---- SECTION WRAPPER PATTERN ----
   Outer: full-width background + vertical padding.
   Inner: max-width tier + margin auto. */
.au27-section { padding: var(--space-16) var(--gutter); position: relative; }
.au27-inner { max-width: var(--max-width); margin: 0 auto; }
.au27-head { margin-bottom: var(--space-10); }
.au27-head--split {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: var(--space-4); flex-wrap: wrap;
}
.au27-head--split .au27-title { margin-bottom: 0; }

/* Eyebrow / label */
.au27-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--au-gold);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
/* Section heading (h2) */
.au27-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--au-navy);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}
.au27-title em { font-style: italic; color: var(--au-gold); }
/* Body copy */
.au27-desc {
  font-size: var(--text-base);
  color: var(--au-warm-gray);
  max-width: var(--max-width-text);
  line-height: 1.8;
  margin: 0 0 var(--space-4);
}
/* Background variants */
.au27-section--cream { background: var(--au-cream); }
.au27-section--navy {
  background: linear-gradient(135deg, var(--au-navy-deep) 0%, var(--au-navy) 100%);
  color: var(--au-white);
}
.au27-section--navy .au27-label { color: var(--au-gold-light); }
.au27-section--navy .au27-title { color: var(--au-white); }
.au27-section--navy .au27-desc  { color: rgba(255,255,255,0.65); }
.au27-center { text-align: center; margin: var(--space-8) 0 0; }

/* ---- GRID ---- */
.au27-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

/* ---- CARDS ---- */
.au27-card {
  background: var(--au-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--duration-base) var(--ease-out);
}
.au27-card:hover, .au27-card:focus-within {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.au27-card-img-link { display: block; }
.au27-card-img {
  width: 100%; height: 220px;
  object-fit: cover; display: block;
  background: linear-gradient(135deg, var(--au-navy), var(--au-navy-light));
}
.au27-card-body {
  padding: var(--space-6);
  display: flex; flex-direction: column; flex: 1;
}
.au27-card-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--au-gold);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.au27-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--au-navy);
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}
.au27-card-title a { color: inherit; text-decoration: none; }
.au27-card-title a:hover { color: var(--au-gold); }
.au27-card-text {
  font-size: var(--text-sm);
  color: var(--au-warm-gray);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
}
.au27-card-text p { margin: 0; font-size: inherit; }
/* Ghost-style card link, per the guide's ghost button */
.au27-card-cta {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--au-gold);
  text-decoration: none;
}
.au27-card-cta:hover { color: var(--au-gold-light); }

/* ---- BUTTONS ----
   The paired `.au27 a.au27-btn--x` selectors raise specificity above
   the site's global link-color rule, which was stripping the fill and
   leaving bare blue text over the hero. background-color (not the
   shorthand) avoids being clobbered by a competing `background`. */
.au27-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}
.au27-btn:hover { transform: translateY(-1px); }
.au27-btn:active { transform: translateY(0); }
.au27-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.au27-btn--lg { padding: var(--space-5) var(--space-8); font-size: var(--text-base); }

.au27-btn--primary,
.au27 a.au27-btn--primary {
  background-color: var(--au-gold);
  color: var(--au-navy-deep);
  border-color: var(--au-gold);
  text-shadow: none;
}
.au27-btn--primary:hover,
.au27 a.au27-btn--primary:hover {
  background-color: var(--au-gold-light);
  border-color: var(--au-gold-light);
  color: var(--au-navy-deep);
  box-shadow: 0 4px 16px rgba(198,149,43,0.35);
}
.au27-btn--secondary,
.au27 a.au27-btn--secondary {
  background-color: var(--au-navy);
  color: var(--au-white);
  border-color: var(--au-navy);
  text-shadow: none;
}
.au27-btn--secondary:hover,
.au27 a.au27-btn--secondary:hover {
  background-color: var(--au-navy-deep);
  border-color: var(--au-navy-deep);
  color: var(--au-white);
  box-shadow: 0 4px 16px rgba(0,51,102,0.3);
}
.au27-btn--outline,
.au27 a.au27-btn--outline {
  background-color: transparent;
  color: var(--au-navy);
  border-color: var(--au-navy);
  text-shadow: none;
}
.au27-btn--outline:hover,
.au27 a.au27-btn--outline:hover {
  background-color: var(--au-navy);
  color: var(--au-white);
}
/* [GAP] Outline-on-dark: not in the guide, needed over hero/navy bands.
   Solid translucent fill so it stays legible over busy video. */
.au27-btn--outline-light,
.au27 a.au27-btn--outline-light {
  background-color: rgba(0,26,51,0.55);
  color: var(--au-white);
  border-color: rgba(255,255,255,0.75);
  text-shadow: none;
}
.au27-btn--outline-light:hover,
.au27 a.au27-btn--outline-light:hover {
  background-color: rgba(0,26,51,0.8);
  border-color: var(--au-white);
  color: var(--au-white);
}
.au27-btn-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-5) 0 0; }

/* ---- HERO ---- */
.au27-hero {
  min-height: 78vh;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  background-color: var(--au-navy-deep);
  /* the feed photo through the image processor (hero.tt sets both): 1200px on
     phones, the 2400x960 homepage-hero size wider -- never the raw upload */
  background-image: var(--hero-img, none);
}
@media (min-width: 761px) {
  .au27-hero { background-image: var(--hero-img-wide, var(--hero-img, none)); }
}
.au27-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,26,51,0.45) 0%, rgba(0,26,51,0.30) 35%, rgba(0,26,51,0.80) 85%, rgba(0,26,51,0.92) 100%),
    linear-gradient(90deg, rgba(0,26,51,0.75) 0%, rgba(0,26,51,0.35) 45%, transparent 70%);
  pointer-events: none;
}
.au27-hero .au27-inner { position: relative; z-index: 1; width: 100%; }
.au27-hero-panel { max-width: var(--max-width-narrow); padding-bottom: var(--space-10); }
.au27-hero .au27-label { color: var(--au-gold-light); }
/* Display headline: --text-4xl, line-height 1.15 */
.au27-hero .au27-title {
  font-size: var(--text-4xl);
  font-weight: 400;
  color: var(--au-white);
  line-height: 1.15;
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 14px rgba(0,26,51,0.6);
}
.au27-hero .au27-title em { color: var(--au-gold-light); }
.au27-hero .au27-desc {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  text-shadow: 0 1px 10px rgba(0,26,51,0.7);
}
.au27-hero-feature { margin: 0; }
.au27-hero-feature a {
  display: inline-block;
  background-color: rgba(0,26,51,0.82);
  border-left: 3px solid var(--au-gold);
  padding: var(--space-4) var(--space-5);
  color: var(--au-white);
  text-decoration: none;
  max-width: 620px;
}
.au27-hero-feature strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--au-white);
}
.au27-hero-feature span { font-size: var(--text-sm); opacity: 0.85; }
.au27-hero-feature a:hover strong { color: var(--au-gold-light); }
/* background video: under the gradient (::before), which stays under the text.
   Vimeo letterboxes inside its frame, so the frame takes the video's own shape
   (--hero-video-ratio, set by hero.tt) and is scaled to cover the band. */
.au27-hero::before { z-index: 1; }
.au27-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; }
.au27-hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; min-width: 100%;
  height: 56.25vw; min-height: 100%;
  width: max(100cqw, 100cqh * (var(--hero-video-ratio, 16 / 9)));
  height: max(100cqh, 100cqw / (var(--hero-video-ratio, 16 / 9)));
  transform: translate(-50%, -50%); pointer-events: none; border: 0;
}
.au27-hero .au27-inner { z-index: 2; }

/* ---- QUICK ACTIONS (raised band) ---- */
.au27-quick { padding-top: 0; background: transparent; }
.au27-quick .au27-inner { margin-top: -56px; position: relative; z-index: 10; }
/* the four questions go 4 -> 2 -> 1 across, never 3 + 1 */
.au27-quick .au27-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .au27-quick .au27-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .au27-quick .au27-grid { grid-template-columns: 1fr; } }
.au27-quick .au27-card { box-shadow: var(--shadow-lg); border-top: 4px solid transparent; }
.au27-quick .au27-card:hover, .au27-quick .au27-card:focus-within {
  border-top-color: var(--au-gold);
  box-shadow: var(--shadow-xl);
}

/* ---- FIND YOUR CALLING (40/60 grid) ---- */
.au27-calling-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-8);
  align-items: center;
}
.au27-calling-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 620px;
}
.au27-calling-image--placeholder {
  background: linear-gradient(135deg, var(--au-navy), var(--au-gold-light));
}
.au27-calling-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au27-tags {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0;
}
.au27-tags li {
  font-size: var(--text-sm);
  color: var(--au-navy);
  background: var(--au-gold-pale);
  border: 1px solid var(--au-gray-200);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
}
/* Blockquote, per the guide */
.au27-quote {
  border-left: 3px solid var(--au-gold);
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--au-navy);
  line-height: 1.7;
  margin: var(--space-6) 0;
  max-width: var(--max-width-text);
}

/* ---- PROGRAMS ---- */
.au27-card--prog {
  background: linear-gradient(160deg, var(--au-navy) 0%, var(--au-navy-light) 100%);
}
.au27-card--prog .au27-card-title { color: var(--au-white); }
.au27-card--prog .au27-card-title a:hover { color: var(--au-gold-light); }
.au27-card--prog .au27-card-text { color: rgba(255,255,255,0.65); }
.au27-card--prog .au27-card-cta { color: var(--au-gold-light); }
.au27-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--au-gold);
  color: var(--au-navy-deep);
}

/* ---- VISIT CHECKLIST ---- */
.au27-checks {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-4); padding: 0;
}
.au27-checks li {
  font-size: var(--text-xs);
  color: var(--au-warm-gray);
  padding-left: var(--space-5);
  position: relative;
}
.au27-checks li::before {
  content: "";
  position: absolute; left: 0; top: 0.35em;
  width: 0.8em; height: 0.42em;
  border-left: 2px solid var(--au-success);
  border-bottom: 2px solid var(--au-success);
  transform: rotate(-45deg);
}

/* ---- AFFORDABILITY ---- */
.au27-afford-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.au27-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.au27-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: all var(--duration-base) var(--ease-out);
}
.au27-stat:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--au-gold);
  transform: translateY(-2px);
}
.au27-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--au-gold-light);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.au27-stat-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}

/* ---- EVENTS ---- */
.au27-grid--events { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.au27-event-date {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: 0 0 var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--au-gray-200);
}
.au27-event-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--au-navy);
  line-height: 1;
}
.au27-event-detail {
  font-size: var(--text-xs);
  color: var(--au-warm-gray);
  line-height: 1.4;
}
.au27-event-month {
  font-weight: 600;
  color: var(--au-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.au27-card--event .au27-card-title { font-size: var(--text-base); }

/* ---- FINAL CTA ---- */
.au27-final {
  background: linear-gradient(135deg, var(--au-navy-deep) 0%, var(--au-navy) 50%, var(--au-navy-light) 100%);
  text-align: center;
  overflow: hidden;
}
.au27-final::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(198,149,43,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(198,149,43,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.au27-final-panel {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.au27-final .au27-title {
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--au-white);
  line-height: 1.15;
}
.au27-final .au27-title em { color: var(--au-gold-light); }
.au27-final .au27-desc {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.7);
  margin-left: auto; margin-right: auto;
}
.au27-final .au27-btn-row { justify-content: center; }

/* ---- ACCESSIBILITY ---- */
.au27 a:focus-visible, .au27 .au27-btn:focus-visible {
  outline: 3px solid var(--au-gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .au27 * { transition: none !important; animation: none !important; }
}

/* ---- RESPONSIVE (guide's three tiers: <600, 600-900, >900) ---- */
@media (max-width: 900px) {
  .au27-calling-grid,
  .au27-afford-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .au27-calling-image { max-height: 360px; aspect-ratio: auto; min-height: 240px; }
  .au27-hero .au27-title { font-size: var(--text-3xl); }
}
@media (max-width: 600px) {
  .au27 { --gutter: 20px; }
  .au27-section { padding: var(--space-10) var(--gutter); }
  .au27-hero { min-height: 62vh; }
  .au27-hero .au27-title { font-size: var(--text-2xl); }
  .au27-grid, .au27-grid--events { grid-template-columns: 1fr; }
  .au27-stats { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .au27-quick .au27-inner { margin-top: -32px; }
  .au27-btn-row .au27-btn { width: 100%; }
}
/* ==========================================================
   HERO BUTTON LOCK
   The site's global link styling was overriding the button
   fill, leaving bare blue text over the hero photo. These
   rules win outright, and the row gets its own dark panel so
   legibility never depends on what the feed photo looks like.
   ========================================================== */
.au27 .au27-hero .au27-btn-row {
  display: inline-flex;
  background-color: rgba(0, 26, 51, 0.72);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
}

.au27 .au27-hero a.au27-btn {
  text-decoration: none !important;
  text-shadow: none !important;
  border-style: solid !important;
  border-width: 2px !important;
}

.au27 .au27-hero a.au27-btn--primary {
  background-color: var(--au-gold) !important;
  background-image: none !important;
  color: var(--au-navy-deep) !important;
  border-color: var(--au-gold) !important;
}
.au27 .au27-hero a.au27-btn--primary:hover,
.au27 .au27-hero a.au27-btn--primary:focus {
  background-color: var(--au-gold-light) !important;
  border-color: var(--au-gold-light) !important;
  color: var(--au-navy-deep) !important;
}

.au27 .au27-hero a.au27-btn--outline-light {
  background-color: rgba(255, 255, 255, 0.12) !important;
  background-image: none !important;
  color: var(--au-white) !important;
  border-color: var(--au-white) !important;
}
.au27 .au27-hero a.au27-btn--outline-light:hover,
.au27 .au27-hero a.au27-btn--outline-light:focus {
  background-color: var(--au-white) !important;
  color: var(--au-navy-deep) !important;
  border-color: var(--au-white) !important;
}

/* Same treatment on the final CTA band, which sits on a gradient */
.au27 .au27-final a.au27-btn {
  text-decoration: none !important;
  border-style: solid !important;
  border-width: 2px !important;
}
.au27 .au27-final a.au27-btn--primary {
  background-color: var(--au-gold) !important;
  color: var(--au-navy-deep) !important;
  border-color: var(--au-gold) !important;
}
.au27 .au27-final a.au27-btn--outline-light {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--au-white) !important;
  border-color: var(--au-white) !important;
}

.au27-section--flush-bottom { padding-bottom: 0; }
.au27-section--flush-top    { padding-top: 0; }
.au27-section--flush-bottom .au27-head { margin-bottom: var(--space-8); }