/* Home page: photo hero + search, destination cards, install steps,
   solution card, app promo. */

/* --- Photo hero ------------------------------------------------------------ */
.home-hero {
  position: relative;
  /* Above the USP strip below it so the search suggestions dropdown (which
     overhangs into the strip) isn't painted over by the strip's icons. Stays
     under the sticky header (z-index 50). */
  z-index: 2;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-top: 96px;
}

.home-hero__inner {
  /* Left-aligned marquee hugging the container's left edge (matches the live
     site). The .container frame (1170px) supplies the width + centering; the
     text block stays left within it. */
  text-align: left;
}

.home-hero__title {
  color: #fff;
  font-size: 3rem; /* 48px — home marquee, larger than section titles */
  line-height: 1.2;
  max-width: 620px; /* wrap to two lines: "Always connected," / "never limited." */
  margin-bottom: var(--space-3);
}

.home-hero__sub {
  font-size: var(--text-body);
  margin: 0;
  max-width: 460px;
}

/* search box straddles the hero's bottom edge — narrower + taller pill to
   match the live reference, kept centred within the container. */
.home-hero__search {
  max-width: 620px;
  transform: translateY(50%);
  margin-top: var(--space-5);
}

.home-hero__search .dest-search__input {
  padding-block: 19px;
}

/* Partner home hero — same flat band as the sales-page hero (the .band-gradient
   class supplies the ellipse background + navy-on-band colour), CENTERED with
   the sub-heading ABOVE the title (live partner layout). These rules follow the
   base .home-hero* so they win at equal specificity; the background size/
   position are re-pointed at the band vars because base .home-hero forces a
   full-bleed photo `cover`/`center` that would otherwise stomp the band. */
.home-hero--partner {
  color: var(--color-on-band);
  padding-top: 64px;
  text-align: center;
  background-size: var(--band-bg-size, auto);
  background-position: var(--band-bg-position, center right);
  background-repeat: var(--band-bg-repeat, no-repeat);
  /* .band-gradient sets overflow:hidden to contain its ellipse; that also clips
     the search box, which straddles the hero's bottom edge (base .home-hero__search
     translateY(50%)) and whose suggestions dropdown overhangs into the USP strip.
     Re-open overflow so the search + dropdown behave exactly as on main's home —
     the band background still clips to its own box, so nothing decorative spills. */
  overflow: visible;
}

.home-hero--partner .home-hero__inner {
  text-align: center;
}

.home-hero--partner .home-hero__sub {
  max-width: 640px;
  margin: 0 auto var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.4;
  opacity: 0.95;
}

.home-hero--partner .home-hero__title {
  color: var(--color-on-band);
  max-width: none;
  margin: 0 auto;
}

.home-hero--partner .home-hero__search {
  margin-inline: auto;
}

/* USP strip sits close under the search, no divider line. */
.home__strip {
  margin-top: var(--space-3);
}

/* Partner home: the hero search straddles the flat band edge, so the same
   space-3 leaves the USP strip reading too tight against it — drop it lower for
   clear separation. */
.home-hero--partner + .home__strip {
  margin-top: var(--space-6);
}

/* --- Destination cards ------------------------------------------------------ */
.home-destinations__tabs {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* Clip the tab-panel slide-in so translateX never spills past the container
   (no page h-scroll). `clip` keeps overflow-y visible, so card shadows / the
   anchor glow aren't cut; js/tabs.js briefly sets overflow:clip while easing
   the panel height. */
.home-destinations__panels {
  overflow-x: clip;
}

/* --- Countries tab: A-Z bar + waterfall column tray ------------------------- */
.home-countries {
  margin-bottom: var(--space-5);
  text-align: center;
}

/* Full-width A–Z bar: letters spread evenly across the whole row. */
.home-countries .dest-picker__letters {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--space-4);
}

/* Country cards flow down 5 rows then into the next column (column-major);
   the grid scrolls horizontally to reveal more columns. */
