/*
 * The Herald Today — Tablet Styles
 * Target: 769px - 1024px
 * Loaded via: <link media="screen and (min-width: 769px) and (max-width: 1024px)">
 *
 * Design Language:
 *   - Bridge between desktop layout and mobile single-column
 *   - 2-column grids where desktop has 3-4
 *   - Compact spacing, optimized for touch
 *   - Uses CSS variables for all theme colors (Light/Dark/Elite)
 *   - NO !important needed (same specificity as mobile.css)
 */

/* ═══════════════════════════════════════════════════════════════════
   1. CONTAINER & BASE
   ═══════════════════════════════════════════════════════════════════ */

.shell {
  width: min(1140px, calc(100% - 24px));
}

body {
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   2. HEADER & NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */

/* Masthead - slightly compact */
.masthead {
  min-height: 70px;
  padding: 8px 0;
}

.brand strong {
  font-size: 24px;
}

/* Nav - show ticker actions, hide search/toggle from nav-wrap */
.ticker-actions {
  display: flex;
}

.nav-wrap .search-box {
  display: none;
}

.nav-wrap .theme-toggle {
  display: none;
}


.nav-wrap {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 6px 0 8px;
}

.nav-pill {
  padding: 6px 10px;
  font-size: 11.5px;
  min-height: 32px;
}

.nav-pill__icon .icon {
  width: 15px;
  height: 15px;
}

/* Show mobile quick tabs */
.mobile-quick-tabs {
  display: block;
}

.mobile-brand {
  display: none !important;
}

/* Ticker */
.ticker-track {
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════
   3. HERO SECTION
   ═══════════════════════════════════════════════════════════════════ */

.hero-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-4) 0;
}

.hero-grid > *:nth-child(3) {
  display: none;
}

.lead-card {
  grid-row: 1 / 3;
}

.lead-hero {
  height: 240px;
}

.lead-card h1 {
  font-size: 26px;
  line-height: 1.2;
}

.lead-card p {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   4. FEEDS
   ═══════════════════════════════════════════════════════════════════ */

/* Pakistan & Live feeds */
.pakistan-feed,
.live-panel {
  padding: var(--space-4);
}

.pakistan-feed h2,
.live-panel h2 {
  font-size: var(--h3);
}

.mini-column {
  grid-template-columns: repeat(2, 1fr);
}

.popular-section {
  grid-column: 1 / 3;
}

/* ═══════════════════════════════════════════════════════════════════
   5. TRENDING BAR
   ═══════════════════════════════════════════════════════════════════ */

.trending-bar {
  flex-wrap: wrap;
}

.trending-cards {
  grid-template-columns: repeat(2, 1fr);
}

/* ═══════════════════════════════════════════════════════════════════
   6. FEATURED SLIDER
   ═══════════════════════════════════════════════════════════════════ */

.feature-slider {
  padding: var(--space-4) 0;
}

.slider-visual {
  height: 320px;
}

.slider-copy h2 {
  font-size: 22px;
}

.slider-copy a > p:last-child {
  font-size: 14px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.slider-copy {
  padding: 16px 20px 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   7. PROVINCE GRID
   ═══════════════════════════════════════════════════════════════════ */

.province-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.province-tile {
  padding: 10px 10px 12px 26px;
}

.province-section .section-title {
  font-size: 22px;
}

/* ═══════════════════════════════════════════════════════════════════
   8. CATEGORY STRIP
   ═══════════════════════════════════════════════════════════════════ */

.category-strip {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════
   9. CATEGORY NEWS GRID
   ═══════════════════════════════════════════════════════════════════ */

.cat-news-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: var(--space-4) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   10. EDITOR'S CHOICE & TECHNOLOGY
   ═══════════════════════════════════════════════════════════════════ */

.editor-grid,
.tech-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.editor-card img,
.tech-card img {
  height: 140px;
}

/* ═══════════════════════════════════════════════════════════════════
   11. SPLIT NEWS (Defence + Opinion)
   ═══════════════════════════════════════════════════════════════════ */

.split-news {
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  padding: var(--space-4) 0;
}

.story-list-card {
  grid-template-columns: 90px 1fr;
  gap: 10px;
}

.story-list img {
  width: 90px;
  height: 90px;
}

.story-list h3 {
  font-size: 0.82rem;
}

/* ═══════════════════════════════════════════════════════════════════
   12. CYBER SECURITY
   ═══════════════════════════════════════════════════════════════════ */

.cyber-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cyber-hero-img-wrap img {
  height: 200px;
}

/* ═══════════════════════════════════════════════════════════════════
   13. BREAKING PAGE
   ═══════════════════════════════════════════════════════════════════ */

.breaking-layout {
  grid-template-columns: 1fr;
  gap: 28px;
}

.breaking-cards {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.breaking-sidebar {
  flex-direction: row;
  flex-wrap: wrap;
}

.breaking-sidebar-card {
  flex: 1;
  min-width: 240px;
}

.breaking-content .block-heading {
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   14. ARTICLE PAGE
   ═══════════════════════════════════════════════════════════════════ */

.article-layout {
  grid-template-columns: 1fr 260px;
  gap: 20px;
}

.article-main {
  padding: 20px;
}

.article-hero {
  height: 300px;
}

.article-main h1 {
  font-size: 30px;
}

.article-content p {
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════
   15. AI ANALYSIS
   ═══════════════════════════════════════════════════════════════════ */

.ai-info-cards {
  grid-template-columns: 1fr;
}

.ai-impact-grid {
  grid-template-columns: 1fr;
}

.ai-terms-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ═══════════════════════════════════════════════════════════════════
   16. TIMELINE PAGE
   ═══════════════════════════════════════════════════════════════════ */

.timeline-hero-inner {
  width: min(1140px, calc(100% - 32px));
}

.timeline-hero-grid {
  grid-template-columns: 1fr 360px;
  gap: 18px;
}

.timeline-title {
  font-size: clamp(28px, 3.2vw, 42px);
}

.timeline-layout {
  grid-template-columns: 1fr 300px;
  gap: 20px;
}

.timeline-event {
  grid-template-columns: 90px 24px 1fr;
}

/* ═══════════════════════════════════════════════════════════════════
   17. FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.footer-top {
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  padding: 36px 0 24px;
}

.footer-links {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   18. SEARCH MODAL
   ═══════════════════════════════════════════════════════════════════ */

.search-modal-panel {
  width: min(720px, calc(100% - 24px));
  max-height: min(72vh, 600px);
}

.search-modal-filters {
  grid-template-columns: 1fr 1fr;
  padding: 10px 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   19. DRAWER (keep desktop style, not mobile drawer)
   ═══════════════════════════════════════════════════════════════════ */

.mobile-drawer {
  width: 280px;
}

/* ═══════════════════════════════════════════════════════════════════
   20. BLOCK HEADINGS
   ═══════════════════════════════════════════════════════════════════ */

.block-heading,
.section-title {
  font-size: 18px;
  padding: 14px 0 10px;
}

.province-section .section-title {
  font-size: 22px;
  padding: 18px 0 14px;
}


/* ============================================
   ============================================ */
.intel-sk-list {
  grid-template-columns: repeat(2, 1fr);
}

.intel-scenarios {
  grid-template-columns: repeat(2, 1fr);
}

.intel-glossary-grid {
  grid-template-columns: repeat(2, 1fr);
}

.intel-sk-conn-item {
  gap: 6px;
}

.intel-sk-conn-type {
  font-size: 11px;
}