/* ============================================================
   hyderabad.php — mobile layout fixes
   Add to the END of css/event-lp.css (or paste into the page's
   existing <style> block). Scoped to phones only; desktop and
   tablet layouts are untouched.

   Problem: the page scrolled sideways on phones — 461px of
   content in a 375px viewport (86px of horizontal overflow),
   which also let the sticky register bar hang off-screen.
   ============================================================ */

@media (max-width: 767px) {

  /* 1) HERO TOP BAR
     .top-bar is display:flex, so the date and the long venue line
     ("Venue: THE PARK HYDERABAD, 22, Raj Bhavan Rd, Somajiguda")
     sat side by side and refused to wrap — the paragraph measured
     449px on a 375px screen. Stack them on phones instead. */
  .section-1 .top-bar {
    display: block;
  }
  .section-1 .top-bar p {
    max-width: 100%;
  }

  /* 2) FEATURED SPEAKERS captions
     .small-text carries white-space: nowrap, so roles like
     "Wealth Manager, LLW Algo Services Lead" pushed the card wider
     than the screen. Let them wrap. */
  .section-3 .team-des p.small-text,
  .section-3 p.small-text {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* 3) STICKY REGISTER BAR
     The fixed bottom bar inherited Bootstrap's .container width and
     the .row negative margins, rendering 461px wide and overhanging
     the right edge. Constrain it to the viewport. */
  .mobile-countdown-register-button {
    width: 100%;
    max-width: 100vw;
  }
  .mobile-countdown-register-button .container {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .mobile-countdown-register-button .row {
    margin-left: 0;
    margin-right: 0;
  }
  .mobile-countdown-register-button .row > * {
    min-width: 0;
  }
}