/*
 * responsive.css — mobile-first corrections layered AFTER style.css.
 *
 * style.css is 4,484 lines of desktop-first CSS with ~36 overlapping media
 * queries. Rather than refactor it in place (high risk to a look the owner
 * wants preserved), corrections live here and win by source order.
 *
 * Breakpoints used: 576 / 768 / 992 / 1200 — Bootstrap 5's, which the markup
 * already uses via col-sm/md/lg/xl.
 */

/* ---------------------------------------------------------------- hero ---- */

/*
 * The hero <video> now carries width/height attributes (for CLS) and may have
 * no source at all on phones, where its poster stands in. height:auto keeps it
 * scaling by aspect ratio instead of locking to the 720px height attribute.
 */
#Homehero .hero-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: #1b1464;
}

/*
 * style.css sets .carousel-item video { height:280px } below 480px. The rule above
 * has an ID and would beat it, so restore the intended mobile hero height here —
 * the poster crops the same way the video did.
 */
@media (max-width: 480px) {
    #Homehero .hero-video {
        height: 280px;
        aspect-ratio: auto;
    }
}

/* -------------------------------------------------------------- spam trap ---
 * Honeypot field (App\Http\Middleware\SpamGuard). Positioned off-screen rather
 * than display:none — bots increasingly skip fields that are display:none, and
 * this keeps it out of the tab order and off the screen for everyone else.
 */
.gb-hp {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}