/* ===== PrimeCompare Mobile Fixes (non-destructive) ===== */
:root{
  --pc-pad: 16px;
  --pc-gap: 16px;
}

/* Base resets that prevent overflow */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* Images & embeds scale down properly */
img, video, canvas, svg { max-width:100%; height:auto; display:block; }
iframe { max-width:100%; width:100%; border:0; }

/* Containers never exceed viewport on mobile */
.container, .wrapper, .section, .content, .hero, .footer,
[class*="container"], [class*="wrapper"] {
  padding-left: var(--pc-pad);
  padding-right: var(--pc-pad);
}

/* Tables: allow horizontal scroll within their wrapper, not the page */
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-responsive table { min-width:640px; }

/* Buttons and inputs are thumb-friendly on mobile */
button, .btn, input[type="submit"] {
  min-height:44px; line-height:1.1; touch-action:manipulation; cursor:pointer;
}
input, select, textarea { font-size:16px; }

/* Typography scales with screen */
h1 { font-size: clamp(22px, 5vw, 34px); line-height:1.2; }
h2 { font-size: clamp(18px, 4.2vw, 28px); line-height:1.25; }
p, li { font-size: clamp(14px, 3.2vw, 18px); line-height:1.6; }

/* Generic column/grid fixes (works with many custom grids) */
.row { display:flex; flex-wrap:wrap; gap: var(--pc-gap); }
[class*="col-"] { flex:1 1 0; min-width:0; }

/* Card grids collapse nicely */
.grid, .cards, .features, .logos {
  display:grid; gap: var(--pc-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-2 > * , .cards-2 > *, .features-2 > * { grid-column: span 6; }
.grid-3 > * , .cards-3 > *, .features-3 > * { grid-column: span 4; }
.grid-4 > * , .cards-4 > *, .features-4 > * { grid-column: span 3; }

/* Hero media */
.hero-media { width:100%; max-height:60vh; object-fit:cover; border-radius:12px; }

/* Kill any accidental negative margins that cause side-scroll */
[class*="section"], [class*="block"], [class*="row"] { margin-left:auto; margin-right:auto; }

/* Nav quick fix (keeps items from overflowing on small screens) */
nav ul { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; }
nav li { list-style:none; }
nav a { display:inline-block; padding:10px 12px; text-decoration:none; }

/* ==== Mobile-first overrides ==== */
@media (max-width: 992px) {
  /* Stack 3/4/5-column blocks */
  .grid-4 > *, .cards-4 > *, .features-4 > * { grid-column: span 6; } /* 2-up */
  .grid-3 > *, .cards-3 > *, .features-3 > * { grid-column: span 6; } /* 2-up */
}

@media (max-width: 640px) {
  /* Single column on small phones */
  .grid-4 > *, .cards-4 > *, .features-4 > *,
  .grid-3 > *, .cards-3 > *, .features-3 > *,
  .grid-2 > *, .cards-2 > *, .features-2 > * { grid-column: 1 / -1; }

  /* Make CTAs full-width for easy tapping */
  .btn, button, .cta { width:100%; }

  /* Tighter hero spacing */
  .hero, .section { padding-top:20px; padding-bottom:20px; }
}

/* Optional: utility to stack specific areas quickly */
.stack-mobile > * { width:100%; }
@media (max-width: 640px) {
  .stack-mobile { display:grid; gap: var(--pc-gap); }
}

/* ==== PrimeCompare targeted hotfixes (2025-11-11) ==== */

/* Hide duplicate pill-nav on small screens */
@media (max-width: 900px){
  .pc-primary-nav{ display:none !important; }
}

/* Stack the two-column grid (brokers table + aside) and reset fancy headings */
@media (max-width: 768px){
  .container.grid{ display:block !important; }
  .section .container.grid > *{ width:100% !important; }
  .notice{ margin-top:16px !important; }

  /* Some desktop styles may rotate or space-out H2s — force normal text on mobile */
  h2, .section h2, .section .container h2{
    writing-mode: initial !important;
    transform: none !important;
    letter-spacing: normal !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* Chips wrap nicely */
  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
}

/* Make tables scrollable without breaking layout */
.table{
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.table th, .table td{
  white-space: nowrap;
  padding: 12px 10px;
}

/* Make CTA buttons comfortably wide on phones */
@media (max-width: 640px){
  .btn, .cta, button{ width:100% !important; }
}