/* layout.css — page skeleton: container, header, footer, sections, grids. */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-width: var(--container-narrow);
  }

  /* Skip link for keyboard users: hidden until focused */
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: #fff;
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 100;
  }

  .skip-link:focus {
    top: 0;
  }

  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-height);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-primary);
    text-decoration: none;
    line-height: 1.15;
    white-space: nowrap;
  }

  .brand:hover {
    color: var(--color-primary);
  }

  .brand__logo {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
  }

  .brand__name {
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
  }

  .brand__tagline {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Main content */
  .site-main {
    min-height: 60vh;
  }

  .section {
    padding-block: var(--space-7);
  }

  .section--alt {
    background: var(--color-bg-alt);
  }

  .section--tight {
    padding-block: var(--space-6);
  }

  .section__title {
    margin-bottom: var(--space-5);
  }

  /* Page hero: navy band with the logo as a faint watermark */
  .page-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-7) var(--space-6);
    background: var(--hero-gradient);
    color: var(--hero-text);
  }

  .page-hero--large {
    padding-block: var(--space-8);
  }

  .page-hero::after {
    content: "";
    position: absolute;
    right: -4rem;
    top: 50%;
    width: 26rem;
    height: 26rem;
    transform: translateY(-50%);
    background: url("/assets/img/logo-320.png") center / contain no-repeat;
    filter: invert(1);
    opacity: 0.07;
    pointer-events: none;
  }

  .page-hero > .container {
    position: relative;
    z-index: 1;
  }

  .page-hero h1 {
    color: var(--hero-text);
    margin-bottom: var(--space-3);
    max-width: 22ch;
  }

  .page-hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-text-muted);
  }

  .page-hero__lead {
    max-width: 44rem;
    margin: 0;
    font-size: var(--text-lg);
    color: var(--hero-text-muted);
  }

  .page-hero a:not(.button) {
    color: var(--hero-text);
  }

  .page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  .page-hero__nav {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--hero-text-muted);
  }

  .page-hero__nav a {
    margin-right: var(--space-3);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }

  .page-hero__nav a:hover {
    border-bottom-color: #fff;
  }

  /* Section heading with small accent label above */
  .section__eyebrow {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  /* Responsive auto grid: cards wrap naturally */
  .grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }

  /* Two-column split for text + aside */
  .split {
    display: grid;
    gap: var(--space-6);
  }

  /* Keep the aside (and its images) from stretching on one-column screens */
  .split > aside {
    max-width: var(--aside-max);
  }

  @media (min-width: 60em) {
    .split {
      grid-template-columns: 2fr 1fr;
      align-items: start;
    }
  }

  /* Footer */
  .site-footer {
    margin-top: var(--space-8);
    padding-block: var(--space-6);
    background: var(--color-primary);
    color: #e3eaf2;
    font-size: var(--text-sm);
  }

  .site-footer a {
    color: #fff;
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  .site-footer h2 {
    color: #fff;
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }

  .site-footer__bottom {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: #b9c6d4;
  }
}