/* ============================================================
   CREWFITCLUB — about.css
   Page-extension stylesheet for About Us page.

   RULES:
   - Loads AFTER style.css — uses all its design tokens.
   - Contains ONLY styles that do NOT exist in style.css.
   - No token redefinitions. No existing-class overrides.
   - Every section maps to a block in about.html.

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────
   01. Skip Link (copied from index.html <style> — page-common)
   02. About Hero
   03. Mission & Vision Bar (.mv-bar)
   04. Value Card (.value-card)
   05. Story Section (.story-image)
   06. Stats on Primary (.stats-strip--primary + modifier)
   07. Team Section (.team-grid, .team-member)
   08. Responsive Overrides
   ============================================================ */


/* ============================================================
   01. SKIP LINK
   Duplicated here because it's page-infrastructure, not a
   component, and each page needs it without importing
   index.html's <style> block.
   ============================================================ */
.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: calc(var(--z-modal) + 10);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transition-base);
}
.skip-link:focus { transform: translateY(0); }

/* Mobile nav CTA spacing — only needed in the mobile drawer */
.about-mobile-cta {
  margin-top: var(--space-8);
}


/* ============================================================
   02. ABOUT HERO
   Reuses .section-split backbone from style.css.
   Only adds: background, min-height, image treatment,
   headline sizing, animation, and the right-side image rounding.
   ============================================================ */
.about-hero {
  background: var(--color-white);
  padding: var(--space-20) 0;
  overflow: hidden;
}

/* The split grid — slightly uneven to give more breathing room to copy */
.about-hero__split {
  grid-template-columns: 55% 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Eyebrow, headline, desc, CTAs — staggered load animations */
.about-hero__eyebrow  { animation: cfc-fade-up 0.50s 0.05s ease both; }
.about-hero__headline { animation: cfc-fade-up 0.55s 0.15s ease both; }
.about-hero__desc     { animation: cfc-fade-up 0.55s 0.25s ease both; }
.about-hero__ctas     { animation: cfc-fade-up 0.55s 0.35s ease both; }

.about-hero__headline {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--color-dark);
  margin-bottom: var(--space-5);
}
.about-hero__headline .accent { color: var(--color-primary); }

.about-hero__desc {
  max-width: 500px;
  margin-bottom: var(--space-8);
}

.about-hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Right photo pane */
.about-hero__visual {
  animation: cfc-fade-up 0.65s 0.3s ease both;
}
.about-hero__img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  display: block;
}


/* ============================================================
   03. MISSION & VISION BAR  (.mv-bar)
   Two-cell horizontal card with a divider between them.
   Sits between hero and values — white background, subtle border.
   ============================================================ */
.mv-bar {
  border-top: 1px solid var(--color-gray-5);
  border-bottom: 1px solid var(--color-gray-5);
}

.mv-bar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-10);
  padding: var(--space-10) 0;
}

.mv-bar__cell {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

/* Icon circle — same visual language as .stat-widget__icon-wrap */
.mv-bar__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--color-primary-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}
.mv-bar__icon-wrap svg {
  width: 26px;
  height: 26px;
}

.mv-bar__heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: var(--lh-snug);
}

.mv-bar__body {
  font-size: var(--fs-base);
  color: var(--color-gray-1);
  line-height: var(--lh-relaxed);
}

/* Vertical dividing line between mission and vision */
.mv-bar__divider {
  width: 1px;
  background: var(--color-gray-5);
  align-self: stretch;
  min-height: 80px;
}


/* ============================================================
   04. VALUE CARD  (.value-card)
   Icon-circle + title + description.
   Lightweight — no image, no border-image.
   Used in the existing .grid-5 layout from style.css.
   ============================================================ */
.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-5);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}
.value-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--color-gray-4);
}

/* Icon circle — uses same sizing/colour as step-item__icon */
.value-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle);
  background: var(--color-primary-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
  transition: background var(--transition-base);
}
.value-card:hover .value-card__icon {
  background: var(--color-primary);
  color: var(--color-white);
}
.value-card__icon svg { width: 28px; height: 28px; }

.value-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  line-height: var(--lh-snug);
}

.value-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
  line-height: var(--lh-relaxed);
}


/* ============================================================
   05. STORY IMAGE  (.story-image)
   Right-side photo with rounded corners and a frosted
   mini-stats overlay strip at the bottom.
   ============================================================ */
