/* All @media breakpoints, kept in one file rather than split per page.
   Several of these blocks adjust multiple components together (e.g. the
   900px block reflows the header, main, graph sidebar, and stage as one
   layout change), so splitting them per-component risked breaking rules
   that are meant to be read as a unit. */

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.6rem;
  }

  .site-brand,
  .site-nav {
    justify-self: center;
  }

  .site-nav {
    justify-content: center;
  }

  main {
    padding-top: 10rem;
  }

  .relationship-graph {
    grid-template-columns: 1fr;
  }

  .graph-sidebar {
    order: 2;
  }

  .graph-stage {
    grid-template-rows: minmax(430px, 62vh) auto;
  }

  .agency-results {
    max-height: 28rem;
  }
}

@media (max-width: 760px) {
  .home-hero {
    padding-top: 2.5rem;
  }

  .home-flip-card {
    width: 100%;
    height: clamp(26rem, calc(100vh - 13rem), 31rem);
    transition: height 260ms ease;
  }

  .home-flip-card.is-flipped {
    width: 100%;
    height: min(21rem, calc(100vh - 10rem));
  }

  .home-flip-card__face {
    overflow: hidden;
  }

  .home-flip-card__front {
    padding: 1.35rem;
    overflow-y: auto;
  }

  .home-flip-card__back {
    margin-top: 0;
  }

  .home-card-interaction-hint__desktop {
    display: none;
  }

  .home-card-interaction-hint__mobile {
    display: inline;
  }

  .home-flip-card__back .home-map-shell {
    width: 135%;
    margin-left: -17.5%;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 0.9rem 1rem;
  }

  .site-brand__logo {
    width: min(11rem, 58vw);
    max-height: 3.5rem;
  }

  .site-title {
    font-size: 1.6rem;
  }

  .home-hero {
    min-height: calc(100vh - 8.5rem);
    padding-bottom: 2.5rem;
  }

  .home-map-shell {
    width: 100%;
  }

  .home-map-region {
    min-width: 1.2rem;
    min-height: 1.2rem;
    font-size: 0.63rem;
  }

  .home-map-region span {
    padding: 0.16rem 0.3rem;
  }

  .graph-header {
    align-items: stretch;
    flex-direction: column;
  }

  .graph-stage {
    grid-template-rows: minmax(360px, 58vh) auto;
  }

  .graph-view-controls {
    right: 0.6rem;
    bottom: 0.6rem;
  }
}