/* ==========================================================
   PALM & TIDE — Five-Day Diani Adventure page
   Loaded AFTER style.css — reuses all existing design tokens
   (--ink, --sand, --brass, --tide, --water-ankle, etc.) rather
   than inventing a new palette, so this page still feels like
   the rest of the site even though its layout is bespoke and
   inspired by the client's poster reference.
   ========================================================== */

/* ---------- HERO ---------- */
.adv-hero{
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--deep-ocean);
}

.adv-hero-media{ position: absolute; inset: 0; }

.adv-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.adv-hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6,10,10,0.15) 0%, rgba(6,10,10,0.5) 55%, rgba(6,10,10,0.86) 100%),
    linear-gradient(to top, rgba(6,10,10,0.6) 0%, rgba(6,10,10,0) 32%);
}

.adv-hero-content{
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: 100%;
  max-width: 620px;
  padding: calc(var(--nav-h) + 40px) 6vw 60px;
  text-align: right;
  color: var(--foam);
}

.adv-hero-eyebrow{
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
}

.adv-hero-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.08;
  margin: 0 0 20px;
}

.adv-hero-meta{
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pale-blue);
  margin: 0 0 22px;
}

.adv-hero-line{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.03rem;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 0 0 auto;
  opacity: 0.94;
}

@media (max-width: 860px){
  .adv-hero{ min-height: 82svh; align-items: flex-end; }
  .adv-hero-content{ max-width: 100%; text-align: left; padding: 60px 24px 48px; }
  .adv-hero-line{ margin: 0; }
  .adv-hero-overlay{
    background: linear-gradient(to top, rgba(6,10,10,0.9) 0%, rgba(6,10,10,0.3) 45%, rgba(6,10,10,0.12) 70%);
  }
}

/* ---------- HIGHLIGHT ICON STRIP ---------- */
.adv-icons{
  background: var(--water-ankle);
  padding: 56px 24px;
}

.adv-icons-row{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 56px;
}

.adv-icon-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 96px;
}

.adv-icon-circle{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--foam);
  color: var(--tide);
  box-shadow: 0 10px 26px rgba(18,40,42,0.1);
}

.adv-icon-circle svg{ width: 26px; height: 26px; }

.adv-icon-label{
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* ---------- INTRO ---------- */
.adv-intro{
  padding: 90px 24px 20px;
  background: var(--water-ankle);
  text-align: center;
}

.adv-intro-frame{ max-width: 680px; margin: 0 auto; }

.adv-intro-lede{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 20px;
}

.adv-intro-body{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- ITINERARY ---------- */
.adv-itinerary{
  background: linear-gradient(180deg, var(--water-ankle) 0%, var(--sand) 100%);
  padding: 80px 24px 120px;
}

.adv-itinerary-head{
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.adv-itinerary-label{
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 16px;
}

.adv-itinerary-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  color: var(--ink);
  margin: 0;
}

.itinerary{
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.itinerary-day{
  border-bottom: 1px solid rgba(18,40,42,0.1);
}
.itinerary-day:first-child{ border-top: 1px solid rgba(18,40,42,0.1); }

.itinerary-day-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.itinerary-day-index{
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--foam);
  background: var(--tide);
}

.itinerary-day-heading{ flex: 1; }

.itinerary-day-label{
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 4px;
}

.itinerary-day-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0;
}

.itinerary-day-chevron{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  transition: transform 0.3s ease;
}

.itinerary-day.is-open .itinerary-day-chevron{ transform: rotate(180deg); }

.itinerary-day-body{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.itinerary-day.is-open .itinerary-day-body{ grid-template-rows: 1fr; }

.itinerary-day-body-inner{
  overflow: hidden;
}

.itinerary-day-content{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  padding: 0 4px 30px;
}

.itinerary-day-content-spacer{ flex-shrink: 0; }

.itinerary-day-media{
  grid-column: 2;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 18px 40px rgba(18,40,42,0.1);
}
.itinerary-day-media img{ width: 100%; height: 100%; object-fit: cover; }

.itinerary-day-list{
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.itinerary-day-list li{
  position: relative;
  padding-left: 22px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
}

.itinerary-day-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

@media (max-width: 560px){
  .itinerary-day-content{ grid-template-columns: 1fr; }
  .itinerary-day-media, .itinerary-day-list{ grid-column: 1; }
}

/* ---------- JOURNEY HIGHLIGHTS ---------- */
.adv-highlights{
  background: var(--sand);
  padding: 20px 24px 100px;
}

.adv-highlights-frame{ max-width: var(--max); margin: 0 auto; text-align: center; }

.adv-highlights-label{
  display: inline-block;
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--foam);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 48px;
}

.adv-highlights-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}

.adv-highlight{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.adv-highlight-icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--foam);
  color: var(--tide);
  box-shadow: 0 10px 26px rgba(18,40,42,0.08);
}
.adv-highlight-icon svg{ width: 24px; height: 24px; }

