/*

Add here your custom css styles Example: p { text-align: center; color: red; }

*/

/* === Mobile fixes (Aug 2026) === */
@media (max-width: 768px) {

    /* 1. Header: stick to top, padded for Chrome URL bar / safe-area */
    nav.tag_header {
        position: sticky !important;
        top: 0 !important;
        z-index: 200 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-left: calc(15px + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(15px + env(safe-area-inset-right, 0px)) !important;
        min-height: calc(60px + env(safe-area-inset-top, 0px)) !important;
    }

    /* 2. Body / main: drop the 60px hard offset, banner now flows under sticky header */
    body, .main-content {
        padding-top: 0 !important;
    }

    /* 3. Hero banner: kill the mask-image fade so thumbnail fills the whole banner;
          shorten the height so Play button + meta sit comfortably under the image. */
    .tag_feat_video {
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .tag_feat_video_img {
        min-height: 280px !important;
        height: 72vw !important;
        max-height: 460px !important;
        margin: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .tag_feat_video_img img {
        object-fit: cover !important;
        object-position: center center !important;
    }
    .tag_feat_video_img:before,
    .tag_feat_video_img:after {
        display: none !important;
    }
    .tag_feat_video_info {
        padding: 12px 15px 16px !important;
        max-width: 100% !important;
    }
    .tag_feat_video_info h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
        max-height: none !important;
    }
    .tag_feat_video_info p { font-size: 14px !important; }
    .tag_feat_video_info .btn { min-width: 140px !important; line-height: 38px !important; padding: 0 16px !important; font-size: 14px !important; }

    /* 4. Hide Trending section on mobile */
    .mb-5:has(> div > h4.title > a[href*="page=trending"]) {
        display: none !important;
    }
}