/*
 * The main home page (KID-1324, the canvas's HomeB board). Loaded by that page alone, after site.css, whose
 * tokens.css declares the `pages` layer.
 */

@layer pages {
  .kp-home__title {
    max-width: 47.5rem;
    font-size: var(--kp-text-h2);
  }

  /* Hero: the promise centered, then the apps' rail across the full width */
  .kp-home-hero {
    padding-block: clamp(2rem, 0.5rem + 4vw, 4.5rem) var(--kp-section);
  }

  .kp-home-hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.375rem;
    text-align: center;
  }

  .kp-home-hero__eyebrow {
    background: var(--kp-alt);
    color: var(--kp-brand-2);
    text-transform: var(--kp-eyebrow-case);
    letter-spacing: var(--kp-eyebrow-tracking);
  }

  .kp-home-hero h1 {
    max-width: 61.25rem;
    font-size: var(--kp-text-display-1);
    line-height: var(--kp-display-leading);
    letter-spacing: var(--kp-display-tracking-tight);
  }

  .kp-home-hero__lead {
    max-width: 45rem;
    color: var(--kp-ink-2);
    font-size: var(--kp-text-lead);
    line-height: var(--kp-body-leading);
  }

  .kp-home-hero__actions {
    justify-content: center;
  }

  .kp-home-hero__apps {
    margin-block-start: 3.5rem;
  }

  /* All the apps fit across a desktop; on narrower screens the rail scrolls with the next one peeking */
  .kp-home-hero__apps .kp-rail__head {
    display: none;
  }

  .kp-home-hero__apps .kp-rail__track > * {
    flex: 1 0 var(--kp-rail-item);
  }

  .kp-home-hero__apps .kp-app-card__stage {
    height: clamp(18.75rem, 16.9rem + 7.6vw, 23.75rem);
  }

  /* Built for everyone who helps: four tiles, two across on tablets, four on desktops */
  .kp-home-bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
  }

  @media (min-width: 40rem) {
    .kp-home-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .kp-home-bento {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* The assistant demo spans the grid, above the tiles (KID-1339) */
  .kp-home-bento__demo {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .kp-home-bento__tile {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-3);
    min-width: 0;
    padding: var(--kp-space-7);
    border-radius: var(--kp-radius-lg);
    background: var(--kp-alt);
  }

  .kp-home-bento__tile h3 {
    font-size: 1.375rem;
  }

  .kp-home-bento__tile p {
    color: var(--kp-ink-2);
    font-size: 0.9375rem;
    line-height: var(--kp-body-leading);
  }

  .kp-home-bento__tile--watch {
    padding-block-end: 0;
    overflow: hidden;
  }

  .kp-home-bento__languages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kp-space-2);
    margin-block-start: auto;
  }

  .kp-home-bento__languages li {
    padding: 0.4375rem 0.6875rem;
    border-radius: var(--kp-radius-pill);
    background: var(--kp-card);
    font-size: 0.875rem;
    font-weight: 700;
  }

  .kp-home-bento__activity {
    margin-block-start: auto;
    padding: var(--kp-space-4);
  }

  .kp-home-bento__activity .kp-live-activity__timer {
    font-size: 1.375rem;
  }

  .kp-home-bento__tile--free {
    background: var(--kp-yellow-soft);
    color: var(--kp-on-soft);
  }

  .kp-home-bento__tile--free h3,
  .kp-home-bento__tile--free p,
  .kp-home-bento__tile--free .kp-cta {
    color: inherit;
  }

  .kp-home-bento__tile--free .kp-cta {
    margin-block-start: auto;
  }

  /* What families say: three figures, then the reviews */
  .kp-home-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
  }

  @media (min-width: 48rem) {
    .kp-home-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .kp-home-stats li {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: var(--kp-space-7);
    border-radius: var(--kp-radius-lg);
    background: var(--kp-card);
  }

  .kp-home-stats strong {
    color: var(--kp-head);
    font-family: var(--kp-font-display);
    font-size: var(--kp-text-stat);
    font-weight: 900;
    line-height: 1;
  }

  .kp-home-stats span {
    font-weight: 700;
  }

  .kp-home-stats small {
    color: var(--kp-muted);
    font-size: 0.875rem;
  }

  .kp-home-reviews,
  .kp-home-posts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
  }

  @media (min-width: 48rem) {
    .kp-home-reviews,
    .kp-home-posts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Free tools: the featured tool two columns wide and two rows tall, then four text cards */
  .kp-home-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
  }

  @media (min-width: 40rem) {
    .kp-home-tools {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kp-tool-card--featured {
      grid-column: span 2;
    }
  }

  @media (min-width: 64rem) {
    .kp-home-tools {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kp-tool-card--featured {
      grid-row: span 2;
    }
  }
}