/* ==========================================================================
   NCA Theme — videos (homepage video sections, /videos/, single video)
   ========================================================================== */

/* Section header: title + supporting text on the left, buttons on the right. */
.nca-videos__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--we-space-4) var(--we-space-6); margin-bottom: var(--we-space-7); }
.nca-videos__intro { max-width: 680px; }
.nca-videos__intro .we-section-header__title { margin: 0; }
.nca-videos__desc { margin-top: var(--we-space-3); color: var(--we-color-text); font-size: 1.0625rem; }
.nca-videos__desc p { margin: 0 0 var(--we-space-2); }
.nca-videos__desc p:last-child { margin-bottom: 0; }
.nca-videos__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--we-space-3) var(--we-space-5); }

/* Card */
.nca-video-card { display: flex; flex-direction: column; gap: var(--we-space-3); min-width: 0; }
.nca-video-card__play { display: block; border-radius: var(--we-radius); text-decoration: none; }
.nca-video-card__play:focus-visible { outline: 3px solid var(--we-color-primary); outline-offset: 3px; }
.nca-video-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--we-radius); background: var(--we-color-surface); box-shadow: var(--we-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.06)); }
.nca-video-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.nca-video-card__play:hover .nca-video-card__thumb img { transform: scale(1.04); }
.nca-video-card__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 0.35)); pointer-events: none; }
.nca-video-card__blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--we-color-muted); background: var(--we-color-primary-soft, var(--we-color-surface)); }
.nca-video-card__blank .we-icon { width: 40px; height: 40px; opacity: 0.5; }
.nca-video-card__btn { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--we-color-primary); box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.nca-video-card__btn svg { width: 26px; height: 26px; margin-left: 3px; }
.nca-video-card__play:hover .nca-video-card__btn, .nca-video-card__play:focus-visible .nca-video-card__btn { transform: scale(1.08); background: var(--we-color-primary); color: #fff; }
.nca-video-card__time { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgb(0 0 0 / 0.72); color: #fff; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.nca-video-card__body { min-width: 0; }
.nca-video-card__title { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.nca-video-card__title a { color: var(--we-color-heading); text-decoration: none; }
.nca-video-card__title a:hover { color: var(--we-color-primary); text-decoration: underline; }
.nca-video-card__text { margin: var(--we-space-2) 0 0; color: var(--we-color-muted); font-size: var(--we-font-size-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.nca-video-card--large .nca-video-card__btn { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.nca-video-card--large .nca-video-card__btn svg { width: 34px; height: 34px; }
.nca-video-card--large .nca-video-card__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

/* Small card (featured layout side list): thumbnail beside the title. */
.nca-video-card--small { flex-direction: row; align-items: center; gap: var(--we-space-4); }
.nca-video-card--small .nca-video-card__play { flex: 0 0 44%; max-width: 200px; }
.nca-video-card--small .nca-video-card__btn { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.nca-video-card--small .nca-video-card__btn svg { width: 18px; height: 18px; margin-left: 2px; }
.nca-video-card--small .nca-video-card__time { right: 6px; bottom: 6px; font-size: 0.75rem; padding: 2px 6px; }
.nca-video-card--small .nca-video-card__title { font-size: 1rem; }

/* Layout: grid */
.nca-videos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--we-space-7) var(--we-space-6); }

/* Layout: featured (one large + list) */
.nca-videos__featured { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--we-space-7); align-items: start; }
.nca-videos__side { display: grid; gap: var(--we-space-5); }
@media (max-width: 899px) {
	.nca-videos__featured { grid-template-columns: 1fr; }
}

/* Layout: slider (one row that scrolls sideways) */
.nca-videos__row { position: relative; }
.nca-videos__track { display: flex; gap: var(--we-space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; padding-bottom: var(--we-space-3); scrollbar-width: thin; }
.nca-videos__track > * { flex: 0 0 calc((100% - 2 * var(--we-space-6)) / 3); scroll-snap-align: start; }
@media (max-width: 899px) { .nca-videos__track > * { flex-basis: calc((100% - var(--we-space-6)) / 2); } }
.nca-videos__track:focus-visible { outline: 2px solid var(--we-color-primary); outline-offset: 4px; border-radius: 4px; }
.nca-videos__nav { display: flex; justify-content: flex-end; gap: var(--we-space-2); margin-top: var(--we-space-4); }
.nca-videos__nav[hidden] { display: none; }
.nca-videos__arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--we-color-border); background: var(--we-color-card); color: var(--we-color-heading); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.nca-videos__arrow:hover:not(:disabled) { background: var(--we-color-primary-soft, var(--we-color-surface)); border-color: var(--we-color-primary); }
.nca-videos__arrow:disabled { opacity: 0.4; cursor: default; }
.nca-videos__arrow .we-icon { width: 18px; height: 18px; }
.nca-videos__arrow[data-dir="-1"] .we-icon { transform: scaleX(-1); }
@media (max-width: 599px) {
	.nca-videos__track { gap: var(--we-space-4); }
	.nca-videos__track > * { flex-basis: 82%; }
}

@media (max-width: 599px) {
	.nca-videos__head { margin-bottom: var(--we-space-5); }
	.nca-videos__grid { gap: var(--we-space-6); }
}

/* Pop-up player */
.nca-video-modal { width: min(1100px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.nca-video-modal::backdrop { background: rgb(5 12 9 / 0.86); backdrop-filter: blur(3px); }
.nca-video-modal__box { display: grid; gap: 10px; }
.nca-video-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nca-video-modal__title { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.35; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nca-video-modal__close { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.14); color: #fff; cursor: pointer; }
.nca-video-modal__close:hover, .nca-video-modal__close:focus-visible { background: rgb(255 255 255 / 0.28); }
.nca-video-modal__stage { position: relative; aspect-ratio: 16 / 9; max-height: calc(94vh - 60px); margin-inline: auto; width: 100%; background: #000; border-radius: 10px; overflow: hidden; }
.nca-video-modal__stage.is-vertical { aspect-ratio: 9 / 16; width: auto; height: calc(94vh - 60px); max-width: 100%; }
.nca-video-modal__stage iframe, .nca-video-modal__stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.nca-video-modal.is-vertical { width: auto; }
.nca-video-modal.is-vertical .nca-video-modal__box { width: min(calc((94vh - 60px) * 9 / 16), 94vw); }
.nca-video-modal.is-vertical .nca-video-modal__stage { width: 100%; height: auto; }
html.nca-video-open { overflow: hidden; }

/* Video listing pages */
.nca-video-tabs { display: flex; flex-wrap: wrap; gap: var(--we-space-2); margin-bottom: var(--we-space-7); }
.nca-video-tabs__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--we-color-border); background: var(--we-color-card); color: var(--we-color-heading); font-weight: 500; font-size: 0.9375rem; text-decoration: none; }
.nca-video-tabs__link:hover { border-color: var(--we-color-primary); color: var(--we-color-heading); }
.nca-video-tabs__link.is-current { background: var(--we-color-primary); border-color: var(--we-color-primary); color: var(--we-color-on-primary, #fff); }
.nca-video-tabs__count { font-size: 0.8125rem; opacity: 0.7; }

/* Single video page */
.nca-video-single__crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--we-space-5); font-size: var(--we-font-size-sm); color: var(--we-color-muted); }
.nca-video-single__crumbs a { color: var(--we-color-muted); }
.nca-video-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--we-radius); overflow: hidden; background: #000; box-shadow: var(--we-shadow); }
.nca-video-player--vertical { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.nca-video-player iframe, .nca-video-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nca-video-player__missing { display: grid; place-items: center; height: 100%; margin: 0; color: #fff; }
.nca-video-single__head { margin: var(--we-space-6) 0 var(--we-space-5); }
.nca-video-single__title { margin: 0 0 var(--we-space-2); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); }
.nca-video-single__lead { font-size: 1.125rem; color: var(--we-color-text); }
