/*
  Pages: true one-offs that belong to a single view. Every selector is rooted at
  [data-page="controller-action"] (set on <body> by _Layout). If a second page needs a
  rule, promote it to patterns.css.
*/
@layer pages {
  /* / — search first, followed by spaces and a single planning invitation. */
  [data-page="home-index"] .p-listing-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  }

  /* Inline padding keeps the search inside the glow rather than flush with its edges. */
  [data-page="home-index"] .p-home-intro {
    position: relative;
    isolation: isolate;
    padding: var(--space-8) var(--space-4);
  }

  /*
    The page's one flourish (principle 4: gradients belong to hero art): three brand washes
    behind the headline and search, strongest at the edges and faint where the text sits.
  */
  [data-page="home-index"] .p-home-intro::before {
    position: absolute;
    inset: 0;
    z-index: var(--z-behind);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(50% 80% at 8% 20%, var(--color-brand-glow-indigo), transparent 70%),
      radial-gradient(45% 70% at 94% 12%, var(--color-brand-glow-coral), transparent 70%),
      radial-gradient(60% 60% at 70% 100%, var(--color-brand-glow-teal), transparent 72%);
    content: "";
    pointer-events: none;
  }

  [data-page="home-index"] .p-home-intro > header {
    align-items: center;
    text-align: center;
  }

  [data-page="home-index"] .p-home-plan {
    display: grid;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-surface-subtle);
  }

  [data-page="home-index"] .p-home-plan > img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }

  @media (width >= 48em) {
    [data-page="home-index"] .p-home-intro {
      padding: var(--space-10) var(--space-8);
    }

    [data-page="home-index"] .p-home-plan {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      padding: var(--space-10);
    }
  }

  /* /investors — product thesis and pilot milestones */
  [data-page="home-investors"] .p-investor-hero,
  [data-page="home-investors"] .p-investor-split { display: grid; gap: var(--space-8); }
  [data-page="home-investors"] .p-investor-hero { align-items: center; }
  [data-page="home-investors"] .p-investor-thesis {
    padding: var(--space-8);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-subtle);
  }
  [data-page="home-investors"] .p-investor-flow { display: grid; gap: var(--space-8); list-style: none; padding: var(--space-0); margin: var(--space-0); }
  [data-page="home-investors"] .p-investor-flow li { display: flex; align-items: start; gap: var(--space-4); }
  [data-page="home-investors"] .p-investor-flow .c-badge { flex-shrink: 0; }
  [data-page="home-investors"] .p-investor-flow .c-body-sm { margin-top: var(--space-2); color: var(--color-text-secondary); }
  [data-page="home-investors"] .p-investor-split { padding-top: var(--space-8); border-top: var(--border-width) solid var(--color-border); }
  [data-page="home-investors"] .p-investor-cta { padding: var(--space-8); border-radius: var(--radius-xl); background: var(--color-surface-subtle); }
  [data-page="home-investors"] .c-button { white-space: normal; }
  @media (width >= 64em) {
    [data-page="home-investors"] .p-investor-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    [data-page="home-investors"] .p-investor-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  }

  /* /film — the brand film, its actions, and its transcript */
  [data-page="home-film"] .p-film-head { max-width: var(--container-prose); }
  [data-page="home-film"] .p-film { margin: var(--space-0); }
  [data-page="home-film"] .p-film__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    background: var(--color-surface-inverse);
    box-shadow: var(--shadow-lg);
  }
  [data-page="home-film"] .p-film-actions { align-items: start; }
  [data-page="home-film"] .p-film-transcript {
    max-width: var(--container-prose);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--color-border);
  }
  [data-page="home-film"] .p-film-transcript summary { cursor: pointer; min-height: var(--control-md); display: flex; align-items: center; }
  [data-page="home-film"] .p-film-transcript .p-prose { margin-top: var(--space-4); }

  /* /plan — gathering entry points */
  [data-page="plan-index"] .p-plan-hero,
  [data-page="plan-index"] .p-plan-journey,
  [data-page="plan-index"] .p-plan-resources,
  [data-page="plan-index"] .p-plan-questions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  [data-page="plan-index"] .p-plan-hero { align-items: center; gap: var(--space-8); }
  [data-page="plan-index"] .p-plan-hero .c-lead { max-width: 42ch; }
  [data-page="plan-index"] .p-plan-hero .c-button { white-space: normal; }
  [data-page="plan-index"] .p-plan-reassurance,
  [data-page="plan-index"] .p-plan-benefits,
  [data-page="plan-index"] .p-plan-steps {
    list-style: none;
    margin: var(--space-0);
    padding: var(--space-0);
  }
  [data-page="plan-index"] .p-plan-reassurance { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-xs); }
  [data-page="plan-index"] .p-plan-reassurance li,
  [data-page="plan-index"] .p-plan-benefits li { display: flex; align-items: start; gap: var(--space-2); }
  [data-page="plan-index"] .p-plan-reassurance .c-icon,
  [data-page="plan-index"] .p-plan-benefits .c-icon { flex-shrink: 0; }
  [data-page="plan-index"] .p-plan-photo { margin: var(--space-0); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface-subtle); }
  [data-page="plan-index"] .p-plan-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
  [data-page="plan-index"] .p-plan-photo figcaption { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-6); }
  [data-page="plan-index"] .p-plan-benefits { display: grid; gap: var(--space-3); font-size: var(--text-sm); }
  [data-page="plan-index"] .p-plan-journey { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface-inverse); color: var(--color-text-on-inverse); gap: var(--space-8); }
  [data-page="plan-index"] .p-plan-journey .c-overline,
  [data-page="plan-index"] .p-plan-journey .c-heading,
  [data-page="plan-index"] .p-plan-journey .c-subheading { color: var(--color-text-on-inverse); }
  [data-page="plan-index"] .p-plan-steps { display: grid; gap: var(--space-6); }
  [data-page="plan-index"] .p-plan-steps li { display: flex; align-items: start; gap: var(--space-4); }
  [data-page="plan-index"] .p-plan-steps .c-badge { flex-shrink: 0; }
  [data-page="plan-index"] .p-plan-steps .c-body-sm { margin-top: var(--space-2); }
  [data-page="plan-index"] .p-plan-resource-feature { overflow: hidden; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); }
  [data-page="plan-index"] .p-plan-resource-feature img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  [data-page="plan-index"] .p-plan-resource-feature > div { padding: var(--space-6); align-items: start; }
  [data-page="plan-index"] .p-plan-resources .c-button { white-space: normal; }
  [data-page="plan-index"] .p-plan-host { padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); }

  @media (width >= 48em) {
    [data-page="plan-index"] .p-plan-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    [data-page="plan-index"] .p-plan-resources { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    [data-page="plan-index"] .p-plan-journey,
    [data-page="plan-index"] .p-plan-questions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
    [data-page="plan-index"] .p-plan-journey { padding: var(--space-10); }
  }

  @media (width >= 64em) {
    [data-page="plan-index"] .p-plan-hero { gap: var(--space-12); }
  }

  /* /design — the component gallery */

  [data-page="design-index"] .p-gallery__principles {
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
  }

  [data-page="design-index"] .p-gallery__swatch {
    display: block;
    height: var(--control-lg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
  }

  [data-page="design-index"] .p-gallery__type-token {
    min-width: 9rem;
  }

  [data-page="design-index"] .p-gallery__type-row {
    padding-block-end: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  [data-page="design-index"] .p-gallery__space {
    display: block;
    height: var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--color-accent);
  }

  [data-page="design-index"] .p-gallery__shape {
    display: block;
    width: var(--control-lg);
    height: var(--control-lg);
    border: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
  }
}