/* =====================================================================
   responsive.css
   Reconstructed responsive / mobile layer for the public site.
   Loaded last in the ~/Content/css bundle (after base.css + app.css),
   so these rules intentionally override the desktop defaults on small
   screens. Only targets the public front-end (not the Admin area, which
   ships its own Bootstrap).
   ===================================================================== */

/* ---- Global safety nets ------------------------------------------- */

/* Kill horizontal scrolling caused by wide embeds / negative-margin rows */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Make all media fluid so nothing forces the page wider than the screen */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

/* Ad units must never push the layout wide (belt-and-braces with the
   responsive AdSense unit on the home page) */
.adverticement,
.adsbygoogle,
.adverticement ins,
.adverticement iframe {
    max-width: 100% !important;
}

.adverticement {
    overflow-x: hidden;
}

/* ---- Tablet and below (<= 991px) ---------------------------------- */
@media screen and (max-width: 991px) {

    /* Player + thumbnail list stack vertically */
    .video-gallery .videoContainer,
    .video-gallery .videoThumbs {
        width: 100%;
        float: none;
        padding-left: 0;
    }

    .video-gallery .videoThumbs {
        margin-top: 1.5rem;
    }

    /* The player has a fixed 460px height on desktop; make it track the
       viewport width (16:9) on smaller screens, capped at the desktop size */
    .video {
        height: 56.25vw;
        max-height: 460px;
        min-height: 220px;
    }

    /* Public forms (register / profile / contact / login) go full width */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        width: 100%;
        max-width: 100%;
    }

    /* Tables sometimes used for form layout shouldn't overflow */
    table {
        max-width: 100%;
    }
}

/* ---- Phones (<= 767px) -------------------------------------------- */
@media screen and (max-width: 767px) {

    .video {
        min-height: 180px;
    }

    /* Footer links wrap and center instead of overflowing one row */
    .footer-panel {
        text-align: center;
    }

    .footer-panel .ftr-nave {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-panel .social-belt .social-belt-inner {
        justify-content: center;
    }

    /* Ease oversized headings on small screens */
    h1,
    .head01 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    h3.head03 {
        font-size: 1.25rem;
    }
}

/* ---- Small phones (<= 480px) -------------------------------------- */
@media screen and (max-width: 480px) {

    .video {
        min-height: 150px;
    }

    /* Give thumbnail captions more room next to a smaller image */
    .video-gallery .videoThumbs figure {
        width: 100px;
    }

    .video-gallery .videoThumbs .fig-caption {
        width: calc(100% - 100px);
    }
}