/* ══════════════════════════════════════════════════
   ABOUT PAGE
   Page hero banner lives in styles/page-hero.css (shared
   across all content pages). This file covers About's own
   sections: Who We Are, Our Story, Mission & Vision,
   Our Values, Team — all sharing one set of .site-about__*
   layout/typography classes, with per-section wrappers
   only for background + padding.
   Depends on: tokens.css
   ══════════════════════════════════════════════════ */

/* bgs also exists in styles/hero.css — duplicated here rather than
   depended on cross-file, since About (and every other content page)
   doesn't load hero.css, which is homepage-specific. */
@keyframes bgs {
  0%   { background-position: 0%   50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0%   50% }
}

/* ── SHARED CONTAINER ─────────────────────────────── */

.site-about__container {
  width: min(calc(100% - 2 * var(--content-inset)), var(--container-max));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* ── SHARED EYEBROW + HEAD / HEADING ──────────────── */
/* Matches the homepage's label+heading two-tier pattern (e.g.
   .site-whatwedo__label) — every About section carries this same
   eyebrow so the page reads consistently with the rest of the site. */

.site-about__eyebrow {
  display: block;
  font-family: var(--fm);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t3);
  margin: 0 0 var(--space-3);
}

.site-about__head {
  max-width: 64rem;
  margin-bottom: var(--space-6);
}

/* ── DIVIDER ──────────────────────────────────────── */
/* Straight from the brand design system's own .div-fade separator
   (brand.eventology.me components.css) — a chapter-break rule, not
   invented here. Sits at the top of each section's content column. */
.site-about__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v), var(--a), transparent);
  opacity: 0.5;
  margin-bottom: var(--space-7);
}

.site-about__heading {
  font-family: var(--fd);
  font-size: clamp(3.6rem, 5vw, 6.4rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  padding-bottom: 0.08em;
  background: var(--gr);
  background-size: 200% 200%;
  animation: bgs 6s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── SHARED BODY PARAGRAPHS ───────────────────────── */

.site-about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.site-about__body p {
  font-family: var(--fm);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--t2);
  margin: 0;
}

/* ── SHARED SPLIT LAYOUT (Who We Are / Our Story) ─── */

.site-about__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  column-gap: var(--space-8);
  align-items: start;
}

.site-about__split .site-about__head {
  grid-column: 1;
}

.site-about__split .site-about__body {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.site-about__media {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.site-about__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── WHO WE ARE ───────────────────────────────────── */

/* Two-photo collage instead of one plain rectangle — the main shot sits
   in the same grid slot .site-about__media used, with a second, smaller
   photo layered over its bottom-left corner (offset + its own border and
   shadow so it reads as a distinct print sitting on top, not a crop). */
.site-about-who__collage {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  position: relative;
  padding-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.site-about-who__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.site-about-who__photo--main {
  position: relative;
  z-index: 0;
}

.site-about-who__photo--accent {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55%;
  z-index: 1;
  border: 4px solid var(--txt);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  transform: rotate(-4deg);
}

/* ── OPENING STATEMENT ────────────────────────────── */
/* Moved out of the page-hero banner (was crowding the title) into its
   own plain section right below it. */

.site-about-intro {
  background: var(--c1);
  padding: var(--space-8) 0;
}

.site-about-intro__body {
  max-width: 84rem;
}

.site-about-intro__body p {
  font-size: 1.8rem;
}

.site-about-who {
  background: var(--c0);
  padding: var(--space-8) 0;
}

/* ── OUR STORY ────────────────────────────────────── */

.site-about-story {
  background: var(--c1);
  padding: var(--space-8) 0;
}

/* Vertical timeline — a real Navigation+Flow component from the design
   system (dot + connector line), used here instead of a static "big
   number" card since the content is genuinely chronological. */
.site-about-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 84rem;
}

.site-about-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: var(--space-6);
  padding-bottom: var(--space-7);
}

.site-about-timeline__item:last-child {
  padding-bottom: 0;
}

.site-about-timeline__marker {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Connector line — brand gradient, runs from each dot down to the next.
   Stops short of the last item (no line trailing off past "Today"). */
.site-about-timeline__item:not(:last-child) .site-about-timeline__marker::after {
  content: '';
  position: absolute;
  top: 1.6rem;
  bottom: calc(var(--space-7) * -1);
  width: 2px;
  background: linear-gradient(to bottom, var(--v), var(--a));
  opacity: 0.4;
}

.site-about-timeline__dot {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--gr);
  box-shadow: 0 0 0 4px var(--c1), 0 0 20px rgba(147, 39, 143, 0.5);
  flex-shrink: 0;
  z-index: 1;
}

.site-about-timeline__date {
  font-family: var(--fm);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--a);
  margin: 0 0 var(--space-2);
}

