/* Responsive layer — laptop band.
   Ported from Claude Design's base.css §3B (design-export/notes.md §3B).

   Loads AFTER all block CSS in the enqueue cascade, so it overrides the
   block-level `@media (max-width: 64em)` single-column collapses without
   editing each block file. The problem it fixes: a windowed laptop (~900-1024px,
   what most internal users run) collapsed every two-up to one column at 64em,
   so a 16:10 panel image went full-bleed and each panel read as an image with a
   caption. Two-up now holds to 52em; below that it stacks and the media slot is
   capped so it is a band across the top, not half a screen.

   Breakpoints across the system: 1180 / 1024 / 900(~52em) / 520.
   Colour-free by construction: grid-template-columns, max-height, object-fit
   only. `!important` matches the design layer and beats block-level collapses
   that themselves use `!important` (e.g. process-steps). */

/* Laptop band: two-up stays two-up; dense rows thin rather than stack. */
@media (min-width: 52em) and (max-width: 64em) {
  .split-panel__layout,
  .split-panel--image-left .split-panel__layout,
  .fiftyfifty__grid,
  .comparison-grid__cards,
  .qa-grid,
  .footer-top { grid-template-columns: 1fr 1fr !important; }

  .featured-panel__inner { grid-template-columns: 1.05fr 1fr !important; grid-template-areas: "content media"; }
  .featured-panel--media-right .featured-panel__inner { grid-template-areas: "content media"; }
  .audience-switcher__panel-grid { grid-template-columns: 1.15fr 1fr !important; }
  .testimonial-panel__inner--split { grid-template-columns: 1.3fr 1fr !important; }
  .results-layout { grid-template-columns: 260px 1fr !important; }

  .facility-cards__grid--3,
  .tg-grid-3,
  .sortable-links-area,
  .qualification-cards__grid,
  .tabbed { grid-template-columns: repeat(2, 1fr) !important; }
  .process-steps__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .facilities-grid__strip { grid-template-columns: repeat(4, 1fr) !important; }
  .images-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .contact-form { grid-template-columns: 1fr 1fr !important; }
}

/* Stacked (below 52em): the media slot is a band across the top, not a
   half-screen. object-fit keeps a 16:10 crop from distorting. */
@media (max-width: 52em) {
  .card-image,
  .fiftyfifty__image,
  .facility-card__image,
  .split-panel__image-wrap,
  .audience-switcher__image,
  .featured-panel__media { max-height: 300px; }
  .card-image > img,
  .fiftyfifty__image > img,
  .facility-card__image > img,
  .split-panel__image-wrap > img { height: 100%; object-fit: cover; }
}