/*
Theme Name: Pahali Khabar Premium Portal
Theme URI: https://pahalikhabar.in
Author: Rakesh Kumar
Description: देश की सबसे बड़ी न्यूज़ वेबसाइट्स जैसा एडवांस्ड ग्रिड और कैटेगरी डिज़ाइन।
Version: 2.0
Text Domain: pahalikhabar
*/

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f6f8fa; color: #222; }
a { text-decoration: none; color: inherit; transition: color 0.2s; }
img { max-width: 100%; height: auto; display: block; }
.container { width: 95%; max-width: 1260px; margin: 0 auto; }

/* टॉप हेडर */
.top-header { background: #fff; padding: 15px 0; border-bottom: 1px solid #eee; }
.top-header-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.logo a { font-size: 34px; font-weight: 900; color: #ff0000; letter-spacing: -1px; }
.header-datetime { font-size: 14px; color: #555; font-weight: 500; }
.search-form { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.search-field { padding: 6px 12px; border: none; outline: none; font-size: 14px; }
.search-submit { padding: 6px 10px; background: #eee; border: none; cursor: pointer; }

/* नेविगेशन बार */
.main-navigation-bar { background: #222; position: sticky; top: 0; z-index: 999; }
.nav-menu-list { display: flex; list-style: none; overflow-x: auto; gap: 20px; padding: 12px 0; }
.nav-menu-list li a { color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; white-space: nowrap; }
.nav-menu-list li a:hover { color: #ff0000; }

/* ब्रेकिंग न्यूज़ टिकer */
.breaking-news-ticker { background: #ff0000; color: #fff; padding: 8px 0; font-size: 14px; }
.ticker-flex { display: flex; align-items: center; }
.ticker-title { background: #000; padding: 2px 10px; font-weight: 900; border-radius: 3px; font-size: 12px; white-space: nowrap; margin-right: 15px; }
.ticker-content { flex: 1; overflow: hidden; display: flex; align-items: center; }

/* ट्रेंडिंग हैशटैग्स */
.trending-tags-bar { background: #fff; padding: 12px 20px; border-radius: 4px; margin: 20px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.03); font-size: 14px; }

/* 3-कॉलम मुख्य ब्लॉक */
.main-hero-grid { display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: 20px; margin-bottom: 30px; }
@media (max-width: 991px) { .main-hero-grid { grid-template-columns: 1fr; } }

/* न्यूज़ लेआउट्स और ब्लॉक्स */
.block-box { background: #fff; border-radius: 6px; padding: 15px; border: 1px solid #eef0f2; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.block-title { font-size: 18px; border-left: 4px solid #ff0000; padding-left: 8px; margin-bottom: 15px; font-weight: 800; text-transform: uppercase; }

/* 4-कॉलम ग्रिड */
.grid-4-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-bottom: 30px; }
.grid-card { background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid #eee; display: flex; flex-direction: column; }
.grid-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.grid-img-box { height: 150px; overflow: hidden; background: #e0e0e0; }
.grid-img-box img { width:100%; height:100%; object-fit:cover; }

/* रो (Row) लेआउट */
.news-row-item { display: flex; gap: 15px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.news-row-item:last-child { border-bottom: none; }

/* हॉरिजॉन्टल स्क्रॉल (Web Stories) */
.horizontal-scroll-box { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; }
.story-circle-card { width: 110px; flex-shrink: 0; text-align: center; }
.story-circle-img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #ff0000; margin: 0 auto 8px; overflow: hidden; }
.story-circle-img img { width:100%; height:100%; object-fit:cover; }