/*
Theme Name: News Hub
Author: AI Assistant
Description: Advanced News Theme with 11 Custom Blocks and Control Panel.
Version: 2.0
*/

body { font-family: 'Hind Siliguri', 'Arial', sans-serif; color: #333; background: #f4f4f4; margin: 0; padding: 0; line-height: 1.6; }
.container { width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 15px; }
a { text-decoration: none; color: #d32f2f; }
img { max-width: 100%; height: auto; }

/* Header */
.top-bar { background: #111; color: #fff; padding: 8px 0; font-size: 14px; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-bar a { color: #fff; margin-left: 10px; }
.site-header { background: #fff; padding: 20px 0; border-bottom: 1px solid #ddd; }
.site-branding { text-align: center; }
.site-title { margin: 0; font-size: 36px; font-weight: 700; }
.site-title a { color: #d32f2f; }

/* Navigation */
.main-navigation { background: #d32f2f; color: #fff; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.main-navigation li { position: relative; }
.main-navigation a { display: block; color: #fff; padding: 15px 20px; font-weight: 500; }
.main-navigation a:hover { background: #b71c1c; }

/* Layout */
.content-area { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin: 30px 0; }

/* Base News Block */
.news-block { margin-bottom: 30px; background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.block-title { border-bottom: 3px solid #d32f2f; margin-bottom: 20px; padding-bottom: 10px; font-size: 24px; }
.news-card { border: 1px solid #eee; border-radius: 5px; overflow: hidden; background: #fff; margin-bottom: 15px; }
.news-card img { height: 200px; object-fit: cover; width: 100%; }
.news-card .card-content { padding: 15px; }
.news-card h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.4; }
.news-card h4 { margin: 0; font-size: 16px; }

/* STYLE 1: 3-Column Grid */
.style-grid_3 .three-col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* STYLE 2: Vertical List */
.style-list_vert .list-view { display: flex; flex-direction: column; gap: 20px; }
.style-list_vert .news-card { display: flex; flex-direction: row; align-items: flex-start; border: none; border-bottom: 1px solid #eee; padding-bottom: 15px; background: transparent; box-shadow: none; margin-bottom: 0; }
.style-list_vert .news-card a { width: 40%; flex-shrink: 0; }
.style-list_vert .news-card img { height: 120px; object-fit: cover; width: 100%; border-radius: 4px; }
.style-list_vert .news-card .card-content { padding: 0 0 0 15px; width: 60%; }

/* STYLE 3: 2-Column Grid */
.style-grid_2 .two-col-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* STYLE 4: 1 Big + 2 Small */
.style-feat_1_2 .featured-big { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.style-feat_1_2 .featured-big img { height: 350px; width: 100%; object-fit: cover; }
.style-feat_1_2 .featured-big h3 { font-size: 24px; margin-top: 10px; }
.style-feat_1_2 .featured-small-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.style-feat_1_2 .featured-small-wrap .news-card { border: none; margin: 0; }
.style-feat_1_2 .featured-small-wrap img { height: 120px; }

/* STYLE 5: Overlay Title */
.style-overlay .overlay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.overlay-card { position: relative; display: block; height: 220px; border-radius: 5px; overflow: hidden; }
.overlay-card img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.3s; }
.overlay-card:hover img { transform: scale(1.05); }
.overlay-text { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 20px 15px 10px; }
.overlay-text h3 { color: #fff; margin: 0; font-size: 16px; }

/* STYLE 6: Numbered List */
.style-numbered .numbered-list { display: flex; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.style-numbered .num { background: #d32f2f; color: #fff; font-weight: bold; font-size: 18px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; margin-right: 15px; }
.style-numbered .num-content h3 { margin: 0; font-size: 18px; line-height: 1.4; }

/* STYLE 7: Text Only */
.style-text_only .text-only-list { border-bottom: 1px solid #eee; padding: 10px 0; }
.style-text_only .text-only-list h3 { margin: 0; font-size: 18px; }
.style-text_only .text-only-list h3 a::before { content: "•"; color: #d32f2f; margin-right: 8px; font-size: 20px; }

/* STYLE 8: Horizontal Scroll */
.style-scroll_row .block-content-wrapper { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 15px; }
.style-scroll_row .scroll-row-item { flex: 0 0 300px; border: 1px solid #eee; border-radius: 5px; }
.style-scroll_row .scroll-row-item img { height: 160px; width: 100%; object-fit: cover; }

/* STYLE 9: Title on Top */
.style-title_top .title-top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.style-title_top .news-card { border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.style-title_top .news-card .card-content { padding-bottom: 0; }
.style-title_top .news-card img { height: 180px; }

/* STYLE 10: Thick Border Card */
.style-border_card .border-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.style-border_card .border-top { border-top: 5px solid #d32f2f; border-radius: 0 0 5px 5px; }

/* STYLE 11: Ad Block */
.ad-container { text-align: center; background: #f9f9f9; border: 1px dashed #ccc; }
.ad-content { padding: 10px; }

/* Sidebar */
.widget { background: #fff; padding: 20px; margin-bottom: 30px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.widget-title { border-bottom: 2px solid #ddd; margin-top: 0; padding-bottom: 10px; }
.ad-btn { display: block; width: 100%; text-align: center; background: #1976d2; color: #fff; padding: 15px; font-size: 18px; font-weight: bold; border-radius: 5px; margin-bottom: 20px; }
.ad-btn:hover { background: #1565c0; color: #fff; }

/* Footer */
.site-footer { background: #111; color: #fff; padding: 30px 0; text-align: center; margin-top: 40px; }

/* Responsive */
@media (max-width: 768px) {
    .content-area { grid-template-columns: 1fr; }
    .style-grid_3 .three-col-grid, .style-grid_2 .two-col-grid, .style-overlay .overlay-grid, .style-title_top .title-top-grid, .style-border_card .border-card-grid { grid-template-columns: 1fr; }
    .style-feat_1_2 .featured-small-wrap { grid-template-columns: 1fr; }
}