/* =========================================================
   Responsive rules for shared components.
   Page-only classes carry their own media queries at the end of
   their page stylesheet.
   ========================================================= */

@media (max-width: 991px) {
  .product-range__row {
    flex-wrap: wrap;
  }
  .applications__row {
    flex-wrap: wrap;
  }
  .global__row {
    flex-wrap: wrap;
  }
  .enquiry-q__row-2 {
    flex-wrap: wrap;
  }
  .introduction__grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero__row-5 {
    flex-wrap: wrap;
  }
  .key-features__box-2 {
    position: relative;
    top: auto;
  }
  .projects__row-4 {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .news__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .about__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .about__box {
    grid-column: 1 / -1;
  }
  .about__box-3 {
    grid-column: 1 / -1;
  }
  .applications__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .projects__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .projects__link {
    height: auto;
    min-height: clamp(322px, 35.938vw, 460px);
  }
  .news__link-2 {
    grid-column: 1 / -1;
  }
  .news__box {
    height: auto;
    min-height: clamp(280px, 31.25vw, 400px);
  }
  .news__stack {
    grid-column: 1 / -1;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .introduction__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .introduction__grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__panel {
    height: auto;
    min-height: clamp(392px, 43.75vw, 560px);
  }
  .about__box-4 {
    height: auto;
    min-height: clamp(420px, 46.875vw, 600px);
  }
  .key-features__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .key-features__panel {
    height: auto;
    min-height: clamp(392px, 43.75vw, 560px);
  }
  .applications__box-4 {
    height: auto;
    min-height: clamp(434px, 48.438vw, 620px);
  }
  .projects__link-2 {
    height: auto;
    min-height: clamp(448px, 50vw, 640px);
  }
}

@media (max-width: 767px) {
  .projects__label {
    white-space: normal;
  }
  .mission__label {
    white-space: normal;
  }
  .global__label {
    white-space: normal;
  }
  .global__label-2 {
    white-space: normal;
  }
  .global__label-3 {
    white-space: normal;
  }
  .eyebrow__label-3 {
    white-space: normal;
  }
  .hero__row-2 {
    white-space: normal;
  }
  .hero__row-6 {
    white-space: normal;
  }
}

/* Breadcrumbs wrap instead of overflowing on narrow screens */
.site-main .breadcrumb { flex-wrap: wrap; row-gap: 6px; }

@media (max-width: 767px) {
  .hero-carousel .hero-scroll { display: none; }
  .hero-carousel .hero-controls { left: var(--gutter); right: var(--gutter); bottom: 22px; justify-content: space-between; gap: 12px; }
  .hero-carousel .hero-dots { gap: 14px; }
  .hero-carousel .hero-dot { gap: 8px; }
  .hero-carousel .hero-dot__bar { width: 28px; }
  .site-main .hero-carousel { min-height: 680px; }

  .app-switcher .app-switcher__tabs {
    flex-direction: row;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 4px;
    border-top: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .app-switcher .app-switcher__tabs::-webkit-scrollbar { display: none; }
  .app-switcher .app-switcher__tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid var(--line-3);
    border-radius: 999px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .app-switcher .app-switcher__tab.is-active { padding-left: 16px; border-color: var(--brand-ink); }
  .app-switcher .app-switcher__tab > :last-child { font-size: 15px; }

  .subnav { overflow-x: auto; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav .subnav__link { white-space: nowrap; }
}
@media (max-width: 575px) {
  .site-main .btn-group { flex-direction: column; align-items: stretch; }
  .site-main .btn-group > * { justify-content: center; text-align: center; }
}

/* Mobile fixes from device audit ------------------------------------------------
   Image cells inside grids got their height from the desktop row. When the grid
   stacks they have none, so give them an aspect ratio instead. */
@media (max-width: 767px) {
  .site-main .home-products__box-3:has(img),
  .site-main .home-products__box-5:has(img),
  .site-main .product-range__box:has(img) {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .site-main .hero__box:has(img) {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 11;
  }

  /* Touch targets: enlarge the hit area without shifting the layout */
  .site-header .site-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-carousel .hero-dot { min-height: 44px; }
  .site-main .breadcrumb a,
  .site-main .subnav__link { padding-block: 10px; margin-block: -10px; }
  /* These links carry their own top margin, so offset only the bottom. */
  .site-main .contact-contact__link-2 { padding-block: 13px; margin-block: 5px -13px; }
  .site-main .about-page__link { display: inline-flex; align-items: center; min-height: 44px; }

  /* Case-study metadata wraps instead of being cut off; dividers drop out. */
  .site-main .card-hover__meta { flex-wrap: wrap; gap: 14px 22px; }
  .site-main .card-hover__meta > span:empty { display: none; }
}