/* 05-page-shell-split.css — .page-shell as the "shell" size container, and the
   squeeze of shell, header and featured panel into the left half while the detail
   panel (css/detail-panel.css) is open. The @container shell rules are in 13. */

/* ===========================================================
   WORK LIST
   NO horizontal padding — parent .section already provides it.
   =========================================================== */

/* ── Desktop split detail panel: css/detail-panel.css ────── */

/* shell shrinks to left half when a detail is open */
.page-shell {
  transition: width 300ms var(--ease-out);
  /* Lets every section below react to the SHELL's own rendered width instead
     of the outer viewport — see the @container block at the end of
     13-responsive-phone-and-container-mirror.css. Without this, only
     hand-patched sections (e.g. .featured-panel) would notice the shell
     narrowing to 50vw; everything else would stay full-desktop-wide inside
     that half column and get crushed/overflow. */
  container-type: inline-size;
  container-name: shell;
}
@media (min-width: 1024px) {
  body.is-detail-open .page-shell { width: 50vw; overflow: hidden; }
  body.is-detail-open .site-header { right: auto; width: 50vw; }
  /* the visible half is now ~50vw wide but media queries still read the full
     viewport, so the 2-col featured panel would stay wide and get crushed.
     Collapse it to the stacked (mobile-like) layout while a detail is open. */
  body.is-detail-open .featured-panel { grid-template-columns: 1fr; padding-right: 0; }
  body.is-detail-open .featured-panel-info { border-right: none; border-bottom: 1px solid var(--rule); padding-right: var(--gutter); }
  body.is-detail-open .featured-panel-stage { order: -1; --stage-h: clamp(280px, 42vw, 480px); height: var(--stage-h); }
  body.is-detail-open .featured-panel-specs { margin-top: var(--block-space); }
}