/* ═══ Video Lesson Section · v1 ═══
   Reusable video-embed block for section-index pages.
   Cream ground · burgundy heading · gold rule.
   No autoplay, no external trackers, iframe is lazy-loaded when wired. */

.vls-block {
  max-width: 780px;
  margin: 40px auto 32px;
  padding: 22px 24px 20px;
  background: #FDFBF5;
  border: 1px solid rgba(107, 31, 46, 0.15);
  border-left: 3px solid #B08D57;
  border-radius: 6px;
  font-family: "Cormorant Garamond", "Baskerville", Georgia, serif;
  color: #2B2418;
  text-align: left;
}

.vls-kicker {
  display: inline-block;
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B08D57;
  font-weight: 600;
  margin: 0 0 8px;
}

.vls-heading {
  font-family: "Cormorant Garamond", "Baskerville", Georgia, serif;
  font-weight: 600;
  font-size: 1.55rem;
  color: #6B1F2E;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  line-height: 1.2;
}

.vls-caption {
  font-family: "Source Serif Pro", Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(43, 36, 24, 0.72);
  margin: 0 0 14px;
}

.vls-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #F5EFE0 0%, #EDE4CE 100%);
  border: 1px solid rgba(180, 135, 72, 0.35);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vls-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vls-placeholder {
  text-align: center;
  padding: 20px;
}

.vls-placeholder-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  color: #B08D57;
  line-height: 1;
  margin: 0 0 10px;
}

.vls-placeholder-text {
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 1rem;
  color: rgba(43, 36, 24, 0.72);
  font-style: italic;
  margin: 0;
}

.vls-note {
  font-family: "Source Serif Pro", Georgia, serif;
  font-size: 0.82rem;
  color: rgba(43, 36, 24, 0.6);
  margin: 12px 0 0;
  font-style: italic;
}

@media (max-width: 640px) {
  .vls-block { margin: 32px 16px 24px; padding: 18px 18px 16px; }
  .vls-heading { font-size: 1.35rem; }
}

@media print {
  .vls-block { background: transparent; border: 1px solid #ccc; }
  .vls-frame { background: transparent; }
}