/*
 * iTrip page width — loaded after the Gofly theme (see src/app/(public)/[lang]/layout.tsx).
 *
 * The theme's home hero is inset from the viewport by 80/60/30/20/10px, while every other block
 * (header, sections, footer) sits in Bootstrap's fixed 1320px .container, so on wide screens the
 * hero was far wider than the rest. Everything now shares one gutter and one maximum width:
 * a .container's padding is the gutter, and since .row cancels the column padding, column content
 * lines up exactly with the hero's edges.
 */

:root {
  --page-gutter: 80px;
  /* Content width cap on very wide screens (hero and sections alike). */
  --page-max: 1760px;
}
@media (max-width: 1699px) { :root { --page-gutter: 60px; } }
@media (max-width: 1599px) { :root { --page-gutter: 30px; } }
@media (max-width: 1399px) { :root { --page-gutter: 20px; } }
@media (max-width: 1199px) { :root { --page-gutter: 16px; } }

.container {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--page-gutter));
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  margin-left: auto;
  margin-right: auto;
}

/* The home hero: same gutter, same cap. */
.home4-banner-section {
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
.home4-banner-section .banner-video-area {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}
/* The hero's text and search box sit inside the hero, not edge to edge with it: 40px further in,
   and at most the theme's 1320px wide. On phones the search box keeps the page gutter. */
.home4-banner-section .banner-content-wrap .container {
  max-width: calc(1320px + 2 * (var(--page-gutter) + 40px));
  padding-left: calc(var(--page-gutter) + 40px);
  padding-right: calc(var(--page-gutter) + 40px);
}
@media (max-width: 767px) {
  .home4-banner-section .banner-content-wrap .container {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }
}


/* The destination slider's arrows hang 20px outside the slider; with the narrower gutter below
   1200px that pushed the page 4px wider than the screen. */
@media (max-width: 1199px) {
  .home4-destination-section .destination-slider-area .slider-btn-grp .slider-btn.destination-slider-prev { left: -8px; }
  .home4-destination-section .destination-slider-area .slider-btn-grp .slider-btn.destination-slider-next { right: -8px; }
}

/* Header: like the hero's search box, its content sits 40px inside the hero's edges (from tablet up). */
@media (min-width: 768px) {
  header.header-area > .container,
  header.header-area .container {
    padding-left: calc(var(--page-gutter) + 40px);
    padding-right: calc(var(--page-gutter) + 40px);
  }
}

/* ---- Decorations ---------------------------------------------------------------------------- */
/* Home "featured places" sections: the plane route, mirrored, behind the left edge. */
.itrip-places-section { position: relative; z-index: 1; }
.itrip-places-section .itrip-deco-route {
  position: absolute; top: -40px; left: 0; z-index: -1; width: min(560px, 40vw); height: auto;
  transform: scaleX(-1); opacity: .9; pointer-events: none;
}
@media (max-width: 767px) { .itrip-places-section .itrip-deco-route { display: none; } }
.home4-feature-section .section-vector,
.home4-feature-section .section-vector2,
.home4-faq-section .vector { pointer-events: none; }

/* ---- Phones --------------------------------------------------------------------------------- */
/* Inner-page title banners: the breadcrumb trail is gone, so the title needs no bottom margin, and
   the theme's 120px padding made the banner ~320px tall on a phone (pushing content off screen). */
.breadcrumb-section .banner-content h1 { margin-bottom: 0; }
@media (max-width: 767px) {
  .breadcrumb-section { padding: 56px 0; }
  .breadcrumb-section .banner-content h1 { font-size: 26px; line-height: 1.25; }
}

/* Card rows that scroll sideways on phones instead of stacking (.itrip-mscroll on a Bootstrap .row):
   each card takes most of the width and the next one peeks in, so the row reads as swipeable. */
@media (max-width: 767px) {
  .row.itrip-mscroll { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 6px; }
  .row.itrip-mscroll::-webkit-scrollbar { display: none; }
  .row.itrip-mscroll > * { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }
}