/* Final homepage layout harmonization.
   This file is intentionally loaded last so one responsive system wins over
   the page's older, overlapping component experiments. */

.page-home {
  --home-responsive-gutter: clamp(22px, 3.4vw, 72px);
  --home-readable-wide: 1280px;
}

.page-home :where(
  .guest-feedback__shell,
  .founder-highlight-content,
  .home-experience-links__inner,
  .home-final-cta__inner
) {
  min-width: 0;
}

/* The welcome disclosure is a phone/tablet convenience only. Desktop has
   enough room for the complete editorial copy, so keep it fully exposed and
   remove the redundant control from both the visual and focus order. */
@media (min-width: 769px) {
  .page-home .welcome-read-more {
    display: none;
  }

  .page-home .welcome-more,
  .page-home .welcome-more.is-expanded {
    max-height: none;
    overflow: visible;
    opacity: 1;
    transition: none;
  }
}

/* Keep the editorial welcome split on tablet-sized displays. The older
   980px breakpoint stacked the media above the copy, which made iPads read
   in the opposite order from the desktop design. Only phone widths stack. */
@media (min-width: 700px) and (max-width: 980px) {
  .page-home .welcome-gamba {
    padding: clamp(64px, 8vw, 82px) clamp(18px, 3vw, 30px) !important;
  }

  .page-home .welcome-container {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr) !important;
    align-items: start;
    gap: clamp(24px, 4vw, 42px) !important;
  }

  .page-home .welcome-editorial-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
    padding-top: 0;
  }

  .page-home .welcome-editorial-media {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky;
    top: 92px;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    aspect-ratio: 4 / 5;
  }

  .page-home .welcome-container h2 {
    max-width: 15ch;
    margin-bottom: clamp(22px, 3vw, 30px) !important;
    font-size: clamp(2.35rem, 5vw, 3.25rem) !important;
  }
}

/* Reviews should feel like a full section on desktop, not a phone-sized pair
   of cards floating in a large empty canvas. */
@media (min-width: 769px) {
  .page-home .guest-feedback {
    padding: clamp(64px, 6vw, 96px) var(--home-responsive-gutter);
  }

  .page-home .guest-feedback__shell {
    width: min(var(--home-readable-wide), 100%);
    max-width: none;
  }

  .page-home .guest-feedback__intro {
    grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
    gap: 18px clamp(42px, 6vw, 92px);
    margin-bottom: clamp(30px, 3vw, 46px);
  }

  .page-home .guest-feedback__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    gap: clamp(20px, 2.4vw, 34px);
  }

  .page-home .guest-feedback__card {
    padding: clamp(22px, 2.2vw, 30px);
  }

  .page-home .guest-feedback h2 {
    font-size: clamp(1.8rem, 2.35vw, 2.5rem) !important;
  }

  .page-home .guest-feedback__intro > p:last-child {
    font-size: clamp(0.94rem, 1.1vw, 1.04rem) !important;
  }

  .page-home .guest-feedback__journey {
    font-size: 0.62rem !important;
  }

  .page-home .guest-feedback__card h3 {
    max-width: 28ch;
    font-size: clamp(1.12rem, 1.3vw, 1.38rem) !important;
  }

  .page-home .guest-feedback blockquote p,
  .page-home .guest-feedback__full,
  .page-home .guest-feedback__full p {
    font-size: clamp(0.88rem, 0.95vw, 0.98rem) !important;
  }

  .page-home .guest-feedback__read-more,
  .page-home .guest-feedback__google-link {
    font-size: 0.64rem !important;
  }

  .page-home .guest-feedback__source {
    font-size: 0.56rem !important;
  }

  .page-home .guest-feedback figcaption {
    font-size: 0.68rem !important;
  }

  .page-home .guest-feedback figcaption strong {
    font-size: 0.84rem !important;
  }
}

