/**
 * MastiGuru Smart News - Core Stylesheet
 * Version: 17.0
 * Description: Mirrors the exact layout, typography, and UX of Google News (Desktop & Mobile).
 */

/* ==========================================================================
   1. ROOT CONTAINER & BASE TYPOGRAPHY
   ========================================================================== */
.mgn-root {
    max-width: 1200px;
    margin: 30px auto;
    /* Future Dev: Google uses 'Google Sans' for headings and Roboto for body text */
    font-family: 'Google Sans', Roboto, Arial, sans-serif;
    color: #202124;
    /*background: #f8f9fa; /* Standard Google background gray */
    padding: 20px;
    box-sizing: border-box;
}

/* Ensure all nested elements respect padding/borders */
.mgn-root * { box-sizing: border-box; }

/* ==========================================================================
   2. HEADER, DATE & LOCATION WRAPPER
   ========================================================================== */
.mgn-header-wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start;
    margin-bottom: 24px; 
    flex-wrap: wrap; /* Allows stacking on very small screens */
    gap: 16px;
}

.mgn-title-row { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    margin-bottom: 4px; 
    flex-wrap: wrap;
}

.mgn-main-title { 
    font-size: 32px; 
    font-weight: 400; 
    margin: 0; 
    color: #1a73e8; /* Official Google Blue */
}

.mgn-date-sub { 
    font-size: 14px; 
    color: #5f6368; 
}

/* Location Input Box */
.mgn-city-wrapper {
    display: inline-flex; 
    align-items: center; 
    border: 1px solid #dadce0; 
    border-radius: 20px; 
    padding: 4px 10px; 
    background: #fff; 
    height: 32px;
}
.mgn-city-wrapper input { 
    border: none; 
    outline: none; 
    font-size: 13px; 
    width: 100px; 
    margin: 0 8px; 
    color: #202124; 
}
.mgn-city-wrapper button { 
    background: #1a73e8; 
    color: #fff; 
    border: none; 
    border-radius: 12px; 
    padding: 4px 12px; 
    font-size: 11px; 
    cursor: pointer; 
    font-weight: 600;
    transition: background 0.2s;
}
.mgn-city-wrapper button:hover { background: #1557b0; }

/* ==========================================================================
   3. WEATHER WIDGET
   ========================================================================== */
#mgn-weather-widget { 
    background: #fff; 
    border: 1px solid #dadce0; 
    border-radius: 24px; 
    padding: 8px 20px; 
    display: flex; 
    align-items: center; 
}
.mgn-w-temp-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.mgn-w-city { 
    font-size: 13px; 
    color: #5f6368; 
}
.mgn-w-temp { 
    font-size: 24px; 
    font-weight: 400; 
    color: #202124; 
}

/* ==========================================================================
   4. NAVIGATION TABS
   ========================================================================== */
