/* =========================================================
   Bounce Back Media — Index Page (index.php)
   Page-level layout helpers & overrides only
   Global / shared styles should live in main.css or bootstrap overrides
   ========================================================= */

/* Basic layout & overflow prevention */
html, body {
    overflow-x: hidden;
}

/* Hero section background */
.hero-wrap {
    background: var(--bbm-white);
}

/* Hero card (pricing / logo container) */
.hero-card {
    border-left: 6px solid var(--bbm-purple);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-lg);
}

/* Video cards */
.video-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Utility classes */
.object-fit-cover {
    object-fit: cover;
}

/* Category filter bar */
.filter-container {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
}

.btn-filter {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    padding: .45rem 1.05rem;
    font-weight: 700;
    font-size: .9rem;
    margin-right: .5rem;
    color: var(--bbm-ink);
}

.btn-filter.active {
    background: var(--bbm-purple);
    color: #fff;
    border-color: var(--bbm-purple);
}

/* Video play overlay */
.play-overlay {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

/* Dark contact/footer panel */
.dark-panel {
    background: var(--bbm-ink);
    color: #fff;
    border-radius: 2.5rem 2.5rem 0 0;
}

.dark-panel .text-muted,
.dark-panel .opacity-75 {
    color: rgba(255,255,255,.72) !important;
}

.dark-panel a {
    color: #fff;
}

/* ── Hero Logo Feature (minimal version – January 2026) ─────────────────────────────── */
.logo-hero {
    max-height: 340px;               /* Dominant size – adjust here if needed */
    width: auto;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.14));
    transition: transform 0.45s ease;
}

.logo-hero:hover {
    transform: scale(1.04);
}

/* Mobile / tablet adjustments */
@media (max-width: 991px) {
    .logo-hero {
        max-height: 260px;           /* Still prominent but doesn't overwhelm */
        margin-top: 2rem;
    }
}

/* Reinforcing text sizing (used with .lead-sm class) */
.lead-sm {
    font-size: 1.15rem;
    line-height: 1.5;
}

@media (min-width: 992px) {
    .lead-sm {
        font-size: 1.25rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   2026-01-09 – Match bespoke card styling on homepage video cards
   Bold/dark title + grey/muted subtitle
   ───────────────────────────────────────────────────────────── */

/* Title – stronger & darker like bespoke projects */
#videoGrid .video-card h3,
#videoGrid .video-card h3.h6 {
    font-weight: 800 !important;
    color: #111827 !important;           /* dark gray-black */
    font-size: 1.125rem !important;      /* slightly larger for emphasis */
    line-height: 1.4;
    margin-bottom: 0.35rem !important;
}

/* Subtitle / tagline – muted grey like bespoke */
#videoGrid .video-card .tagline-inline {
    color: #6b7280 !important;           /* classic muted gray */
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    margin-bottom: 0.5rem !important;
    display: block;
}

/* Optional: description text slightly lighter if it feels too strong */
#videoGrid .video-card .card-body p.text-muted.small {
    color: #6b7280 !important;
    font-size: 0.8125rem !important;
}