/* =========================================================
   Travelez — Responsive CSS (mobile-first, CLEAN)
   Safe to include as:
   <link rel="stylesheet" media="only screen and (max-width: 1200px)" href="/css/responsive.css?v=20250815-2">
   ========================================================= */

/* ---------- Global safeguards ---------- */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; display: block; }
img.w-100, .img-fluid { height: auto; }  /* prevent image stretch */
.mobile-block { display: none; }

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================
   ≤1200px (large tablets and down)
   ========================================================= */
@media (max-width: 1200px) {
  .section-content { padding: 48px 0; }
}

/* =========================================================
   ≤992px (tablets and down)
   ========================================================= */
@media (max-width: 992px) {
  .why-choose .row > [class*="col-"] { margin-bottom: 16px; }

  /* Cart tightening (if used) */
  .table-shopping-cart tr td:first-child { width: 250px; }
  .table-shopping-cart .itemside .info { padding: 0; }
  .table-shopping-cart .itemside .aside { display: none; }
}

/* =========================================================
   Base hero/banner neutralizers (all sizes)
   Remove legacy inline heights so our rules win cleanly
   ========================================================= */
#carousel2_indicator .carousel-item,
#carousel2_indicator .carousel-item > img,
.intro-banner-wrap,
.intro-banner-wrap img,
.full-bleed,
.full-bleed img,
.quote-parallax {
  height: auto !important;
  min-height: 0 !important;
}

/* Generic wrappers that sometimes need fixed aspect on non-home sections */
.intro-banner-wrap,
.quote-parallax,
.full-bleed,
.how-it-works-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.intro-banner-wrap img,
.intro-banner-wrap picture > img,
.intro-banner-wrap .banner-image,
.quote-parallax > img,
.full-bleed > img,
.how-it-works-hero > img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .intro-banner-wrap,
  .quote-parallax,
  .full-bleed,
  .how-it-works-hero { height: 0; padding-top: 56.25%; }
  .intro-banner-wrap > img,
  .intro-banner-wrap picture > img,
  .quote-parallax > img,
  .full-bleed > img,
  .how-it-works-hero > img { position: absolute; inset: 0; }
}

/* =========================================================
   ≤768px (phones & small tablets)
   ========================================================= */
@media (max-width: 768px) {

  /* Layout helpers */
  .mobile-block { display: block; }
  .mobile-order-first { order: -1; }
  .mobile-order-1 { order: 1; }
  .mobile-order-2 { order: 2; }
  .mobile-order-3 { order: 3; }

  /* Header / nav / logo */
  .section-header .logo { max-height: 40px; width: auto; }
  .navbar { position: sticky; top: 0; z-index: 1040; }
  .navbar-expand .navbar-collapse { flex-direction: column; }
  .navbar .nav-link { padding: 0.75rem 0.5rem; }

  /* Keep only header action buttons inline & compact */
  .section-header .btn {
    width: auto;
    min-width: unset;
    padding: 6px 12px;
    line-height: 1.2;
    border-radius: 6px;
    margin-left: 8px;
  }

  /* All other buttons become comfy, full-width */
  .btn, .carousel_button {
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 6px;
  }
  .btn + .btn { margin-top: 8px; }

  /* Type scale */
  h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2; }
  h2 { font-size: clamp(1.3rem, 5.2vw, 1.8rem); line-height: 1.25; }
  h3 { font-size: clamp(1.1rem, 4.6vw, 1.4rem); }
  .lead, p { font-size: 1rem; line-height: 1.6; }

  /* Forms: stop iOS zoom + spacing */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  .form-group { margin-bottom: 14px; }

  /* Tables: contain overflow */
  .table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Page header legend sizing */
  fieldset.page_header_border legend h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); }

  /* -----------------------------------------------
     HERO rules (mobile):
       • Non-home pages → fixed 16:9
       • Homepage → original behaviour (auto height, full-bleed cover anchored to top)
     ----------------------------------------------- */

  /* Non-home: enforce 16:9 */
  body:not(.page-home) #carousel2_indicator .carousel-item {
    position: relative;
    height: 56.25vw; /* 16:9 */
  }
  body:not(.page-home) #carousel2_indicator .carousel-item > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
  }

  /* HOMEPAGE CAPTION: centered, vertical middle */
  #carousel2_indicator .carousel-caption{
    left: 0 !important; right: 0 !important;
    top: 50% !important; bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 100% !important; margin: 0 auto !important; padding: 0 16px;
    text-align: center; background: none !important;
    color: #fff !important; text-shadow: 0 2px 6px rgba(0,0,0,.6);
    z-index: 2;
  }
  #carousel2_indicator .carousel-caption p{
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.2;
    margin-bottom: 12px;
    word-break: break-word;
  }
  #carousel2_indicator .carousel-caption a{
    font-size: clamp(14px, 4vw, 16px);
    padding: 10px 16px;
  }
  #carousel2_indicator .carousel-caption br { display: none; }

  /* Section spacing */
  .section-content { padding: 32px 0; }
}

