/* IMPT Hotels mobile-first overrides — applied network-wide via injected
   <link> tag. Targets phones (≤480px), tablets (≤768px), and small phones
   (≤375px). Loads AFTER inline page CSS so it overrides.

   Mike directive 2026-05-09: "90% mobile". Make pages tight + fast on small
   screens.
*/

/* ===== Tablet + below (≤900px) ===== */
@media (max-width: 900px) {
  .wrap { padding: 0 18px !important; }
  header.site .wrap { padding: 12px 18px !important; }
  nav.main a { margin-left: 12px !important; font-size: 13px !important; }
  section.hero { padding: 32px 0 24px !important; }
  article { padding: 24px 0 !important; }
  article.city { padding: 24px 0 !important; }
  aside.side { position: static !important; margin-top: 18px !important; }
  article.city .body { grid-template-columns: 1fr !important; gap: 18px !important; }
  .city-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .hotel-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  footer.site .wrap { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .competitor-block { padding: 14px 16px !important; }
  .why-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .team-grid, .fact-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* ===== Phones (≤600px) ===== */
@media (max-width: 600px) {
  .wrap { padding: 0 14px !important; }

  /* Header — keep brand only, hide secondary nav, keep Book button */
  header.site .wrap { padding: 10px 14px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .brand { font-size: 16px !important; }
  .brand small { font-size: 10px !important; letter-spacing: .12em !important; }
  nav.main { display: flex !important; gap: 4px !important; flex-wrap: nowrap !important; align-items: center !important; }
  nav.main a { margin-left: 0 !important; padding: 6px 10px !important; font-size: 12px !important; white-space: nowrap !important; }
  nav.main a:not([href*="find-hotel-input"]):not([href$="/"]) { display: none !important; }
  /* Show only first 2 nav items + Book button on phones */
  nav.main a:nth-child(n+3):not(:last-child) { display: none !important; }

  /* Hero */
  section.hero { padding: 24px 0 18px !important; }
  section.hero h1, article header h1, article h1 { font-size: 24px !important; line-height: 1.15 !important; max-width: 100% !important; letter-spacing: -.015em !important; }
  section.hero p.lead, article .lead, article header .lead { font-size: 15px !important; margin-top: 10px !important; line-height: 1.5 !important; }

  /* Article body */
  article { padding: 20px 0 !important; }
  article p { font-size: 15px !important; line-height: 1.6 !important; }
  article h2 { font-size: 19px !important; margin: 22px 0 10px !important; }
  article h3 { font-size: 16px !important; margin: 16px 0 6px !important; }

  /* AI TLDR block */
  aside.ai-tldr { padding: 14px 16px !important; margin: 16px 0 !important; }
  aside.ai-tldr p { font-size: 14px !important; line-height: 1.5 !important; }
  aside.ai-tldr p:first-of-type { font-size: 15px !important; }

  /* Meta pills */
  article.city .meta-row { gap: 6px !important; margin-top: 14px !important; }
  article.city .meta-pill { font-size: 11px !important; padding: 4px 10px !important; }

  /* CTA — full-width on phones */
  .cta-row { flex-direction: column !important; gap: 8px !important; margin: 20px 0 !important; }
  .cta-row a { width: 100% !important; text-align: center !important; padding: 12px !important; font-size: 14px !important; }

  /* Sidebar CTA box */
  aside.side { padding: 16px !important; }
  aside.side .cta-box { padding: 14px !important; }
  aside.side .cta-box a { font-size: 14px !important; padding: 12px !important; }

  /* City grid — 1 col on phones */
  .city-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 16px !important; }
  .city-card { padding: 14px !important; }
  .city-card h3 { font-size: 16px !important; margin-top: 4px !important; }
  .city-card .ct { font-size: 10px !important; }
  .city-card .meta { font-size: 12px !important; }

  /* Hotel cards */
  .hotel-card .body { padding: 12px !important; }
  .hotel-card h4 { font-size: 15px !important; }

  /* Comparison table — horizontal scroll instead of squashing */
  .cmp-table { font-size: 11px !important; min-width: 560px !important; }
  .cmp-table th, .cmp-table td { padding: 6px 8px !important; }
  .cmp-table th { font-size: 10px !important; letter-spacing: .04em !important; }

  /* Competitor blocks */
  .competitor-block { padding: 14px !important; margin: 12px 0 !important; }
  .competitor-block h3 { font-size: 16px !important; }
  .competitor-block .label { font-size: 10px !important; }
  .competitor-block ul { font-size: 13px !important; }

  /* Crumbs */
  .crumbs { padding: 10px 0 !important; font-size: 11px !important; }
  .crumbs span { margin: 0 4px !important; }

  /* Hero CTA inside hub pages */
  section.hero p[style*="margin-top:18px"] a { width: 100% !important; box-sizing: border-box !important; text-align: center !important; }

  /* FAQ section */
  section.faq { padding: 24px 0 !important; }
  section.faq h2 { font-size: 19px !important; margin-bottom: 14px !important; }
  section.faq details { padding: 12px 14px !important; }
  section.faq summary { font-size: 14px !important; line-height: 1.4 !important; }
  section.faq p { font-size: 13px !important; line-height: 1.55 !important; padding-top: 6px !important; }

  /* Footer */
  footer.site { padding: 28px 0 16px !important; font-size: 13px !important; }
  footer.site .wrap { grid-template-columns: 1fr !important; gap: 18px !important; }
  footer.site h5 { font-size: 12px !important; margin-bottom: 8px !important; }
  footer.site a { padding: 3px 0 !important; font-size: 13px !important; }
  footer.site .family { font-size: 11px !important; padding-top: 14px !important; margin-top: 14px !important; }

  /* Visible byline */
  .impt-byline { font-size: 12px !important; gap: 8px !important; flex-wrap: wrap !important; }
  .impt-byline span:last-child { line-height: 1.4 !important; }

  /* About-page team / fact grids */
  .team-grid, .fact-grid { grid-template-columns: 1fr !important; }

  /* Funnel widget — already mobile-friendly, just ensure body padding-bottom */
  body { padding-bottom: 70px !important; }
}

/* ===== Small phones (≤375px) ===== */
@media (max-width: 375px) {
  .wrap { padding: 0 12px !important; }
  header.site .wrap { padding: 8px 12px !important; }
  .brand { font-size: 15px !important; }
  .brand small { display: none !important; }
  section.hero h1, article header h1, article h1 { font-size: 22px !important; }
  article h2 { font-size: 17px !important; }
  .cmp-table { font-size: 10px !important; }
}

/* Avoid horizontal scroll outside the comparison table */
html, body { overflow-x: hidden !important; }
img, table, pre { max-width: 100% !important; }