/* sections/home.css
 *
 * All styling for the Home page (`src/pages/index.astro` /
 * `src/components/pages/Home.astro`). Scoped under
 * `.ays-home-{section}-{element}` wrappers so every selector tells
 * you which Home section it belongs to.
 *
 * Home also re-themes shared primitives (`.faq-item`, `.pillar`,
 * `.start-card`, `.btn-primary`) — those overrides live here too,
 * scoped under the matching `.ays-home-*` wrapper. The primitives
 * themselves are defined in sections/legacy-dark.css.
 *
 * Responsive rules for Home sit at the bottom of this file (kept
 * together to avoid hunting across files for the same selector's
 * breakpoint behavior).
 *
 * Load order in Layout.astro: 3rd (after legacy-dark + components,
 * so Home's overrides on primitives win the cascade).
 */

/* ═════════════════════════════════════════
   HOME — `ays-home-*` SECTION STYLES
   Section wrappers use the `ays-home-{section}-{element}` convention.
   Component primitives reused across pages (`.pillar`, `.start-card`,
   `.faq-item`, `.btn-primary`) keep their flat names; Home-specific
   overrides scope through the section wrapper instead.
═════════════════════════════════════════ */

/* Shared container layout for every Home section — replaces the generic
 * `.container` utility on the Home page so the naming is self-explanatory.
 * Hero owns its own `*-container` rule because of the two-column grid. */
.ays-home-social-container,
.ays-home-why-container,
.ays-home-start-container,
.ays-home-faq-container {
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Social proof bar ── */
.ays-home-social {
  background: transparent;
  /* This block is a <div>, so it can't lean on the `section` selector
     for the global cadence. Opting into the rhythm tokens keeps it in
     lockstep with every sibling section. */
  padding: var(--ays-section-padding-block) var(--ays-section-padding-inline);
}
.ays-home-social-container {
  display: flex;
  align-items: center;
  gap: 40px;
}
.ays-home-social-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ays-text-brand);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Carousel wrapper: column-flex that hosts the rotating quote area
   on top and the pagination dots underneath. Owns the `flex: 1`
   that used to live on the quotes container directly. */
.ays-home-social-carousel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Carousel container.
   Mobile-first default: single-cell grid where all quotes stack in
   the same position and the active one fades over the others.
   Desktop (`min-width: 769px`) below overrides the grid to 3 columns
   and hides inactive slots entirely so 3 quotes show at once and
   the bar matches the Figma's static-3 layout. The `order` style
   that JS writes on each active slot governs which 3 of the 6 are
   currently in the window, so the carousel can rotate by 1 instead
   of paging by 3. */
.ays-home-social-quotes {
  position: relative;
  min-height: 1em;
  display: grid;
}
.ays-home-social-quotes blockquote {
  grid-area: 1 / 1;
  font-size: 14px;
  font-style: italic;
  font-family: var(--serif);
  color: var(--ays-text-primary);
  font-weight: 400;
  line-height: 1.55;
  padding: 0 28px;
  border-left: 1px solid var(--ays-border-base);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.ays-home-social-quotes blockquote.is-active {
  opacity: 1;
  visibility: visible;
}

/* Tablet (≥769px) base: 2-column grid that shows 2 quotes at once.
   Inactive slots drop out of the layout entirely; the `order` JS
   writes on active slots maintains the sequence even when the
   window wraps around the array. The pagination dots are hidden
   here too — once more than one quote shows simultaneously, the
   "there is more" cue is implicit and the dots become visual
   clutter. Desktop below bumps the column count to 3; everything
   else inherits from here. */
@media (min-width: 769px) {
  .ays-home-social-quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ays-home-social-quotes blockquote {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .ays-home-social-quotes blockquote:not(.is-active) {
    display: none;
  }
}

/* Desktop: bump to 3 columns. */
@media (min-width: 1025px) {
  .ays-home-social-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Pagination dots — 8px decorative markers under the carousel,
   mobile-only. Hidden by default; the mobile media query (≤768px,
   further down) re-enables them. The dots are hidden from assistive
   tech (`aria-hidden="true"` in the markup) because the carousel's
   `aria-live` region already announces the new quote on rotation. */
.ays-home-social-dots {
  display: none;
  gap: 8px;
  align-items: center;
}
.ays-home-social-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ays-border-base);
  transition: background 0.3s ease;
}
.ays-home-social-dot.is-active {
  background: var(--ays-text-brand);
}

/* ── How it works ──
 * Section anatomy: `-container` is the 2-col row (heading + content block
 * on the left, image on the right). It owns its own container rule — like
 * the hero — instead of sharing the generic max-width one, because of the
 * grid. The left column is a `-sub-container` grouping `-heading` +
 * `-content` (the steps); the image is the right column. */
.ays-home-how {
  background: transparent;
}
.ays-home-how-container {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  /* Stretch so the image cell tracks the height of the steps column. */
  align-items: stretch;
}
.ays-home-how-sub-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ays-home-how-heading {
  /* Heading sits as one flex item so the sub-container's 32px gap only
     applies between this block and the content, not between eyebrow and
     title. */
  display: flex;
  flex-direction: column;
}
.ays-home-how-heading .section-label {
  margin-bottom: 14px;
}
.ays-home-how-heading .section-title {
  margin-bottom: 0;
}
.ays-home-how-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ays-home-how-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ays-home-how-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ays-color-purple-100);
  border: 1px solid var(--ays-color-purple-200);
  color: var(--ays-text-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
}
.ays-home-how-step-content h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ays-text-primary);
  margin-bottom: 8px;
}
.ays-home-how-step-content p {
  font-size: 16px;
  color: var(--ays-text-secondary);
  line-height: 1.5;
  font-weight: 400;
}
.ays-home-how-image {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ays-home-how-image img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* ── Why AYS — pillars (2×2 grid) ──
 * `.pillar` is the primitive owned by AysPillar; home-specific styling
 * scopes through `.ays-home-why-grid`. */
.ays-home-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 56px;
}
.ays-home-why-grid .pillar {
  background: var(--ays-surface-base);
  border-radius: 16px;
  padding: 40px 32px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ays-home-why-grid .pillar::before {
  display: none;
}
.ays-home-why-grid .pillar:hover {
  background: var(--ays-surface-base);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px oklch(27.12% 0.0201 311.81 / 0.08);
}
.ays-home-why-grid .pillar-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  display: block;
}
.ays-home-why-grid .pillar h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ays-text-primary);
  margin-bottom: 10px;
}
.ays-home-why-grid .pillar p {
  font-size: 16px;
  color: var(--ays-text-secondary);
  line-height: 1.55;
  font-weight: 400;
}