/* =========================================================
   iOS safe areas (with viewport-fit=cover)
   Scoped to mobile and only fixed headers/footers
   ========================================================= */
@media (max-width: 768px) {
  @supports (padding: env(safe-area-inset-top)) {
    .navbar.fixed-top, .fixed-top    { padding-top: max(env(safe-area-inset-top), 0px) !important; }
    .fixed-bottom, footer, .footer   { padding-bottom: max(env(safe-area-inset-bottom), 0px) !important; }
  }
  @supports (padding: constant(safe-area-inset-top)) {
    .navbar.fixed-top, .fixed-top    { padding-top: max(constant(safe-area-inset-top), 0px) !important; }
    .fixed-bottom, footer, .footer   { padding-bottom: max(constant(safe-area-inset-bottom), 0px) !important; }
  }
}
/* Mobile hero + caption (single source of truth) */
@media (max-width: 768px){
  /* Hero image height on phones */
  #carousel2_indicator .carousel-item > img{
    width: 100% !important;
    height: 60svh !important;           /* adjust 50–70svh to taste */
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }

  /* Caption position + sizing */
  #carousel2_indicator .carousel-caption{
    left: 0 !important; right: 0 !important;
    top: 20% !important;                       /* move up/down here */
    transform: translateY(-50%) !important;
    width: 100% !important;
    padding: 0 16px;
    text-align: center;
  }

  /* Headline/body inside caption */
  #carousel2_indicator .carousel-caption h1,
  #carousel2_indicator .carousel-caption h2,
  #carousel2_indicator .carousel-caption .title,
  #carousel2_indicator .carousel-caption p{
    font-size: clamp(22px, 7.6vw, 32px) !important;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 8px;
  }

  /* Button under caption (mobile) */
@media (max-width: 768px){
  body.page-home #carousel2_indicator .carousel-caption .btn,
  body.page-home #carousel2_indicator .carousel-caption .carousel_button{
    font-size: clamp(11px, 3vw, 13px) !important;
    padding: 6px 10px !important;
    line-height: 1.1 !important;
  }
}



  /* Kill manual line breaks on small screens */
  #carousel2_indicator .carousel-caption br{ display:none; }
}
/* Mobile: smaller hero caption button */
@media (max-width: 768px){
  #carousel2_indicator .carousel-caption a.btn,
  #carousel2_indicator .carousel-caption .btn{
    font-size: 13px !important;
    padding: 8px 12px !important;   /* was larger */
    line-height: 1.2 !important;
    border-radius: 4px !important;
    min-height: 36px;               /* keeps tap target reasonable */
  }

  /* In case the button has size helpers */
  #carousel2_indicator .carousel-caption .btn-lg,
  #carousel2_indicator .carousel-caption .btn-md{
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
}