/**
 * CUTIS Theme — Service "A word from our lead dermatologist" video section
 * Classes kept identical to _design-reference/style.css (video-panel,
 * play-btn, video-caption, btn-cutis/btn-cutis-outline) since none of them
 * collide with anything in header.css/layout.css.
 *
 * .container-cutis, .row/.g-5/.align-items-center, .col-lg-5/.col-lg-7 are
 * already defined in single-service-types.css / single-service-candidate.css /
 * single-service-why.css, all enqueued alongside this file on every service
 * singular page (all conditioned on is_singular('service') in functions.php)
 * — not redeclared here.
 *
 * .btn-cutis / .btn-cutis-outline don't exist anywhere in the theme yet — the
 * Hero section's CTAs use their own BEM classes (service-hero__cta) instead
 * of the reference's shared button classes, so there's nothing to reuse
 * verbatim. Defined fresh below, but built from the same Theme Settings
 * tokens Hero's .service-hero__cta--outline already reads from (button
 * radius/color), rather than the reference's hardcoded pill shape — so this
 * CTA matches Hero's outline button exactly and stays in sync if those
 * settings change.
 *
 * This section has a plain white background in the reference (no bg wash
 * class), so it needs no section-shell background rule.
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens
 * (inc/theme-settings.php -> cutis_output_theme_css_vars()). Values with no
 * matching token (radius/shadow, the reference's cream/ink tones) are
 * hardcoded or derived via color-mix(), same technique used throughout
 * single-service-introduction.css / single-service-why.css. The reference's
 * --font-mono is dropped for .video-caption span, same reasoning as
 * single-service-cost.css / single-service-awards.css — no monospace token
 * exists in the theme.
 */

/* ------------------------------------------------------------------ */
/* Shared pill button (only the two variants used in this section) */
/* ------------------------------------------------------------------ */
.btn-cutis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--cutis-button-radius);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-cutis-outline {
  background: transparent;
  color: var(--cutis-color-primary);
  border-color: var(--cutis-color-primary);
}
.btn-cutis-outline:hover {
  background: color-mix(in srgb, var(--cutis-color-primary) 10%, transparent);
}

/* ------------------------------------------------------------------ */
/* Video panel */
/* ------------------------------------------------------------------ */
.video-panel {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow:
    0 20px 50px rgba(15, 43, 61, 0.12),
    0 4px 10px rgba(15, 43, 61, 0.06);
  background: color-mix(in srgb, var(--cutis-color-border) 30%, white);
}
.video-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 43, 61, 0.55), transparent 55%);
  pointer-events: none;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 20px 50px rgba(15, 43, 61, 0.12),
    0 4px 10px rgba(15, 43, 61, 0.06);
  z-index: 2;
  transition: transform 0.3s ease;
  border: none;
  cursor: pointer;
}
.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.play-btn svg {
  width: 26px;
  height: 26px;
  fill: var(--cutis-color-primary);
  margin-left: 3px;
}

.video-caption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  color: var(--cutis-color-surface);
  z-index: 2;
}
.video-caption h4 {
  color: var(--cutis-color-surface);
  font-size: 17px;
  margin: 0;
}
.video-caption span {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cutis-color-cream);
}