/* Large screens: two tiers above the reference design (1440 to 1919px).
   Proposal, opt in with ?xl (html[data-xl]); nothing changes without it.

   XL  >= 1920px: 24" 1080p, 27" at 1440p, laptops on an external display.
   2XL >= 2560px: 27" 5K and larger, and scaled 4K. These are read from
   further away, so body text steps to 18px as well.

   The rule for every section: the tokens move first (container, gutter,
   rhythm, type), then each section is re-arranged for the room it gets,
   never zoomed. Text measures are capped in ch so lines never run long. */

@media (min-width: 1920px) {
  html[data-xl] { --container-max: 90rem; --container-gutter-md: 6rem; }
  html[data-xl] .editorial {
    --ed-container: 90rem;           /* 1440px, from 1152px */
    --ed-gutter: 6rem;
    --ed-section: 8.5rem;
    --ed-display: 4.75rem;
    --ed-title: 3.75rem;
    --ed-lede: 1.25rem;
    --ed-card-title: 1.75rem;
    --ed-stat: 5.75rem;
  }
}

@media (min-width: 2560px) {
  html[data-xl] { font-size: 112.5%; }  /* 18px: body, labels and every rem-sized part */
  html[data-xl] .editorial {
    --ed-container: 96rem;           /* 1728px at 18px */
    --ed-gutter: 7rem;
    --ed-section: 9rem;
    --ed-display: 5rem;
    --ed-title: 3.875rem;
  }
  html[data-xl] { --container-max: 96rem; --container-gutter-md: 7rem; }
}

/* ---------- Headings: measure, not width ---------- */
@media (min-width: 1920px) {
  /* Headings laid out as a grid (case studies, client stories) keep their full width. */
  html[data-xl] .ed-heading:not(.case-showcase .ed-heading, .client-stories .ed-heading) { max-width: 48rem; }
  html[data-xl] .ed-heading--center > p { max-width: 46ch; margin-inline: auto; }
  html[data-xl] .case-showcase .ed-heading h2 { max-width: 16ch; }
}

/* ---------- Hero: fill the first screen, larger portraits ---------- */
@media (min-width: 1920px) {
  html[data-xl] .home-editorial .hero__inner { gap: 6rem; padding-block: 7rem 8rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  html[data-xl] .home-editorial .hero__title { max-width: 14ch; }
  html[data-xl] .home-editorial .hero__lede { max-width: 38ch; }
  html[data-xl] .home-editorial .hero__clients { max-width: 44rem; column-gap: 2.25rem; }
  html[data-xl] .home-editorial .hero__media { height: 36rem; }
}

/* ---------- Showreel: a step beyond the grid, not the whole screen ---------- */
@media (min-width: 1920px) {
  html[data-xl] .showreel__frame { max-width: min(149svh, calc(var(--container-max) + 16rem)); }
}

/* ---------- Case studies: the current case and part of the next ---------- */
@media (min-width: 1920px) {
  /* One full-width case at 1440px filled the whole screen. Here the rail shows
     the current case and about half of the next, dimmed until it is reached;
     the arrows step one case (case-carousels.js steps by slide width). */
  html[data-xl] .case-category { --case-slide: calc((min(100vw - var(--ed-gutter) * 2, var(--ed-container)) - 1.5rem) / 1.55); --case-media-height: min(40rem, calc(var(--case-slide) / 1.92)); }
  html[data-xl] .case-category__rail { grid-auto-columns: var(--case-slide); column-gap: 1.5rem; padding-right: calc(100% - var(--case-slide) - 1.5rem); }
  html[data-xl] .case-category__slide { transition: opacity 300ms ease-out; }
  html[data-xl] .case-category__slide[inert] { opacity: .45; }
  html[data-xl] .case-category__caption { padding-right: 0; }
  html[data-xl] .case-showcase .ed-work-card__body > p:not(.ed-work-card__scope) { max-width: 40ch; }
}
@media (min-width: 1920px) and (prefers-reduced-motion: reduce) {
  html[data-xl] .case-category__slide { transition: none; }
}

/* ---------- Client stories: more of the rail in view ---------- */
@media (min-width: 1920px) {
  /* Two and a half stories: the half card says the rail continues. */
  html[data-xl] .client-stories { --story-gap: 4rem; --story-width: calc((min(100vw - var(--ed-gutter) * 2, var(--ed-container)) - var(--story-gap) * 2) / 2.5); }
}
@media (min-width: 2560px) {
  html[data-xl] .client-stories { --story-gap: 4.5rem; --story-width: calc((min(100vw - var(--ed-gutter) * 2, var(--ed-container)) - var(--story-gap) * 2) / 3); }
}

/* ---------- Contact and questions: wider grid, readable measure ---------- */
@media (min-width: 1920px) {
  html[data-xl] .closing-contact__grid { column-gap: 8rem; }
  html[data-xl] .closing-contact__lede { max-width: 42ch; }
  html[data-xl] .ed-questions { gap: 6rem; }
  html[data-xl] .ed-faq p { max-width: 62ch; }
}

/* ---------- Footer: the columns spread with the container ---------- */
@media (min-width: 1920px) {
  html[data-xl] .footer__columns { column-gap: 4rem; }
}