/* ════════════════════════════════════════════════════
   MAGNOLIA HALL — Shared Inner Page Styles
   V2 design language: asymmetric, editorial, premium
════════════════════════════════════════════════════ */

/* 1. Anchor scroll offset — prevents sections hiding behind sticky nav */
html { scroll-padding-top: var(--nav-h); }
section[id], div[id] { scroll-margin-top: var(--nav-h); }

/* Page Hero — pushed below fixed nav globally */
.page-hero {
  position: relative;
  height: clamp(420px, 55vh, 680px);
  display: flex; align-items: flex-end;
  padding: 0 clamp(1.5rem,6vw,5.5rem) clamp(2.5rem,5vw,5rem);
  overflow: hidden;
  margin-top: var(--nav-h); /* pushes content below fixed nav */
}
.page-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(13,17,24,0.82) 0%, rgba(13,17,24,0.3) 38%, transparent 70%),
    linear-gradient(115deg, rgba(13,17,24,0.88) 0%, rgba(13,17,24,0.4) 50%, rgba(13,17,24,0.12) 100%);
}
.page-hero-content { position: relative; z-index: 2; max-width: 720px; }
.page-hero-eyebrow {
  font-size: clamp(0.66rem,1.1vw,0.76rem); font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: clamp(0.8rem,1.8vw,1.2rem);
}
.page-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem,5.5vw,5rem);
  font-weight: 300; line-height: 1.02; color: var(--white);
}
.page-hero-h1 em { font-style: italic; color: var(--gold-lt); }

/* Breadcrumb */
.breadcrumb {
  background: var(--charcoal-2);
  padding: 0.85rem clamp(1.5rem,6vw,5.5rem);
  border-bottom: 1px solid rgba(191,160,106,0.1);
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.breadcrumb a, .breadcrumb span {
  font-size: 0.62rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(248,244,234,0.38); transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--gold-lt); }
.breadcrumb .sep { color: rgba(191,160,106,0.3); }
.breadcrumb .current { color: rgba(248,244,234,0.65); }

/* Intro block */
.page-intro {
  background: var(--charcoal-2);
  padding: clamp(3.5rem,8vw,7rem) clamp(1.5rem,6vw,5.5rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem,6vw,6rem); align-items: start;
}
@media (max-width: 760px) { .page-intro { grid-template-columns: 1fr; } }
.page-intro-h {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3.8rem);
  font-weight: 300; line-height: 1.1; color: var(--ivory);
}
.page-intro-h em { font-style: italic; color: var(--gold-lt); }
.page-intro-body p {
  font-size: clamp(1rem,1.4vw,1.1rem); font-weight: 300;
  line-height: 1.95; color: rgba(248,244,234,0.68);
  margin-bottom: 1.3rem;
}
.page-intro-body p:last-child { margin-bottom: 0; }

/* Detail rows — asymmetric like homepage */
.detail-row {
  display: grid; grid-template-columns: 1.5fr 1fr;
  min-height: clamp(360px,50vh,600px);
}
.detail-row.flip { direction: rtl; }
.detail-row.flip > * { direction: ltr; }
@media (max-width: 800px) {
  .detail-row { grid-template-columns: 1fr; direction: ltr; min-height: 0; }
  .detail-row.flip { direction: ltr; }
  .detail-row .detail-img { order: -1; }
}
.detail-img { position: relative; overflow: hidden; min-height: clamp(280px,42vw,560px); }
.detail-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.detail-row:hover .detail-img img { transform: scale(1.05); }
.detail-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem,5vw,5rem) clamp(1.5rem,5vw,4.5rem);
  background: var(--charcoal-2);
}
.detail-text.dark { background: var(--charcoal); }
.detail-tag {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: clamp(0.8rem,1.8vw,1.2rem);
}
.detail-h {
  font-family: var(--font-display);
  font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 300;
  line-height: 1.12; color: var(--ivory);
  margin-bottom: clamp(1rem,2vw,1.6rem);
}
.detail-h em { font-style: italic; color: var(--gold-lt); }
.detail-p {
  font-size: clamp(0.97rem,1.3vw,1.05rem); font-weight: 300;
  line-height: 1.92; color: rgba(248,244,234,0.68);
  max-width: 48ch; margin-bottom: clamp(1.2rem,2vw,2rem);
}
.detail-list { margin-bottom: clamp(1.5rem,3vw,2.4rem); }
.detail-list li {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: clamp(0.86rem,1.1vw,0.92rem); font-weight: 300;
  color: rgba(248,244,234,0.68); padding: 0.55rem 0;
  border-bottom: 1px solid rgba(191,160,106,0.08);
}
.detail-list li::before { content: ''; width: 18px; height: 1px; background: var(--gold); opacity: 0.5; flex-shrink: 0; }
.detail-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); transition: gap 0.3s var(--ease); width: fit-content;
}
.detail-link:hover { gap: 18px; }
.detail-link::after { content: '⟶'; font-size: 0.9rem; }

