/* ==========================================================================
   THE NEWS FRONTLINE — custom additions (loaded LAST, after theme-jagran.css)

   1) All article cards made smaller everywhere (not just mobile):
        - Main "Latest Stories" grid card thumbnail: height cut in half
        - Hero (top big story) thumbnail: height cut in half
        - Side "top stories" list thumbnails: ~30% narrower
        - Padding/text on every card trimmed ~30%
   2) On top of that, mobile still gets 2 cards per row instead of 1.
   ========================================================================== */

/* ---------- Hero + side "top stories" row (grid-cols-1 lg:grid-cols-3 gap-4) ---------- */

/* Hero big story thumbnail: h-48 (192px) -> half */
.grid.grid-cols-1.lg\:grid-cols-3.gap-4 > div:first-child .relative.w-full.h-48 {
  height: 6rem !important;
}
.grid.grid-cols-1.lg\:grid-cols-3.gap-4 > div:first-child .p-4.lg\:p-6 {
  padding: 0.7rem !important;
}
.grid.grid-cols-1.lg\:grid-cols-3.gap-4 > div:first-child h2 {
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.35rem !important;
}
.grid.grid-cols-1.lg\:grid-cols-3.gap-4 > div:first-child p.line-clamp-2 {
  font-size: 0.78rem !important;
}

/* Side "top stories" thumbnails: w-20 (80px) -> ~30% narrower */
.grid.grid-cols-1.lg\:grid-cols-3.gap-4 .relative.w-20.flex-shrink-0 {
  width: 3.5rem !important;
}
.grid.grid-cols-1.lg\:grid-cols-3.gap-4 h3.text-sm.font-bold.leading-snug {
  font-size: 0.72rem !important;
  padding: 0.35rem 0.5rem !important;
}

/* ---------- Main "Latest Stories" grid cards ---------- */

/* Thumbnail: h-28 (112px) -> half */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article .relative.h-28 {
  height: 3.5rem !important;
}

/* Card body padding trimmed ~30% */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article .p-4 {
  padding: 0.7rem !important;
}

/* Title trimmed ~30% */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article h3.text-base {
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.3rem !important;
}

/* Excerpt trimmed ~30% */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article p.text-gray-500.text-sm {
  font-size: 0.66rem !important;
  margin-bottom: 0.4rem !important;
}

/* Date/meta row trimmed */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article .text-xs.text-gray-400 {
  font-size: 0.6rem !important;
}

/* Category / breaking badges trimmed to match */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article span.absolute.top-3 {
  top: 0.4rem !important;
  padding: 0.15rem 0.5rem !important;
  font-size: 8px !important;
}
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article span.absolute.top-3.left-3 { left: 0.4rem !important; }
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article span.absolute.top-3.right-3 { right: 0.4rem !important; }

/* ---------- Mobile: 2 cards per row instead of 1 ---------- */
@media (max-width: 639px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
  }

  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > article,
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 > div {
    min-width: 0;
  }

  /* At 2-per-row on a small phone, the excerpt line just adds clutter — hide it */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.gap-6 article p.text-gray-500.text-sm {
    display: none !important;
  }
}