/* ==========================================================================
   Al Bariq AlFedhi Contracting Est. - Responsive overrides
   ==========================================================================
   Most layouts are intrinsically responsive (auto-fit grids + clamp()), so
   this file only holds the breakpoints that genuinely need a decision:

     <=  64em (1024px) : tighter header, nav collapses to hamburger
     <=  48em (768px)  : tablet/phone layout adjustments
     <=  30em (480px)  : small phone
     <=  22.5em (360px): 320-375px safety net
     >=  90em (1440px) : large desktop breathing room
   ========================================================================== */

/* --------------------------------------------------------------------------
   Laptop and below - collapse navigation
   -------------------------------------------------------------------------- */
@media (max-width: 64em) {
  .nav { display: none; }

  .nav-toggle { display: grid; }

  /* The "Request a Quote" button stays visible - it is the primary action. */
  .header__actions .btn { padding-inline: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Utility bar - shed the least important details as width runs out
   --------------------------------------------------------------------------
   Priority, highest first: phone, social links, email, location.
   Everything dropped here is still reachable in the footer and on the
   contact page, so nothing becomes unavailable.
   -------------------------------------------------------------------------- */
/* These need `.preheader__contact` in front of them: the base rule
   `.preheader__contact li { display: inline-flex }` is specificity 0,1,1 and
   would otherwise win over a bare class selector at 0,1,0. */
@media (max-width: 62em) {
  .preheader__contact .preheader__location { display: none; }
}

@media (max-width: 40em) {
  .preheader__contact .preheader__email { display: none; }
}

@media (max-width: 30em) {
  .social-list__link { inline-size: 28px; block-size: 28px; }
  .social-list__link .icon { inline-size: 15px; block-size: 15px; }
  .preheader { font-size: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 48em) {
  :root { --header-h: 86px; --preheader-h: 38px; }

  .brand__logo { block-size: 54px; }
  .site-header.is-stuck .brand__logo { block-size: 46px; }

  .footer__logo { block-size: 54px; }

  .hero { min-block-size: auto; }

  .hero__title { font-size: clamp(2rem, 1.2rem + 4.2vw, 3rem); }

  .section-head--split { align-items: flex-start; }

  .cta-banner__inner { gap: var(--space-lg); }

  .cta-banner__inner .btn-row { inline-size: 100%; }

  .feature-row__media::before { inset-block-start: 12px; inset-inline-start: 12px; }

  .toast-region {
    inset-inline: var(--space-md);
    inset-block-end: var(--space-md);
    max-inline-size: none;
  }

  .back-to-top {
    inset-block-end: var(--space-md);
    inset-inline-end: var(--space-md);
    inline-size: 42px;
    block-size: 42px;
  }

  .modal__meta dt { min-inline-size: 100%; }

  .spec-list > div { flex-direction: column; gap: 0.15rem; }
  .spec-list dd { text-align: start; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */
@media (max-width: 30em) {
  /* Hide the header quote button; the mobile menu carries it instead, so the
     header never crowds at 320-375px. */
  .header__actions .btn--quote { display: none; }

  .btn-row .btn { inline-size: 100%; }

  .btn-row--auto .btn { inline-size: auto; }

  .hero__actions .btn { inline-size: 100%; }

  .filter-bar { padding: var(--space-sm); }

  .filter-search { flex: 1 1 100%; min-inline-size: 0; }

  /* Horizontal scroll strip keeps many filters usable without wrapping into
     a tall block on small screens. */
  .filter-bar__group {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-block-end: 0.35rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .filter-bar__group .filter-btn { scroll-snap-align: start; }

  .value-card { gap: var(--space-sm); }
  .value-card__num { min-inline-size: 2rem; }

  .footer__bottom { justify-content: flex-start; }

  .fact { padding: var(--space-md); }

  .media--tall { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Small phone (320px safety net)
   -------------------------------------------------------------------------- */
@media (max-width: 22.5em) {
  :root { --gutter: 1rem; }

  .brand__logo { block-size: 42px; }

  .nav-toggle { inline-size: 44px; block-size: 44px; }

  /* At 320px the phone plus five social icons is the whole bar. */
  .social-list__link { inline-size: 26px; block-size: 26px; }

  .hero__eyebrow { font-size: 0.7rem; padding: 0.35rem 0.7rem; }

  .cat-tile,
  .cat-tile__content { min-block-size: 220px; }

  .panel { padding: var(--space-md); }
}

/* --------------------------------------------------------------------------
   Large desktop
   -------------------------------------------------------------------------- */
@media (min-width: 90em) {
  :root { --section-y: 7rem; }

  .hero { min-block-size: min(84vh, 820px); }
}

/* --------------------------------------------------------------------------
   Coarse pointers - remove hover-only transforms that feel sticky on touch
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .card:hover,
  .service-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Landscape phones - stop the hero eating the whole viewport
   -------------------------------------------------------------------------- */
@media (max-height: 30em) and (orientation: landscape) {
  .hero {
    min-block-size: auto;
    padding-block-start: calc(var(--header-h) + 2rem);
    padding-block-end: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Forced colours (Windows high contrast)
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .card,
  .service-card,
  .filter-btn,
  .panel { border: 1px solid; }

  .media-ph,
  .hero__bg,
  .hero__scrim { background: Canvas; }

  .nav__link[aria-current]::after { forced-color-adjust: none; background: Highlight; }
}