.site-about-timeline__title {
  font-family: var(--fd);
  font-size: clamp(2.2rem, 2.8vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--txt);
  margin: 0 0 var(--space-3);
}

.site-about-timeline__content p {
  font-family: var(--fm);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--t2);
  margin: 0;
}

/* ── MISSION & VISION ─────────────────────────────── */

.site-about-mv {
  position: relative;
  overflow: hidden;
  background: var(--c0);
  padding: var(--space-8) 0;
}

.site-about-mv::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 70% 60% at 15% 30%,
    rgba(147, 39, 143, 0.16) 0%,
    transparent 60%
  ),
  radial-gradient(
    ellipse 70% 60% at 85% 70%,
    rgba(31, 147, 255, 0.14) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.site-about-mv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.site-about-mv__card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}

/* Brand-object icon (assets/svg/shapes/, pulled from the design system's
   Shape Library) — Mission gets the bolt (the same mark at the heart of
   the logo), Vision gets the spotlight beam. */
.site-about-mv__icon {
  display: block;
  height: 5.6rem;
  width: auto;
  margin-bottom: var(--space-4);
}

.site-about-mv__title {
  position: relative;
  font-family: var(--fd);
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--txt);
  margin: 0 0 var(--space-4);
}

.site-about-mv__card p {
  position: relative;
  font-family: var(--fm);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--t2);
  margin: 0;
}

/* ── OUR VALUES ───────────────────────────────────── */

.site-about-values {
  position: relative;
  overflow: hidden;
  background: var(--c1);
  padding: var(--space-8) 0;
}

.site-about-values::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 60% 50% at 90% 10%,
    rgba(147, 39, 143, 0.14) 0%,
    transparent 65%
  );
  pointer-events: none;
}

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

.site-about-values__card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.site-about-values__card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}

/* Brand-object icon per value, from the same Shape Library. */
.site-about-values__icon {
  display: block;
  height: 4rem;
  width: auto;
  margin-bottom: var(--space-3);
}

.site-about-values__title {
  position: relative;
  font-family: var(--fd);
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--txt);
  margin: 0 0 var(--space-3);
}

.site-about-values__card p {
  position: relative;
  font-family: var(--fm);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--t2);
  margin: 0;
}

/* ── TEAM ─────────────────────────────────────────── */

.site-about-team {
  background: var(--c0);
  padding: var(--space-8) 0;
}

.site-about-team__intro {
  max-width: 64rem;
  margin-bottom: var(--space-7);
}

.site-about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6) var(--space-5);
}

.site-about-team__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--space-4);
  background: var(--c2);
}

.site-about-team__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Design-system "Corner Frame" decorative overlay (assets/svg/shapes/corner-frame.svg) —
   aspect-ratio-flexible by design (preserveAspectRatio="none" on the source SVG), used
   here as-is rather than reinvented decoration. See reference_brand_objects_usage. */
.site-about-team__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.site-about-team__name {
  font-family: var(--fd);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--txt);
  margin: 0 0 0.4rem;
}

.site-about-team__role {
  font-family: var(--fm);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--t3);
  margin: 0;
}

/* ── RESPONSIVE ───────────────────────────────────── */

@media (max-width: 1100px) {
  .site-about-values__grid,
  .site-about-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .site-about__split {
    grid-template-columns: 1fr;
  }

  .site-about__split .site-about__head,
  .site-about__split .site-about__body {
    grid-column: 1;
    grid-row: auto;
  }

  .site-about__media,
  .site-about-who__collage {
    grid-column: 1;
    grid-row: auto;
    order: -1;
  }

  .site-about-mv__grid {
    grid-template-columns: 1fr;
  }

  .site-about-timeline__item {
    grid-template-columns: 3rem 1fr;
    column-gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .site-about-who__collage {
    padding-bottom: var(--space-5);
    padding-left: var(--space-5);
  }
}

@media (max-width: 480px) {
  .site-about-values__grid,
  .site-about-team__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .site-about-intro,
  .site-about-who,
  .site-about-story,
  .site-about-mv,
  .site-about-values,
  .site-about-team {
    padding: var(--space-7) 0;
  }
}

/* ── REDUCED MOTION ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .site-about__heading {
    animation: none;
  }

  .site-about-values__card {
    transition: none;
  }
}