/* sections/about.css
 *
 * /about redesign — Figma node 188:7369.
 *
 * Every selector is scoped to `.ays-light` so the dark legacy rules
 * for the previous /about (`.about-story`, `.about-vision`,
 * `.about-team`, `.team-card`, `.team-avatar`) that still live in
 * public/css/page.css stay inert under the new light-themed page.
 * Markup lives in src/pages/about.astro + AysFeatureCard +
 * AysCallout. Hero and final CTA stay dark via AysPageHero /
 * AysCTASection — both render outside the `.ays-light` wrapper.
 *
 * Class convention:
 *   .ays-light .ays-about-{section}-{element}   — page sub-block
 *
 * Sub-block names mirror Figma's container labels so the DOM
 * inspector identifies the page + section + element at a glance.
 *
 * Load order in Layout.astro: 5th (last — overrides everything that
 * needs to be overridden for the light /about experience).
 */

/* ── Shared 840px content cap ──
 * Figma constrains every section to a 840px content frame nested
 * inside the section's rhythm padding. The section padding comes
 * from the global `--ays-section-padding-*` rule on `section`; the
 * 840px cap lives here on the per-section container. */
.ays-about-intro-container,
.ays-about-promise-container,
.ays-about-vision-container,
.ays-about-trust-container {
  max-width: 840px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════
   SECTION 1 — Intro (founder + origin). Figma 188:6913.
   Two stacked sub-blocks separated by Figma's 65px inter-block gap.
   ══════════════════════════════════════════ */
.ays-about-intro-container {
  display: flex;
  flex-direction: column;
  gap: 65px;
}

/* Founder sub-block — Figma 188:6913 Container 1.
 * Avatar pinned to the start of the column; heading and prose
 * stacked beneath it. The Figma frame nests the inner content
 * block (`Content`) as items-center, but the heading itself uses
 * full-width left-aligned text so the eye lands on the avatar +
 * heading edge. Keep the same alignment here. */
.ays-about-founder {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Founder portrait — Figma 188:6916 renders Elizabeth's portrait at
 * 96×96 round. Source asset is `src/assets/elizabeth-ceo.png`,
 * optimized by astro:assets at build time. The `<img>` element keeps
 * `object-fit: cover` so any future photo crop stays balanced inside
 * the circle without rebuilding tokens. */
.ays-about-founder-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
/* Section titles — every `.ays-about-*-title|heading` in the markup
 * already carries `.bds-h4`, which provides font-family / font-size /
 * line-height. The two real overrides vs BDS h4 are:
 *   - font-weight: var(--fw-h3) → 700 (BDS h4 default 600); Figma uses
 *     `Poltawski_Nowy:Bold` for /about section headings.
 *   - letter-spacing: var(--ls-tight) → -0.02em (BDS --ls-marketing 0);
 *     Figma renders headings at tracking -0.72px on 36px (= -0.02em).
 * Mirrors the /why pattern (`.ays-why-*-title`) in `page.css`. */
.ays-light .ays-about-founder-heading,
.ays-light .ays-about-origin-title,
.ays-light .ays-about-manifesto-title,
.ays-light .ays-about-features-title,
.ays-light .ays-about-vision-title,
.ays-light .ays-about-privacy-title,
.ays-light .ays-about-community-title {
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-tight);
  color: var(--ays-text-primary);
  margin: 0;
}
.ays-about-founder-prose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ays-light .ays-about-founder-prose p {
  color: var(--ays-text-primary);
  margin: 0;
}

/* Origin sub-block — Figma 188:6913 Container 2.
 * Heading spans, then a 2-col grid: prose left, prose + callout right. */
.ays-about-origin {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ays-about-origin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.ays-about-origin-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ays-light .ays-about-origin-col p {
  color: var(--ays-text-primary);
  margin: 0;
}

/* ══════════════════════════════════════════
   SECTION 2 — Promise (manifesto + features + inline CTA).
   Figma 188:6952. TINTED with `--ays-color-black-004` wash.
   Three stacked sub-blocks separated by Figma's 56px inter-block gap.
   ══════════════════════════════════════════ */
.ays-light .ays-about-promise {
  background: var(--ays-color-black-004);
}
.ays-about-promise-container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Manifesto sub-block — Figma 188:6952 Container 1.
 * Heading + 2-col grid (prose left, callout right). */
.ays-about-manifesto {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ays-about-manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.ays-about-manifesto-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ays-light .ays-about-manifesto-col p {
  color: var(--ays-text-primary);
  margin: 0;
}

/* All /about feature cards drop the 1px border (per design request).
 * The `--ays-color-black-004` background wash stays, so cards still
 * read slightly darker than the tinted sections they sit on. Scoped
 * to `.ays-light` and shipped only via about.css, so it never reaches
 * /why or /pricing feature cards. Higher specificity than the base
 * `.feature-card` rule in components.css, so the border is dropped
 * regardless of stylesheet order. */
.ays-light .feature-card {
  border: none;
}

/* Features sub-block — Figma 188:6952 Container 2.
 * Heading + a 2×2 grid of four equal feature cards. (The original
 * Figma had one wide row-spanning card above a 3-col row; the layout
 * was flattened to a uniform 2-column grid — no card spans.) The
 * cards' background wash stacks on top of the section tint (cards
 * read slightly darker), matching the source. */
.ays-about-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ays-about-features-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Inline CTA — Figma 188:7012.
 * Centered heading + button. Lives at the bottom of the tinted
 * promise section so the eye lands on the button before scrolling
 * into the next (vision) section. */
.ays-about-promise-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* `.bds-h6` (in markup) provides font-family / font-size / line-height.
 * Override is the weight (Figma h6 framer-text renders at 700, BDS h6
 * default is 600) plus centering and the page text color. */
.ays-light .ays-about-promise-cta-heading {
  font-weight: var(--fw-h3);
  color: var(--ays-text-primary);
  margin: 0;
  text-align: center;
}

/* ══════════════════════════════════════════
   SECTION 3 — Vision. Figma 188:7020.
   Single block, white BG (no tint). Same 2-col split as Origin /
   Manifesto so the rhythm reads consistent across white sections.
   ══════════════════════════════════════════ */
.ays-about-vision-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ays-about-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.ays-about-vision-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ays-light .ays-about-vision-col p {
  color: var(--ays-text-primary);
  margin: 0;
}

/* ══════════════════════════════════════════
   SECTION 4 — Trust (privacy + community + inline CTA).
   Figma 188:7037. TINTED with `--ays-color-black-004` wash.
   Two stacked sub-blocks separated by 56px inter-block gap.
   ══════════════════════════════════════════ */
.ays-light .ays-about-trust {
  background: var(--ays-color-black-004);
}
.ays-about-trust-container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Privacy sub-block — Figma 188:7037 Container 1.
 * Heading + body + h6 stacked, then a 3-card row (each card
 * eyebrow + title + body, no icon). */
.ays-about-privacy {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ays-about-privacy-heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ays-light .ays-about-privacy-heading p {
  color: var(--ays-text-primary);
  margin: 0;
}
/* Same logic as `.ays-about-promise-cta-heading`: only the weight is
 * an override vs `.bds-h6`. No centering here — the privacy heading
 * stack is left-aligned. */
.ays-light .ays-about-privacy-h6 {
  font-weight: var(--fw-h3);
  color: var(--ays-text-primary);
  margin: 0;
}
.ays-about-privacy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Community sub-block — Figma 188:7037 Container 2.
 * Centered heading + 2 paragraphs, then 3-card row (each card
 * eyebrow + body, icon slot reserved but unused — icons deferred
 * to follow-up alongside the privacy section's content art), then
 * a centered inline CTA button. */
.ays-about-community {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ays-about-community-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
}
.ays-light .ays-about-community-heading p {
  color: var(--ays-text-primary);
  margin: 0;
}
.ays-about-community-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ays-about-community-cta {
  display: flex;
  justify-content: center;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   Tablet (≤1024): collapse 2-col splits to 1 col; keep 3-up cards
   but allow 2-col fallback for breathing room.
   Mobile (≤768): single column for everything; tighten inter-block
   gaps so sub-blocks don't oversize on small screens.
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ays-about-origin-grid,
  .ays-about-manifesto-grid,
  .ays-about-vision-grid {
    grid-template-columns: 1fr;
  }
  .ays-about-features-list,
  .ays-about-privacy-cards,
  .ays-about-community-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .ays-about-intro-container {
    gap: 48px;
  }
  .ays-about-promise-container,
  .ays-about-trust-container {
    gap: 40px;
  }
  .ays-about-features-list,
  .ays-about-privacy-cards,
  .ays-about-community-cards {
    grid-template-columns: 1fr;
  }
}