/* ============================================================
   NTV Slider — frontend styles (works with Swiper 11)
   Sizes / colors come from CSS variables set inline per slider.
   ============================================================ */

/* ===== container ===== */
.ntv-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    outline: none;
    --ntv-accent: #00ffd5;
}
.ntv-slider.ntv-theme-light { background: #fff; }

/* Swiper sets .swiper-slide to flex; we restore content-vertical-center
   inside our caption only. Slides themselves should be full-bleed. */
.ntv-slider .swiper-slide {
    position: relative;
    overflow: hidden;
}

/* ===== background media ===== */
.ntv-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ===== overlay ===== */
.ntv-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ===== caption ===== */
.ntv-caption {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
    color: #fff;
    text-align: center;
}

/* The configurable container (per-slider max-width). Default 1800px.
   Inline style="max-width:..." on the element overrides this for per-slide. */
.ntv-container {
    width: 100%;
    max-width: var(--ntv-container-max, 1800px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

/* Inner wrapper around title + subtitle + paragraph (NOT buttons).
   Default 1024px. Buttons sit OUTSIDE this wrapper inside the container,
   so they can spread to the full container width while text stays narrow. */
.ntv-content-wrapper {
    width: 100%;
    max-width: var(--ntv-content-wrapper-max, 1024px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

/* Each direct child of the content-wrapper still respects an even narrower
   reading-width cap if you want it (default 900px). Set 'Content max width'
   = same as 'Content wrapper max width' to disable this inner cap. */
.ntv-content-wrapper > * {
    max-width: var(--ntv-content-max, 900px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Visual order vs source order =====
   In the HTML the title comes FIRST (semantically correct h1 → h2 → h3 hierarchy
   for SEO and accessibility). On screen, however, the subtitle should appear
   above the title — that's the design pattern. Flexbox `order` swaps them
   visually without changing the DOM. */
.ntv-content-wrapper .ntv-subtitle { order: 1; }
.ntv-content-wrapper .ntv-title    { order: 2; }
.ntv-content-wrapper .ntv-text     { order: 3; }

/* Full-bleed escape hatch for Custom HTML slides */
.ntv-container .ntv-fullbleed,
.ntv-container > .ntv-fullbleed { max-width: none; }
.ntv-slide.ntv-source-html .ntv-caption { padding: 0; }
.ntv-slide.ntv-source-html .ntv-container { padding: 0 24px; }
.ntv-slide.ntv-source-html .ntv-container > * { padding: 0; }

/* ===== alignment ===== */

/* Slider-level alignment: positions the whole .ntv-container inside the caption,
   and sets default text alignment for all elements inside. */
.ntv-slider.ntv-align-left   .ntv-caption { align-items: flex-start; text-align: left;  padding-left: 6vw; }
.ntv-slider.ntv-align-center .ntv-caption { align-items: center;     text-align: center; }
.ntv-slider.ntv-align-right  .ntv-caption { align-items: flex-end;   text-align: right; padding-right: 6vw; }

/* The container & wrapper align their inner items to match slider alignment by default. */
.ntv-slider.ntv-align-left   .ntv-container,
.ntv-slider.ntv-align-left   .ntv-content-wrapper { align-items: flex-start; }
.ntv-slider.ntv-align-center .ntv-container,
.ntv-slider.ntv-align-center .ntv-content-wrapper { align-items: center; }
.ntv-slider.ntv-align-right  .ntv-container,
.ntv-slider.ntv-align-right  .ntv-content-wrapper { align-items: flex-end; }

/* For left/right slider alignment, children don't auto-margin-center. */
.ntv-slider.ntv-align-left   .ntv-content-wrapper > *,
.ntv-slider.ntv-align-right  .ntv-content-wrapper > * { margin-left: 0; margin-right: 0; }

/* Per-element alignment overrides — applied directly to the title/subtitle/text/buttons element.
   These are PER-SLIDE overrides, so they trump the slider-level default for that one element. */
.ntv-title.ntv-align-left,
.ntv-subtitle.ntv-align-left,
.ntv-text.ntv-align-left   { text-align: left  !important; align-self: flex-start; }
.ntv-title.ntv-align-center,
.ntv-subtitle.ntv-align-center,
.ntv-text.ntv-align-center { text-align: center !important; align-self: center; }
.ntv-title.ntv-align-right,
.ntv-subtitle.ntv-align-right,
.ntv-text.ntv-align-right  { text-align: right  !important; align-self: flex-end; }

.ntv-buttons.ntv-align-left   { justify-content: flex-start !important; }
.ntv-buttons.ntv-align-center { justify-content: center     !important; }
.ntv-buttons.ntv-align-right  { justify-content: flex-end   !important; }

/* ===== content entrance animations =====
   Targets: .ntv-content-wrapper > * (text elements) and .ntv-buttons (sibling of wrapper). */
.ntv-slider .ntv-content-wrapper > *,
.ntv-slider .ntv-container > .ntv-buttons {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
}
.ntv-slider.ntv-canim-fade-up    .ntv-content-wrapper > *,
.ntv-slider.ntv-canim-fade-up    .ntv-container > .ntv-buttons { transform: translateY(30px); }
.ntv-slider.ntv-canim-fade-in    .ntv-content-wrapper > *,
.ntv-slider.ntv-canim-fade-in    .ntv-container > .ntv-buttons { transform: none; }
.ntv-slider.ntv-canim-zoom-in    .ntv-content-wrapper > *,
.ntv-slider.ntv-canim-zoom-in    .ntv-container > .ntv-buttons { transform: scale(.85); }
.ntv-slider.ntv-canim-slide-up   .ntv-content-wrapper > *,
.ntv-slider.ntv-canim-slide-up   .ntv-container > .ntv-buttons { transform: translateY(60px); }
.ntv-slider.ntv-canim-slide-left .ntv-content-wrapper > *,
.ntv-slider.ntv-canim-slide-left .ntv-container > .ntv-buttons { transform: translateX(60px); }
.ntv-slider.ntv-canim-slide-right .ntv-content-wrapper > *,
.ntv-slider.ntv-canim-slide-right .ntv-container > .ntv-buttons { transform: translateX(-60px); }
.ntv-slider.ntv-canim-none .ntv-content-wrapper > *,
.ntv-slider.ntv-canim-none .ntv-container > .ntv-buttons { opacity: 1; transition: none; }

/* Active slide: animate elements in, with a stagger.
   Stagger follows VISUAL order (subtitle → title → text → buttons),
   not DOM order. We target by class so the timing is correct regardless
   of which element appears first in the source. */
.swiper-slide.swiper-slide-active .ntv-content-wrapper > *,
.swiper-slide.swiper-slide-active .ntv-container > .ntv-buttons {
    opacity: 1;
    transform: none;
}
.swiper-slide.swiper-slide-active .ntv-subtitle { transition-delay: .15s; }
.swiper-slide.swiper-slide-active .ntv-title    { transition-delay: .30s; }
.swiper-slide.swiper-slide-active .ntv-text     { transition-delay: .45s; }
.swiper-slide.swiper-slide-active .ntv-container > .ntv-buttons { transition-delay: .60s; }

/* ===== Ken Burns: zoom on the active background ===== */
.ntv-slider.ntv-anim-kenburns .swiper-slide.swiper-slide-active .ntv-bg {
    animation: ntv-kenburns 20s ease-out forwards;
}
@keyframes ntv-kenburns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -2%); }
}

/* ===== typography (sizes set inline per instance) ===== */
.ntv-subtitle {
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 1rem;
    line-height: 1.3;
}

.ntv-title {
    font-weight: 800;
    letter-spacing: .5px;
    margin: 0 0 1.2rem;
    line-height: 1.1;
    text-transform: uppercase;
}
.ntv-title span { display: block; }

.ntv-text {
    line-height: 1.7;
    margin: 0 0 2.5rem;
}
.ntv-text p { margin: 0 0 .8em; }
.ntv-text p:last-child { margin-bottom: 0; }

/* ===== buttons ===== */
.ntv-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.ntv-slider.ntv-align-center .ntv-buttons { justify-content: center; }
.ntv-slider.ntv-align-left   .ntv-buttons { justify-content: flex-start; }
.ntv-slider.ntv-align-right  .ntv-buttons { justify-content: flex-end; }

.ntv-btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.6rem;
    font-size: .9rem;
    letter-spacing: .5px;
    text-decoration: none !important;
    transition: all .3s ease;
    min-width: 200px;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid transparent;
}
.ntv-btn-arrow {
    transition: transform .3s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.ntv-btn-arrow i {
    font-size: 0.95em;        /* matches surrounding text — for FA <i> */
    line-height: inherit;
}
.ntv-btn-arrow .material-icons-outlined {
    font-size: 1.2em;          /* Material Icons render at 1em looks small; bump slightly */
    line-height: 1;
    vertical-align: middle;
}
.ntv-btn:hover .ntv-btn-arrow { transform: translateX(5px); }

.ntv-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: var(--ntv-title-color) !important;
}
.ntv-btn-outline:hover {
    background: var(--ntv-accent);
    border-color: var(--ntv-accent);
    color: #000 !important;
}
.ntv-theme-light .ntv-btn-outline { border-color: rgba(0, 0, 0, .5); color: #111 !important; }

.ntv-btn-filled {
    background: var(--ntv-accent);
    border-color: var(--ntv-accent);
    color: #000 !important;
}
.ntv-btn-filled:hover { filter: brightness(.92); }

.ntv-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ntv-title-color) !important;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
}
.ntv-btn-ghost:hover { color: var(--ntv-accent) !important; }

/* ===== Swiper navigation arrows (override library defaults) ===== */
.ntv-slider .swiper-button-prev,
.ntv-slider .swiper-button-next {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: 0;
    transition: all .3s ease;
    margin-top: -25px;
}
.ntv-slider .swiper-button-prev:hover,
.ntv-slider .swiper-button-next:hover {
    background: var(--ntv-accent);
    color: #000;
    border-color: var(--ntv-accent);
}
.ntv-slider .swiper-button-prev { left: 24px; }
.ntv-slider .swiper-button-next { right: 24px; }
.ntv-slider .swiper-button-prev::after,
.ntv-slider .swiper-button-next::after {
    font-size: 22px;
    font-weight: 700;
}
.ntv-theme-light .swiper-button-prev,
.ntv-theme-light .swiper-button-next {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(0, 0, 0, .2);
    color: #111;
}

/* ===== Swiper pagination dots ===== */
.ntv-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    margin: 0 5px !important;
    transition: all .3s ease;
}
.ntv-theme-light .swiper-pagination-bullet { background: rgba(0, 0, 0, .3); }
.ntv-slider .swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.2);
}
.ntv-theme-light .swiper-pagination-bullet-active { background: #111; }
.ntv-slider .swiper-pagination {
    bottom: 28px !important;
}

/* ===== mute button ===== */
.ntv-mute {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    padding: 0;
}
.ntv-mute:hover {
    background: var(--ntv-accent);
    color: #000;
    border-color: var(--ntv-accent);
}
.ntv-theme-light .ntv-mute {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(0, 0, 0, .2);
    color: #111;
}

/* ===== mobile ===== */
@media (max-width: 768px) {
    .ntv-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
    .ntv-slider.ntv-align-center .ntv-buttons { margin-left: auto; margin-right: auto; }
    .ntv-btn { width: 100%; }
    .ntv-slider .swiper-button-prev,
    .ntv-slider .swiper-button-next {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }
    .ntv-slider .swiper-button-prev::after,
    .ntv-slider .swiper-button-next::after { font-size: 18px; }
    .ntv-slider .swiper-button-prev { left: 10px; }
    .ntv-slider .swiper-button-next { right: 10px; }
    .ntv-mute { top: 12px; right: 12px; }
}

/* ===== fix: prevent Swiper from showing horizontal scroll ===== */
.ntv-slider .swiper-wrapper {
    height: 100%;
}