/* ============================================================
   STUDIO — architectural, asymmetric override layer for Lumière.
   Loaded AFTER lumiere.css. The hero is a two-column grid: an
   accent-tinted type panel (with a vertical accent bar) beside a
   full-height photo. Cool light canvas. Everything else inherited.
   ============================================================ */

.studio {
  --l-bg: #f4f4f2;
  --l-surface: #ffffff;
  --l-muted-surface: #eaeae6;
  --l-border: #dcdcd6;
  --l-ink: #16181a;
  --l-ink-muted: #565a5e;
  --l-radius-card: 10px;
  --l-radius-media: 10px;
}
body.studio { background: var(--l-bg); color: var(--l-ink); }

/* ---- Nav ---- */
.studio #nav { background: color-mix(in srgb, var(--l-bg) 84%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--l-border); }

/* ---- Hero: asymmetric grid, type panel + full-height photo ---- */
.studio .studio-hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.06fr 0.94fr; align-items: stretch; padding: 0; overflow: hidden; }
.studio .studio-panel { position: relative; display: flex; align-items: center; background: color-mix(in srgb, var(--accent) 7%, var(--l-bg)); border-right: 1px solid var(--l-border); padding: clamp(6rem, 9vw, 9rem) clamp(2rem, 5vw, 5rem); }
.studio .studio-panel::before { content: ""; position: absolute; left: 0; top: clamp(6rem, 9vw, 9rem); bottom: clamp(6rem, 9vw, 9rem); width: 5px; background: var(--accent); }
.studio .studio-panel .l-hero-inner { position: relative; max-width: 36rem; }
.studio .studio-panel .eyebrow { color: var(--accent); opacity: 1; }
.studio .l-hero-h1 { color: var(--l-ink); text-shadow: none; font-size: clamp(3rem, 5.2vw, 6.4rem); line-height: 0.96; letter-spacing: -0.025em; }
.studio .l-hero-h1 em { color: var(--accent); }
.studio .l-hero-tag { color: var(--l-ink-muted); opacity: 1; margin-top: 1.6rem; max-width: 40ch; }
.studio .l-hero-rating { color: var(--l-ink-muted); }
.studio .l-hero-rating .stars { color: var(--accent); }
.studio .studio-photo { position: relative; inset: auto; width: 100%; height: 100%; background-size: cover; background-position: center; animation: none; }

/* ghost button on the light canvas */
.studio .btn-ghost { color: var(--l-ink); border-color: var(--l-border); }
.studio .btn-ghost:hover { background: var(--l-ink); color: var(--l-bg); border-color: var(--l-ink); }

/* squared, architectural media */
.studio .l-about-media,
.studio .bs-edu-media,
.studio .gallery-grid img { border-radius: var(--l-radius-media); }

/* section eyebrows get a small accent tick */
.studio .section-eyebrow::before { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); margin-bottom: 1.1rem; }

@media (max-width: 860px) {
  .studio .studio-hero { grid-template-columns: 1fr; min-height: auto; }
  .studio .studio-panel { border-right: 0; border-bottom: 1px solid var(--l-border); padding: clamp(7rem, 14vw, 9rem) 1.5rem clamp(3rem, 8vw, 4rem); }
  .studio .studio-panel::before { top: clamp(7rem, 14vw, 9rem); bottom: auto; height: 2.4rem; }
  .studio .studio-photo { height: 54vh; }
}

/* Reviews section: blend with this light layout instead of the inherited dark
   band (Kevin 2026-07-30 — the black slab clashed on the light layouts). */
.studio .l-reviews { background: color-mix(in srgb, var(--accent) 6%, var(--l-bg)); color: var(--l-ink); }
.studio .l-reviews .section-eyebrow { color: var(--accent); }
.studio .review-stat .num { color: var(--l-ink); }
.studio .review-stat .count { color: var(--l-ink-muted); }
.studio .review-card { background: var(--l-surface); border: 1px solid var(--l-border); }
.studio .review-card:hover { background: var(--l-surface); }
.studio .review-card .rtext { color: var(--l-ink); }
.studio .review-card .rauthor { color: var(--l-ink-muted); }