.adv-highlight-label{
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 500;
}

/* ---------- INCLUDED / NOT INCLUDED ---------- */
.adv-terms{
  background: var(--foam);
  padding: 90px 24px;
}

.adv-terms-grid{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.adv-terms-block h3{
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

.adv-terms-included h3{ background: var(--tide); color: var(--foam); }
.adv-terms-excluded h3{ background: var(--sand-card); color: var(--ink); border: 1px solid rgba(18,40,42,0.12); }

.adv-terms-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.adv-terms-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.adv-terms-list li svg{ flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }

.adv-terms-included li svg{ color: var(--tide); }
.adv-terms-excluded li svg{ color: var(--ember); }

@media (max-width: 700px){
  .adv-terms-grid{ grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- FAQ ---------- */
.adv-faq{
  background: var(--sand-card);
  padding: 60px 24px;
}

.adv-faq-frame{
  max-width: 760px;
  margin: 0 auto;
}

.adv-faq-label{
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 16px;
}

.adv-faq-heading{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--ink);
  margin: 0 0 28px;
}

/* ---------- GOOD TO KNOW ---------- */
.adv-good{
  background: var(--sand-card);
  padding: 60px 24px;
}

.adv-good-frame{
  max-width: var(--max);
  margin: 0 auto;
  border: 1px solid rgba(18,40,42,0.12);
  border-radius: 16px;
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  background: var(--foam);
}

.adv-good-item{ text-align: center; }

.adv-good-item svg{
  width: 30px;
  height: 30px;
  color: var(--brass);
  margin: 0 auto 12px;
}

.adv-good-label{
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

.adv-good-value{
  font-size: 0.94rem;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}

@media (max-width: 700px){
  .adv-good-frame{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- PACKAGES (Other Ways To Journey) ---------- */
.adv-packages{
  background: var(--foam);
  padding: 20px 24px 100px;
}

.adv-packages-frame{ max-width: var(--max); margin: 0 auto; }

.adv-packages-head{ max-width: 640px; margin: 0 auto 48px; text-align: center; }

.adv-packages-label{
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 16px;
}

.adv-packages-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  color: var(--ink);
  margin: 0 0 14px;
}

.adv-packages-copy{
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}

.adv-packages-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.adv-package-card{
  padding: 32px 26px;
  border-radius: 12px;
  background: var(--sand-card);
  border: 1px solid rgba(18,40,42,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adv-package-card.is-flagship{
  background: linear-gradient(180deg, rgba(176,141,87,0.16), var(--sand-card));
  border-color: rgba(176,141,87,0.4);
}

.adv-package-badge{
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--foam);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.adv-package-card h3{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0;
}

.adv-package-card p{
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
}

/* ---------- FINAL CTA ---------- */
.adv-cta{
  position: relative;
  padding: 100px 24px;
  background: linear-gradient(165deg, var(--deep-ocean) 0%, var(--tide) 100%);
  text-align: center;
  overflow: hidden;
}

.adv-cta-frame{ position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }

.adv-cta-eyebrow{
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
}

.adv-cta-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--foam);
  margin: 0 0 20px;
}

.adv-cta-copy{
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(250,247,241,0.88);
  font-weight: 300;
  margin: 0 0 36px;
}

.adv-cta-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

@media (max-width: 480px){
  .adv-hero-title{ font-size: 2.3rem; }
  .adv-icons-row{ gap: 28px 24px; }
  .adv-icon-item{ width: 78px; }
}