/* ============================================================
   Retreat detail page styles (Texas / Michigan)
   ============================================================ */

/* Sub-hero */
.rhero { position: relative; min-height: clamp(540px, 82vh, 820px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; }
.rhero-bg { position: absolute; inset: 0; z-index: -2; background: var(--moss-deep); }
.rhero-bg img, .rhero-bg video { width: 100%; height: 100%; object-fit: cover; }
.rhero-bg img { transform: scale(1.05); animation: kenburns 18s ease-out forwards; }
.rhero::after { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to top, rgba(7,12,9,.9) 2%, rgba(7,12,9,.36) 46%, rgba(7,12,9,.2) 78%, rgba(7,12,9,.4) 100%); }
.rhero-inner { width:100%; max-width:1380px; margin-inline:auto; padding:0 var(--gut) clamp(44px,6vw,80px); }
.rhero .tag { margin-bottom: 18px; }
.rhero h1 { color:#fff; max-width: 15ch; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.rhero h1 em { font-family: var(--serif); font-weight: 400; font-style: italic; }
.rhero .tx em { color: var(--sun); }
.rhero .mi em { color: #8fcfe0; }
.rhero-where { display:flex; flex-wrap:wrap; gap:10px 22px; margin:20px 0 26px; font-size:1rem; color:rgba(255,255,255,.9); }
.rhero-where span { display:inline-flex; align-items:center; gap:8px; font-weight:550; }
.rhero-where svg { width:17px; height:17px; opacity:.85; }

/* Sticky booking strip */
.book-strip { position: sticky; top: var(--nav-h); z-index: 30;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line); }
.book-strip-inner { max-width:1380px; margin-inline:auto; padding: 12px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:18px; }
.book-strip .bs-info { display:flex; align-items:center; gap:18px; min-width:0; }
.book-strip .bs-price { font-weight:700; font-size:1.15rem; letter-spacing:-.02em; white-space:nowrap; }
.book-strip .bs-price small { font-weight:550; color:var(--text-3); font-size:.8rem; }
.book-strip .bs-meta { font-size:.85rem; color:var(--text-2); display:flex; gap:14px; }
.book-strip .bs-meta b { color:var(--ink); }
@media (max-width: 760px){ .book-strip .bs-meta{ display:none; } .book-strip-inner{ gap:12px; } .book-strip .btn{ padding:11px 18px; font-size:.9rem; } }

/* Section intro */
.sec-head { max-width: 60ch; margin-bottom: clamp(28px,4vw,48px); }
.sec-head.center { margin-inline: auto; text-align: center; }

/* Highlight cards */
.hl-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
@media (max-width:880px){ .hl-grid{ grid-template-columns:1fr; } }

/* Gallery */
.gallery { display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.gallery a, .gallery div { border-radius: 4px; overflow:hidden; position:relative; aspect-ratio:1; }
.gallery img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.gallery a:hover img, .gallery div:hover img { transform: scale(1.08); }
.gallery .g-span2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
@media (max-width:680px){ .gallery{ grid-template-columns: repeat(2,1fr); } .gallery .g-span2{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; } }

/* Accommodations tiers */
.acc-tiers { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,1.8vw,20px); }
.tier { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; display:flex; flex-direction:column; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tier.featured { border-color: var(--moss); box-shadow: 0 0 0 1px var(--moss); }
.tier .badge { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--moss); margin-bottom:14px; }
.tier h3 { font-size:1.2rem; margin-bottom:6px; }
.tier .ti-sub { font-size:.88rem; color:var(--text-3); margin-bottom:18px; min-height:2.4em; }
.tier .ti-price { font-size:1.6rem; font-weight:700; letter-spacing:-.03em; margin-bottom:2px; }
.tier .ti-price small { font-size:.8rem; font-weight:550; color:var(--text-3); }
.tier ul { list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:9px; }
.tier li { font-size:.9rem; color:var(--text-2); display:flex; gap:9px; align-items:flex-start; }
.tier li svg { width:16px; height:16px; color:var(--leaf); flex:none; margin-top:3px; }
.tier .btn { margin-top:auto; }
@media (max-width:980px){ .acc-tiers{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .acc-tiers{ grid-template-columns: 1fr; } }

/* Itinerary / day flow */
.day-flow { display:grid; gap:0; max-width: 760px; }
.day { display:grid; grid-template-columns: auto 1fr; gap: 22px; padding: 22px 0; border-top:1px solid var(--line); }
.day:first-child { border-top:0; }
.day .time { font-weight:700; font-size:.95rem; color:var(--moss); white-space:nowrap; padding-top:2px; min-width:96px; }
.day h4 { margin:0 0 4px; font-size:1.08rem; }
.day p { margin:0; color:var(--text-2); font-size:.94rem; }

/* Pricing / two col */
.price-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,2vw,24px); }
.price-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding: clamp(26px,3vw,38px); }
.price-card.dark { background: var(--moss-deep); color:#fff; }
.price-card .pc-amt { font-size: clamp(2.4rem,4vw,3.2rem); font-weight:700; letter-spacing:-.04em; line-height:1; }
.price-card .pc-amt small { font-size:1rem; font-weight:550; color:var(--text-3); letter-spacing:0; }
.price-card.dark .pc-amt small { color:var(--on-dark-2); }
.price-card ul { list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:11px; }
.price-card li { display:flex; gap:10px; font-size:.95rem; color:var(--text-2); }
.price-card.dark li { color:var(--on-dark-2); }
.price-card li svg { width:18px; height:18px; color:var(--leaf); flex:none; }
@media (max-width:760px){ .price-grid{ grid-template-columns:1fr; } }

/* Confidence row */
.conf { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.conf .feature { text-align:left; }
@media (max-width:880px){ .conf{ grid-template-columns:1fr; } }

/* Meet your chef — portrait + text feature */
.chef { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px,4vw,64px); align-items:center; }
.chef-portrait { position:relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow:hidden; background: var(--cream-2); box-shadow: var(--shadow); }
.chef-portrait img { width:100%; height:100%; object-fit:cover; object-position: center 30%; display:block; }
/* Placeholder shown until a real photo is dropped in (sits behind the <img>; the img covers it once it loads) */
.chef-portrait .ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color: var(--text-3); text-align:center; padding:24px; background: linear-gradient(160deg, var(--cream), var(--cream-2)); }
.chef-portrait .ph svg { width:46px; height:46px; opacity:.5; }
.chef-portrait .ph span { font-size:.85rem; letter-spacing:.02em; }
.chef-body h2 { margin-bottom: 8px; }
.chef-tag { font-style:italic; color: var(--moss); font-size: clamp(1.05rem,1.6vw,1.25rem); margin: 4px 0 18px; }
.chef-creds { display:flex; flex-wrap:wrap; gap:10px; margin: 22px 0 26px; }
.chef-creds li { list-style:none; font-size:.85rem; font-weight:600; color: var(--text-2);
  background:#fff; border:1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
@media (max-width:880px){
  .chef { grid-template-columns: 1fr; gap: 28px; }
  .chef-portrait { max-width: 360px; margin-inline:auto; }
}

/* Chef teaser (home page) */
.chef-teaser { display:grid; grid-template-columns: auto 1fr auto; gap: clamp(18px,3vw,40px); align-items:center;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(20px,3vw,32px); }
.chef-teaser .avatar { width: clamp(74px,9vw,104px); aspect-ratio:1; border-radius:50%; overflow:hidden; flex:none;
  background: var(--cream-2); position:relative; }
.chef-teaser .avatar img { width:100%; height:100%; object-fit:cover; object-position: center 25%; display:block; }
.chef-teaser .avatar .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-3); }
.chef-teaser .avatar .ph svg { width:34px; height:34px; opacity:.5; }
.chef-teaser h3 { margin:0 0 4px; }
.chef-teaser p { margin:0; color: var(--text-2); font-size:.97rem; }
@media (max-width:680px){
  .chef-teaser { grid-template-columns: auto 1fr; gap:16px; text-align:left; }
  .chef-teaser .btn { grid-column: 1 / -1; width:100%; }
}

