/* sections/components.css
 *
 * Reusable component styles consumed across multiple pages. Each
 * block here corresponds to one Astro component under
 * `src/components/`:
 *
 *   .ays-faq-* / .faq-section*    — AysFaqSection
 *   .ays-light .faq-item *        — AysFaqItem (light-theme look)
 *   .callout / .callout-text      — AysCallout
 *   .feature-card / .feature-card-*  — AysFeatureCard
 *
 * Add a new block here when a new shared visual component is
 * extracted. Page-specific overrides on these components (e.g.
 * how /pricing scopes feature-card differently) belong in the
 * matching page CSS file — not here.
 *
 * Load order in Layout.astro: 2nd (after legacy-dark primitives,
 * before page-specific home.css / pricing.css overrides).
 */

/* ── AysFaqSection — titled FAQ group ──
 * Section header (purple title) above a flat list of items. Used by
 * /faq (multiple sections) and /pricing (single section, replacing
 * the bespoke FAQ rendering). Per-item visual treatment comes from
 * the `.ays-light .faq-item` block below (AysFaqItem's canonical
 * light-theme look), so AysFaqSection owns layout (header + grid /
 * split variants) and nothing about how each item paints.
 *
 * Title color uses a light-theme token because the canonical FAQ
 * surface renders on a light background. */
/* Container width matched to AysPageHero's content container so the
 * hero copy and the FAQ list sit at the same visual width. */
.ays-faq-container {
  max-width: 820px;
}
/* The 820px `.ays-faq-container` already constrains visual width —
 * the section's inline rhythm tokens (80px desktop / 56px tablet)
 * are redundant once the container caps. Drop them so the FAQ list
 * edges align with the hero copy edges. Mobile (≤768) gets its
 * breathing back from the rhythm token so content doesn't touch
 * screen edges. */
.ays-faq-wrap {
  padding-inline: 0;
}
@media (max-width: 768px) {
  .ays-faq-wrap {
    padding-inline: var(--ays-section-padding-inline);
  }
}
/* Each AysFaqSection renders a `<section>`, which would otherwise
 * inherit the base `section { padding: rhythm }` rule and add 80px
 * insets per section. Strip the inherited padding; the outer
 * `.ays-faq-wrap` already provides vertical breathing for the whole
 * FAQ block. The first section sits flush below the wrap's padding;
 * subsequent sections get 80px breathing above them via the
 * adjacent-sibling selector. */
.faq-section {
  padding: 0;
  margin-bottom: 0;
}
.faq-section + .faq-section {
  margin-top: 80px;
}
/* Split layout: title left column, items right column. Mirrors the
 * Home FAQ block (`.ays-home-faq-grid`) so /pricing — which only
 * renders one section — feels like a single-block FAQ rather than
 * the stacked-sections rhythm of /faq. */
