/* =========================================================
   MOOREA ATV FUN TOURS
   TOUR PAGE - tour.css
   ========================================================= */


/* =========================================================
   TOUR HERO
   ========================================================= */

.tour-page-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tour-page-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(11,13,16,.18) 0%,
      rgba(11,13,16,.45) 48%,
      rgba(11,13,16,.90) 100%
    );
}

.tour-page-hero-content {
  position: relative;
  z-index: 2;

  width: min(900px, 90%);
  margin: auto;
  padding: 150px 0 100px;

  text-align: center;
}

.tour-page-hero-content .eyebrow {
  display: block;
  margin-bottom: 20px;

  color: var(--gold-2);

  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .28em;
}

.tour-page-hero-content h1 {
  margin: 0;

  color: var(--text);

  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .02em;
}

.tour-page-hero-content h1 .gold {
  color: var(--gold-2);
}

.tour-page-hero-content p {
  max-width: 720px;
  margin: 28px auto 34px;

  color: rgba(244,241,234,.88);

  font-size: 1.05rem;
  line-height: 1.8;
}


/* =========================================================
   TOUR INTRO
   ========================================================= */

.tour-page-intro {
  padding: 110px 0;
  background: var(--bg);
}

.tour-page-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.tour-page-intro-text .eyebrow {
  display: block;
  margin-bottom: 15px;

  color: var(--gold-2);

  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .25em;
}

.tour-page-intro-text p {
  max-width: 620px;
  margin: 0 0 20px;

  line-height: 1.85;
}

.tour-page-intro-image {
  height: 520px;

  overflow: hidden;

  border-radius: var(--radius);
  border: 1px solid var(--line);

  box-shadow: var(--shadow);
}

.tour-page-intro-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform .6s ease;
}

.tour-page-intro-image:hover img {
  transform: scale(1.04);
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.tour-section-heading {
  max-width: 850px;
  margin: 0 auto 55px;
  text-align: center;
}

.tour-section-heading .eyebrow {
  display: block;
  margin-bottom: 15px;

  color: var(--gold-2);

  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .25em;
}


/* =========================================================
   WHY CHOOSE US
   ========================================================= */

.tour-why {
  padding: 110px 0;
  background: var(--panel-2);
}

.tour-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tour-feature {
  min-height: 285px;
  padding: 32px 28px;
}

.tour-feature-number {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  margin-bottom: 28px;

  border: 1px solid rgba(214,169,75,.45);
  border-radius: 50%;

  color: var(--gold-2);

  font-size: .75rem;
  font-weight: 700;
}

.tour-feature h3 {
  margin: 0 0 14px;

  color: var(--text);

  font-size: 1.15rem;
}

.tour-feature p {
  margin: 0;

  font-size: .9rem;
  line-height: 1.75;
}


/* =========================================================
   DISCOVER MOOREA
   ========================================================= */

.tour-discover {
  padding: 110px 0;
  background: var(--bg);
}

.tour-discover-image {
  height: 520px;

  overflow: hidden;

  border-radius: var(--radius);
  border: 1px solid var(--line);

  box-shadow: var(--shadow);
}

.tour-discover-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform .6s ease;
}

.tour-discover-image:hover img {
  transform: scale(1.04);
}

.tour-discover-list {
  display: grid;
  gap: 24px;
  margin-top: 35px;
}

.tour-discover-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.tour-check {
  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(214,169,75,.40);
  border-radius: 10px;

  color: var(--gold-2);

  font-size: .8rem;
}

.tour-discover-item h3 {
  margin: 0 0 5px;

  color: var(--text);

  font-size: 1rem;
}

.tour-discover-item p {
  margin: 0;

  font-size: .88rem;
  line-height: 1.7;
}


/* =========================================================
   PRACTICAL INFORMATION
   ========================================================= */

.tour-info {
  padding: 110px 0;
  background: var(--panel-2);
}

.tour-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;

  max-width: 1000px;
  margin: 0 auto;
}

.tour-info-grid .panel {
  padding: 35px;
}

.tour-info-grid .eyebrow {
  color: var(--gold-2);

  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .25em;
}

.tour-info-list {
  display: grid;
  margin-top: 25px;
}

