/* ==========================================================================
   Cumberland Cathodic Protection Limited
   responsive.css — breakpoint behaviour.

   Loaded last, so its rules win on equal specificity without any !important.
   Every selector here matches the specificity of the rule it overrides in
   components.css, which is why no component rule can quietly cancel a
   breakpoint rule.

   Breakpoints: 1200 / 1024 / 900 / 768 / 620 / 480 / 380.
   The mobile layout is a designed set of sizes, not a shrunken desktop.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1200 and below — the shell loses its outer air first.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero__grid { gap: 40px; }
  .nav__link { padding: 10px 11px; }
  .nav__link[aria-current="page"]::before,
  .nav__item.is-active > .nav__link::before { inset-inline: 11px; }
}

/* --------------------------------------------------------------------------
   1024 and below — the hero stacks, four-up grids drop to two.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { gap: 44px; padding-block: 64px 68px; }
  .hero__copy { max-inline-size: 62ch; }
  /* Below the split the copy runs the full measure, so the horizontal wash
     has nowhere clean to fall — darken evenly instead. */
  .hero.ground > .hero__scrim {
    background-image:
      linear-gradient(to bottom,
        rgb(4 14 24 / 0.80) 0%, rgb(4 14 24 / 0.72) 45%, rgb(4 14 24 / 0.88) 100%);
  }

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

  .split, .split--wide-start { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .editorial { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .topic { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 28px; }
  .topic__title { position: static; }

  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; padding-block: 48px 36px; }
}

/* --------------------------------------------------------------------------
   900 and below — hand navigation to the mobile menu.
   The desktop bar is dropped rather than wrapped: a two-line nav bar reads as
   a broken layout, and the drawer is a better target on touch anyway.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .staff-bar { display: none; }

  .mobile-nav { padding-block-start: var(--header-h); }

  :root { --header-h: 66px; }
  .masthead { block-size: var(--header-h); }
  .site-header.is-scrolled .masthead { block-size: 58px; }
  .masthead__logo img { block-size: 32px; }

  /* The drawer is open: hold the page still behind it. */
  body.nav-open { overflow: hidden; }

  .register thead th { inset-block-start: 58px; }
}

/* --------------------------------------------------------------------------
   768 and below — tablet portrait.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .page-head { padding-block: 40px 44px; }
  .statement { padding-block: 60px; }
  .statement__quote { max-inline-size: 26ch; }
  .cta { padding-block: 56px; }
  .cta__inner { gap: 24px; }

  .register-tools { gap: 12px; }
  .register-count { margin-inline-start: 0; inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   620 and below — large phone. Cards and the record go single file.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .card-grid, .card-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .record { grid-template-columns: minmax(0, 1fr); }
  .record__cell { padding: 22px 20px; }

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

  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .site-footer p { max-inline-size: none; }

  .btn-row { gap: 10px; }
  .btn { inline-size: 100%; }
  .cta .btn { inline-size: auto; }

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

/* --------------------------------------------------------------------------
   480 and below — the register stops being a table.
   A 4-column table cannot be read on a 480px screen, and a horizontally
   scrolling one hides the client name behind the scroll. Each row becomes a
   labelled block instead, which keeps every field visible and keeps the
   reading order — serial, client, detail, date.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .table-scroll { border: 0; border-radius: 0; background: none; overflow-x: visible; }
  .register { min-inline-size: 0; display: block; }
  .register thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .register tbody { display: block; }
  .register tbody tr {
    display: block; margin-block-end: 14px; padding: 18px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-card);
  }
  .register tbody tr:hover { background: var(--paper); }
  .register td { display: block; padding: 0; }
  .register td + td { margin-block-start: 10px; }

  .register .col-sr, .register .col-date {
    display: inline-block; inline-size: auto;
    font-size: var(--fs-micro); letter-spacing: 0.12em;
  }
  .register .col-sr::before { content: "No. "; color: var(--slate); }
  .register .col-date { margin-block-start: 12px; padding-block-start: 12px;
    border-block-start: 1px solid var(--line); inline-size: 100%; }
  .register .col-date::before { content: "Date  "; color: var(--slate); }
  .register .col-client { inline-size: auto; font-size: var(--fs-body); }

  .page-head { padding-block: 32px 36px; }
  .plate { padding: 22px 18px; }
  .hero__figure figcaption { padding: 24px 14px 11px; text-align: start; }
}

/* --------------------------------------------------------------------------
   380 and below — small phone. Tighten the last of the air.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .card { padding: 22px 18px 20px; }
  .staff-bar__label { display: none; }
  .schematic-key { gap: 6px 14px; }
}

/* --------------------------------------------------------------------------
   Wide desktop — 1440 and 1920.
   The shell is capped at 1220px, so on very wide screens the extra room goes
   to the ground rather than to line length. Body copy stays at its measure.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --section-y-lg: 120px; }
  .hero__grid { padding-block: 108px 112px; }
}

/* --------------------------------------------------------------------------
   Coarse pointer — dropdowns must not depend on hover.
   The panel opens on click via navigation.js; this only widens the targets.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .nav__link { padding-block: 12px; }
  .footer-list a { padding-block: 3px; display: inline-block; }
}

/* --------------------------------------------------------------------------
   Short viewports — the mobile drawer must still scroll to its last item.
   -------------------------------------------------------------------------- */
@media (max-height: 560px) {
  .mobile-nav__inner { padding-block: 16px 40px; }
  .mobile-nav__list a, .mobile-nav__group-btn { padding-block: 12px; }
}