/* Custom CSS for header layout */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.navbar-brand img {
    height: auto;
    max-height: 44px;
    width: auto;
    max-width: 200px;
}

@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 30px;
        max-width: 135px;
    }
}

.video-player {
    position: relative;
    overflow: hidden;
}

.video-player::before {
    background: transparent !important;
}

.video-player__placeholder {
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.15),
            rgba(0, 0, 0, 0.85)
        ),
        linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    position: absolute;
    inset: 0;
    cursor: pointer;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fallback play icon when no thumbnail */
.video-player__placeholder:not(:has(img))::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSIzOCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4zKSIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTMzIDI2TDU1IDQwTDMzIDU0VjI2WiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjUpIi8+PC9zdmc+")
        center/contain no-repeat;
    opacity: 0.3;
    z-index: 0;
}

.video-player__placeholder img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    filter: brightness(0.8);
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.video-player__trigger {
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 56px;
    font-weight: 600;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.3);
}

.video-player__placeholder:hover img,
.video-player__placeholder:focus-within img {
    transform: scale(1.02);
    filter: brightness(1);
}

.btn-primary {
    background-color: #009fd2;
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

.h6,
h6 {
    font-size: 0.875rem;
    font-weight: 400;
}

h1.h3 {
    font-size: 20px;
    margin-bottom: 0.9rem !important;
}

.row > * {
    /* padding-right: 6px;
    padding-left: 6px; */
    margin-top: 4px;
}

/* Thumbnail Fallback Placeholder - Ultra lightweight SVG inline */
.video-thumb-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border-radius: 0.25rem;
    overflow: hidden;
}

.video-thumb-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIzMCIgY3k9IjMwIiByPSIyOCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4zKSIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTI1IDIwTDQwIDMwTDI1IDQwVjIwWiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjUpIi8+PC9zdmc+")
        center/contain no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

.video-thumb-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide placeholder when image loads successfully */
.video-thumb-wrapper img[src]:not([src=""]) ~ .video-thumb-wrapper::before {
    display: none;
}