.tour-info-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;

  padding: 18px 0;

  border-bottom: 1px solid rgba(255,255,255,.07);
}

.tour-info-list > div:last-child {
  border-bottom: none;
}


.tour-info-list strong {
  color: var(--gold-2);
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}


.tour-info-list span {
  color: var(--text);

  font-size: 1rem;
}


.tour-info-list strong .lang { color: var(--gold-2) !important; }







.price-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.price-value strong {
  color: var(--gold-2);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: right;
}

.price-value small {
  color: var(--gold-2);
  font-size: .8rem;
  font-weight: 500;
}




/* =========================================================
   GALLERY PREVIEW
   ========================================================= */

.tour-gallery-preview {
  padding: 110px 0;
  background: var(--bg);
}

.tour-gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.tour-gallery-preview-grid a {
  display: block;

  height: 270px;

  overflow: hidden;

  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.07);
}

.tour-gallery-preview-grid img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .5s ease,
    filter .5s ease;
}

.tour-gallery-preview-grid a:hover img {
  transform: scale(1.06);
}

.tour-gallery-preview-button {
  margin-top: 35px;
  text-align: center;
}


/* =========================================================
   TOUR CTA
   ========================================================= */

.tour-page-cta {
  position: relative;

  padding: 115px 0;

  text-align: center;

  background:
    linear-gradient(
      rgba(11, 13, 16, .40),
      rgba(11, 13, 16, .60)
    ),
    url("../images/cook-bay-moorea.webp")
    center / cover no-repeat;
}

.tour-page-cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.tour-page-cta .eyebrow {
  display: block;
  margin-bottom: 18px;

  color: var(--gold-2);

  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
}

.tour-page-cta h2 {
  margin: 0 0 22px;

  color: var(--text);

  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
}

.tour-page-cta h2 .gold {
  color: var(--gold-2);
}

.tour-page-cta p {
  max-width: 600px;
  margin: 0 auto 32px;

  font-size: 1rem;
  line-height: 1.8;
}


/* =========================================================
   TOUR PAGE - MOBILE
   ========================================================= */

@media (max-width: 1000px) {

  .tour-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tour-gallery-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 768px) {

  .price-value {
    align-items: flex-start;
  }

  .price-value strong,
  .price-value small {
    text-align: left;
  }

}



/* =========================================================
   MOBILE 760px
   ========================================================= */

@media (max-width: 760px) {

  .tour-page-hero {
    min-height: 68vh;
  }

  .tour-page-hero-content {
    padding: 130px 0 80px;
  }

  .tour-page-hero-content h1 {
    font-size: clamp(3rem, 12vw, 4.5rem);
  }

  .tour-page-hero-content p {
    margin-top: 22px;

    font-size: .95rem;
    line-height: 1.7;
  }


  .tour-page-intro,
  .tour-why,
  .tour-discover,
  .tour-info,
  .tour-gallery-preview {
    padding: 75px 0;
  }


  .tour-page-intro-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }


  .tour-page-intro-image,
  .tour-discover-image {
    height: 380px;
  }


  .tour-section-heading {
    margin-bottom: 38px;
  }


  .tour-why-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }


  .tour-feature {
    min-height: auto;
    padding: 25px;
  }


  .tour-info-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }


  .tour-info-grid .panel {
    padding: 25px 22px;
  }


  .tour-info-list > div {
    grid-template-columns: 1fr auto;
    gap: 15px;
  }


  .tour-gallery-preview-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }


  .tour-gallery-preview-grid a {
    height: 190px;
    border-radius: 16px;
  }


  .tour-page-cta {
    padding: 80px 0;
  }


  .tour-page-cta h2 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .tour-page-hero-content {
    width: 88%;
  }

  .tour-page-hero-content h1 {
    font-size: clamp(2.7rem, 13vw, 4rem);
  }


  .tour-page-intro-image,
  .tour-discover-image {
    height: 300px;
  }


  .tour-gallery-preview-grid {
    grid-template-columns: 1fr;
  }


  .tour-gallery-preview-grid a {
    height: 230px;
  }


  .tour-info-list > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }


  .tour-info-list strong {
    text-align: left;
  }


  .tour-page-cta {
    padding: 70px 0;
  }

}