/* ====================================================================
   KGBV VIDEO STYLES – OPTIMIZED & FULLY COMMENTED
   --------------------------------------------------------------------
   Scope:
   • Filter buttons (gradient, active/hover states)
   • Toolbar spacing
   • YouTube cards (container, embed ratio, metadata)
   • Section layout titles/spacing
   • Page container width control
   • Themed transparent navbar for video pages
   • Entry animation for navbar
   --------------------------------------------------------------------
   Integration notes:
   • Load AFTER Bootstrap (so these rules override safely).
   • The navbar relies on global theme tokens:
       --primary  (e.g., #1A486B)
       --light    (e.g., #2C6286)
     Make sure your main theme file defines them in :root.
==================================================================== */


/* ============================================================
   1) THEME TOKENS
   ------------------------------------------------------------
   All reusable color variables live here.
   Adjust these once to restyle the entire gallery page.
============================================================ */
:root {
    --primary: #1A486B;
    /* Core brand color – used on buttons & menus */
    --light: #2C6286;
    /* Hover/focus tone for interactivity */
    --soft: #5E8EA7;
    /* Active/pressed or border tint */
    --accent: #F4F7FA;
    /* Light text color on dark elements */
    --ink: #1A2E40;
    /* Primary readable ink on light backgrounds */
}

/* ====================================================================
   2) FILTER BUTTONS
   --------------------------------------------------------------------
   .btn-filter
   - Attractive gradient pill buttons for filtering video lists
   - Gradient endpoints are controlled via local CSS variables
   - States:
       • Default: primary gradient
       • :hover/:focus: subtle lift, brighter
       • .active: inverted light style with blue ink
==================================================================== */
.btn-filter {
    /* Local tunables for gradient + shadow (here only for .btn-filter) */
    --btn-bg-start: #1D546C;
    /* primary blue start */
    --btn-bg-end: #063346;
    /* primary blue end */
    --btn-shadow: 0 8px 18px rgba(12, 20, 36, 0.041);

    color: #fff;
    /* high contrast on dark bg */
    font-weight: 700;
    border: 0;
    /* clean edge (no border) */
    border-radius: 999px;
    /* full pill */
    padding: .65rem 1.25rem;
    /* comfortable hit area */

    background: linear-gradient(135deg, var(--btn-bg-start), var(--btn-bg-end));
    box-shadow: var(--btn-shadow);

    /* Crisp & responsive interactions */
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Hover/Focus: micro-elevation + slight brightness for feedback */
.btn-filter:hover,
.btn-filter:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(12, 20, 36, 0.041);
    outline: none;
    /* rely on visual state */
    filter: brightness(1.03);
}

/* Active: invert scheme (light background, blue text) for “selected” feel */
.btn-filter.active {
    --btn-bg-start: #F4F4F4;
    /* light start */
    --btn-bg-end: #b1b0b0;
    /* light end */
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, .35),
        /* subtle inner ring */
        0 10px 24px rgba(194, 194, 194, 0.35);
    /* soft outer shadow */
    color: #1D546C;
    /* readable blue ink */
}


/* ====================================================================
   3) TOOLBAR LAYOUT
   --------------------------------------------------------------------
   .toolbar
   - Horizontal control strip (wraps on small screens)
   - Just spacing; layout handled by Bootstrap utility classes
==================================================================== */
.toolbar {
    gap: .65rem;
    /* even spacing between controls */
}


/* ====================================================================
   4) YOUTUBE CARD
   --------------------------------------------------------------------
   .yt-card    : card container (radius, shadow, border)
   .yt-embed   : aspect-ratio box for the iframe (4:3 default, 16:9 on XS)
   .yt-meta    : card footer area with title and badges
==================================================================== */

/* Card container: soft elevation, rounded corners, clean border */
.yt-card {
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
    overflow: hidden;
    /* clips iframe corners */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
}

/* Embed wrapper: 4:3 for a taller look on md+, improves presence in grids */
.yt-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* default on ≥576px */
}

/* On very small screens, switch to classic 16:9 */
@media (max-width: 576px) {
    .yt-embed {
        aspect-ratio: 16 / 9;
        /* keep 16:9 on XS */
    }
}

/* Iframe fills the wrapper completely */
.yt-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Card footer: title + state/district chips */
.yt-meta {
    padding: .95rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    font-size: 1rem;
}

/* Small readability polish for badges */
.yt-meta .badge {
    letter-spacing: .2px;
}


/* ====================================================================
   5) SECTION STRUCTURE
   --------------------------------------------------------------------
   .section-block  : vertical spacing between grouped content
   .section-block h4 : section headings (centered, bold)
==================================================================== */
.section-block {
    margin-bottom: 3rem;
    /* space between sections */
}

.section-block h4 {
    text-align: center;
    margin-bottom: 1.25rem;
    color: #0d6efd;
    /* Bootstrap primary blue */
    font-weight: 800;
}


/* ====================================================================
   6) PAGE CONTAINER (VIDEO GRID MAX WIDTH)
   --------------------------------------------------------------------
   #videoContainer
   - Slightly wider than Bootstrap’s default to make cards roomier
   - Width scales nicely on large screens while retaining margins
==================================================================== */
#videoContainer {
    max-width: 1480px;
    /* cap width for readability */
    width: 94%;
    /* fluid within cap */
    margin: 0 auto;
    /* center on page */
}


/* ====================================================================
   7) THEMED TRANSPARENT NAVBAR (VIDEOS PAGE)
   --------------------------------------------------------------------
   .kgbv-navbar
   - Transparent “glass” look to blend with page
   - Border/shadow tuned to the theme
   - Uses global theme variables for text hover
   - Keep .navbar-brand centered and bold
   NOTE: Requires --primary and --light to be defined in your global :root
==================================================================== */
.kgbv-navbar {
    width: 95%;
    margin: auto;
    border-radius: 12px;

    background: transparent;
    /* remove dark fill */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    /* subtle elevation */
    backdrop-filter: blur(8px);
    /* soft glass effect */
    border: 1px solid rgba(26, 72, 107, 0.15);
    /* theme-tinted border */

    animation: fadeIn 0.8s ease-in-out;
    /* smooth entrance */
}

/* Brand text – bold and center-aligned */
.kgbv-navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--primary);
    letter-spacing: 0.5px;
}

/* Brand hover effect for subtle interactivity */
.kgbv-navbar .navbar-brand:hover {
    color: var(--light);
    text-decoration: none;
}


/* ====================================================================
   8) ANIMATIONS
   --------------------------------------------------------------------
   fadeIn
   - Subtle opacity + Y-translation for navbar on load
==================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}