.repulse-videos { margin: 32px auto 48px; width: 100%; min-width: 0; }
.repulse-videos [hidden] { display: none !important; }
.repulse-videos > h2 { margin-bottom: 24px; }
.repulse-videos__carousel { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; max-width: 852px; margin-inline: auto; }
.repulse-videos__carousel.is-single { grid-template-columns: minmax(0, 1fr); }
.repulse-videos__carousel > .repulse-videos__slides { width: 100%; min-width: 0; }
.repulse-videos__slides { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 360px) minmax(0, 190px); align-items: start; max-width: 740px; margin-inline: auto; padding: 4px; touch-action: pan-y; }
.repulse-videos__slide { min-width: 0; grid-column: 2; grid-row: 1; position: relative; z-index: 2; }
.repulse-videos__slide.is-preview { grid-column: 3; z-index: 1; margin-top: 70px; margin-left: -24px; transform: scale(.88); transform-origin: left center; opacity: .65; }
.repulse-videos__slide.is-previous { grid-column: 1; margin-left: 0; margin-right: -24px; transform-origin: right center; }
.repulse-videos__slide.is-preview:hover { opacity: .9; }
.repulse-videos__slide.is-preview .repulse-videos__caption { display: none; }
.repulse-videos__slide.is-preview .repulse-videos__play-label,
.repulse-videos__slide.is-preview .repulse-videos__play::after { display: none; }
.repulse-videos__slides.is-single { grid-template-columns: minmax(0, 360px); max-width: 360px; }
.repulse-videos__slides.is-single .repulse-videos__slide { grid-column: 1; }
.repulse-videos__stage { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: #e9edef; }
.repulse-videos__stage video { width: 100%; height: 100%; object-fit: contain; background: #111; }
.repulse-videos__stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.repulse-videos .repulse-videos__play { position: absolute; inset: 0; padding: 0; display: block; width: 100%; height: 100%; background: #e9edef; border: 0; border-radius: 18px; cursor: pointer; overflow: hidden; }
.repulse-videos__play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(0 0 0 / 45%)); pointer-events: none; }
.repulse-videos__play img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.repulse-videos__play:hover img { transform: scale(1.035); }
.repulse-videos__play-label { position: absolute; z-index: 1; bottom: 20px; inset-inline: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.repulse-videos__play-label > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; background: rgb(255 255 255 / 20%); backdrop-filter: blur(6px); font-size: 17px; padding-left: 3px; }
.repulse-videos__caption { padding: 14px 2px 0; }
.repulse-videos__caption h3 { font-size: 16px; line-height: 1.45; margin-bottom: 6px; text-align: center; }
.repulse-videos__caption p { font-size: 13px; line-height: 1.5; margin-bottom: 6px; white-space: pre-line; }
.repulse-videos__caption a { font-size: 13px; text-decoration: underline; }
.repulse-videos__carousel > button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--brdcolor-gray-300, #ddd); border-radius: 50%; font-size: 22px; background: transparent; color: var(--wd-title-color, #242424); }
.repulse-videos button:focus-visible { outline: 3px solid var(--wd-primary-color, #176b82); outline-offset: 3px; }
.repulse-videos__error { color: #9c2424; }
@media (max-width: 767px) {
 .repulse-videos { margin-block: 24px 32px; }
 .repulse-videos__carousel { gap: 4px; }
 .repulse-videos__slides { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr); max-width: 375px; }
 .repulse-videos__slide.is-preview { margin-top: 48px; margin-left: -12px; transform: scale(.94); }
 .repulse-videos__slide.is-previous { margin-left: 0; margin-right: -12px; }
 .repulse-videos__slide.is-preview .repulse-videos__play-label { font-size: 0; bottom: 12px; gap: 0; }
 .repulse-videos__slide.is-preview .repulse-videos__play-label > span { width: 36px; height: 36px; }
 .repulse-videos__slides.is-single { grid-template-columns: minmax(0, 250px); max-width: 250px; }
 .repulse-videos__caption h3 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .repulse-videos__play img { transition: none; } }

/* Equal portrait canvases keep both covers and animated previews undistorted. */
.repulse-videos__slides { grid-template-columns: minmax(0, 1fr); align-items: start; overflow: clip; padding: 8px 0; }
.repulse-videos__slide { grid-column: 1; width: min(360px, 65%); justify-self: center; transform-origin: center center; }
.repulse-videos__slide.is-preview { grid-column: 1; margin: 0; transform: translateX(65%) scale(.78); transform-origin: center center; }
.repulse-videos__slide.is-previous { transform: translateX(-65%) scale(.78); margin: 0; }
.repulse-videos__slides.is-single .repulse-videos__slide { width: 100%; }
.repulse-videos .repulse-videos__stage { aspect-ratio: 9 / 16; height: auto; background: #111; }
.repulse-videos .repulse-videos__stage > iframe,
.repulse-videos .repulse-videos__stage > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.repulse-videos .repulse-videos__play { min-height: 0; background: #111; }
.repulse-videos .repulse-videos__play img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; transform: none; }
@media (max-width: 767px) {
 .repulse-videos__carousel { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 0; }
 .repulse-videos__carousel.is-single { grid-template-columns: minmax(0, 1fr); }
 .repulse-videos__carousel > button { width: 32px; min-width: 32px; }
 .repulse-videos__slide { width: 80%; }
}
@media (prefers-reduced-motion: reduce) {
 .repulse-videos *, .repulse-videos *::before, .repulse-videos *::after { transition: none !important; animation: none !important; }
}