.faq-section--split {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.faq-section--split .faq-section-header {
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  .faq-section--split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .faq-section--split .faq-section-header {
    margin-bottom: 24px;
  }
}
.faq-section-header {
  margin-bottom: 24px;
}
.faq-section-title {
  color: var(--ays-text-brand);
  margin: 0;
}

/* ── AysFaqItem (light-theme canonical look) ──
 * The boxed dark-theme primitive in `sections/legacy-dark.css` is
 * the structural fallback; every current consumer renders the item
 * inside an `.ays-light` ancestor and expects the line-list, flush-
 * left treatment defined here. By scoping these rules to
 * `.ays-light .faq-item` (instead of a per-wrapper class), the look
 * applies transversally: Home's `.ays-home-faq-list`, /faq + /pricing
 * via `AysFaqSection`, and /support's `.ays-support-faq-list` all
 * pick up the same component look without repeating overrides.
 *
 * Visual contract:
 *  - No box: transparent background, no border / radius, overflow
 *    visible so the `+` marker can sit at the row edge.
 *  - List dividers: top border on each item; the last item gets a
 *    bottom border so the group reads as bounded.
 *  - Flush-left summary + answer: no lateral padding, vertical
 *    rhythm only (20px around the question, 24px below the answer). */
.ays-light .faq-item {
  background: transparent;
  border: none;
  border-top: 1px solid var(--ays-border-base);
  border-radius: 0;
  overflow: visible;
}
.ays-light .faq-item:last-child {
  border-bottom: 1px solid var(--ays-border-base);
}
.ays-light .faq-item summary {
  padding: 20px 0;
  color: var(--ays-text-primary);
}
.ays-light .faq-item summary::after {
  color: var(--ays-text-brand);
  font-size: 22px;
}
.ays-light .faq-item summary:hover {
  color: var(--ays-text-brand);
}
/* AysFaqItem wraps its slot in `<div class="bds-p2">` — typography
 * comes from the BDS utility; we only own the layout (flush-left,
 * bottom breathing before the next divider). */
.ays-light .faq-item .bds-p2 {
  padding: 0 0 24px;
  color: var(--ays-text-secondary);
}
/* Reset the legacy-dark lateral padding AND typography on `<p>`
 * children — consumers like /support inject `<p>` tags inside the
 * slot. Legacy-dark's `.faq-item p` rule applies direct
 * `font-size: 13px / font-weight: 300 / line-height: 1.65 / color:
 * var(--muted)` declarations that win over the `.bds-p2` wrapper's
 * inherited typography (specificity 0,1,1 beats `.bds-p2`'s 0,1,0).
 * Resetting to `inherit` lets the BDS p2 utility cascade through
 * properly; padding stays explicitly 0 to preserve the flush-left
 * intent of the line-list look. */
.ays-light .faq-item p {
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* ──────────────────────────────────────────────────────────
   AysCallout — italic emphasis statement with purple left border
   Used inside long-form prose on /why (and /about, eventually)
   to set a key idea apart from the surrounding paragraphs.
   Figma reference nodes: 188:1781, 188:1865, 188:1935, 188:1955.
   ────────────────────────────────────────────────────────── */
.callout {
  background: var(--ays-color-black-004);
  border-left: 2px solid var(--ays-text-brand);
  padding: 24px;
}
.callout-text {
  font-family: var(--font-marketing-heading);
  font-size: var(--fs-p1);
  font-weight: var(--fw-p-regular);
  font-style: italic;
  line-height: var(--lh-heading);
  color: var(--ays-text-primary);
}

/* ──────────────────────────────────────────────────────────
   AysFeatureCard — light-themed eyebrow card
   Used by /why and /about redesigns (and any future page that
   wants the Figma feature-card pattern). Parallel to AysPillar
   (the dark icon card Home still uses). All tokens resolve to
   their light-on-cream variants under an .ays-light ancestor.
   Figma reference nodes: 188:7050 (/about), 188:1812, 188:1887,
   188:1901 (/why).
   ────────────────────────────────────────────────────────── */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--ays-color-black-004);
  border: 1px solid var(--ays-border-base);
  border-radius: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Same lift-on-hover as the Home pillar / start cards. */
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px oklch(27.12% 0.0201 311.81 / 0.08);
}
.feature-card-stat {
  font-family: var(--font-marketing-heading);
  /* Fluid stat type. BDS does not expose a fluid scale; the marketing
   * --fs-* tokens are stepped per breakpoint. Keeping the clamp here
   * because the visual intent ("hero-sized stat that scales with the
   * viewport") doesn't fit the stepped scale. Logged in
   * docs/bds-coverage-gaps.md under "Fluid typography". */
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--fw-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--ays-text-brand);
}
.feature-card-icon {
  display: flex;
  align-items: center;
  width: 48px;
  height: 48px;
}
.feature-card-icon img,
.feature-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.feature-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature-card-eyebrow {
  font-family: var(--font-marketing-body);
  font-size: var(--fs-p3);
  font-weight: var(--fw-p-regular);
  /* Figma-specified caps tracking 0.071em — looser than BDS's
   * --ls-caps (0.05em). Kept custom to match the Figma source. */
  letter-spacing: 0.071em;
  text-transform: uppercase;
  color: var(--ays-text-brand);
  line-height: var(--lh-heading);
  margin: 0;
}
.feature-card-title {
  font-family: var(--font-marketing-heading);
  font-size: var(--fs-h4);
  /* Figma sets heading at 700 (vs BDS h4 default 600). Reach for
   * h3's weight token (also 700) instead of hardcoding the number. */
  font-weight: var(--fw-h3);
  line-height: var(--lh-heading);
  color: var(--ays-text-primary);
  margin: 0;
}
.feature-card-text {
  font-family: var(--font-marketing-body);
  font-size: var(--fs-p2);
  font-weight: var(--fw-p-regular);
  line-height: var(--lh-body);
  /* Card body uses --ays-text-secondary to match the established
   * light-card convention (Home/Pricing FAQ items use the same
   * token). Slight drift vs Figma's `#2a242e` (= --ays-text-primary)
   * accepted for site cohesion; both contrast safely on cream. */
  color: var(--ays-text-secondary);
  margin: 0;
}