/* ── How to start (4-card row) ──
 * `.start-card` is the primitive owned by AysStartCard. Its base styles
 * are defined here once and reused inside `.ays-home-start-grid`. */
.ays-home-start {
  background: transparent;
}
.ays-home-start-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 56px;
}
.start-card {
  background: var(--ays-surface-base);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.start-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px oklch(27.12% 0.0201 311.81 / 0.08);
}
.start-card-icon {
  width: 48px;
  height: 48px;
  display: block;
}
.start-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ays-text-primary);
  margin: 0;
}
.start-card p {
  font-size: 15px;
  color: var(--ays-text-secondary);
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}
.start-card-note {
  font-size: 13px;
  color: var(--ays-text-tertiary);
  font-weight: 400;
  margin-top: auto;
  padding-top: 8px;
}

/* ── Home FAQ (two-column) ──
 * `.faq-item` is the primitive owned by AysFaqItem; the flat list of
 * dividers is a Home-specific styling that scopes through
 * `.ays-home-faq-list`. */
.ays-home-faq {
  background: transparent;
}
.ays-home-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.ays-home-faq-heading .section-title {
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: 0;
}
/* Home's FAQ list wrapper — pure layout (vertical stack, no gap so
 * the line-list dividers from `.ays-light .faq-item` read as one
 * continuous bounded list). Per-item visual treatment lives with
 * AysFaqItem in sections/components.css. */
.ays-home-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* ── Responsive: Home sections ── */
@media (max-width: 1024px) {
  .ays-home-how-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ays-home-how-image {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .ays-home-start-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ays-home-faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .ays-home-why-grid {
    grid-template-columns: 1fr;
  }
  .ays-home-start-grid {
    grid-template-columns: 1fr;
  }
}

/* Social proof shrinks at mobile to match the global `section`
   responsive rule (72px / 20px on mobile, set in ays-base.css).
   The horizontal flex (label | carousel) also collapses to a
   vertical stack so the label sits ABOVE the quote and the quote
   gets the full available width — the side-by-side layout breaks
   below ~600px because the quote's left border + 28px padding eat
   the column. */
@media (max-width: 768px) {
  /* On mobile the bar stacks vertically AND centers all of its
     children: label, the active quote text, and the dots row each
     sit on their own line, all horizontally centered. The container
     also pushes `text-align: center` down so the quote text inside
     the blockquote inherits the alignment without a dedicated rule.
     Section padding is handled globally via --ays-section-padding-*. */
  .ays-home-social-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .ays-home-social-quotes {
    width: 100%;
  }
  .ays-home-social-quotes blockquote {
    padding: 0;
    border-left: none;
  }
  /* The carousel wrapper centers its own children (the quotes grid
     and the dots row) so the dots block collapses to its intrinsic
     width and sits dead-centered under the quote. */
  .ays-home-social-carousel {
    align-items: center;
  }
  /* Re-enable the pagination dots — they only exist at this
     breakpoint, where the carousel shows one quote at a time and
     needs an explicit "there is more" cue. */
  .ays-home-social-dots {
    display: flex;
  }
}