/* ============================================================
   NEWS तक — utilities.css
   Custom utility classes, spacing helpers, typography
   ============================================================ */

/* ============================================================
   SPACING UTILITIES
   ============================================================ */
.mt-section  { margin-top: 40px; }
.mb-section  { margin-bottom: 40px; }
.py-section  { padding-top: 40px; padding-bottom: 40px; }
.gap-card    { gap: 20px; }
.gap-sm      { gap: 10px; }
.gap-xs      { gap: 6px; }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.font-hindi     { font-family: 'Noto Sans Devanagari','Mukta',sans-serif !important; }
.fw-900         { font-weight: 900 !important; }
.fw-800         { font-weight: 800 !important; }
.fw-700         { font-weight: 700 !important; }
.fw-600         { font-weight: 600 !important; }
.lh-tight       { line-height: 1.3 !important; }
.lh-normal      { line-height: 1.6 !important; }
.fs-xs          { font-size: 0.70rem !important; }
.fs-sm          { font-size: 0.82rem !important; }
.fs-base        { font-size: 0.92rem !important; }
.fs-md          { font-size: 1.05rem !important; }
.fs-lg          { font-size: 1.2rem !important; }
.fs-xl          { font-size: 1.5rem !important; }
.text-clamp-2   { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-3   { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.text-clamp-4   { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   COLOR UTILITIES
   ============================================================ */
.text-red     { color: #D0021B !important; }
.text-navy    { color: #003087 !important; }
.text-yellow  { color: #FFB800 !important; }
.text-green   { color: #008a3c !important; }
.text-muted-custom { color: #888888 !important; }
.bg-red       { background-color: #D0021B !important; }
.bg-navy      { background-color: #003087 !important; }
.bg-dark-custom { background-color: #1e1e1e !important; }
.bg-light-red { background-color: #fff0f2 !important; }
.border-red   { border-color: #D0021B !important; }

/* ============================================================
   CATEGORY LABEL BADGES
   ============================================================ */
.badge-cat {
  display: inline-block;
  font-family: 'Noto Sans Devanagari','Mukta',sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.badge-cat-red    { background: #D0021B; color: #fff; }
.badge-cat-navy   { background: #003087; color: #fff; }
.badge-cat-green  { background: #008a3c; color: #fff; }
.badge-cat-yellow { background: #FFB800; color: #111; }
.badge-cat-dark   { background: #1e1e1e; color: #fff; }
.badge-cat-purple { background: #7B2FBE; color: #fff; }
.badge-cat-orange { background: #E85D04; color: #fff; }

/* ============================================================
   LINK UTILITIES
   ============================================================ */
.link-red:hover     { color: #D0021B !important; }
.link-underline:hover { text-decoration: underline; }
.hover-red:hover    { color: #D0021B; }
.hover-lift:hover   { transform: translateY(-3px); transition: transform 0.2s ease; }
.hover-scale:hover  { transform: scale(1.03); transition: transform 0.2s ease; }

/* ============================================================
   BORDER UTILITIES
   ============================================================ */
.border-left-red  { border-left: 3px solid #D0021B !important; }
.border-left-navy { border-left: 3px solid #003087 !important; }
.border-top-red   { border-top: 3px solid #D0021B !important; }
.border-bottom-red { border-bottom: 2px solid #D0021B !important; }

/* ============================================================
   SHADOW UTILITIES
   ============================================================ */
.shadow-news  { box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.shadow-card  { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.shadow-hover { transition: box-shadow 0.3s ease; }
.shadow-hover:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.15); }

/* ============================================================
   IMAGE UTILITIES
   ============================================================ */
.img-cover   { object-fit: cover; width: 100%; height: 100%; display: block; }
.img-zoom    { overflow: hidden; }
.img-zoom img { transition: transform 0.4s ease; }
.img-zoom:hover img { transform: scale(1.06); }
.aspect-16-9  { aspect-ratio: 16/9; }
.aspect-4-3   { aspect-ratio: 4/3; }
.aspect-1-1   { aspect-ratio: 1/1; }
.aspect-9-16  { aspect-ratio: 9/16; }

/* ============================================================
   FLEX/GRID UTILITIES
   ============================================================ */
.flex-center     { display: flex; align-items: center; justify-content: center; }
.flex-between    { display: flex; align-items: center; justify-content: space-between; }
.flex-start      { display: flex; align-items: center; justify-content: flex-start; }
.flex-col        { flex-direction: column; }
.flex-shrink-0   { flex-shrink: 0; }
.grid-2          { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3          { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4          { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ============================================================
   OVERFLOW UTILITIES
   ============================================================ */
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; scrollbar-width: none; }
.overflow-x-auto::-webkit-scrollbar { display: none; }
.no-scroll        { overflow: hidden; }
.ellipsis         { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   DIVIDERS
   ============================================================ */
.divider {
  height: 1px;
  background: #e2e2e2;
  margin: 16px 0;
}
.divider-red {
  height: 2px;
  background: linear-gradient(135deg, #D0021B 0%, #8B0000 100%);
  margin: 16px 0;
}
.divider-dot {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cccccc;
  font-size: 0.65rem;
  margin: 14px 0;
}
.divider-dot::before,
.divider-dot::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e2e2;
}

/* ============================================================
   LIVE / BREAKING INDICATORS
   ============================================================ */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #D0021B;
  color: #fff;
  font-family: 'Noto Sans Devanagari','Mukta',sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.live-badge .dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: dotBlink 1s infinite;
}
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

.breaking-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFB800;
  color: #111;
  font-family: 'Noto Sans Devanagari','Mukta',sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.exclusive-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #7B2FBE;
  color: #fff;
  font-family: 'Noto Sans Devanagari','Mukta',sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* ============================================================
   SKELETON LOADER
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #eeeeee 25%, #f5f5f5 50%, #eeeeee 75%);
  background-size: 200% 100%;
  animation: skeletonLoad 1.5s infinite;
  border-radius: 4px;
}
@keyframes skeletonLoad {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-title   { height: 18px; width: 85%; margin-bottom: 8px; }
.skeleton-text    { height: 13px; width: 100%; margin-bottom: 6px; }
.skeleton-text-sm { height: 13px; width: 60%; }
.skeleton-img     { width: 100%; aspect-ratio: 16/9; }
.skeleton-circle  { border-radius: 50%; }

/* ============================================================
   NOTIFICATION / TOAST
   ============================================================ */
.toast-custom {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e1e1e;
  color: #fff;
  font-family: 'Noto Sans Devanagari','Mukta',sans-serif;
  font-size: 0.82rem;
  padding: 10px 24px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
}
.toast-custom.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   SCROLL HELPERS
   ============================================================ */
.scroll-snap-x {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scroll-snap-x::-webkit-scrollbar { display: none; }
.snap-start { scroll-snap-align: start; }

/* ============================================================
   VISIBILITY HELPERS
   ============================================================ */
.show-mobile  { display: none; }
.hide-mobile  { display: block; }
@media (max-width: 767px) {
  .show-mobile { display: block; }
  .hide-mobile { display: none; }
  .show-mobile-flex { display: flex; }
  .hide-mobile-flex { display: none; }
}

/* ============================================================
   Z-INDEX SCALE
   ============================================================ */
.z-1   { z-index: 1; }
.z-10  { z-index: 10; }
.z-100 { z-index: 100; }
.z-top { z-index: 9999; }

/* ============================================================
   CURSOR HELPERS
   ============================================================ */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ============================================================
   ROUNDED HELPERS
   ============================================================ */
.rounded-sm   { border-radius: 4px !important; }
.rounded-md   { border-radius: 8px !important; }
.rounded-lg   { border-radius: 12px !important; }
.rounded-xl   { border-radius: 16px !important; }
.rounded-pill { border-radius: 999px !important; }

/* ============================================================
   POSITION HELPERS
   ============================================================ */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.inset-0      { inset: 0; }
.overlay-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 100%);
}

/* ============================================================
   TRANSITION HELPERS
   ============================================================ */
.transition-fast { transition: all 0.18s ease; }
.transition-base { transition: all 0.30s ease; }
.transition-slow { transition: all 0.50s ease; }
.no-transition   { transition: none !important; }