/* vdr-specimen — full-bleed phone specimen band (layout language for cases).
   Contract: .vdr-specimen[data-n] with --vdr-specimen-from / --vdr-specimen-to.
   Video: via data-vdr-lazy-video + vdr-lazy-media.js (poster, preload none, viewport play). */

.vdr-specimen {
  --vdr-specimen-from: #C3D3D3;
  --vdr-specimen-to: #EBD6CD;
  --vdr-specimen-phone: min(42vw, 280px);
  --vdr-specimen-bezel: 12px;
  --vdr-specimen-radius: 42px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(48px, 8vw, 88px) 24px clamp(56px, 7vw, 80px);
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--vdr-specimen-from) 0%, var(--vdr-specimen-to) 100%);
  overflow: hidden;
}

.vdr-specimen__label {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3.5vw, 40px);
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(45, 48, 52, 0.45);
  line-height: 1;
}

.vdr-specimen__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3vw, 32px);
  max-width: 720px;
  margin: 0 auto;
}

.vdr-specimen__phone {
  width: var(--vdr-specimen-phone);
  aspect-ratio: 426 / 884;
  background: #ffffff;
  border-radius: var(--vdr-specimen-radius);
  padding: var(--vdr-specimen-bezel);
  box-sizing: border-box;
  box-shadow:
    0 28px 60px -20px rgba(40, 36, 32, 0.28),
    0 10px 24px -12px rgba(40, 36, 32, 0.18);
}

.vdr-specimen__screen {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--vdr-specimen-radius) - var(--vdr-specimen-bezel) + 2px);
  overflow: hidden;
  background: #0a0a0a;
  position: relative;
}

.vdr-specimen__video,
.vdr-specimen__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: #0a0a0a;
  border: 0;
}

.vdr-specimen__caption {
  text-align: center;
  max-width: 28rem;
  padding: 0 12px;
}

.vdr-specimen__caption-kicker {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  line-height: 1.2;
}

.vdr-specimen__caption-text {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  color: #2a2723;
}

@media (max-width: 900px) {
  .vdr-specimen {
    --vdr-specimen-phone: min(58vw, 240px);
    --vdr-specimen-radius: 36px;
    --vdr-specimen-bezel: 10px;
    padding: 48px 16px 56px;
  }
}

@media (max-width: 520px) {
  .vdr-specimen {
    --vdr-specimen-phone: min(72vw, 220px);
    --vdr-specimen-radius: 32px;
  }
  .vdr-specimen__label {
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vdr-specimen__video,
  .vdr-specimen__screen video {
    /* still show first frame / poster; JS may pause */
  }
}