/* Give the founder story the same composed visual weight as the trust section. */
@media (min-width: 769px) {
  .page-home .founder-highlight-section {
    padding: clamp(68px, 6vw, 96px) var(--home-responsive-gutter);
  }

  .page-home .founder-highlight-content {
    grid-template-columns: minmax(240px, 320px) minmax(0, 720px);
    justify-content: center;
    width: min(var(--home-readable-wide), 100%);
    margin-inline: auto;
    gap: clamp(38px, 5vw, 76px);
  }

  .page-home .founder-heading {
    font-size: clamp(1.72rem, 2.25vw, 2.3rem) !important;
  }

  .page-home .founder-subtext {
    max-width: 64ch;
    font-size: clamp(0.94rem, 1.05vw, 1.04rem) !important;
  }

  .page-home .founder-link-button {
    min-height: 48px;
    padding-inline: 20px 12px;
    font-size: 0.84rem !important;
  }
}

/* The experience mosaic can use more of a large display while retaining its
   established asymmetric composition. */
@media (min-width: 901px) {
  .page-home .home-experience-links__inner {
    width: min(1600px, calc(100vw - (var(--home-responsive-gutter) * 2)));
    max-width: none;
  }

  .page-home .home-experience-links__grid {
    min-height: clamp(640px, 48vw, 820px);
  }
}

/* Two columns are appropriate for tablets; large displays can show the four
   route ideas together without turning each card into a full poster. */
@media (min-width: 769px) and (max-width: 1359px) {
  body.page-home .safari-product-showcase .featured-safari-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.page-home .safari-product-showcase .featured-safari-grid > .safari-cardhome.safari-cardhome--offer {
    grid-template-rows: auto auto !important;
    height: auto;
  }

  body.page-home .safari-product-showcase .featured-safari-grid > .safari-cardhome.safari-cardhome--offer > .safari-card-media {
    height: auto !important;
    aspect-ratio: 4 / 4.5 !important;
  }

  body.page-home .safari-product-showcase .featured-safari-grid .safari-cardhome--offer .safari-card-title,
  body.page-home .safari-product-showcase .featured-safari-grid .safari-cardhome--offer:nth-child(4) .safari-card-title {
    overflow: visible;
    font-size: clamp(1.35rem, 2.35vw, 1.8rem) !important;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (min-width: 1360px) {
  body.page-home .safari-product-showcase .featured-safari-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.35vw, 24px);
  }

  body.page-home .safari-product-showcase .featured-safari-grid > .safari-cardhome.safari-cardhome--offer {
    grid-column: auto !important;
    grid-template-rows: auto auto !important;
    height: auto;
  }

  body.page-home .safari-product-showcase .featured-safari-grid > .safari-cardhome.safari-cardhome--offer > .safari-card-media {
    height: auto !important;
    min-height: 0;
    aspect-ratio: 4 / 5 !important;
  }

  body.page-home .safari-product-showcase .featured-safari-grid > .safari-cardhome.safari-cardhome--offer > .safari-content {
    min-height: 370px;
    padding: clamp(22px, 1.8vw, 30px);
  }

  body.page-home .safari-product-showcase .featured-safari-grid .safari-cardhome--offer .safari-card-title,
  body.page-home .safari-product-showcase .featured-safari-grid .safari-cardhome--offer:nth-child(4) .safari-card-title {
    max-width: 100%;
    overflow: visible;
    font-size: clamp(1.28rem, 1.35vw, 1.52rem) !important;
    line-height: 1.08 !important;
    text-overflow: clip;
    white-space: normal;
  }

  .page-home .safari-product-showcase .featured-safari-grid .safari-cardhome--offer .safari-card-support {
    font-size: 0.84rem !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .page-home .safari-product-showcase .featured-safari-grid .safari-cardhome--offer .safari-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    justify-items: stretch;
  }

  .page-home .safari-product-showcase .safari-cardhome--offer .safari-card-plan {
    width: 100%;
  }

  .page-home .safari-product-showcase .safari-cardhome--offer .safari-card-itinerary {
    justify-self: start;
  }
}

/* Restore real card boundaries at the tablet breakpoint. The older display:
   contents rule was causing headings and lists to land in unrelated columns. */