.mgn-tabs-container { 
    display: flex; 
    gap: 24px; 
    border-bottom: 1px solid #dadce0; 
    margin-bottom: 24px; 
    overflow-x: auto; /* Allows horizontal swipe on mobile */
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.mgn-tabs-container::-webkit-scrollbar { display: none; /* Hide scrollbar Chrome/Safari */ }

.mgn-tab { 
    font-size: 14px; 
    color: #5f6368; 
    padding-bottom: 12px; 
    cursor: pointer; 
    margin-bottom: -1px; /* Overlaps the bottom border perfectly */
    white-space: nowrap; 
    transition: color 0.2s;
}
.mgn-tab:hover { color: #202124; }
.mgn-tab.active { 
    color: #1a73e8; 
    font-weight: 500; 
    border-bottom: 3px solid #1a73e8; 
}

/* ==========================================================================
   5. MAIN LAYOUT GRID (2-Column Desktop, 1-Column Mobile)
   ========================================================================== */
.mgn-layout-grid { 
    display: grid; 
    /* 2.2fr (Main content) and 1fr (Sidebar) exactly matches Google News ratio */
    grid-template-columns: 2.2fr 1fr; 
    gap: 24px; 
}

.mgn-section-title { 
    font-size: 20px; 
    font-weight: 400; 
    color: #1a73e8; 
    margin: 0 0 16px 0; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

/* ==========================================================================
   6. CARDS & STORY COMPONENTS
   ========================================================================== */
.mgn-cluster-card, .mgn-sidebar-card { 
    background: #fff; 
    border: 1px solid #dadce0; 
    border-radius: 12px; 
    margin-bottom: 32px; 
    overflow: hidden; 
}
.mgn-sidebar-card { padding: 12px 16px; }

/* Individual News Row */
.mgn-story { 
    padding: 16px; 
    border-bottom: 1px solid #f1f3f4; 
    display: flex; 
    gap: 16px; 
    align-items: flex-start; 
}
.mgn-sidebar-card .mgn-story { padding: 12px 0; }
.mgn-story:last-child { border-bottom: none; }

/* Featured Story (Top item with large image) */
.mgn-story-featured { flex-direction: column; }
.mgn-story-featured .mgn-story-image { width: 100%; margin-top: 12px; }
.mgn-story-featured .mgn-story-image img { 
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    border-radius: 8px; 
    display: block;
}

/* Standard Story (Small square thumbnail on the right) */
.mgn-story-standard .mgn-story-image img { 
    width: 72px; 
    height: 72px; 
    object-fit: cover; 
    border-radius: 8px; 
    flex-shrink: 0; 
    display: block;
}
.mgn-story-text { flex-grow: 1; min-width: 0; }

/* Publisher Info */
.mgn-source-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mgn-favicon { width: 14px; height: 14px; border-radius: 2px; }
.mgn-source-name { font-size: 12px; font-weight: 500; color: #3c4043; }

/* CRITICAL TYPOGRAPHY: Forces Google News strict 14px 400-weight black style */
.mgn-title { margin: 4px 0 8px 0; }
.mgn-title a { 
    font-size: 14px !important; 
    font-weight: 400 !important; 
    color: #202124 !important; 
    text-decoration: none; 
    line-height: 1.4; 
    display: block;
}
.mgn-title a:hover { text-decoration: underline; }

/* ==========================================================================
   7. META DATA & SHARE DROPDOWN
   ========================================================================== */
.mgn-meta-bottom { 
    font-size: 12px; 
    color: #70757a; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.mgn-actions { position: relative; }
.mgn-share-btn { 
    background: none; 
    border: none; 
    padding: 4px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    border-radius: 50%; 
    transition: background 0.2s;
}
.mgn-share-btn:hover { background: #f1f3f4; }

/* Popup Menu */
.mgn-share-popup { 
    position: absolute; 
    top: 100%; 
    right: 0; 
    background: #fff; 
    border: 1px solid #dadce0; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    border-radius: 8px; 
    padding: 6px 0; 
    min-width: 140px; 
    z-index: 100; 
    display: flex; 
    flex-direction: column; 
}
.mgn-share-popup a, .mgn-share-popup button { 
    padding: 10px 16px; 
    font-size: 13px; 
    color: #3c4043; 
    text-decoration: none; 
    background: none; 
    border: none; 
    text-align: left; 
    cursor: pointer; 
}
.mgn-share-popup a:hover, .mgn-share-popup button:hover { background-color: #f1f3f4; }

/* ==========================================================================
   8. BUTTONS (See More & Global Footer)
   ========================================================================== */
.mgn-cluster-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f1f3f4; }
.mgn-see-more-btn { 
    width: 100%; 
    background: #f1f3f4; 
    border: none; 
    border-radius: 20px; 
    padding: 10px; 
    font-size: 13px; 
    color: #3c4043; 
    font-weight: 500; 
    cursor: pointer; 
    transition: background 0.2s;
}
.mgn-see-more-btn:hover { background: #e8eaed; }

.mgn-global-footer { text-align: center; margin-top: 40px; padding-bottom: 20px; }
.mgn-global-more-btn { 
    background: #1a73e8; 
    color: white; 
    border: none; 
    border-radius: 24px; 
    padding: 10px 24px; 
    font-size: 14px; 
    font-weight: 500; 
    cursor: pointer; 
    transition: box-shadow 0.2s, background 0.2s;
}
.mgn-global-more-btn:hover { background: #1557b0; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* ==========================================================================
   9. FOR YOU & TOPICS GRIDS
   ========================================================================== */
.mgn-foryou-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px; 
    margin-bottom: 32px; 
    background: #fff; 
    border: 1px solid #dadce0; 
    border-radius: 12px; 
    padding: 16px; 
}

.mgn-topics-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 16px; 
}
.mgn-topic-col { 
    background: #fff; 
    border: 1px solid #dadce0; 
    border-radius: 12px; 
    padding: 16px; 
}
.mgn-topic-heading { 
    font-size: 16px; 
    font-weight: 500; 
    color: #202124; 
    margin-top: 0; 
    border-bottom: 1px solid #dadce0; 
    padding-bottom: 12px; 
    margin-bottom: 0; 
}

/* ==========================================================================
   10. ASYNC IMAGE SKELETON LOADER (Shimmer Effect)
   ========================================================================== */
.mgn-async-image {
    background: linear-gradient(90deg, #f1f3f4 25%, #e8eaed 50%, #f1f3f4 75%);
    background-size: 200% 100%;
    animation: mgn-shimmer 1.5s infinite linear;
    border-radius: 8px;
}

@keyframes mgn-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Sizing constraints for the skeleton boxes so they don't collapse before loading */
.mgn-story-standard .mgn-async-image {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.mgn-story-featured .mgn-async-image {
    width: 100%;
    height: 200px;
    margin-top: 12px;
}

/* Smooth fade-in once the real image is loaded via JS */
.mgn-story-image img {
    animation: fadeIn 0.4s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   11. MOBILE RESPONSIVENESS (Media Queries)
   ========================================================================== */
@media (max-width: 900px) {
    /* Stack Main Content and Sidebar */
    .mgn-layout-grid { 
        grid-template-columns: 1fr; 
    }
    
    /* Stack 'For You' grid to 1 column on tablet/mobile */
    .mgn-foryou-grid {
        grid-template-columns: 1fr;
    }
    
    /* Stack 'Your Topics' grid from 3 to 1 column on tablet/mobile */
    .mgn-topics-grid {
        grid-template-columns: 1fr;
    }
    
    /* Ensure Header title and Weather widget wrap cleanly */
    .mgn-header-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    #mgn-weather-widget {
        justify-content: space-between;
    }
}