/* ============================================================================
   !!! LOCKED FILE - DO NOT EDIT !!!
   ============================================================================
   This file controls the MOBILE layout (Phone/Tablet).
   The user has explicitly requested to LOCK this view.
   DO NOT modify this file unless explicitly asked to "Unlock Mobile View".
   ============================================================================ */

/* ============================================================================
   MOBILE STYLES - OPTIMIZED FOR SMALL PHONES (max-width: 768px)
   ============================================================================ */
@media (max-width: 768px) {

    /* ========== BASE LAYOUT & TYPOGRAPHY ========== */

    html,
    body {
        font-size: 12px !important;
        overflow-x: hidden !important;
    }

    /* Full-width containers with NO padding (Edge-to-Edge) */
    .container,
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        /* Force viewport width */
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        /* Prevent internal overflow */
    }

    /* Prevent any element from exceeding viewport width */
    * {
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    /* Remove row margins */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Column padding - minimal to keep content from touching edge too hard, or 0 if requested */
    .col-lg-3,
    .col-lg-6,
    .col-lg-9,
    .col-md-4,
    .col-md-6,
    .col-md-12,
    [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* ========== TYPOGRAPHY ========== */

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    h3 {
        font-size: 1.2rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

    h5 {
        font-size: 1rem !important;
    }

    h6 {
        font-size: 0.9rem !important;
    }

    /* ========== BREAKING NEWS ========== */

    .breaking-label {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }

    .breaking-content,
    .breaking-item a {
        font-size: 11px !important;
    }

    /* ========== HERO SLIDER ========== */

    .hero-slider {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        display: block !important;
        min-height: 180px !important;
    }

    .carousel-item {
        height: 180px !important;
        min-height: 180px !important;
    }

    .carousel-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .carousel-caption {
        bottom: 0 !important;
        padding: 5px 10px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        width: 100%;
        left: 0;
        right: 0;
    }

    .carousel-caption h2 {
        font-size: 12px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    /* ========== NEWS ITEMS & CARDS ========== */

    .news-thumb img {
        width: 100%;
        height: 150px !important;
        object-fit: cover;
        border-radius: 4px;
    }

    .news-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    /* Card Posts */
    .card-post,
    .card-post-hot,
    .card-post-populer {
        margin-bottom: 10px !important;
        padding: 8px !important;
    }

    .card-post h5,
    .card-post-hot h5,
    .card-post-populer h5 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    .label-text,
    .label-title {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    /* ========== WIDGETS ========== */

    .widget-title {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    .mini-post {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

    .mini-post h5 {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .mini-thumb {
        width: 60px !important;
        height: 60px !important;
        margin-right: 8px !important;
    }

    .mini-thumb img {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover;
        border-radius: 3px;
    }

    /* ========== BUTTONS ========== */

    .btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .btn-sm {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    .btn-block {
        font-size: 11px !important;
    }

    /* ========== SPACING ========== */

    .mb-3 {
        margin-bottom: 10px !important;
    }

    .mt-3,
    .my-3 {
        margin-top: 10px !important;
    }

    .pt-3,
    .py-3 {
        padding-top: 8px !important;
    }

    .pb-3,
    .py-3 {
        padding-bottom: 8px !important;
    }

    section {
        margin-bottom: 15px !important;
    }
}