/* ==========================================================================
   Layout — containers, section rhythm, structural grids
   ========================================================================== */

@layer layout {
  .container {
    width: min(100% - (var(--gutter) * 2), var(--content-max));
    margin-inline: auto;
  }

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

  .section--tight {
    padding-block: calc(var(--section-pad) * 0.6);
  }

  .stack > * + * {
    margin-top: var(--space-4);
  }

  .stack-lg > * + * {
    margin-top: var(--space-6);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .grid-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: var(--space-4);
  }

  .grid-tiles--2 {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }

  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--gutter);
  }

  .site-header__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .primary-nav {
    display: none;
  }

  @media (min-width: 64rem) {
    .primary-nav {
      display: flex;
      align-items: center;
      gap: var(--space-5);
    }
  }

  /* Footer */
  .site-footer {
    background: var(--navy-950);
    color: var(--text-on-dark-muted);
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  @media (min-width: 48rem) {
    .site-footer__grid {
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: var(--border-hairline-dark);
  }

  .site-footer__bottom .photo-credit {
    flex-basis: 100%;
    order: 10;
  }

  /* Contact list items (address/phone/email) carry an icon + text that can run
     long (a full street address). The generic .cluster wraps whole flex items,
     which would drop long text to a new line flush with the container edge,
     away from its icon. Keep icon + text on one row and let the text itself
     wrap underneath, indented to match. */
  .site-footer li.cluster {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .site-footer li.cluster svg {
    flex-shrink: 0;
    margin-top: 0.2em;
  }
}