.story-image {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.story-image__photo {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.story-image:hover .story-image__photo {
  transform: scale(1.03);
}

/* Dark frosted overlay strip at the bottom of the photo */
.story-image__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: rgba(12, 12, 12, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.story-image__stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  white-space: nowrap;
}
.story-image__stat svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Thin vertical separator between stat items */
.story-image__divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* Story text closing paragraph */
.story__closing {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-2);
}


/* ============================================================
   06. STATS ON PRIMARY  (.stats-strip--primary + modifier)
   Wraps the existing .stats-bar in a red section.
   The .stats-bar--on-primary modifier inverts colours so text
   and icons read on the red background.
   ============================================================ */

/* Section wrapper — red background, same vertical rhythm as stats-strip */
.stats-strip--primary {
  background: var(--color-primary);
  padding: var(--space-4) 0;
}

/* Modifier on the shared .stats-bar grid */
.stats-bar--on-primary {
  padding: var(--space-8) 0;
}

/* Override separator lines to be white/semi-transparent */
.stats-bar--on-primary .stat-widget {
  border-right-color: rgba(255, 255, 255, 0.2);
}
.stats-bar--on-primary .stat-widget:last-child {
  border-right: none;
}

/* Icon circles: white/semi-transparent background */
.stats-bar--on-primary .stat-widget__icon-wrap {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
}
.stats-bar--on-primary .stat-widget__icon-wrap svg {
  color: var(--color-white);
}

/* Values + labels: white text */
.stats-bar--on-primary .stat-widget__value {
  color: var(--color-white);
}
.stats-bar--on-primary .stat-widget__label {
  color: rgba(255, 255, 255, 0.75);
}


/* ============================================================
   07. TEAM SECTION  (.team-grid, .team-member)
   Circular avatar + name + role title + social icon links.
   Four-column grid, sits inside .section-split (right column).
   ============================================================ */

/* Override the split to give more width to the team grid */
.team-section__split {
  grid-template-columns: 40% 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* 2×2 grid of team member cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

/* Circular avatar with primary border ring on hover */
.team-member__avatar-wrap {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  border: 3px solid var(--color-gray-5);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  flex-shrink: 0;
}
.team-member:hover .team-member__avatar-wrap {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-muted);
}

.team-member__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.team-member:hover .team-member__avatar {
  transform: scale(1.06);
}

.team-member__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin: 0;
  line-height: 1;
}

.team-member__role {
  font-size: var(--fs-sm);
  color: var(--color-gray-2);
  font-weight: var(--fw-medium);
  line-height: 1;
}

/* Social icon links row */
.team-member__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.team-member__social-link {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--color-gray-5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-2);
  transition: all var(--transition-fast);
}
.team-member__social-link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  transform: translateY(-2px);
}


/* ============================================================
   08. RESPONSIVE OVERRIDES (about.css — page-scoped only)
   ============================================================ */

/* ── 1199px — tighten hero columns ── */
@media (max-width: 1199px) {
  .about-hero__split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
  .team-section__split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

/* ── 991px — stack sections vertically ── */
@media (max-width: 991px) {

  /* Hero stacks: image on top, copy below */
  .about-hero {
    padding: var(--space-12) 0;
  }
  .about-hero__split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .about-hero__visual { order: 1; }
  .about-hero__split .section-split__content { order: 2; }
  .about-hero__headline { font-size: clamp(1.9rem, 6vw, 2.8rem); }
  .about-hero__desc { max-width: none; }
  .about-hero__img { max-height: 380px; border-radius: var(--radius-xl); }

  /* Mission/vision stacks */
  .mv-bar__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-8) 0;
  }
  .mv-bar__divider {
    width: 100%;
    height: 1px;
    min-height: 0;
    background: var(--color-gray-5);
  }

  /* Team section stacks */
  .team-section__split {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
  .team-member__avatar-wrap { width: 90px; height: 90px; }
}

/* ── 767px — mobile ── */
@media (max-width: 767px) {

  .about-hero__ctas { flex-direction: column; align-items: stretch; }
  .about-hero__ctas .btn-cfc { justify-content: center; }
  .about-hero__img { max-height: 260px; }

  /* Values: 2 columns */
  /* Note: .grid-5 already becomes repeat(2,1fr) at 767px via style.css */

  /* Story overlay: stack vertically */
  .story-image__overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }
  .story-image__divider { display: none; }

  /* Team: 2 columns */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-4);
  }
  .team-member__avatar-wrap { width: 100px; height: 100px; }

  /* Stats on primary: use shared style.css responsive rules
     (already handles 2-col at 767px) */
  .stats-bar--on-primary .stat-widget {
    border-right-color: rgba(255, 255, 255, 0.15);
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }
}

/* ── 479px — small phones ── */
@media (max-width: 479px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .team-member__avatar-wrap { width: 80px; height: 80px; }
  .team-member__name { font-size: var(--fs-md); }
}