.home-countries__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-auto-columns: 17.5rem;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  /* Left/right gutter so the first column — and any anchor-scrolled letter, which
     js/az-filter.js lands at this same inset — sits off the edge, not flush. The
     larger bottom padding gives the slim scrollbar breathing space below the cards. */
  padding: 3px var(--space-4) var(--space-5);
  /* Theme-standard scrollbar: slim, navy thumb on a transparent track. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

.home-countries__grid::-webkit-scrollbar {
  height: 4px;
}

.home-countries__grid::-webkit-scrollbar-track {
  background: transparent;
}

.home-countries__grid::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* Smaller, left-aligned country card. Scoped under the grid so it beats the
   base .dest-card (same specificity, defined later in the file) and overrides
   the centred text inherited from .home-countries. */
.home-countries__grid .dest-card {
  gap: var(--space-2);
  padding: 10px 14px;
  text-align: left;
}

.home-countries__grid .dest-card__flag {
  width: 30px;
  height: 22px;
}

.home-countries__grid .dest-card__name {
  font-size: 0.875rem;
  line-height: 1.2;
}

.dest-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

/* Regions grid — slightly tighter than the Popular grid. */
.dest-cards--tight {
  gap: var(--space-3);
}

/* The Popular/Countries/Regions switch (horizontal slide + height) is driven by
   plain inline CSS transitions in js/tabs.js — no keyframes here. */

.dest-cards--tray {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
}

.dest-cards--tray > li {
  flex: 0 0 335px;
  scroll-snap-align: start;
}

.dest-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dest-card:hover {
  text-decoration: none;
  border-color: var(--color-action);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(37, 70, 95, 0.14);
}

.dest-card__flag {
  width: 34px;
  height: 25px;
  border-radius: 4px;
}

.dest-card__text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dest-card__name {
  font-weight: 600;
  font-size: var(--text-body);
}

.dest-card__from {
  font-size: 0.75rem;
  color: var(--color-text-soft);
}

.dest-card__from .price {
  font-weight: 500;
  color: var(--color-text);
}

.dest-card__chevron {
  color: var(--color-action);
}

.home-destinations__cta {
  text-align: center;
  margin: 0;
}

/* --- Install steps ------------------------------------------------------------ */
/* The dashed wave spans the full viewport width: paint it on the full-bleed
   section rather than the container-width steps grid. */
.home-install {
  background-color: var(--color-bg-alt);
  background-image: url("../../img/blue.wave.line.1.png");
  background-repeat: no-repeat;
  background-position: center 66%;
  background-size: 100% auto;
}

.home-install__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.home-install__steps img {
  height: 380px;
  width: auto;
  margin: 0 auto var(--space-4);
  object-fit: contain;
}

.home-install__steps h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.home-install__steps p {
  font-size: var(--text-body);
  max-width: 280px;
  margin-inline: auto;
}

/* --- Solution card --------------------------------------------------------------- */
.home-solution__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: var(--container-lg);
  margin-inline: auto;
  padding: var(--space-6);
}

.home-solution__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-solution__items li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.home-solution__items i {
  font-size: 1.5rem;
  color: var(--color-text);
  flex: none;
  margin-top: 4px;
}

.home-solution__items h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.home-solution__items p {
  font-size: var(--text-body);
  margin: 0;
}

/* --- App promo ---------------------------------------------------------------------- */
.home-app__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}

.home-app__copy h2 {
  margin-bottom: var(--space-2);
}

.home-app__lead {
  margin-bottom: var(--space-4);
}

.home-app__copy h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.home-app__badges-title {
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-body);
}

.home-app__badges {
  display: flex;
  gap: var(--space-3);
}

.home-app__badges img {
  height: 40px;
  width: auto;
}

.home-app__media img {
  max-width: 480px;
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .dest-cards {
    grid-template-columns: 1fr;
  }

  .home-install__steps,
  .home-solution__items,
  .home-app__layout {
    grid-template-columns: 1fr;
  }
}