/* ===================================================================
   CARMELICIOUS CREATIVE STUDIO — About Page
   Scoped under body.cc-page-about. Loaded conditionally.
   =================================================================== */

/* VIDEO FIGURE */
.cc-video-figure { margin: 0; }
.cc-video-frame {
  position: relative; border-radius: var(--cc-radius-lg); overflow: hidden;
  background: var(--cc-charcoal-soft);
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-lg);
  aspect-ratio: 16 / 9;
}
.cc-video-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Custom play overlay — hidden once playback starts */
.cc-video-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,184,138,0.95); color: var(--cc-on-accent);
  border: none; cursor: pointer;
  box-shadow: 0 12px 36px -10px rgba(59,53,44,0.30);
  transition: transform var(--cc-transition), background var(--cc-transition),
              opacity var(--cc-transition);
}
.cc-video-play:hover { transform: scale(1.07); background: var(--cc-peach-light); }
.cc-video-play.is-hidden { opacity: 0; pointer-events: none; }
.cc-video-figure figcaption {
  margin-top: var(--cc-space-md); text-align: center;
  font-family: var(--cc-font-accent); font-style: italic;
  font-size: 0.95rem; color: var(--cc-cream-soft);
}

/* ABOUT GRID */
.cc-about-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
@media (max-width: 900px) {
  .cc-about-grid { grid-template-columns: 1fr; }
}

/* PORTRAIT */
.cc-portrait { position: relative; }

.cc-portrait::before {
  content: ''; position: absolute; inset: 20px -20px -20px 20px;
  background: radial-gradient(ellipse at center,
    rgba(216,155,108,0.10) 0%, transparent 70%);
  border-radius: var(--cc-radius-lg); z-index: -1;
}
/* Real portrait: show the full image at its natural ratio (no cropping).
   A hairline border + soft shadow lets the pencil sketch sit on the cream like
   a framed piece on a gallery wall — lifted, but never boxed in a heavy frame. */
.cc-portrait img {
  width: 100%; height: auto; display: block;
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-line);
  box-shadow: var(--cc-shadow-md);
}
/* Placeholder keeps a fixed 4:5 frame. */
.cc-portrait .cc-portrait-ph {
  width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-line);
  background: var(--cc-charcoal-soft);
  display: flex; align-items: center; justify-content: center;
}
/* Placeholder line-drawing reads as a pencil study on cream: warm dark-grey
   stroke at low opacity, not a peach glow on black. */
.cc-portrait-ph svg { width: 45%; height: auto; color: var(--cc-cream); opacity: 0.3; }

/* PULL QUOTE */
/* Pull-quote restyled for cream: teal ink reads as the more artistic, elegant
   choice against warm cream (~6.5:1, comfortably legible), with a soft peach
   rule down the left. */
.cc-pullquote {
  font-family: var(--cc-font-accent); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.6;
  color: var(--cc-teal); border-left: 2px solid rgba(216,155,108,0.5);
  padding-left: var(--cc-space-lg); margin-block: var(--cc-space-lg);
}

/* ───────────────────────────────────────────────
   TEMPLATE HELPERS (scoped to this page)
   ─────────────────────────────────────────────── */

/* The story button sits under left-aligned prose, so left-align its row too
   (the shared .cc-btn-row is centred by default). */
.cc-page-about .cc-story-copy .cc-btn-row { justify-content: flex-start; }