/*
 * Petronus responsive stabilization
 * 19 Sep 2026
 *
 * Loaded after the page-level styles so these shared corrections apply to
 * every route without forking the component CSS in 24 separate documents.
 */

/* The full desktop navigation exceeds a standard 1366px viewport when the
   phone number is present. Preserve the primary routes and inquiry CTA. */
@media (min-width: 1221px) and (max-width: 1439px) {
  .site-header .nav-tel {
    display: none !important;
  }

  .site-header .nav {
    gap: clamp(12px, 1.45vw, 24px) !important;
    margin-inline: clamp(18px, 2vw, 32px) !important;
  }
}

/* Switch to the existing accessible mobile menu before the desktop links
   become crowded. The prior 980px breakpoint was too late. */
@media (max-width: 1220px) {
  .site-header .nav {
    display: none !important;
  }

  .site-header .menu-btn {
    display: inline-flex !important;
  }

  .mega,
  .mega-scrim {
    display: none !important;
  }
}

/* Construction self-check: guarantee true single-column containment on
   phones, including long controls and the ICRA matrix. */
@media (max-width: 820px) {
  .tg-embed,
  .tg-embed .wrap,
  .tg-embed .board,
  .tg-embed .col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tg-embed .board {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .tg-embed .spine {
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    align-self: auto !important;
  }

  .tg-embed .spine::before {
    inset: 50% 14px auto 14px !important;
    width: auto !important;
    height: 2px !important;
    transform: translateY(-50%) !important;
  }

  .tg-embed .body,
  .tg-embed .gatehead,
  .tg-embed .pop-wrap,
  .tg-embed .pop-trigger,
  .tg-embed .mtx {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tg-embed .mtx {
    table-layout: fixed !important;
  }
}

@media (max-width: 420px) {
  .tg-embed .grid2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* QPS flow: defensive final override. v17 already contains the intended
   mobile rule; this keeps it authoritative if component CSS is reordered. */
@media (max-width: 980px) {
  .q-f5,
  .q-f4 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .q-link {
    width: 100% !important;
    height: 22px !important;
  }

  .q-link::before {
    width: 1px !important;
    height: 100% !important;
  }

  .q-link::after {
    right: auto !important;
    bottom: 1px !important;
    transform: rotate(135deg) !important;
  }
}