/*
 * about.css — About page (Template Name: About)
 * Figma: "About Page" (node 1031:117057, sm/600px symbol; 1031:117059, 1440px
 * instance). Page-specific layout only — the BaseModule=About / BaseModule=
 * abouthero card styling itself lives in components.css, per this project's
 * standing rule (Components-page components → components.css, unscoped).
 */

.about-main {
  display: flex;
  flex-direction: column;
}

/* No dot texture on this page — see the ampm_about_body_class() filter in
   functions.php. Figma's About Page uses a flat Color/Surface/Page fill
   throughout; this matters most directly behind the fixed nav, since the About
   Hero (below) intentionally has no card background of its own to mask the dots
   the way every other page's opaque hero card does. background-color is left
   alone (still --color-surface-page from the base body rule in components.css). */
body.about-page-body {
  background-image: none;
}

/* Hero clearance — nav is position:fixed, so the hero needs its own top offset or
   its content sits behind the bar. Same technique as front-page's .work-section:
   nav height (responsive) + a 16px gap. */
.about-main .base-module--about-hero {
  margin-top: calc(var(--nav-height) + var(--size-16));
}

/* ─── HIGHLIGHTS SECTION ─────────────────────────────────────────────────── */
/* max-width:none + margin:0 cancel the generic `section, .wp-block-group { max-
   width: var(--container); margin: 0 auto }` rule in components.css (a sitewide
   default that centers bare <section> elements) — this site is left-aligned
   throughout, and this section shouldn't be centered/width-capped at all. Only the
   horizontal padding should come from a token — Container Horizontal Padding 2, not
   Padding/Section (which is a much larger value meant for full section gutters). */
.about-highlights {
  max-width: none;
  margin: 0;
  padding: var(--space-section) var(--padding-container-horizontal-2);
  /* Opaque fill — blocks the body's dot-texture background from showing through
     this section, rather than relying on transparency (the previous margin/
     max-width leak masked this, but the dots were never actually gone). */
  background: var(--color-surface-page);
}

/* "Highlights" label — Figma: small Overline-styled text above the grid (16px,
   weight 200), not a full heading — matches the Overline type family used for
   small section eyebrows elsewhere on the site, own rule since it references
   global tokens directly rather than a page-scoped alias. */
.about-highlights__eyebrow {
  display: block;
  font-family: var(--font-standard);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--size-16);
}

/* Grid: sm/md auto-fill wraps 2 (occasionally 3) uniform columns, matching the
   600px Figma mockup where all 12 cards are the same size. Track upper bound is
   288px (Figma's own sm-tier card width) rather than 1fr — with 1fr, a row left
   under-filled by auto-fill (e.g. the last 2 cards alone in a row with no others to
   share it) had nothing to stop those tracks from growing to fill all remaining
   container width; capping the max makes the leftover space blank gutter instead
   of oversized cards. At lg+ (1024px — corrected 2026-09-25, was 1440px; the only
   wider Figma mockup available happens to be a 1440px instance, but lg's real
   min-width is 1024px, same fix applied to .cs-context and the rest of the site's
   breakpoint system), the layout changes shape entirely — a fixed 10-column grid
   where normal cards span 2 (5 visual columns, 2 rows of 5) and the last 2 cards
   span 5 each (half-width, side by side, own row). */
.about-highlights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 288px));
  gap: var(--size-16);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .about-highlights__grid {
    grid-template-columns: repeat(10, 1fr);
  }
  .about-highlights__grid .base-module--about {
    grid-column: span 2;
  }
  .about-highlights__grid .base-module--about-wide {
    grid-column: span 5;
  }
}

/* ─── EXPLORE CASE STUDIES ───────────────────────────────────────────────── */
/* Same carousel pattern as case-study.css's .cs-more-studies (Figma: identical
   "Other Case Studies" component structure) — own page-specific wrapper here
   since About has its own dedicated Figma page now, reusing the shared
   .work-grid / .base-module--feature-1 / .work-dots components from
   components.css unchanged (including ampm_work_dots_js()'s carousel behavior,
   which pairs any .work-grid with its next-sibling .work-dots automatically). */
.about-explore-studies {
  background: var(--color-surface-primary);
  padding: var(--space-section-large) var(--padding-section);
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-24);
}
.about-explore-studies__label {
  display: block;
  font-family: var(--font-standard);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
/* Left edge keeps the normal inset from this section's own left padding
   (--padding-section); only the right side breaks out so cards can bleed to the
   viewport edge while scrolling — same fix already used for .cs-more-studies. */
.about-explore-studies .work-grid {
  display: flex;
  flex-direction: row;
  gap: var(--size-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-right: calc(-1 * var(--padding-section));
  padding-right: var(--padding-section);
}
.about-explore-studies .work-grid::-webkit-scrollbar { display: none; }
.about-explore-studies .work-grid .base-module {
  flex-shrink: 0;
  width: var(--size-264);
  scroll-snap-align: start;
}