/* The supplied video reference; the existing 1240px / 1184px frame stays intact. */
.home-page .video-reference {
  --video-ink: #34133f;
  --video-accent: #a70244;
  --video-label: #f9e5f2;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0 0 var(--home-section-space);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--video-ink);
  box-shadow: none;
}

.home-page .video-reference::before {
  content: "";
  position: absolute;
  inset: -70px 0 -70px;
  z-index: -2;
  background: url("../img/video-reference-scene.svg") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 65px), transparent);
  mask-image: linear-gradient(transparent, #000 80px, #000 calc(100% - 65px), transparent);
  pointer-events: none;
}

.home-page .video-reference::after {
  content: "";
  position: absolute;
  inset: 14px max(18px, calc((100% - 1440px) / 2)) 14px;
  z-index: -1;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}

.home-page .video-reference .video-inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 44px 28px 50px;
}

.home-page .video-reference .section-heading {
  align-items: center;
  margin-bottom: 32px;
}

.home-page .video-reference .section-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 0;
  padding: 5px 17px;
  border-radius: 10px;
  background: #f6ddf0;
  color: #842578;
  font-size: 15px;
  line-height: 1.5;
}

.home-page .video-reference .section-kicker svg { width: 13px; height: 15px; }

.home-page .video-reference .outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: 5px 15px;
  border: 1px solid var(--video-accent);
  border-radius: 10px;
  background: #ffffff;
  color: #a70244;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 12px 22px -15px rgba(167, 2, 68, .35);
}

.home-page .video-reference .video-carousel-track { gap: 20px; padding: 6px 2px 22px; }
.home-page .video-reference .video-carousel-track > .video-card { flex: 0 0 calc((100% - 40px) / 3); }

.home-page .video-reference .video-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 17px 29px -22px rgba(167, 2, 68, .3);
}

.home-page .video-reference .video-poster {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1.95;
  border-radius: 10px 10px 0 0;
  background: #f1e5f2;
  box-shadow: none;
  transform: none;
}

.home-page .video-reference .play-icon {
  width: 46px;
  height: 46px;
  padding: 0;
  background: rgba(255, 255, 255, .94);
  color: #b20c62;
  box-shadow: 0 5px 14px -8px rgba(48, 13, 50, .22);
}
.home-page .video-reference .play-icon svg { width: 16px; height: 18px; margin-left: 3px; }

.home-page .video-reference .duration {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  bottom: 12px;
  left: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(20, 17, 23, .78);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}
.home-page .video-reference .duration svg { width: 16px; height: 12px; }

.home-page .video-reference .video-card-copy {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 120px;
  margin-top: -5px;
  padding: 14px 16px 19px;
  border-radius: 10px 10px 10px 10px;
  background: #fff;
}

.home-page .video-reference .content-meta {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.home-page .video-reference .content-meta a {
  position: relative;
  max-width: 100%;
  padding: 4px 15px;
  border-radius: 10px;
  background: var(--video-label);
  color: #bd3f83;
}

.home-page .video-reference .content-meta a::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 4px;
  height: 13px;
  border-radius: 3px;
  background: #c00a67;
  transform: translateY(-50%);
}

.home-page .video-reference .video-card h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 12px 0 0;
  color: var(--video-ink);
  font-size: 18px;
  line-height: 1.65;
}

/* The four-card reference remains complete when all four published videos fit. */
.home-page .video-reference .carousel-stage > .carousel-controls { display: block; }
.home-page .video-reference .carousel-stage > .carousel-controls button {
  width: 48px;
  height: 48px;
  border: 0;
  background: #fff;
  color: var(--video-accent);
  box-shadow: 0 8px 18px -11px rgba(167, 2, 68, .24);
}
.home-page .video-reference .carousel-stage > .carousel-controls button:disabled { display: grid; opacity: .5; cursor: default; }
.home-page .video-reference .carousel-stage > .carousel-controls button:disabled:hover { background: #fff; color: var(--video-accent); }
.home-page .video-reference[data-video-count="0"] .carousel-stage > .carousel-controls,
.home-page .video-reference[data-video-count="1"] .carousel-stage > .carousel-controls { display: none; }

.home-page .video-reference .outline-button:focus-visible,
.home-page .video-reference .video-card a:focus-visible { outline: 3px solid var(--video-accent); outline-offset: 4px; }

@media (hover: hover) {
  .home-page .video-reference .video-poster:hover { transform: none; box-shadow: none; }
  .home-page .video-reference .outline-button:hover { background: #880238; border-color: #880238; color: #fff; }
  .home-page .video-reference .carousel-controls button:not(:disabled):hover { background: var(--video-accent); color: #fff; }
}

@media (max-width: 1399px) {
  .home-page .video-reference .carousel-stage .carousel-viewport { margin-inline: 56px; }
}

@media (max-width: 1100px) {
  .home-page .video-reference .video-carousel-track > .video-card { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 720px) {
  .home-page .video-reference { margin-bottom: 52px; }
  .home-page .video-reference::before { inset-block: -35px -40px; background-size: auto 100%; }
  .home-page .video-reference::after { inset: 10px 9px; border-radius: 10px; }
  .home-page .video-reference .video-inner { padding: 38px 18px 32px; }
  .home-page .video-reference .section-heading { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; margin-bottom: 26px; }
.home-page .video-reference .section-kicker { font-size: 14px; padding: 5px 14px; }
  .home-page .video-reference .carousel-heading-actions { width: auto; flex: 0 0 auto; justify-content: flex-end; }
  .home-page .video-reference .outline-button { white-space: nowrap; }
  .home-page .video-reference .carousel-stage { --carousel-control-top: 6px; --carousel-control-bottom: 22px; }
  .home-page .video-reference .duration { left: 30px; }
  .home-page .video-reference .video-carousel-track { gap: 14px; }
  .home-page .video-reference .carousel-stage .carousel-viewport { margin-inline: 0; }
  .home-page .video-reference .video-carousel-track > .video-card { flex-basis: 100%; }
  .home-page .video-reference .video-card-copy { min-height: 120px; padding: 16px 28px 20px; }
  .home-page .video-reference .video-card h3 { font-size: 20px; }
  .home-page .video-reference .carousel-stage > .carousel-controls button { width: 44px; height: 44px; }
}

/* Publication metadata follows the same category/date row as article cards. */
.home-page .video-reference .content-meta a{min-width:0}
.home-page .video-reference .video-publication-date{flex-shrink:0;white-space:nowrap;color:#827182;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
@media(max-width:720px){.home-page .video-reference .video-publication-date{font-size:11px}}