/* ============================================================
   HKS global responsive safety-net (v1.50)
   Loaded LAST so it can correct mobile-layout issues site-wide
   without having to touch every individual template.
   Desktop (>=992px) is intentionally left untouched.
   ============================================================ */

/* ---- Universal: never allow horizontal overflow on small screens ---- */
html, body { max-width: 100%; }
@media (max-width: 991px) {
  html, body { overflow-x: hidden; }
  img, iframe, video, svg, table { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }
  /* Bootstrap containers shouldn't exceed the viewport */
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
  .row { --bs-gutter-x: 1.25rem; }
}

/* ============================================================
   TABLET & PHONE  (<= 991px)
   ============================================================ */
@media (max-width: 991px) {
  /* Kill the large percentage left-paddings that push text off-canvas */
  .second_sec_packages_heading,
  .third_heading_packages,
  .second_sec_heading_box { padding-left: 0 !important; }

  /* Big display headings: scale down so they never overflow */
  .footer_heading2 { font-size: 48px !important; }
  .heading_banner { font-size: clamp(26px, 6vw, 40px) !important; }
}

/* ============================================================
   PHONE  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Generic: stacked, centred, comfortable text */
  .second_sec_heading,
  .second_sec_heading_box,
  .third_heading_packages,
  .advise3_heading1,
  .insta_heading,
  .vip_heading { text-align: center; }

  .advise3_heading1 { padding-left: 6% !important; padding-right: 6% !important; }

  /* Any hard-coded wide blocks become fluid */
  [style*="width: 260px"], .reviews_cont { max-width: 100% !important; }

  /* Section vertical rhythm: trim the giant vh-based gaps on phones */
  section, .container.mt-5, .row.mt-5 { }
  .mt-5 { margin-top: 1.5rem !important; }
  .mb-5 { margin-bottom: 1.5rem !important; }
  .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

  /* Buttons: easy tap targets, centred */
  .buttons_cont { justify-content: center; display: flex; }

  /* Newsletter / VIP form stacks cleanly */
  .row_vip2 > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .vip_input { width: 100%; }

  /* Forms in general */
  input, select, textarea { max-width: 100%; }

  /* Studio sets: 2 per row on phones, centred */
  .studio_container > .row { justify-content: center; }
  .col-md-3.sets_cols_res { width: 50%; flex: 0 0 50%; max-width: 50%; padding-left: 8px !important; padding-right: 8px !important; }

  /* Blog banner: comfortable height + heading size */
  .hksblog_banner { min-height: 220px !important; }
  .hksblog_banner_title { font-size: clamp(28px, 8vw, 40px) !important; }
  .hksblog_banner_sub { font-size: 15px !important; }

  /* Locations cards: single column, full width */
  .hksla_grid { grid-template-columns: 1fr !important; }
  .hksla_hero h1 { font-size: 2.2rem !important; }
  .hksla_mapbanner { height: 260px !important; }

  /* Single-location page grid stacks */
  .hksloc_grid { grid-template-columns: 1fr !important; }
  .hksloc_hero { padding: 70px 0 !important; }

  /* Footer: comfortable stacked spacing */
  .footer_heading2 { font-size: 40px !important; }
  .row_letstalk { margin-top: 1.5rem !important; }
}

/* ============================================================
   SMALL PHONE  (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
  .hksblog_banner_title { font-size: 30px !important; }
  .footer_heading2 { font-size: 34px !important; }
  .hksla_hero h1 { font-size: 1.9rem !important; }

  /* Studio sets: 2-up still, but tighter gutters */
  .col-md-3.sets_cols_res { padding-left: 6px !important; padding-right: 6px !important; }

  /* Make sure nothing sticks out past the screen edge */
  * { background-attachment: scroll !important; }
}

/* ============================================================
   Mega-menu mobile: ensure the panels never cause overflow
   ============================================================ */
@media (max-width: 991px) {
  .hksmm_panel { width: 100% !important; max-width: 100% !important; }
  .hksmm_inner { width: 100% !important; }
  .navbar-collapse { max-width: 100%; }
}