/* ==========================================================
   PALM & TIDE — detail page styles (Stay / Find / Follow / Meet)
   Loaded AFTER style.css, so all design tokens (--ink, --sand,
   --brass, --water-about, etc.) are already available here —
   this file only adds page-specific layout on top of them,
   deliberately reusing the homepage's color journey rather than
   inventing a new one.
   ========================================================== */

/* ==========================================================
   PAGE HERO — a horizontal strip, not a full-height hero like
   the homepage. Single photo, dark-to-transparent overlay,
   breadcrumb + title + support line anchored to the bottom.
   ========================================================== */
.page-hero{
  position: relative;
  height: 56vh;
  min-height: 380px;
  max-height: 560px;
  overflow: hidden;
  background: var(--deep-ocean);
}

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

.page-hero .hero-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero .hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14,53,54,0.8) 0%,
    rgba(14,53,54,0.46) 45%,
    rgba(14,53,54,0.2) 75%,
    rgba(144,209,200,0) 100%
  );
}

.page-hero-content{
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 32px) 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--foam);
}

.page-breadcrumb{
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
}

.page-breadcrumb a{
  color: var(--foam);
  opacity: 0.8;
}
.page-breadcrumb a:hover{ opacity: 1; }

.page-hero-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  line-height: 1.1;
  margin: 0 0 18px;
}

.page-hero-support{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 54ch;
  opacity: 0.94;
  margin: 0;
  text-shadow: 0 1px 3px rgba(8,20,26,0.35);
}

@media (max-width: 640px){
  .page-hero{ height: auto; min-height: 360px; }
  .page-hero-content{ padding: calc(var(--nav-h) + 24px) 24px 32px; }
  .page-hero-title{ font-size: 2rem; }
}

/* ==========================================================
   INTRO STRIP — reuses .detail-intro / .section-eyebrow /
   .detail-intro-body from style.css (same water-ankle tone as
   the Five-Day Adventure page). Only the inner wrapper's layout
   is defined here, since these pages use .detail-intro-inner
   rather than .detail-intro-frame.
   ========================================================== */
.detail-intro-inner{
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* ==========================================================
   DETAIL ROWS WRAPPER — carries the color hand-off from the
   pale intro tone down into sand, the same drift the homepage
   uses between "Experience Kenya Differently" and "Approach."
   ========================================================== */
.detail-rows{
  background: linear-gradient(180deg, var(--water-ankle) 0%, var(--sand) 100%);
  padding: 40px 24px 120px;
}

/* ==========================================================
   CATEGORY CARDS — used on Stay by the Tide and Find Your Style.
   A simple photo-top card: image, then meta label, heading,
   copy, optional amenity tags, optional enquire link.
   ========================================================== */
.category-block{
  max-width: var(--max);
  margin: 0 auto 90px;
}
.category-block:last-child{ margin-bottom: 0; }

.category-heading{
  max-width: 640px;
  margin: 0 0 44px;
}

.category-heading h3{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  color: var(--ink);
  margin: 0 0 14px;
}

.category-heading p{
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0;
  max-width: 60ch;
}

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

.item-card{
  background: var(--foam);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(18,40,42,0.08);
  display: flex;
  flex-direction: column;
}

.item-card-media{
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.item-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.item-card:hover .item-card-media img{
  transform: scale(1.05);
}

.item-card-body{
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-card-meta{
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.item-card-body h4{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.32rem;
  color: var(--ink);
  margin: 0;
}

.item-card-body p{
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0 0 2px;
}

.item-card-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 4px 0 6px;
}

.item-card-tags li{
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: var(--sand-card);
  border: 1px solid rgba(18,40,42,0.08);
  padding: 5px 12px;
  border-radius: 999px;
}

.item-card-enquire{
  align-self: flex-start;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--azure);
  border-bottom: 1px solid rgba(31,110,150,0.35);
  padding-bottom: 1px;
  margin-top: 6px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.item-card-enquire:hover{
  color: var(--deep-water);
  border-color: var(--deep-water);
}

/* ==========================================================
   ALTERNATING DETAIL ROWS — used on Follow the Tide and
   Meet the Coast (and the second half of Find Your Style):
   large image one side, numeral badge, copy + tags the other,
   flipping sides on every second row.
   ========================================================== */
.detail-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto 96px;
}
.detail-row:last-child{ margin-bottom: 0; }

.detail-row:nth-child(even){ direction: rtl; }
.detail-row:nth-child(even) > *{ direction: ltr; }

.detail-row-media{
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px rgba(18,40,42,0.1);
}

.detail-row-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-row-index{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--foam);
  background: rgba(14,58,82,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 6px 16px;
  border-radius: 999px;
}

.detail-row-copy h3{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--ink);
  margin: 0 0 18px;
}

.detail-row-copy p{
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0 0 22px;
  max-width: 52ch;
}

.detail-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.detail-tags li{
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--sand-card);
  border: 1px solid rgba(18,40,42,0.08);
  padding: 6px 14px;
  border-radius: 999px;
}

.detail-row-enquire{
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--azure);
  border-bottom: 1px solid rgba(31,110,150,0.35);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.detail-row-enquire:hover{
  color: var(--deep-water);
  border-color: var(--deep-water);
}

@media (max-width: 860px){
  .detail-row,
  .detail-row:nth-child(even){
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .category-heading{ margin-bottom: 32px; }
}

@media (max-width: 480px){
  .item-grid{ grid-template-columns: 1fr; }
  .detail-rows{ padding: 32px 24px 90px; }
}

/* ==========================================================
   REEF CTA EXTRAS — the four detail pages use a slightly
   fuller CTA block than the homepage (an eyebrow label above
   the title, and a named package line below it). These two
   classes aren't in style.css since the homepage doesn't use
   them, so they're defined here alongside the rest of the
   detail-page-only styling.
   ========================================================== */
.reef-cta-label{
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pale-blue);
  margin: 0 0 6px;
  text-shadow: 0 1px 3px rgba(8,20,26,0.4);
}

.reef-cta-package{
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--foam);
  margin: 2px 0 0;
  text-shadow: 0 1px 3px rgba(8,20,26,0.4);
}