/* ==========================================================================
   INDEX.CSS
   Styles specific to index.html only.
   Auto-split from the original style.css — no CSS rules were modified.
   Load AFTER common.css
   ========================================================================== */


/* =========================================================================
   3. HERO SECTION
   ========================================================================= */

.hero {
  padding-block: clamp(32px, 5vw, 56px) clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.hero-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}

.hero-feature:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--signal-rgb), 0.3);
}

/* side cards ---------------------------------------------------------------*/

.hero-side { display: flex; flex-direction: column; gap: 28px; }

/* =========================================================================
   4. TRENDING NEWS GRID
   ========================================================================= */

.trending { padding-block: 24px clamp(60px, 8vw, 100px); }

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--signal);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
  flex-shrink: 0;
}

.view-all svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }

.view-all:hover { border-color: currentColor; }

.view-all:hover svg { transform: translateX(3px); }

.trending-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* =========================================================================
   5. LATEST ARTICLES + SIDEBAR
   ========================================================================= */

.latest { padding-block: 12px clamp(56px, 7vw, 90px); }

.latest-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

/* list-style article rows -------------------------------------------------*/

.latest-list { display: flex; flex-direction: column; gap: 20px; }

/* load more -----------------------------------------------------------------*/

.load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }

#loadMoreBtn svg { width: 15px; height: 15px; }

.load-more-done {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* category list ---------------------------------------------------------------*/

.category-list { display: flex; flex-direction: column; gap: 2px; }

.category-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  margin-inline: -12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

.category-list a:hover { background: var(--border); padding-left: 18px; }

.tag {
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.tag:hover { background: rgba(var(--signal-rgb), 0.12); color: var(--signal); border-color: rgba(var(--signal-rgb), 0.3); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Laptop / small desktop */

@media (max-width: 1180px) {
  .trending-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet */

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }

  .hero-side { flex-direction: row; }

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

/* Mobile */

@media (max-width: 640px) {
  .hero { padding-top: 20px; gap: 20px; }

  .hero-feature { border-radius: var(--r-lg); }

  .hero-side { flex-direction: column; }

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

/* موبائل پر Latest Stories اور Sidebar کو اوپر نیچے کرنے کا کوڈ */

@media (max-width: 900px) {
  .latest-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important; /* دونوں حصوں کے درمیان فاصلہ */
  }

  .latest-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================
   آپ کا اپنا کوڈ — بغیر کسی ڈیزائن تبدیلی کے (تکرار ختم)
   ========================================================= */

/* 1. تمام کارڈز کا بنیادی سفید اور صاف ڈھانچہ */

.hero-feature {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* پرانے سائے اور ڈارک بیک گراؤنڈ ختم */

.hero-feature::after {
    display: none !important;
    background: none !important;
}

/* 2. تصویروں کی بنیادی سیٹنگ */

.hero-feature img {
    width: 100% !important;
    object-fit: cover !important;
    position: relative !important;
    display: block !important;
}

/* 6. ہیرو اور ٹرینڈنگ سیکشن کی سیٹنگز */

.hero {
    padding-bottom: 10px !important; /* ہیرو کا نچلا اندرونی فاصلہ کم کر دیا */
    margin-bottom: 0px !important;
}

.trending {
    padding-top: 10px !important;   /* ٹرینڈنگ کا اوپر کا اندرونی فاصلہ کم کر دیا */
    margin-top: 0px !important;
}

/* 8. رسپانسو (موبائل + ڈیسک ٹاپ) */

@media (max-width: 900px) {
  .hero {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

  .hero-feature { margin-bottom: 24px !important; }

  .hero-feature img {
        height: 220px !important;
    }
}

@media (min-width: 901px) {
  .hero {
        display: grid !important;
        grid-template-columns: 1.6fr 1fr !important;
        gap: 24px !important;
        align-items: stretch !important;
    }

  .hero-feature {
        height: 100% !important;
        margin-bottom: 0 !important;
    }

  .hero-feature img {
        height: 300px !important;
    }

  .hero-side {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        height: 100% !important;
    }
}
/* Skeleton Loader Animation */
.latest-item-media, .side-card-img, .hero-feature-img {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* =========================================================
   FIXED TOUCH/HOVER EFFECTS & PERFECT MOBILE HERO LAYOUT
   ========================================================= */

/* 1. Touch/Hover Visual Feedback for Cards & Images */
.hero-feature, .side-card, .article-card, .latest-item {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}

.hero-feature:active, .side-card:active, .article-card:active, .latest-item:active {
  transform: scale(0.98) !important;
}

.hero-feature:hover, .side-card:hover, .article-card:hover, .latest-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15) !important;
}

.article-card-media img, .hero-feature-img, .side-card-img, .latest-item-media img {
  transition: transform 0.4s ease !important;
}

.article-card:hover .article-card-media img,
.hero-feature:hover .hero-feature-img,
.side-card:hover .side-card-img,
.latest-item:hover .latest-item-media img {
  transform: scale(1.04) !important;
}

/* 2. Fix Skeleton Loading Sizes to match Exact Layout */
.skeleton-box {
  min-height: 280px !important;
  background: var(--surface) !important;
  border-radius: var(--r-lg) !important;
}

.skeleton-img {
  width: 100% !important;
  height: 200px !important;
  border-radius: var(--r-md) !important;
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s infinite linear !important;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* =========================================================
   PERFECT LATEST STORIES FIX (DESKTOP & MOBILE)
   ========================================================= */

/* 🟢 ڈیسک ٹاپ (PC) پر 3 خوبصورت اور متوازن کالمز */
#latestList {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#latestList .latest-item {
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, rgba(13,16,28,0.08)) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  height: 100% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

#latestList .latest-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}

#latestList .latest-item-media {
  width: 100% !important;
  height: 125px !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

#latestList .latest-item-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#latestList .latest-item-body {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 12px !important;
  flex: 1 !important;
}

#latestList .latest-item-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text-primary, #10131c) !important;
  margin: 0 0 6px 0 !important;
  display: -webkit-box !important;
  line-clamp: 2 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#latestList .latest-item-excerpt,
#latestList p,
#latestList div[class*="excerpt"],
#latestList div[class*="desc"] {
  display: none !important;
}

#latestList .latest-item-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 10px !important;
  color: var(--text-muted, #8992a8) !important;
  margin-top: auto !important;
  padding-top: 6px !important;
  border-top: 1px solid var(--border, rgba(13,16,28,0.06)) !important;
}

#latestList .latest-item-meta time,
#latestList .latest-item-meta span:not(.author-chip):not(.author-name) {
  display: none !important;
}

#latestList .latest-item-meta .author-chip {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#latestList .latest-item-meta .avatar {
  width: 16px !important;
  height: 16px !important;
  font-size: 7px !important;
}

#latestList .latest-item-meta .author-name {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* 🟢 موبائل پر 2 کالمز اور بالکل صاف، بڑا سائز */
@media screen and (max-width: 768px) {
  #latestList {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  #latestList .latest-item-media {
    height: 100px !important;
  }

  #latestList .latest-item-body {
    padding: 8px 10px !important;
  }

  #latestList .latest-item-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  #latestList .latest-item-meta .author-name {
    font-size: 9.5px !important;
  }
}