/* =========================================================
   COL RETREAT
   HOMEPAGE STYLES
   Loads after: /assets/css/global.css
   ========================================================= */


/* =========================================================
   1. HERO
   ========================================================= */

.home-hero {
  position: relative;

  min-height:
    min(920px, 96vh);

  display:
    grid;

  align-items:
    center;

  overflow:
    hidden;

  background:
    var(--cr-deep-navy);

  color:
    var(--cr-white);
}

.home-hero-media {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;
}

.home-hero-media img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}

.home-hero-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    linear-gradient(
      90deg,
      rgba(5, 27, 45, 0.96) 0%,
      rgba(5, 27, 45, 0.83) 34%,
      rgba(5, 27, 45, 0.48) 62%,
      rgba(5, 27, 45, 0.16) 82%,
      rgba(5, 27, 45, 0.03) 100%
    );
}

.home-hero-content {
  position:
    relative;

  z-index:
    2;

  max-width:
    760px;

  padding-top:
    7rem;

  padding-bottom:
    5rem;
}

.home-hero-title {
  margin-bottom:
    1.75rem;

  color:
    var(--cr-white);

  font-size:
    clamp(3.8rem, 6.6vw, 7.25rem);

  line-height:
    0.96;

  letter-spacing:
    -0.035em;
}

.home-hero-title em {
  display:
    block;

  color:
    var(--cr-warm-gold);

  font-weight:
    var(--cr-weight-regular);
}

.home-hero-copy {
  max-width:
    620px;

  margin-bottom:
    2rem;

  color:
    var(--cr-text-muted-on-dark);

  font-size:
    clamp(1rem, 1.4vw, 1.15rem);

  line-height:
    1.75;
}

.home-hero-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    0.8rem;
}

.home-hero-location {
  position:
    absolute;

  right:
    var(--cr-gutter);

  bottom:
    2.5rem;

  z-index:
    2;

  color:
    rgba(255, 255, 255, 0.60);

  font-size:
    0.68rem;

  font-weight:
    var(--cr-weight-medium);

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


/* =========================================================
   2. TRUST STRIP
   ========================================================= */

.home-trust {
  background:
    var(--cr-deep-navy);

  border-top:
    1px solid
    var(--cr-border-gold);

  color:
    var(--cr-white);
}

.home-trust-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.home-trust-item {
  min-height:
    155px;

  padding:
    2rem;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.10);
}

.home-trust-item:last-child {
  border-right:
    0;
}

.home-trust-icon {
  width:
    30px;

  height:
    30px;

  margin-bottom:
    1rem;

  color:
    var(--cr-champagne-gold);
}

.home-trust-title {
  margin-bottom:
    0.45rem;

  color:
    var(--cr-white);

  font-size:
    0.72rem;

  font-weight:
    var(--cr-weight-semibold);

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.home-trust-copy {
  margin:
    0;

  color:
    rgba(255, 255, 255, 0.54);

  font-size:
    0.82rem;
}


/* =========================================================
   3. INTRO / EXPERIENCE
   ========================================================= */

.home-intro-grid {
  display:
    grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap:
    clamp(3rem, 7vw, 7rem);

  align-items:
    start;
}

.home-intro-title {
  margin-bottom:
    0;
}

.home-intro-copy {
  max-width:
    680px;

  color:
    var(--cr-text-muted);

  font-size:
    1.05rem;
}

.home-intro-copy p:last-child {
  margin-bottom:
    0;
}


/* =========================================================
   4. RECOVERY SERVICES
   ========================================================= */

.home-services-header {
  max-width:
    760px;

  margin-bottom:
    clamp(3rem, 6vw, 5rem);
}

.home-services-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  border-top:
    1px solid
    var(--cr-border);

  border-left:
    1px solid
    var(--cr-border);
}

.home-service {
  min-height:
    285px;

  padding:
    clamp(1.75rem, 3vw, 2.5rem);

  border-right:
    1px solid
    var(--cr-border);

  border-bottom:
    1px solid
    var(--cr-border);

  background:
    var(--cr-warm-ivory);

  transition:
    background
    var(--cr-transition-fast)
    var(--cr-ease),
    transform
    var(--cr-transition-fast)
    var(--cr-ease);
}

.home-service:hover {
  background:
    var(--cr-white);

  transform:
    translateY(-2px);
}

.home-service-number {
  display:
    block;

  margin-bottom:
    2rem;

  color:
    var(--cr-champagne-gold);

  font-family:
    var(--cr-font-display);

  font-size:
    1.75rem;
}

.home-service-title {
  margin-bottom:
    0.8rem;

  color:
    var(--cr-deep-navy);

  font-family:
    var(--cr-font-body);

  font-size:
    0.74rem;

  font-weight:
    var(--cr-weight-semibold);

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.home-service-copy {
  margin:
    0;

  color:
    var(--cr-text-muted);

  font-size:
    0.9rem;
}


/* =========================================================
   5. DESTINATION / COLOMBIA FEATURE
   ========================================================= */

.home-destination-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    clamp(3rem, 7vw, 7rem);

  align-items:
    center;
}

