/* ===================== GENERAL PAGE WRAPPER ===================== */
/* Wrapper for the whole media page */
.mswt-media-page {
    background-color: #ffffff; /* White background like the design */
    color: #000000;
    font-family: Arial, sans-serif;
}

/* ===================== HERO ===================== */
/* Top banner section */
.mswt-media-hero {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

/* Background image for the hero banner */
.mswt-media-hero-bg {
    width: 100%;
    height: 485px; /* Adjust to match your banner */
    background-size: cover;
    background-position: center;
}

/* Hero content container */
.mswt-media-hero-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Hero text area */
.mswt-media-hero-text {
    max-width: 1600px;
    width: 100%;
    padding: 25px 20px 35px;
    box-sizing: border-box;
    pointer-events: auto;
}

.mswt-media-hero-text h1 {
    font-size: 34px;
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0 0 30px;
    letter-spacing: 7px;
    color: #fff;
    max-width: 520px;
    font-weight: bold;
}

.mswt-media-hero-text p {
    margin: 0 0 18px;
    font-size: 13px;
    max-width: 420px;
}

/* Subscribe button style */
.mswt-media-btn-subscribe {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #ff0000;
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    border-radius: 3px;
}

.mswt-media-btn-subscribe:hover {
    text-decoration: none;
    color: #fff;
}

.mswt-media-btn-icon {
    display: inline-block;
    margin-right: 8px;
    font-size: 16px;
}

/* ===================== CATEGORY NAV ===================== */
/* Navigation bar below the hero banner */
.mswt-media-nav {
    background-color: #1f1f1f;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

/* Container for nav content */
.mswt-media-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
}

.mswt-media-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Category items */
.mswt-media-nav li {
    display: inline-block;
    margin: 0 12px;
}

.mswt-media-tab {
    font-size: 11px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.08em;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

.mswt-media-tab:hover,
.mswt-media-tab.active {
    border-bottom-color: #ff0000;
    color: #ffffff;
    text-decoration: none
}

/* ===================== VIDEO GRID (3 VIDEOS PER ROW, CENTERED) ===================== */
/* Section wrapper for the video grid, with white background and top spacing */
.mswt-media-grid-section {
    background-color: #ffffff;
    padding: 50px 0 70px; /* Space from nav and bottom */
}

/* Centered container for grid */
.mswt-media-grid-inner {
    max-width: 1300px;      /* Same width as the design */
    margin: 0 auto;
    padding: 0;             /* No extra side padding so items line up cleanly */
    box-sizing: border-box;
}

/* Wrapper for each playlist grid (ALL + each playlist) */
.mswt-media-grid-wrap {
    display: none;          /* Hidden by default – toggled via .is-active */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mswt-media-grid-wrap.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Flexbox grid for video items */
.mswt-media-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;        /* Balance item horizontal padding */
}

/* Single video item: 3 columns on desktop, large white gaps on left/right */
.mswt-media-item {
    box-sizing: border-box;
    padding: 0 20px 40px;   /* Horizontal gap + vertical spacing */
    flex: 0 0 33.3333%;     /* 3 items per row */
    max-width: 33.3333%;
    cursor: pointer;
}

/* Hide items for client-side pagination (load more) */
.mswt-media-item.is-hidden {
    display: none;
}

/* Thumbnail wrapper */
.mswt-media-thumb {
    position: relative;
    overflow: hidden;
    background-color: #000;
    height: 230px;
}

/* Thumbnail image with lazy fade-in */
.mswt-media-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0; /* start transparent for fade-in */
}

.mswt-media-thumb img.is-loaded {
    opacity: 1; /* visible after IntersectionObserver marks it loaded */
}

/* Red gradient at the bottom of the thumbnail (matches mockup) */
.mswt-media-thumb-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26%;
    background: linear-gradient(
            to top,
            rgba(255, 0, 0, 0.9) 0%,
            rgba(255, 0, 0, 0.5) 40%,
            transparent 100%
    );
}

/* Video title displayed on top of the red gradient */
.mswt-media-thumb-title {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 10px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Circular play icon in the center of thumbnail */
.mswt-media-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
}

/* Triangle inside the play icon */
.mswt-media-play-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #ffffff;
}

/* Hover effect for thumbnails */
.mswt-media-item:hover .mswt-media-thumb img {
    transform: scale(1.03);
}

/* Legacy overlay class (not used now but kept for safety) */
.mswt-media-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mswt-media-item:hover .mswt-media-thumb-overlay {
    opacity: 1;
}

/* Legacy title class (not used now) */
.mswt-media-title {
    margin-top: 6px;
    font-size: 12px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================== LOAD MORE BUTTON ===================== */

.mswt-media-load-more-wrap {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 40px;
}

.mswt-media-load-more {
    display: inline-block;
    padding: 10px 30px;
    border: none;
    background-color: #1f1f1f;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.mswt-media-load-more:hover {
    background-color: #ff0000;
    transform: translateY(-1px);
}

/* ===================== MODAL / POPUP ===================== */
/* Main modal wrapper */
.mswt-media-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Visible state modifier */
.mswt-media-modal.mswt-media-modal--active {
    display: flex;
}

/* Semi-transparent dark backdrop */
.mswt-media-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
}

/* Modal dialog container */
.mswt-media-modal-dialog {
    position: relative;
    width: 90%;
    max-width: 960px;
    background: #000;
    z-index: 1;
}

/* Body wrapper for iframe */
.mswt-media-modal-body {
    width: 100%;
}

/* Responsive iframe for YouTube video */
.mswt-media-modal-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

/* Close button in the top-right corner of the dialog */
.mswt-media-modal-close {
    position: absolute;
    top: -36px;
    right: 0;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
}

/* ===================== RESPONSIVE BREAKPOINTS ===================== */
/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .mswt-media-grid-inner {
        padding: 0 20px;
    }

    .mswt-media-item {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 15px 30px;
    }

    .mswt-media-hero-text {
        position: relative;
        z-index: 2;
    }

    .mswt-media-hero-inner:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1;
    }
}
.mobile_banner {
	display:none;
}
/* Mobile: smaller hero and 1 column grid */
@media (max-width: 768px) {
	.desktop_banner {
		display:none;
	}
	.mobile_banner {
		display:block;
	}
    .mswt-media-hero-bg {
        height: 578px;
    }
    .mswt-media-hero-text {
        position: relative;
        z-index: 2;
        padding: 20px 15px 25px;
    }
    .mswt-media-hero-text h1 {
        font-size: 20px;
		margin-bottom:15px;
    }
	.mswt-media-hero-inner {
		align-items:start;
		padding-top:60px;
	}
    .mswt-media-grid-inner {
        padding: 0 15px;
    }
	.mswt-media-btn-subscribe {
		padding:8px 15px;
		font-size:18px;
	}
    .mswt-media-item {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 0 25px;
    }

    .mswt-media-grid-section {
        padding: 50px 20px 70px;
    }
	 .mswt-media-hero-inner::before {
		 display:none;
	 }
}

/* Extra small screens: keep 1 column (inherits from 768px rule) */
@media (max-width: 480px) {
    /* Reserved for future tweaks if needed */
}