/* =========================================================================
   Circle Square Production — responsive.css
   Compositional breakpoints (re-lay-out, not just stack).
   Tested against 320 / 375 / 390 / 768 / 1024 / 1280 / 1440.
   ========================================================================= */

/* ---- Large tablet / small desktop ---- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- Tablet (≤ 900px): collapse nav, ease dense grids ---- */
@media (max-width: 900px) {
  .nav-primary, .header-cta { display: none; }
  .nav-toggle { display: block; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { order: 2; }
  .hero-media { order: 1; max-width: 380px; }

  .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-mark { display: flex; align-items: center; gap: 1.5rem; }
  .about-mark .big-quote { font-size: clamp(3rem, 12vw, 5rem); }
  .about-meta { grid-template-columns: 1fr 1fr; }

  .proj-grid { grid-template-columns: 1fr; }
  .proj-copy { order: 2; }
  .proj-media { order: 1; max-width: 460px; margin-inline: auto; }

  .contact-split { grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; }

  .p-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .p-portrait { width: clamp(130px, 40vw, 190px); }

  .more-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* ---- Phone (≤ 620px): single-column, list-first ---- */
@media (max-width: 620px) {
  :root { --band: clamp(3.4rem, 12vw, 4.5rem); }

  .header-inner { height: 64px; }
  .brand img { height: 34px; }

  /* Team cast rows → stacked, role under name, avatar left */
  .cast-row { grid-template-columns: 54px 1fr auto; gap: .9rem 1rem; align-items: center; }
  .cast-row .idx { display: none; }
  .cast-row .who { flex-direction: row; gap: .9rem; }
  .cast-row .avatar { width: 54px; height: 54px; }
  .cast-row .name { font-size: clamp(1.4rem, 8vw, 2rem); }
  .cast-row .role { grid-column: 2 / 3; justify-self: start; text-align: left; margin-top: -.4rem; padding-left: calc(54px + .9rem); }
  .cast-row .go { width: 2.2rem; height: 2.2rem; }
  /* put role on its own line cleanly */
  .cast-row { grid-template-areas: "av name go" "av role go"; grid-template-columns: 54px 1fr auto; }
  .cast-row .who { grid-area: name; }
  .cast-row .idx { grid-area: unset; }
  .cast-row .role { grid-area: role; padding-left: 0; margin-top: .3rem; }
  .cast-row .go { grid-area: go; align-self: center; }
  .cast-row .who .avatar { position: absolute; left: 0; }
  .cast-row { position: relative; padding-left: 66px; }
  .cast-row .who { padding-left: 0; }
  .cast-row .avatar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  .cast-row.is-link:hover .avatar { transform: translateY(-50%) scale(1.04); }

  .about-meta { grid-template-columns: 1fr; gap: 1.6rem; }
  .proj-facts .row { flex-direction: column; gap: .2rem; }
  .proj-facts .row .v { text-align: left; }

  .contact-split { grid-template-columns: 1fr; gap: 1.5rem; }

  .more-grid { grid-template-columns: 1fr; }
  .tcard { grid-template-columns: 88px 1fr; align-items: center; }
  .tcard .thumb { aspect-ratio: 1/1; }
  .tcard .t-body { display: grid; }

  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bar { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; }

  .prose h2 { margin-top: 2.2rem; }
  .prose ol.numbered li, .prose ul.plain li { padding-left: 2.2rem; }
}

/* ---- Very small (≤ 360px) ---- */
@media (max-width: 360px) {
  .btn { padding: .85rem 1.15rem; font-size: .72rem; }
  .hero-actions { gap: .7rem; }
}

/* ---- Fine pointer hover niceties only where hover exists ---- */
@media (hover: none) {
  .cast-row .avatar, .tcard .thumb { filter: none; }
}