/* Rockstar Autoworks V3 — responsive layer.
   Breakpoints work down from the desktop layout in styles.css.
   Supported floor is 320px with no horizontal page scroll. */

/* ------- large desktop: service mosaic becomes two columns ---------- */
@media (max-width: 1180px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-card, .cat-card:nth-child(4), .cat-card:nth-child(5) { grid-column: auto; min-height: 390px; }
  .cat-card:last-child { grid-column: 1 / -1; min-height: 360px; }
  .header-nav { gap: 20px; }
}

/* ---------------------------- laptop ------------------------------- */
@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .book-grid { grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr); gap: 32px; align-items: center; }
  .biz-card { grid-column: 1 / -1; }
  .booking-advisor, .booking-advisor img { min-height: 520px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .header-nav a { font-size: .75rem; }
}

/* ---------------------------- tablet ------------------------------- */
@media (max-width: 899px) {
  .wrap { padding-inline: 20px; }

  /* Desktop nav collapses into the menu; calling stays one tap away as an
     icon (spec §6: logo, call icon, WhatsApp icon, menu). */
  .header-nav { display: none; }
  .header-call { width: 44px; padding: 0; }
  .header-call span { display: none; }
  .header-call .ico { width: 20px; height: 20px; }
  .menu-btn { display: grid; place-items: center; }
  .header-actions { margin-left: auto; }
  .mobile-nav { display: block; }
  .mobile-nav[hidden] { display: none; }

  /* Below 900px the portrait master is shown in a landscape box, so `cover`
     throws away a lot of height. Centring that crop cuts the advisor's face
     off the top — the crop has to sit high, not centred. The media also gets
     the same header rail as desktop so the fixed nav never lands on her face. */
  .hero-media { inset: var(--header-h) 0 0; }
  /* Anchored to the top edge: the advisor's head sits in the first quarter of
     the portrait master, so any downward bias clips it. Cropping comes off the
     floor instead, which costs nothing. */
  .hero-media img { object-position: 50% 0%; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(5,8,13,.62) 0%, rgba(5,8,13,.14) 26%, rgba(5,8,13,.72) 64%, rgba(5,8,13,.98) 100%),
      linear-gradient(90deg, rgba(5,8,13,.88), rgba(5,8,13,.12) 72%);
  }
  .hero-inner {
    min-height: 760px;
    padding-top: calc(var(--header-h) + 240px);
    padding-bottom: 56px;
  }
  .hero h1 { max-width: 100%; }
  .hero-services, .hero-sub { max-width: 100%; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .book-grid { grid-template-columns: minmax(220px, .76fr) minmax(0, 1.24fr); }
  .booking-advisor, .booking-advisor img { min-height: 500px; }

  /* §32: every tappable thing clears 44px on touch. Inline text links get
     their height from padding, so the visual rhythm barely changes. */
  .brand { min-height: 44px; }
  .hero-contact { gap: 8px 12px; }
  .hero-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .cat-link { min-height: 44px; margin-top: 12px; }
  .biz-meta { gap: 0 18px; }
  .biz-meta dd { min-height: 44px; display: flex; align-items: center; }
  .biz-meta dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col { gap: 0; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; }
  .footer-base a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The action bar owns the bottom of the viewport from here down. */
  .action-bar { display: grid; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ---------------------------- phone -------------------------------- */
@media (max-width: 719px) {
  .section { padding: clamp(48px, 11vw, 72px) 0; }
  .section-head { margin-bottom: 28px; }

  /* The portrait artwork gets its own stage, followed by a clean dark copy
     panel. This keeps the advisor and all five service scenes visible instead
     of burying them under mobile text. */
  .hero { --mobile-art-h: clamp(480px, 132vw, 580px); min-height: 0; }
  /* The art panel starts below the fixed header, otherwise the nav bar sits
     straight across the advisor's face — she is in the top third of the
     portrait master. */
  .hero-media { inset: var(--header-h) 0 auto; height: var(--mobile-art-h); }
  .hero-media img { object-position: 50% 0%; }
  .hero::before { inset: -8%; opacity: .72; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(5,8,13,.32) 0%, transparent 46%, rgba(5,8,13,.42) 67%, #080B10 84%, #080B10 100%);
  }
  .hero-inner {
    min-height: 0; justify-content: flex-start;
    padding-top: calc(var(--header-h) + var(--mobile-art-h) + 26px);
    padding-bottom: 58px;
  }
  .hero h1 { max-width: 8ch; font-size: clamp(2.75rem, 14vw, 3.7rem); }
  .hero-services { margin-top: 20px; font-size: 1rem; }
  .hero-sub { margin-top: 12px; }
  .eyebrow { font-size: .6875rem; letter-spacing: .16em; gap: 8px; }
  .hero-cta { gap: 10px; margin-top: 26px; }
  .hero-cta .btn { flex: 1 1 100%; }

  .cat-grid { grid-template-columns: 1fr; gap: 14px; }
  .cat-card, .cat-card:nth-child(4), .cat-card:nth-child(5), .cat-card:last-child {
    grid-column: auto; min-height: 370px;
  }
  .cat-card-body { padding: 22px 20px; }
  .cat-number { top: 20px; right: 20px; }
  .cat-ico { width: 40px; height: 40px; margin-bottom: 14px; }
  .cat-ico svg { width: 22px; height: 22px; }

  /* Filters scroll horizontally inside their own row — the page never does. */
  .filter-row { display: block; margin-bottom: 14px; }
  .filter-label { display: block; width: auto; margin-bottom: 8px; }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the viewport edge so the last chip does not look clipped. */
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 4px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; min-height: 44px; }

  /* The sticky bar keeps only the filters on screen; it must stay shallow so
     it never eats the phone viewport. Labels move above their chip rows. */
  /* Two stacked chip rows come to ~200px — a fifth of a phone screen. Pinning
     that permanently costs more than it gives, so on phones the bar scrolls
     away with the page and the fixed action bar carries persistent navigation. */
  .filter-bar { position: static; padding: 12px 14px; gap: 6px; border-radius: var(--r); }
  .filter-bar::after { display: none; }
  .filter-bar .chips { margin-inline: -14px; padding-inline: 14px; }
  /* Keep the track edges visible (no bleed) but let it scroll internally —
     max-content would push the last segment off screen with no way to reach it. */
  .filter-bar .segmented { margin-inline: 0; padding: 3px; }
  .filter-row { display: block; }
  .filter-label {
    display: block; width: auto; margin-bottom: 6px;
    font-size: .5625rem; letter-spacing: .18em;
  }

  .catalogue-bar { display: block; margin-bottom: 18px; }
  .catalogue-heading { font-size: 1.25rem; }
  .filter-note { margin-top: 8px; text-align: left; font-size: .75rem; line-height: 1.45; }

  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-media { aspect-ratio: 16 / 9; }
  .svc-price .amount { font-size: 1.625rem; }

  .enquiry { padding: 22px 20px; }
  .enquiry-actions .btn { flex: 1 1 100%; }

  .cat-error { padding: 32px 20px; }
  .cat-error-actions .btn { flex: 1 1 100%; }

  .book-actions { max-width: none; }
  .biz-card { padding: 22px 20px; }

  .book-grid { grid-template-columns: 1fr; gap: 26px; }
  .booking-advisor { width: min(100%, 390px); min-height: 480px; justify-self: center; }
  .booking-advisor img { min-height: 480px; }
  .biz-card { grid-column: auto; }

  .xraw-strip { padding: 18px 20px; gap: 14px; }
  .xraw-actions { width: 100%; }
  .xraw-actions .btn { flex: 1; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-base { justify-content: flex-start; }

  /* Full-width sheet reads better than a floating box on a phone. */
  .svc-modal {
    width: 100vw; max-width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
  }
  .modal-head { padding: 22px 56px 16px 20px; }
  .modal-body { padding: 20px; }
  .modal-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 calc(50% - 5px); }
}

/* ------------------------- small phone ----------------------------- */
@media (max-width: 380px) {
  .wrap { padding-inline: 16px; }
  .chips { margin-inline: -16px; padding-inline: 16px; }
  .brand-name { display: none; }
  .book-actions { grid-template-columns: 1fr; }
  .svc-actions { flex-direction: column; }
}

/* ---------------- short landscape phones --------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-inner { padding-top: calc(var(--header-h) + 40px); padding-bottom: 40px; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.7) 42%, rgba(10,11,13,.2) 100%);
  }
}

/* ----------------------- fine-pointer polish ----------------------- */
@media (hover: none) {
  .cat-card:hover, .svc-card:hover { transform: none; box-shadow: none; }
}