/* ============================================================
   IMAGERY TREATMENT — warm lifestyle photos + floating Nishi
   cards, layered on top of main.css.
   ============================================================ */

body { overflow-x: hidden; }

/* ---------- generic photo frame ---------- */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.photo-frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
/* warm wash so photos belong to the cream palette */
.photo-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(221,108,89,0) 55%, rgba(42,74,58,.28) 100%);
  pointer-events: none;
}

/* floating Nishi card that sits over a photo */
.float-card {
  position: absolute;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(42,37,32,.22);
  padding: 14px 16px;
  max-width: 250px;
  font-family: var(--font-sans);
  border: 1px solid rgba(255,255,255,.6);
}
.float-card .fc-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--accent); margin-bottom: 6px;
}
.float-card .fc-head .dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); display: inline-flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 10px;
}
.float-card .fc-body { font-size: 14px; line-height: 1.4; color: var(--text); }
.float-card .fc-body em { color: var(--accent-dark); font-style: normal; font-weight: 600; }

/* ---------- HERO split ---------- */
.hero-v2 { text-align: left; padding-bottom: var(--space-lg); }
.hero-v2 .hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl); align-items: center;
}
.hero-v2 .hero-copy { max-width: 520px; }
.hero-v2 h1 { font-size: clamp(40px, 5vw, 60px); }
.hero-v2 .hero-cta { flex-direction: row; align-items: center; justify-content: flex-start; }
.hero-photo { position: relative; aspect-ratio: 4/5; }
.hero-photo .float-card.a { bottom: 22px; left: -28px; }
.hero-photo .float-card.b { top: 26px; right: -24px; max-width: 200px; }
@media (max-width: 860px) {
  .hero-v2 .hero-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero-v2 .hero-copy { max-width: 100%; text-align: center; margin: 0 auto; }
  .hero-v2 .hero-cta { justify-content: center; }
  .hero-photo { max-width: 380px; margin: 0 auto; }
  .hero-photo .float-card.a { left: -8px; }
  .hero-photo .float-card.b { right: -8px; }
}

/* ---------- streams with photos ---------- */
.streams-v2 .stream-col { text-align: left; }
.stream-photo {
  aspect-ratio: 3/2; border-radius: var(--radius);
  overflow: hidden; margin-bottom: 18px; box-shadow: var(--shadow-md);
  position: relative; isolation: isolate;
}
.stream-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stream-photo .tag {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(255,255,255,.94); color: var(--text);
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 6px;
}
.stream-photo .tag .sw { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- full-bleed photo band ---------- */
.photo-band {
  position: relative; min-height: 460px;
  display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
}
.photo-band img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.photo-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(42,74,58,.86) 0%, rgba(42,74,58,.55) 45%, rgba(42,74,58,.12) 100%);
}
.photo-band .band-copy { max-width: 560px; color: #F8F4EC; }
.photo-band .eyebrow-text { color: var(--accent-soft); }
.photo-band h2 { color: #fff; font-family: var(--font-serif); font-weight: 500; }
.photo-band p { color: rgba(248,244,236,.9); }

/* ---------- GLP-1 split (photo + mock) ---------- */
.glp-grid {
  display: grid; grid-template-columns: 0.85fr 1fr;
  gap: var(--space-lg); align-items: center; max-width: 1000px; margin: 0 auto;
}
.glp-grid .photo-frame { aspect-ratio: 3/4; }
@media (max-width: 760px) { .glp-grid { grid-template-columns: 1fr; } }

/* ---------- photo + UI proof trio ---------- */
.proof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md); margin-top: var(--space-lg);
}
.proof-grid .photo-frame { aspect-ratio: 4/5; }
.proof-grid figcaption {
  margin-top: 12px; font-family: var(--font-sans); font-size: 14px;
  color: var(--text-soft); text-align: center;
}
@media (max-width: 760px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---------- closing CTA over photo ---------- */
.closing-v2 { position: relative; overflow: hidden; isolation: isolate; }
.closing-v2 img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.closing-v2 { padding: var(--space-2xl) 0; }
.closing-v2::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(199,90,72,.80) 0%, rgba(42,74,58,.78) 100%);
}
.closing-v2 h2 { color: #fff; }
.closing-v2 p { color: rgba(255,255,255,.92); }
.closing-v2 .btn-primary { background: #fff; color: var(--accent-dark); }

/* ---------- solid bands (no photo) — clean deep-green editorial blocks ---------- */
.photo-band.solid { background: linear-gradient(160deg, #33503F 0%, #223A2D 100%); min-height: 380px; }
.photo-band.solid::before { display: none; }
.closing-v2.solid::before { background: linear-gradient(160deg, #33503F 0%, #223A2D 100%); }