/* styles/pages/about.css — page-level layout for about.html only */
/* Officer grid uses the shared .card-row helper from layout.css and .officer-card
   visuals from officer-card.css. Everything below is specific to About's other
   sections: live stats, the zigzag opportunity highlights, and the faculty row. */

/* ---------- Curtain banner (page-header) ---------- */
/* Drop the real photo in and point this at it — everything else (ombre tint,
   swoosh, text placement) is handled by the shared .page-header rules in
   styles/layout.css. */
.page-header {
  --page-header-photo: url('/assets/images/banners/about-banner.jpg');
}

/* ---------- What We Do ---------- */
.what-we-do-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.what-we-do-text {
  text-align: left;
}

.testimonial-card {
  text-align: center;
}

.testimonial-quote {
  font-style: italic;
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.testimonial-name {
  font-weight: 700;
  color: var(--color-primary);
}

.testimonial-detail {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------- Live Stats ---------- */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

.stat-tile {
  text-align: center;
  min-width: 160px;
}

.stat-tile-number-wrap {
  position: relative;
  display: inline-block;
}

/* Soft highlight glow behind each number — the "bigger highlighting format",
   not just a plain box. */
.stat-tile-number-wrap::before {
  content: '';
  position: absolute;
  inset: -16px -28px;
  background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 72%);
  z-index: -1;
  border-radius: 50%;
}

.stat-tile-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
  color: var(--color-primary);
  line-height: 1;
}

.stat-tile-label {
  margin-top: var(--space-2);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}

/* ---------- Opportunity highlights (alternating zigzag) ---------- */
.opportunity-intro {
  margin: 0 auto var(--space-7);
}

.opportunity-row {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

.opportunity-row.reverse {
  flex-direction: row-reverse;
}

/* Placeholder "clumped photos" icon for each opportunity — reuses the tinted
   mosaic look from styles/gallery.css. Swap for real per-opportunity photos
   later by replacing the .cluster-photo divs with <img> tags. */
.opportunity-photo-cluster {
  position: relative;
  /* Explicit width, not just flex-basis -- flex-basis alone stops sizing the
     box once .opportunity-row switches to flex-direction: column on mobile
     (flex-basis follows the main axis, which is now vertical). Without a
     real width, this box collapses to 0 (its only children are
     position: absolute, which don't contribute to auto-sizing), so
     margin: 0 auto below centers an invisible point instead of the cluster,
     and the photos — anchored to that point via their own left offsets —
     spill out entirely to its right. */
  width: 240px;
  flex: 0 0 240px;
  height: 180px;
}

.opportunity-photo-cluster .cluster-photo {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  box-shadow: var(--shadow-md);
}

.opportunity-photo-cluster .cluster-photo:nth-child(1) {
  top: 0;
  left: 20px;
  transform: rotate(-6deg);
  opacity: 0.85;
}

.opportunity-photo-cluster .cluster-photo:nth-child(2) {
  top: 34px;
  left: 90px;
  transform: rotate(4deg);
  opacity: 0.65;
}

.opportunity-photo-cluster .cluster-photo:nth-child(3) {
  top: 54px;
  left: 6px;
  transform: rotate(3deg);
  opacity: 0.5;
}

.opportunity-text {
  flex: 1 1 280px;
}

.opportunity-text h3 {
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.opportunity-text p {
  margin-bottom: var(--space-3);
}

/* Text/button follow whichever side the photo cluster is on, instead of always
   sitting left — when the row reverses, the text column reverses with it. */
.opportunity-row.reverse .opportunity-text {
  text-align: right;
}

/* ---------- Meet the Team ---------- */
.faculty-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.faculty-grid .officer-card {
  max-width: 280px;
}

/* Balanced breathing room above and below, instead of sitting flush against
   the grid above it. */
.exec-board-note {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

/* ---------- Logistics (icon squares) ---------- */
.logistics-subheading {
  margin-bottom: var(--space-5);
}

.logistics-subheading:not(:first-of-type) {
  margin-top: var(--space-8);
}

.logistics-squares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* Spacing between the VP squares and the "Express Interest" button below them —
   kept off .logistics-squares itself so President's squares (the last thing in
   the section) don't carry a trailing margin that shows up as extra blank space
   before the footer. */
.logistics-cta {
  margin-top: var(--space-5);
}

.logistics-square {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.logistics-square-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-3);
  color: var(--color-primary);
}

.logistics-square h4 {
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
}

.logistics-square ul {
  text-align: left;
  font-size: 0.85rem;
  padding-left: var(--space-4);
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .logistics-squares {
    grid-template-columns: repeat(2, 1fr);
  }
  .what-we-do-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .opportunity-row,
  .opportunity-row.reverse {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }
  .opportunity-photo-cluster {
    margin: 0 auto;
  }
  .opportunity-row.reverse .opportunity-text {
    text-align: center;
  }
  .stats-row {
    gap: var(--space-6);
  }
  .logistics-squares {
    grid-template-columns: 1fr;
  }
  .what-we-do-grid {
    grid-template-columns: 1fr;
  }
}