/* ═══════════════════════════════════════════════════════════════
   NAMOO MOBILE + EARLY BIRD COLOR FIXES
   Enqueue after main.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Early bird: amber instead of red ─────────────────────── */
[style*="color:var(--destructive)"] {
  color: var(--amber) !important;
}
[style*="background:var(--destructive)"] {
  background: var(--amber) !important;
}
[style*="border-color:var(--destructive)"],
[style*="border:2px solid var(--destructive)"] {
  border-color: var(--amber) !important;
}
.yp-badge--destructive {
  background: var(--amber) !important;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE: 768px and below
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Header: clean mobile layout ────────────────────────── */
  .nm-topbar__inner {
    padding: 0 0.75rem !important;
    gap: 0.375rem !important;
  }
  .nm-topbar__logo img {
    height: 44px !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  /* Hide "List Your School" button — available in side nav */
  .nm-btn--amber {
    display: none !important;
  }
  /* Compare: hide text, show icon only */
  #nm-header-compare {
    font-size: 0 !important;
    padding: 0.5rem !important;
    gap: 0 !important;
    border: none !important;
  }
  #nm-header-compare svg {
    width: 18px !important;
    height: 18px !important;
  }
  #nm-compare-count {
    font-size: 9px !important;
    width: 15px !important;
    height: 15px !important;
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
  }

  /* ── Stats strip: 2×2 grid, centered ────────────────────── */
  [style*="justify-content:center"][style*="gap:2.5rem"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
    justify-content: stretch !important;
    justify-items: center !important;
  }
  [style*="justify-content:center"][style*="gap:2.5rem"] > div {
    justify-content: center !important;
  }
  [style*="justify-content:center"][style*="gap:2.5rem"] > div > [style*="width:1px"][style*="height:2rem"] {
    display: none !important;
  }

  /* ── Country/region info strip: show only 2 items, left-aligned ── */
  section[style*="background:var(--forest)"][style*="padding:1rem"] [style*="gap:2rem"] > div:nth-child(2),
  section[style*="background:var(--forest)"][style*="padding:1rem"] [style*="gap:2rem"] > div:nth-child(4) {
    display: none !important;
  }
  section[style*="background:var(--forest)"][style*="padding:1rem"] [style*="gap:2rem"] {
    gap: 1rem !important;
  }

  /* ── ALL repeat(4,1fr) grids → 2 cols ───────────────────── */
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* ── ALL repeat(3,1fr) grids → 1 col ────────────────────── */
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── ALL 1fr 1fr 1fr grids → 1 col ─────────────────────── */
  [style*="columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── ALL 1fr 1fr grids → 1 col ──────────────────────────── */
  [style*="columns:1fr 1fr;"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── repeat(6,1fr) months → 3 cols ──────────────────────── */
  [style*="repeat(6,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* ── Destination cards: remove span 2 on mobile ─────────── */
  [style*="grid-column:span 2"] {
    grid-column: span 1 !important;
    min-height: 180px !important;
  }

  /* ── How it works: hide connecting line ──────────────────── */
  [style*="columns:1fr 1fr 1fr"] > [style*="position:absolute"][style*="height:2px"] {
    display: none !important;
  }

  /* ── Hero section ───────────────────────────────────────── */
  [style*="min-height:680px"] {
    min-height: 480px !important;
  }

  /* ── General section padding ────────────────────────────── */
  [style*="padding:5rem 0"],
  [style*="padding:4.5rem 0"] {
    padding: 2.5rem 0 !important;
  }

  /* ── Reduce large gaps ──────────────────────────────────── */
  [style*="gap:4rem"] {
    gap: 1.5rem !important;
  }
  [style*="gap:3rem"] {
    gap: 1.25rem !important;
  }

  /* ── Blog grid in home.php ──────────────────────────────── */
  .yp-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── Front page school grid ─────────────────────────────── */
  #nm-school-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── Country filter tabs ────────────────────────────────── */
  #nm-country-tabs {
    gap: 0.25rem !important;
  }
  #nm-country-tabs button {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* ── Month page tiles ───────────────────────────────────── */
  .yp-hero-tiles {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .yp-month-tiles {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE: 480px and below
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── repeat(4,1fr) → 1 col on small screens ────────────── */
  [style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Tighten container padding ──────────────────────────── */
  .yp-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* ── Footer ─────────────────────────────────────────────── */
  .yp-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}