/* ==========================================================================
   HAVE A SEAT — Cozy scene frames (swap-ready)
   Each .photo is a warm gradient "photograph" placeholder. Drop a real
   <img> inside (from assets/img/) and it covers the gradient automatically.
   ========================================================================== */

.photo {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,0.35), transparent 55%),
    linear-gradient(160deg, var(--ph-from, #6b5a44) 0%, var(--ph-to, #3a2f24) 100%);
  isolation: isolate;
}
.photo > img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 2; }
.photo::after { /* warm vignette + light bloom */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 68% 30%, rgba(255, 220, 160, 0.28), transparent 60%),
    radial-gradient(120% 100% at 50% 120%, rgba(20, 12, 6, 0.45), transparent 60%);
}
.photo .ph-motif {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(2.4rem, 8vw, 4rem); opacity: 0.5; filter: saturate(0.85);
}
.photo .ph-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: var(--s-4);
  color: #FBF3E4; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wide);
  background: linear-gradient(0deg, rgba(20,12,6,0.6), transparent);
  display: flex; align-items: center; gap: var(--s-2);
}
.photo .ph-tag {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 3;
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: var(--tracking-wide);
  padding: 0.4em 0.7em; border-radius: var(--r-pill); background: rgba(255,253,248,0.92); color: var(--c-ink);
}

/* Scene palettes ---------------------------------------------------------- */
.ph-hearth   { --ph-from: #8a5a34; --ph-to: #3a231a; }  /* fireplace / cozy room */
.ph-door     { --ph-from: #4f6b47; --ph-to: #24331f; }  /* evening green door */
.ph-window   { --ph-from: #c98b52; --ph-to: #6a4a2c; }  /* sunset window / flowers */
.ph-garden   { --ph-from: #6f8a53; --ph-to: #33452a; }  /* garden / growth */
.ph-study    { --ph-from: #7a6540; --ph-to: #362a1c; }  /* library / study */
.ph-table    { --ph-from: #b98a58; --ph-to: #5c3f28; }  /* welcome table */
.ph-commons  { --ph-from: #6a58ad; --ph-to: #322757; }  /* commons / city */
.ph-night    { --ph-from: #2b3a63; --ph-to: #141d33; }  /* sports night */
.ph-loft     { --ph-from: #8a8460; --ph-to: #43402c; }
.ph-heart    { --ph-from: #b06a4a; --ph-to: #5a3325; }
.ph-family   { --ph-from: #5c7a4e; --ph-to: #2c3e26; }

/* Aspect helpers ---------------------------------------------------------- */
.ph-16x9  { aspect-ratio: 16 / 9; }
.ph-4x3   { aspect-ratio: 4 / 3; }
.ph-1x1   { aspect-ratio: 1 / 1; }
.ph-3x2   { aspect-ratio: 3 / 2; }
.ph-3x4   { aspect-ratio: 3 / 4; }
.ph-book  { aspect-ratio: 3 / 4; border-radius: var(--r-sm); }

/* Faith verse callout ----------------------------------------------------- */
.verse {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: var(--c-gold-soft); border: 1px solid #EAD9A8;
}
.verse .vi { color: var(--c-gold); flex: none; margin-top: 2px; }
.verse .vt { font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm); color: #6b5320; line-height: var(--lh-base); }
.verse .vr { font-size: var(--fs-2xs); font-weight: 700; color: var(--c-honey-deep); letter-spacing: var(--tracking-wide); }

/* Principles band --------------------------------------------------------- */
.principles {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4);
  padding: var(--s-5) var(--s-6); background: var(--c-cream-deep);
  border-top: 1px solid var(--c-line);
}
.principle { display: flex; gap: var(--s-3); align-items: flex-start; }
.principle .pi { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; display: flex; align-items: center; justify-content: center; background: var(--c-green-soft); color: var(--c-green-deep); }
.principle .pi svg { width: 18px; height: 18px; }
.principle b { font-size: var(--fs-xs); display: block; }
.principle span { font-size: var(--fs-3xs); color: var(--c-ink-muted); line-height: 1.35; }
@media (max-width: 900px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .principles { grid-template-columns: 1fr; } }

/* Ava robot avatar -------------------------------------------------------- */
.ava-bot {
  --sz: 46px; width: var(--sz); height: var(--sz); flex: none; border-radius: 24% 24% 30% 30%;
  position: relative;
  background: linear-gradient(160deg, #f4f6f2, #d7e2d3);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.08), var(--sh-sm);
  border: 1.5px solid #c4d3bf;
}
.ava-bot::before { /* visor */
  content: ""; position: absolute; left: 16%; right: 16%; top: 22%; height: 40%;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 35% 35%, #4a8f6a, #1f4d38);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
}
.ava-bot::after { /* eyes */
  content: ""; position: absolute; left: 30%; top: 38%; width: 8%; height: 8%;
  border-radius: 50%; background: #bdfbe0;
  box-shadow: 130% 0 0 #bdfbe0, 0 0 8px #7fe9bd;
}
.ava-bot .heart {
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  color: var(--c-green); font-size: calc(var(--sz) * 0.22); line-height: 1;
}
.ava-bot.sm { --sz: 34px; } .ava-bot.lg { --sz: 64px; } .ava-bot.xl { --sz: 96px; }