/* Inset stat band */
.stat-strip {
  background: var(--charcoal-4);
  padding: clamp(3rem,6vw,6rem) clamp(1.5rem,6vw,5.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px,100%),1fr));
  gap: 0;
  border-top: 1px solid rgba(191,160,106,0.08);
  border-bottom: 1px solid rgba(191,160,106,0.08);
}
.stat-strip-item {
  padding: clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,2rem);
  text-align: center;
  border-right: 1px solid rgba(191,160,106,0.1);
}
.stat-strip-item:last-child { border-right: none; }
@media (max-width: 640px) {
  .stat-strip-item { border-right: none; border-bottom: 1px solid rgba(191,160,106,0.1); }
  .stat-strip-item:last-child { border-bottom: none; }
}
.stat-strip-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem,4vw,3.2rem); color: var(--gold-lt); line-height: 1; margin-bottom: 0.5rem;
}
.stat-strip-label {
  font-size: 0.6rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(248,244,234,0.38);
}

/* CTA band */
.page-cta {
  background: var(--charcoal);
  padding: clamp(2.8rem,6vw,6rem) clamp(1.5rem,6vw,5.5rem);
  text-align: center; position: relative; overflow: hidden;
}
.page-cta::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(191,160,106,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.page-cta-eyebrow {
  font-size: 0.62rem; font-weight: 400; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--gold); margin-bottom: clamp(1rem,2vw,1.6rem);
}
.page-cta-h {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3.8rem); font-weight: 300; line-height: 1.12;
  color: var(--ivory); max-width: 16ch; margin: 0 auto clamp(1.2rem,2.5vw,2rem);
}
.page-cta-h em { font-style: italic; color: var(--gold-lt); }
.page-cta-p {
  font-size: clamp(0.92rem,1.2vw,1rem); font-weight: 300; line-height: 1.85;
  color: rgba(248,244,234,0.55); max-width: 50ch; margin: 0 auto clamp(2rem,4vw,3rem);
}
.page-cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 480px) { .page-cta-btns { flex-direction: column; align-items: stretch; } .page-cta-btns .btn { justify-content: center; } }

/* Reveal animations */
.r { opacity: 0; transform: translateY(36px); transition: opacity 0.95s var(--ease), transform 0.95s var(--ease); }
.r.in { opacity: 1; transform: translateY(0); }
.rl { opacity: 0; transform: translateX(-44px); transition: opacity 0.95s var(--ease), transform 0.95s var(--ease); }
.rl.in { opacity: 1; transform: translateX(0); }
.rr { opacity: 0; transform: translateX(44px); transition: opacity 0.95s var(--ease), transform 0.95s var(--ease); }
.rr.in { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .r,.rl,.rr { opacity:1; transform:none; transition:none; } }

/* ── MOBILE RESPONSIVE EXTRAS ────────────────────── */
@media (max-width: 600px) {
  .page-hero {
    height: clamp(380px,68vw,540px);
    padding: 0 clamp(1.25rem,5vw,2.5rem) clamp(1.8rem,5vw,2.5rem);
  }
  .page-hero-h1 { font-size: clamp(1.9rem,8vw,3rem); line-height: 1.06; }
  .page-intro { padding: clamp(2rem,5vw,3.5rem) clamp(1.25rem,5vw,2.5rem); gap: 1.8rem; }
  .page-intro-body p { font-size: 1rem; }
  .page-cta { padding: 2.5rem clamp(1.25rem,5vw,2.5rem); }
  .page-cta-h { font-size: clamp(1.8rem,7vw,2.6rem); }
  .page-cta-p { font-size: 0.96rem; }
  .detail-text { padding: 2rem 1.25rem; }
  .detail-list li { font-size: 0.92rem; padding: 0.65rem 0; }
  .breadcrumb { padding: 0.75rem 1.25rem; }
}

