/* Soul Penny Circus — responsive layout
   Content grids collapse at 900px and 600px. The nav switches from a
   persistent left sidebar (main.css default) to a top bar + hamburger
   drawer at that same 900px breakpoint, so content and nav switch
   together rather than at staggered widths. !important on the collapse
   rules so page-specific styles can't accidentally override the mobile
   grid (lesson carried over from chateau-cirque.com). */

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.cols-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.cols-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-4); }

.about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.troupe-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.founder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.give-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.masonry-gallery { column-count: 3; }

@media (max-width: 900px) {
  /* content grids */
  .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cols-split, .about-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .founder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .give-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .masonry-gallery { column-count: 2 !important; }
  section { padding: var(--space-5) 0 !important; }

  /* nav: left sidebar (main.css default) reverts to a top bar + drawer */
  #site-header {
    position: sticky;
    top: 0;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    background: rgba(9, 11, 12, 0.95);
  }
  body > main,
  #site-footer {
    margin-left: 0 !important;
  }
  .nav-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: var(--space-1) var(--space-3) !important;
    position: relative;
  }
  .nav-brand span { display: none; }
  .nav-toggle { display: inline-flex; flex-shrink: 0; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--spc-stage-black);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3) !important;
    width: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 0.75em 0 !important; border-left: none !important; }
  .nav-links a[aria-current="page"] { background: none; }

  /* the persistent ticket CTA lives in the sidebar on desktop; hiding it
     here avoids re-triggering the overflow bug already found once in the
     narrow top bar (see TODO.md) -- tickets are still reachable via the
     Shows section and every page's own CTAs */
  .nav-cta { display: none; }
}

@media (max-width: 600px) {
  .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: minmax(0, 1fr) !important; }
  .frame-grid, .troupe-list, .gallery-grid, .founder-grid, .give-grid, .path-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .masonry-gallery { column-count: 1 !important; }
  section { padding: var(--space-4) 0 !important; }

  .hero-content h1 { max-width: none; }
  .show-meta { gap: var(--space-2) !important; }
}