@media (min-width: 769px) and (max-width: 1024px) {
  .page-home .secure-payment-grid {
    display: grid !important;
    align-items: start;
    gap: clamp(28px, 4vw, 44px);
  }

  .page-home .payment-assurance-card,
  .page-home .payment-process-card {
    display: grid !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .page-home .payment-assurance-card h3,
  .page-home .payment-process-card h3 {
    max-width: none;
    margin: 0;
  }

  .page-home .payment-showcase-image {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .page-home .secure-payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-home .payment-assurance-card {
    grid-column: 1 / -1;
    grid-template-columns: minmax(210px, 0.36fr) minmax(0, 1fr);
    gap: 20px clamp(32px, 5vw, 58px);
  }

  .page-home .payment-assurance-card > h3 {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .page-home .payment-assurance-card > .payment-assurance-list {
    grid-column: 2;
    grid-row: 1;
  }

  .page-home .payment-assurance-card > .payment-method-list {
    grid-column: 2;
    grid-row: 2;
  }

  .page-home .payment-showcase-image--ishasha {
    grid-column: 1;
    grid-row: 2;
    height: 100%;
    aspect-ratio: 4 / 5;
  }

  .page-home .payment-process-card {
    grid-column: 2;
    grid-row: 2;
    align-content: start;
  }

  .page-home .payment-showcase-image--lobelias {
    grid-column: 1 / -1;
    grid-row: 3;
    aspect-ratio: 16 / 7;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .page-home .secure-payment-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .page-home .payment-assurance-card,
  .page-home .payment-process-card,
  .page-home .payment-showcase-image {
    grid-column: 1;
  }

  .page-home .payment-assurance-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-home .payment-showcase-image {
    aspect-ratio: 16 / 9;
  }
}

/* Align the final invitation with the wide content rhythm used elsewhere. */
@media (min-width: 1200px) {
  .page-home .home-final-cta {
    padding-inline: var(--home-responsive-gutter);
  }

  .page-home .home-final-cta__inner {
    width: min(1760px, 100%);
    max-width: none;
  }
}

/* Use the successful why-choose interaction language for every horizontal
   mobile collection. */
@media (max-width: 768px) {
  body.page-home .safari-product-showcase .featured-safari-grid .safari-cardhome--offer .safari-card-title,
  body.page-home .safari-product-showcase .featured-safari-grid .safari-cardhome--offer:nth-child(4) .safari-card-title {
    max-width: 100%;
    overflow: visible;
    font-size: clamp(1rem, 4.4vw, 1.2rem) !important;
    line-height: 1.16 !important;
    text-overflow: clip;
    white-space: normal;
  }

  .page-home :where(
    .featured-safari-grid,
    .guest-feedback__grid,
    .home-experience-links__grid,
    .secure-payment-grid
  ) {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-home :where(
    .featured-safari-grid,
    .guest-feedback__grid,
    .home-experience-links__grid,
    .secure-payment-grid
  )::-webkit-scrollbar {
    display: none;
  }

  .page-home :where(
    .featured-safari-grid,
    .guest-feedback__grid,
    .home-experience-links__grid,
    .secure-payment-grid
  ):focus-visible {
    outline: 2px solid var(--luxury-gold, #c8a96b);
    outline-offset: 5px;
  }

  .page-home .safari-product-showcase > .safari-product-shell > .mobile-scroll-guidance,
  .page-home .guest-feedback__shell > .mobile-scroll-guidance,
  .page-home .home-experience-links__inner > .mobile-scroll-guidance,
  .page-home .secure-payment-container > .mobile-scroll-guidance {
    margin-top: -8px;
    margin-bottom: 14px;
  }

  .page-home .guest-feedback__grid {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-start;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    padding: 0 18px 8px 0;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }

  .page-home .guest-feedback__card {
    flex: 0 0 calc(100% - 42px) !important;
    width: calc(100% - 42px) !important;
    max-width: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

@media (min-width: 601px) {
  .page-home .home-experience-links__inner > .mobile-scroll-guidance {
    display: none;
  }
}

@media (max-width: 600px) {
  .page-home .home-experience-links__grid {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home :where(
    .featured-safari-grid,
    .guest-feedback__grid,
    .home-experience-links__grid,
    .secure-payment-grid
  ) {
    scroll-behavior: auto;
  }
}