/* Final CTA */
.rcta { position:relative; overflow:hidden; isolation:isolate; color:#fff; text-align:center;
  padding: clamp(56px,9vw,120px) var(--gut); border-radius: var(--radius-lg); }
.rcta img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.rcta::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(160deg, rgba(12,32,21,.92), rgba(12,32,21,.6)); }
.rcta h2 { color:#fff; max-width: 18ch; margin-inline:auto; }
.rcta p { color: rgba(255,255,255,.9); max-width: 48ch; margin: 18px auto 32px; font-size:1.1rem; }

/* ============================================================
   Video testimonials (home) — vertical, poster + click-to-play
   ============================================================ */
.vid-testimonials { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,2.5vw,28px);
  margin-bottom:clamp(34px,5vw,52px); }
.vid-card { flex:0 0 auto; width:clamp(240px,26vw,320px); border-radius:var(--radius-lg); overflow:hidden;
  background:#000; box-shadow:var(--shadow); }
.vid-card video { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; }
@media (max-width:560px){ .vid-card{ width:min(78vw,320px); } }

/* ============================================================
   Photo gallery — masonry wall + lightbox (home page)
   ============================================================ */
/* Marquee: 5 rows that auto-scroll horizontally (alternating direction).
   Each .ph-track holds its photos TWICE and animates -50% for a seamless loop. */
.photo-marquee { display:flex; flex-direction:column; gap:12px; overflow:hidden;
  --ph-dur: 120s;   /* base scroll duration — higher = slower */
  /* fade the left/right edges so photos slide in/out softly */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.ph-row { overflow:hidden; }
.ph-track { display:flex; gap:12px; width:max-content; will-change:transform;
  animation: ph-scroll var(--ph-dur, 60s) linear infinite;
  /* ease the speed change so hover slows it gently rather than snapping */
  transition: animation-duration .6s var(--ease); }
.ph-row[data-dir="rtl"] .ph-track { animation-name: ph-scroll-rtl; }
/* slow down (don't stop) the hovered row when the cursor is on it */
.ph-row:hover .ph-track { animation-duration: calc(var(--ph-dur, 60s) * 3.5); }
.ph-item { display:block; flex:0 0 auto; height: clamp(150px, 19vw, 230px); border-radius:var(--radius);
  overflow:hidden; position:relative; background:var(--cream-2); cursor:zoom-in; }
.ph-item img { height:100%; width:auto; display:block; transition:transform .5s var(--ease); }
.ph-item:hover img { transform:scale(1.06); }
.ph-item::after { content:""; position:absolute; inset:0; background:rgba(20,32,26,0); transition:background .3s; }
.ph-item:hover::after { background:rgba(20,32,26,.12); }

@keyframes ph-scroll     { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes ph-scroll-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width:760px){ .photo-marquee, .ph-track { gap:8px; } }
@media (prefers-reduced-motion: reduce){ .ph-track { animation:none; } .ph-row{ overflow-x:auto; } }

/* lightbox */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(8,12,9,.94); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s; }
.lightbox.is-open { opacity:1; }
.lightbox[hidden] { display:none; }
.lb-img { max-width:92vw; max-height:88vh; object-fit:contain; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb-close, .lb-nav { position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff;
  cursor:pointer; border-radius:50%; display:grid; place-items:center; transition:background .2s; backdrop-filter:blur(8px); }
.lb-close:hover, .lb-nav:hover { background:rgba(255,255,255,.25); }
.lb-close { top:20px; right:20px; width:46px; height:46px; font-size:1.8rem; line-height:1; }
.lb-nav { top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:2rem; line-height:1; }
.lb-prev { left:18px; } .lb-next { right:18px; }
.lb-count { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.8);
  font-size:.85rem; font-weight:600; letter-spacing:.04em; background:rgba(0,0,0,.3); padding:6px 14px; border-radius:999px; }
@media (max-width:560px){ .lb-nav{ width:44px; height:44px; font-size:1.6rem; } .lb-prev{ left:8px; } .lb-next{ right:8px; } .lb-close{ top:12px; right:12px; } }