/* ── Wagehole mobile.css ─────────────────────────────────────────── */
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; }

/* ── Nav (desktop default) ───────────────────────────────────────── */
.wh-nav-mid   { display: flex; }
.wh-nav-cta   { display: flex; }
.wh-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: #fff; border: 2px solid #17142b;
  border-radius: 10px; box-shadow: 2px 2px 0 #17142b; cursor: pointer; flex-shrink: 0;
}
.wh-hamburger svg { pointer-events: none; }

.wh-mobile-nav {
  display: none; position: fixed; top: 66px; left: 0; right: 0;
  background: #fdfcf7; border-bottom: 2px solid #17142b;
  padding: 14px 18px 20px; flex-direction: column; gap: 4px;
  z-index: 60; box-shadow: 0 16px 40px rgba(23,20,43,.16);
  max-height: calc(100vh - 66px); overflow-y: auto;
}
.wh-mobile-nav.open { display: flex !important; }
.wh-mobile-nav a {
  font-family: Figtree, sans-serif; font-size: 15px; font-weight: 600;
  color: #413d5c; text-decoration: none; padding: 11px 14px;
  border-radius: 999px; display: block;
}
.wh-mobile-nav a:hover { background: #c9f04a; color: #17142b; }
.wh-mobile-nav .wh-mob-cta {
  margin-top: 8px; font-weight: 800; color: #fff !important;
  background: linear-gradient(135deg, #9486ff 0%, #6c59f5 100%);
  border: 2px solid #17142b; border-radius: 999px; padding: 12px 20px;
  text-align: center; box-shadow: 3px 3px 0 #17142b;
}

.wh-compare-wrap { overflow: visible; }

/* ════════ TABLET (≤ 900px) ════════ */
@media (max-width: 900px) {
  .wh-nav-mid, .wh-nav-cta { display: none !important; }
  .wh-hamburger            { display: flex !important; }

  .wh-g4, .wh-g3, .wh-gfooter { grid-template-columns: 1fr 1fr !important; }
  .wh-gdoors, .wh-reviews, .wh-jd-main, .wh-sub-grid, .wh-tier-grid { grid-template-columns: 1fr !important; }

  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: 1fr 320px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 0.9fr 1.1fr"] { grid-template-columns: 1fr !important; }

  .wh-jd-aside { position: static !important; transform: none !important; }

  .wh-compare-wrap     { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .wh-compare-wrap > * { min-width: 560px !important; }
}

/* ════════ PHONE (≤ 600px) ════════ */
@media (max-width: 600px) {
  section, footer { padding-left: 16px !important; padding-right: 16px !important; }
  nav > div       { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }

  .wh-g4, .wh-g3, .wh-gfooter, .wh-reviews, .wh-gdoors, .wh-tier-grid, .wh-sub-grid { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }

  [style*="justify-content: center"][style*="gap: 14px"] { flex-wrap: wrap !important; }
  [style*="justify-content: center"][style*="gap: 14px"] > a,
  [style*="justify-content: center"][style*="gap: 14px"] > button { flex: 1 1 auto !important; text-align: center !important; justify-content: center !important; }

  [style*="grid-template-columns: 48px 1fr auto auto"] {
    grid-template-columns: 44px 1fr !important; row-gap: 12px !important; column-gap: 14px !important;
  }
  [style*="grid-template-columns: 48px 1fr auto auto"] > span:nth-child(3) { display: none !important; }
  [style*="grid-template-columns: 48px 1fr auto auto"] > span:last-child {
    grid-column: 1 / -1 !important; justify-self: stretch !important; justify-content: space-between !important;
  }
  .wh-job-comp { display: none !important; }
  .wh-job-cta  { grid-column: 1 / -1 !important; justify-self: stretch !important; justify-content: space-between !important; }

  .wh-sub-opt { padding: 15px 16px !important; }

  [style*="clamp(56px, 9vw, 140px)"] { font-size: 60px !important; }
  section { padding-top: 60px !important; padding-bottom: 60px !important; }
}

@media (max-width: 380px) {
  [style*="clamp(56px, 9vw, 140px)"] { font-size: 46px !important; }
}

/* ── Desktop: align job-board columns into a clean table ─────────── */
@media (min-width: 601px) {
  [style*="grid-template-columns: 48px 1fr auto auto"] {
    grid-template-columns: 48px minmax(0, 1fr) 184px auto !important;
    column-gap: 20px !important;
  }
  [style*="grid-template-columns: 48px 1fr auto auto"] > :nth-child(3) { justify-self: end !important; }
  [style*="grid-template-columns: 48px 1fr auto auto"] > :nth-child(4) { justify-self: end !important; }
}