/* ==========================================================================
   responsive.css — every breakpoint in the framework lives here
   --------------------------------------------------------------------------
   Mobile-first. Breakpoints:
     30em  =  480px   large phone
     48em  =  768px   tablet portrait
     56em  =  896px   small laptop  (desktop nav appears)
     64em  = 1024px   tablet landscape / small laptop
     80em  = 1280px   laptop
     90em  = 1440px   large desktop
    120em  = 1920px   very large desktop
   Verified against 320, 375, 414, 768, 896, 1024, 1280, 1440 and 1920px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   30em / 480px
   -------------------------------------------------------------------------- */

@media (min-width: 30em) {
  .cluster--actions {
    flex-wrap: nowrap;
  }

  .statistics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statistic {
    padding-inline-end: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   48em / 768px — the site becomes multi-column
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
  .grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
    Ruled grids: the whole first row opts out of the leading rule, not just the
    first child. The count must match the column count declared above.
  */
  .grid--2.grid--rows-ruled > :nth-child(-n + 2),
  .grid--3.grid--rows-ruled > :nth-child(-n + 3) {
    padding-block-start: 0;
    border-block-start: 0;
  }

  /* Column placement helpers for the 12-column editorial grid. */
  .col-1 { grid-column: span 1; }
  .col-2 { grid-column: span 2; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }

  .start-2 { grid-column-start: 2; }
  .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }

  .section__header {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .section__header--stacked {
    grid-template-columns: minmax(0, 1fr);
  }

  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-grid > * {
    padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.5rem);
    border-inline-end: var(--rule-width) solid var(--colour-border);
  }

  .editorial-grid > *:nth-child(2n) {
    border-inline-end: 0;
  }

  .editorial-grid > *:nth-child(odd) {
    padding-inline-start: 0;
  }

  .page-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split--wide-media {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .split--wide-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }

  .split--reverse .split__media {
    order: 2;
  }

  .case-study {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .case-study--reverse .case-study__media {
    order: 2;
  }

  .testimonial {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  }

  .article-row {
    grid-template-columns: 9rem minmax(0, 1fr);
  }

  .article-row--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .gallery {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .gallery__item { grid-column: span 6; }
  .gallery__item--wide { grid-column: span 12; }
  .gallery__item--full { grid-column: span 12; }

  .timeline__item {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .article-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-nav__link--next {
    border-inline-start: var(--rule-width) solid var(--colour-border);
    padding-inline-start: var(--space-lg);
  }

  .cta__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .cookie-banner__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .form__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__middle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statistics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   56em / 896px — navigation switches from drawer to bar
   --------------------------------------------------------------------------
   The logo and eight top-level items measure about 53em, so the bar is promoted
   here rather than at 64em. Anything narrower overflows the container. The unit
   stays em so the switch tracks the reader's default font size: at a 20px base
   the bar needs proportionally more room and this breakpoint grows with it.
   Any rebrand that lengthens the company name or adds top-level items must
   re-measure and raise this value.
   -------------------------------------------------------------------------- */

@media (min-width: 56em) {
  .primary-nav {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  .mobile-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   64em / 1024px — editorial rails and three-part grids
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .editorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editorial-grid > *:nth-child(2n) {
    border-inline-end: var(--rule-width) solid var(--colour-border);
  }

  .editorial-grid > *:nth-child(3n) {
    border-inline-end: 0;
  }

  .editorial-grid > *:nth-child(odd) {
    padding-inline-start: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  .editorial-grid > *:nth-child(3n + 1) {
    padding-inline-start: 0;
  }

  .editorial-grid--halves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-grid--halves > *:nth-child(3n) {
    border-inline-end: var(--rule-width) solid var(--colour-border);
  }

  .editorial-grid--halves > *:nth-child(2n) {
    border-inline-end: 0;
  }

  .editorial-grid--halves > *:nth-child(odd) {
    padding-inline-start: 0;
  }

  .gallery__item { grid-column: span 4; }
  .gallery__item--wide { grid-column: span 8; }

  /* Documentation rails. */
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: clamp(2.5rem, 6vw, 6rem);
  }

  .article-layout--rail-left {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .legal-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .site-footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site-footer__middle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
  }
}

/* --------------------------------------------------------------------------
   80em / 1280px
   -------------------------------------------------------------------------- */

@media (min-width: 80em) {
  /*
    The header call to action returns here. Between 56em and 80em the logo, the
    eight navigation links and the button together exceed the container, and the
    button is the one redundant element — Contact is already the last link. A
    rebrand that changes the company name length or the number of top-level
    items should re-check the bar at exactly 896px and at 1280px.
  */
  .site-header__action {
    display: block;
  }

  .primary-nav__list {
    gap: 1.5rem;
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }

  .split--offset .split__content {
    padding-inline-start: clamp(1.5rem, 4vw, 4rem);
  }
}

/* --------------------------------------------------------------------------
   90em / 1440px
   -------------------------------------------------------------------------- */

@media (min-width: 90em) {
  :root {
    --container-width: 88rem;
  }
}

/* --------------------------------------------------------------------------
   120em / 1920px and above — hold the measure rather than stretching type
   -------------------------------------------------------------------------- */

@media (min-width: 120em) {
  :root {
    --container-width: 96rem;
    --gutter: 5rem;
  }
}

/* --------------------------------------------------------------------------
   Small-screen safeguards
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
  /* Overlapping media only works where there is room for it. */
  .media--offset {
    margin-block-start: 0;
  }

  .media--inset {
    margin-inline-start: 0;
  }

  .hero {
    min-block-size: min(78vh, 40rem);
  }

  /*
    Narrow header. The logo, the gap and the toggle together exceed 320px at the
    full desktop sizes, so the gap tightens, the wordmark is allowed to truncate
    for unusually long company names, and the toggle's label becomes an
    accessible name only. The button keeps its name; it simply is not painted.
  */
  .site-header__inner {
    gap: var(--space-sm);
  }

  .site-logo {
    min-inline-size: 0;
  }

  .site-logo__text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu-toggle__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .article-nav__link--next {
    text-align: start;
    padding-inline: 0 var(--space-md);
    border-block-start: var(--rule-width) solid var(--colour-border);
  }

  .table th,
  .table td {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Coarse pointers — enlarge tap targets
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .button {
    padding-block: 1rem;
  }

  .pagination__link {
    min-block-size: 2.75rem;
  }
}