/* ========================================
   MOBILE RESPONSIVE STYLES
   Premium Mobile Experience
   Like OnlineKhabar/RatoPati
   ======================================== */

/* ========================================
   MOBILE HEADER & NAVIGATION
   ======================================== */

@media (max-width: 768px) {
    /* Custom Header */
    .custom-header {
        position: relative;
    }
    
    /* Top Bar - Stack vertically */
    .header-top-bar {
        padding: 8px 0;
    }
    
    .header-top-bar .container {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .date-display {
        font-size: 12px !important;
    }
    
    .social-links {
        gap: 10px !important;
    }
    
    .social-links a {
        font-size: 12px !important;
    }
    
    /* Masthead - Smaller */
    .masthead-section {
        padding: 15px 0 !important;
    }
    
    .site-title {
        font-size: 36px !important;
        letter-spacing: 1px !important;
    }
    
    .tagline {
        font-size: 11px !important;
        letter-spacing: 1px !important;
    }
    
    /* Navigation - Hamburger Menu Style */
    .main-navigation {
        position: relative;
    }
    
    .main-navigation ul {
        flex-direction: column;
        display: none; /* Hidden by default on mobile */
    }
    
    .main-navigation.active ul {
        display: flex;
    }
    
    .main-navigation li {
        width: 100%;
        border-bottom: 1px solid #222;
    }
    
    .main-navigation a {
        padding: 12px 15px !important;
        font-size: 13px !important;
    }
    
    /* Mobile Menu Toggle Button */
    .mobile-menu-toggle {
        display: block !important;
        position: absolute;
        top: 0;
        right: 15px;
        background: #cc0000;
        color: #fff;
        border: none;
        padding: 12px 18px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        z-index: 1001;
        border-radius: 4px;
    }
    
    /* News Ticker - Smaller */
    .news-ticker {
        flex-direction: column;
    }
    
    .ticker-label {
        width: 100%;
        text-align: center;
        padding: 8px 15px !important;
        font-size: 12px !important;
    }
    
    .ticker-content {
        width: 100%;
    }
    
    .ticker-item {
        font-size: 13px !important;
        padding: 0 15px !important;
    }
}

/* ========================================
   MOBILE FEATURED SECTION
   ======================================== */

@media (max-width: 768px) {
    .featured-section {
        margin: 20px 0 !important;
    }
    
    .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Main Featured - Full Width */
    .main-featured {
        grid-column: 1 / -1;
    }
    
    .main-featured img {
        height: 250px !important;
    }
    
    .featured-main-content {
        padding: 15px !important;
    }
    
    .featured-main-title {
        font-size: 22px !important;
    }
    
    .featured-main-excerpt {
        font-size: 14px !important;
    }
    
    /* Side Featured - Stack */
    .featured-side {
        flex-direction: column !important;
    }
    
    .featured-side-article {
        flex-direction: row !important;
        gap: 12px !important;
    }
    
    .featured-side-article img {
        width: 120px !important;
        height: 80px !important;
        flex-shrink: 0;
    }
    
    .featured-side-content {
        padding: 12px !important;
    }
    
    .featured-side-title {
        font-size: 14px !important;
    }
}

/* ========================================
   MOBILE NEWS GRID
   ======================================== */

@media (max-width: 768px) {
    .latest-section {
        margin: 25px 0 !important;
    }
    
    .section-header {
        padding: 10px 0 !important;
        margin-bottom: 15px !important;
    }
    
    .section-header h2 {
        font-size: 18px !important;
    }
    
    .view-all {
        font-size: 12px !important;
    }
    
    /* 4 Column Grid -> 2 Column */
    .news-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .news-card img {
        height: 140px !important;
    }
    
    .news-card-content {
        padding: 12px !important;
    }
    
    .news-card-title {
        font-size: 14px !important;
    }
    
    .news-card-meta {
        font-size: 11px !important;
    }
    
    /* 3 Column Grid -> 2 Column */
    .news-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ========================================
   MOBILE CONTENT + SIDEBAR
   ======================================== */

@media (max-width: 768px) {
    .main-content-area {
        margin: 25px 0 !important;
    }
    
    .content-wrapper {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .category-sections {
        order: 1;
    }
    
    .sidebar {
        order: 2;
        position: static !important;
    }
    
    .sidebar-widget {
        padding: 15px !important;
    }
    
    .widget-title {
        font-size: 16px !important;
    }
    
    .most-read-list li {
        padding: 10px 0 !important;
    }
    
    .most-read-list li a {
        font-size: 13px !important;
    }
    
    .social-links {
        gap: 8px !important;
    }
    
    .social-link {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   MOBILE AD SPACES
   ======================================== */

@media (max-width: 768px) {
    .top-ad,
    .middle-ad,
    .top-ad-container,
    .ad-container {
        margin: 15px 0 !important;
    }
    
    .ad-728x90 {
        width: 100% !important;
        height: auto !important;
        min-height: 90px;
    }
    
    .sidebar-ad .ad-300x250 {
        width: 100% !important;
        height: auto !important;
        min-height: 250px;
    }
}

/* ========================================
   MOBILE FOOTER
   ======================================== */

@media (max-width: 768px) {
    .upper-footer {
        padding: 25px 0 20px !important;
        margin-top: 40px !important;
    }
    
    .upper-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .footer-column h4 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    
    .footer-column a {
        font-size: 12px !important;
    }
    
    .lower-footer {
        padding: 20px 0 15px !important;
    }
    
    .footer-corporate-info {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .corporate-info p,
    .footer-contact p {
        font-size: 12px !important;
    }
    
    .footer-contact {
        text-align: left !important;
    }
    
    .footer-bottom-bar {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    
    .footer-copyright {
        font-size: 11px !important;
    }
    
    .footer-social {
        gap: 12px !important;
    }
    
    .footer-social a {
        font-size: 14px !important;
    }
}

/* ========================================
   MOBILE SINGLE POST
   ======================================== */

@media (max-width: 768px) {
    .single-post-wrapper {
        padding: 0 12px !important;
    }
    
    .breadcrumb {
        font-size: 12px !important;
        padding: 12px 0 !important;
    }
    
    .post-category {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
    
    .single-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .post-meta-bar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 0 !important;
        font-size: 12px !important;
    }
    
    .post-featured-image img {
        max-height: 300px !important;
    }
    
    .social-share {
        flex-wrap: wrap !important;
        padding: 12px !important;
    }
    
    .share-label {
        width: 100%;
        margin-bottom: 8px !important;
    }
    
    .share-btn {
        flex: 1;
        min-width: calc(50% - 5px);
        text-align: center;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .post-content {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
    
    .post-content h2 {
        font-size: 22px !important;
    }
    
    .post-content h3 {
        font-size: 19px !important;
    }
    
    .post-tags {
        padding: 15px 0 !important;
        margin: 30px 0 !important;
    }
    
    .post-tag {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
    
    .related-section {
        margin: 30px 0 !important;
        padding: 20px 0 !important;
    }
    
    .related-title {
        font-size: 18px !important;
    }
    
    .related-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .related-card img {
        height: 160px !important;
    }
    
    .post-nav .nav-links {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ========================================
   MOBILE ARCHIVE PAGE
   ======================================== */

@media (max-width: 768px) {
    .archive-wrapper {
        padding: 0 12px !important;
    }
    
    .archive-header {
        padding: 20px 0 !important;
        margin-bottom: 20px !important;
    }
    
    .archive-title {
        font-size: 24px !important;
    }
    
    .archive-description {
        font-size: 14px !important;
    }
    
    .archive-layout {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .archive-sidebar {
        position: static !important;
    }
    
    .post-card {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .post-card img {
        width: 100% !important;
        height: 200px !important;
    }
    
    .post-card-content h2 {
        font-size: 18px !important;
    }
    
    .post-card-excerpt {
        font-size: 14px !important;
    }
    
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .pagination a,
    .pagination span {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* ========================================
   MOBILE PAGE TEMPLATE
   ======================================== */

@media (max-width: 768px) {
    .page-wrapper {
        padding: 0 12px !important;
    }
    
    .page-header {
        padding: 25px 0 !important;
        margin-bottom: 25px !important;
    }
    
    .page-title {
        font-size: 28px !important;
    }
    
    .page-layout {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .page-sidebar {
        position: static !important;
    }
    
    .page-content {
        padding: 20px !important;
    }
    
    .page-content h1 {
        font-size: 26px !important;
    }
    
    .page-content h2 {
        font-size: 22px !important;
    }
}

/* ========================================
   VERY SMALL PHONES (< 375px)
   ======================================== */

@media (max-width: 375px) {
    .site-title {
        font-size: 30px !important;
    }
    
    .news-grid-4,
    .news-grid-3 {
        grid-template-columns: 1fr !important;
    }
    
    .news-card img {
        height: 160px !important;
    }
    
    .featured-side-article {
        flex-direction: column !important;
    }
    
    .featured-side-article img {
        width: 100% !important;
        height: 150px !important;
    }
    
    .footer-column {
        width: 100%;
    }
}

/* ========================================
   MOBILE TOUCH OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Larger touch targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on mobile */
    .news-card:hover,
    .featured-article:hover,
    .related-card:hover {
        box-shadow: none;
        border-color: #e0e0e0;
    }
    
    /* Better scrolling */
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent text size adjustment on orientation change */
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
}

/* ========================================
   MOBILE NAVIGATION JAVASCRIPT
   Add this to your template
   ======================================== */

/*
<script>
// Mobile Menu Toggle
document.addEventListener('DOMContentLoaded', function() {
    const nav = document.querySelector('.main-navigation');
    const toggle = document.querySelector('.mobile-menu-toggle');
    
    if (toggle && nav) {
        toggle.addEventListener('click', function() {
            nav.classList.toggle('active');
            toggle.textContent = nav.classList.contains('active') ? 'CLOSE ✕' : 'MENU ☰';
        });
    }
});
</script>
*/