.home-destination-media {
  min-height:
    620px;

  position:
    relative;

  overflow:
    hidden;

  background:
    var(--cr-soft-sand);
}

.home-destination-media img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.home-destination-media::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(5, 27, 45, 0.02) 45%,
      rgba(5, 27, 45, 0.68) 100%
    );
}

.home-destination-caption {
  position:
    absolute;

  left:
    2rem;

  right:
    2rem;

  bottom:
    2rem;

  z-index:
    2;

  color:
    var(--cr-white);
}

.home-destination-caption strong {
  display:
    block;

  margin-bottom:
    0.45rem;

  font-family:
    var(--cr-font-display);

  font-size:
    clamp(1.9rem, 3vw, 3.1rem);

  font-weight:
    var(--cr-weight-regular);
}

.home-destination-caption span {
  color:
    rgba(255, 255, 255, 0.70);

  font-size:
    0.68rem;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}

.home-destination-copy {
  max-width:
    560px;
}

.home-destination-copy p {
  color:
    var(--cr-text-muted);
}


/* =========================================================
   6. JOURNEY
   ========================================================= */

.home-journey-header {
  max-width:
    760px;
}

.home-journey-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  margin-top:
    clamp(3rem, 6vw, 5rem);

  border-top:
    1px solid
    var(--cr-border-gold);
}

.home-journey-step {
  padding:
    clamp(1.75rem, 3vw, 2.5rem);

  border-right:
    1px solid
    rgba(255, 255, 255, 0.12);
}

.home-journey-step:last-child {
  border-right:
    0;
}

.home-journey-number {
  display:
    block;

  margin-bottom:
    1.5rem;

  color:
    var(--cr-champagne-gold);

  font-family:
    var(--cr-font-display);

  font-size:
    1.8rem;
}

.home-journey-title {
  margin-bottom:
    0.7rem;

  color:
    var(--cr-white);

  font-family:
    var(--cr-font-body);

  font-size:
    0.73rem;

  font-weight:
    var(--cr-weight-semibold);

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}

.home-journey-copy {
  margin:
    0;

  color:
    rgba(255, 255, 255, 0.58);

  font-size:
    0.85rem;
}


/* =========================================================
   7. HOME CTA
   ========================================================= */

.home-cta {
  text-align:
    center;
}

.home-cta-inner {
  max-width:
    850px;

  margin-inline:
    auto;
}

.home-cta-title {
  margin-bottom:
    1.5rem;
}

.home-cta-copy {
  max-width:
    620px;

  margin:
    0 auto 2rem;

  color:
    var(--cr-text-muted);
}


/* =========================================================
   8. OPTIONAL LUXURY IMAGE BAND
   ========================================================= */

.home-image-band {
  position:
    relative;

  min-height:
    520px;

  display:
    flex;

  align-items:
    flex-end;

  overflow:
    hidden;

  background:
    var(--cr-deep-navy);
}

.home-image-band img {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.home-image-band::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(5, 27, 45, 0.04),
      rgba(5, 27, 45, 0.78)
    );
}

.home-image-band-content {
  position:
    relative;

  z-index:
    2;

  max-width:
    650px;

  padding-bottom:
    clamp(2.5rem, 6vw, 5rem);

  color:
    var(--cr-white);
}

.home-image-band-content h2 {
  color:
    var(--cr-white);
}


/* =========================================================
   9. RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .home-trust-grid,
  .home-services-grid,
  .home-journey-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .home-trust-item:nth-child(2) {
    border-right:
      0;
  }

  .home-intro-grid,
  .home-destination-grid {
    grid-template-columns:
      1fr;
  }

  .home-destination-media {
    min-height:
      540px;
  }
}


@media (max-width: 680px) {

  .home-hero {
    min-height:
      780px;

    align-items:
      end;
  }

  .home-hero-content {
    padding-top:
      8rem;

    padding-bottom:
      5rem;
  }

  .home-hero-title {
    font-size:
      clamp(3.15rem, 15vw, 5rem);
  }

  .home-hero-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .home-hero-actions .cr-btn {
    width:
      100%;
  }

  .home-hero-location {
    display:
      none;
  }

  .home-trust-grid,
  .home-services-grid,
  .home-journey-grid {
    grid-template-columns:
      1fr;
  }

  .home-trust-item,
  .home-journey-step {
    border-right:
      0;
  }

  .home-trust-item {
    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.10);
  }

  .home-destination-media {
    min-height:
      430px;
  }

  .home-destination-caption {
    left:
      1.25rem;

    right:
      1.25rem;

    bottom:
      1.25rem;
  }

  .home-service {
    min-height:
      auto;
  }
}