/* =========================================
   RH RESPONSIVE PACK (Universal)
   Put ONLY responsive fixes here
========================================= */

/* 0) GLOBAL SAFETY (overflow / images / tables) */
html, body { width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; display: block; }
table { width: 100%; display: block; overflow-x: auto; }

/* Make long text/URLs not break layout */
* { word-wrap: break-word; }
a { overflow-wrap: anywhere; }

/* 1) COMMON CONTAINER PADDING (Mobile friendly) */
@media (max-width: 768px) {
  .container,
  .gdlr-core-container,
  .gdlr-core-pbf-wrapper,
  .rh-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 2) GRID → 1 COLUMN ON MOBILE */
@media (max-width: 768px) {
  .rh-grid,
  .trip-grid,
  .category-grid,
  .gdlr-core-pbf-wrapper-container {
    grid-template-columns: 1fr !important;
  }

  /* if any section uses flex rows */
  .rh-row,
  .gdlr-core-pbf-wrapper-container {
    flex-direction: column !important;
  }
}

/* 3) TYPOGRAPHY SCALE (Mobile me readable) */
@media (max-width: 480px) {
  h1 { font-size: 26px !important; line-height: 1.2 !important; }
  h2 { font-size: 22px !important; line-height: 1.25 !important; }
  h3 { font-size: 18px !important; line-height: 1.3 !important; }
  p, li { font-size: 15px !important; line-height: 1.65 !important; }
}

/* 4) BUTTONS / INPUTS (Touch friendly) */
@media (max-width: 768px) {
  button, .btn, .rh-btn, input, select, textarea {
    min-height: 44px;
  }
}

/* 5) HERO / BIG SECTIONS (Height fix) */
@media (max-width: 768px) {
  .rh-hero,
  .hero,
  .gdlr-core-hero {
    min-height: auto !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* 6) SWIPER / CAROUSEL (Prevent cut-off) */
@media (max-width: 768px) {
  .swiper,
  .swiper-container {
    overflow: hidden;
  }

  /* Slides not too wide on phone */
  .swiper-slide {
    width: 92% !important;
  }
}

/* 7) HEADER NAV BASIC MOBILE FIX (if menu breaks) */
@media (max-width: 768px) {
  .rh-header {
    padding: 12px 16px !important;
  }

  /* If your desktop menu causes overflow */
  .rh-header .rh-menu {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* 8) SECTION SPACING (Mobile me compact) */
@media (max-width: 768px) {
  .rh-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}