/* ══════════════════════════════════════════════════
   SITEWIDE PAGE.CSS GLOBAL PASS
   Applies to all inner pages via page.css
══════════════════════════════════════════════════ */

/* ── 1. BODY COPY CONTRAST — page.css specifics ──── */
.detail-p { color: rgba(248,244,234,0.72); }
.detail-list li { color: rgba(248,244,234,0.72); }
.page-intro-body p { color: rgba(248,244,234,0.72); }
.page-cta-p { color: rgba(248,244,234,0.65); }
.stat-strip-label { color: rgba(248,244,234,0.5); font-size: 0.68rem; }

/* ── 2. HERO — consistent sizing and overflow ────── */
.page-hero-h1 { font-size: clamp(2.1rem,5.5vw,5rem); }
/* Prevent hero headline from getting orphan words */
.page-hero-h1 br { display: block; }

/* ── 6. PACKAGE SUMMARY BLOCK ────────────────────── */
/* Used on individual package detail pages */
.pkg-summary-bar {
  background: rgba(191,160,106,0.07);
  border-left: 2px solid rgba(191,160,106,0.4);
  padding: clamp(0.9rem,1.8vw,1.2rem) clamp(1rem,2vw,1.5rem);
  margin: clamp(1rem,2vw,1.5rem) 0;
  font-size: clamp(0.86rem,1.1vw,0.94rem);
  font-weight: 400; letter-spacing: 0.08em;
  color: rgba(248,244,234,0.72);
  line-height: 1.7;
}
.pkg-summary-bar strong {
  color: var(--gold-lt); font-weight: 500;
  letter-spacing: 0.05em;
}

/* ── 7. DETAIL LIST — stronger sitewide ─────────── */
.detail-list li {
  font-size: clamp(0.94rem,1.2vw,1.02rem);
  padding: 0.68rem 0;
  gap: 0.82rem;
  border-bottom: 1px solid rgba(191,160,106,0.1);
}
.detail-list li:last-child { border-bottom: none; }
.detail-list li::before { width: 18px; height: 1px; opacity: 0.65; }

/* ── 8. SECTION SPACING — mobile tighten ────────── */
@media (max-width: 600px) {
  .page-hero { padding-bottom: clamp(1.8rem,5vw,2.8rem); }
  .page-intro { padding: 2rem clamp(1.25rem,5vw,2rem); gap: 1.5rem; }
  .page-cta { padding: 2.5rem clamp(1.25rem,5vw,2rem); }
  .detail-text { padding: 1.8rem 1.25rem; }
  .stat-strip { padding: 1.5rem 1.25rem; }
  .stat-strip-item { padding: 1rem 0.75rem; }
  .breadcrumb { padding: 0.72rem 1.25rem; }
}

/* ── 4. CTA BUTTONS — sitewide mobile full-width ─── */
@media (max-width: 540px) {
  .page-cta-btns {
    flex-direction: column; align-items: stretch;
    max-width: 360px; margin-left: auto; margin-right: auto;
  }
  .page-cta-btns .btn { justify-content: center; min-height: 52px; }
  .page-cta-btns .btn-lavender { order: -1; font-size: 0.82rem; }
}

/* ── DETAIL ROW — image always min comfortable height */
@media (max-width: 800px) {
  .detail-img { min-height: clamp(230px,50vw,380px); }
}
@media (max-width: 430px) {
  .detail-img { min-height: clamp(200px,52vw,300px); }
  .detail-h { font-size: clamp(1.6rem,7vw,2.2rem); }
  .detail-p { font-size: 1rem; }
}

/* ── BREADCRUMB — improved globally ─────────────── */
.breadcrumb a, .breadcrumb span {
  font-size: 0.7rem;
  color: rgba(248,244,234,0.5);
}
.breadcrumb .current { color: rgba(248,244,234,0.82); }