/* V21.36 — the landing page on a desktop monitor.
   Two things were wrong on a wide screen: the page stayed a 1240px column with
   ~330px of dead space on either side, and the programme rail only lined up while
   every card fitted on one row. */

/* ------------------------------------------------------------------ 1. the measure
   One content width for the whole site, with the header deriving its padding from the
   same two numbers, so the logo and the nav line up exactly with the content below
   them instead of being ~20px out.

   Rules for `max-width: 1120px` already set a narrower measure for tablets and phones
   and this file loads after them, so everything here is scoped to a wider viewport and
   nothing at or below 1120px changes. */
@media (min-width: 1121px) {
  :root { --ui-content: min(1240px, calc(100% - 80px)); }
  .home-page-v212 .container,
  .home-page-v212 .closing-cta .container { width: min(1240px, calc(100% - 80px)); }
  /* max(gutter / 2, (100% - max) / 2) is the exact mirror of min(max, 100% - gutter). */
  .site-shell--editorial .topbar { padding-inline: max(40px, calc((100% - 1240px) / 2)); }
}

@media (min-width: 1440px) {
  :root { --ui-content: min(1440px, calc(100% - 96px)); }
  .home-page-v212 .container,
  .home-page-v212 .closing-cta .container { width: min(1440px, calc(100% - 96px)); }
  .site-shell--editorial .topbar { padding-inline: max(48px, calc((100% - 1440px) / 2)); }
}

@media (min-width: 1760px) {
  :root { --ui-content: min(1560px, calc(100% - 128px)); }
  .home-page-v212 .container,
  .home-page-v212 .closing-cta .container { width: min(1560px, calc(100% - 128px)); }
  .site-shell--editorial .topbar { padding-inline: max(64px, calc((100% - 1560px) / 2)); }
}

/* ------------------------------------------------------- 2. the programme rail
   `repeat(auto-fit, minmax(220px, 1fr))` leaves the column count unknown, but the
   padding and divider rules were written with :first-child / :last-child. They were
   therefore only correct while every card sat on one row: a sixth card opened a second
   row indented by its own 30px padding while the card above it was flush to the
   container, and the fifth card kept a divider running into the container edge.

   Explicit column counts make the per-row rules exact. */
@media (min-width: 640px) {
  .home-page-v212 .landing-service-v212 { position: relative; }

  /* The rule between rows is drawn by the card that opens the row and stretched across
     the remaining columns, so it spans the whole grid rather than stopping short when
     the last row is only part full. Percentage offsets resolve against the card, and
     with no column gap every column is exactly one card wide. */
  .home-page-v212 .landing-service-v212::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    border-top: 1px solid var(--landing-line);
    pointer-events: none;
  }
  /* A trailing partial row must not dangle a divider into the empty columns beside it. */
  .home-page-v212 .landing-service-v212:last-child { border-right: 0; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .home-page-v212 .landing-services-v212__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page-v212 .landing-service-v212 { padding: 30px; border-right: 1px solid var(--landing-line); }
  .home-page-v212 .landing-service-v212:nth-child(2n + 1) { padding-left: 0; }
  .home-page-v212 .landing-service-v212:nth-child(2n) { padding-right: 0; border-right: 0; }
  .home-page-v212 .landing-service-v212::after { right: 0; display: none; }
  .home-page-v212 .landing-service-v212:nth-child(2n + 1):not(:first-child)::after { right: -100%; display: block; }
}

@media (min-width: 1024px) and (max-width: 1365px) {
  .home-page-v212 .landing-services-v212__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-page-v212 .landing-service-v212 { padding: 30px; border-right: 1px solid var(--landing-line); }
  .home-page-v212 .landing-service-v212:nth-child(3n + 1) { padding-left: 0; }
  .home-page-v212 .landing-service-v212:nth-child(3n) { padding-right: 0; border-right: 0; }
  .home-page-v212 .landing-service-v212::after { right: 0; display: none; }
  .home-page-v212 .landing-service-v212:nth-child(3n + 1):not(:first-child)::after { right: -200%; display: block; }
}

@media (min-width: 1366px) {
  .home-page-v212 .landing-services-v212__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-page-v212 .landing-service-v212 { padding: 38px 30px; border-right: 1px solid var(--landing-line); }
  .home-page-v212 .landing-service-v212:nth-child(4n + 1) { padding-left: 0; }
  .home-page-v212 .landing-service-v212:nth-child(4n) { padding-right: 0; border-right: 0; }
  .home-page-v212 .landing-service-v212::after { right: 0; display: none; }
  .home-page-v212 .landing-service-v212:nth-child(4n + 1):not(:first-child)::after { right: -300%; display: block; }
  /* The cards are wider now, so a service name has room instead of wrapping to three lines. */
  .home-page-v212 .landing-service-v212 h2 { font-size: 1.875rem; }
}

/* ------------------------------------------------------------- 3. the wider rows
   Sections laid out for a 1240px measure get a little more air once the measure grows,
   and the reading columns keep their own cap so a paragraph never runs to an
   uncomfortable line length. */
@media (min-width: 1440px) {
  .home-page-v212 .why-grid { gap: 40px; }
  .home-page-v212 .section-title p { max-width: 680px; }
  .home-page-v212 .landing-banner-v212__copy { width: min(660px, 50%); }
  /* The journey intro was the one block with no cap of its own, so on a wide screen
     its heading and paragraph ran the full 1560px measure. */
  .home-page-v212 .journey-guide > h2 { max-width: 900px; }
  .home-page-v212 .journey-guide > p { max-width: 720px; }
}