/* ==========================================
   SHIELD SIDEBAR (LIGHT THEME)
========================================== */

.shield-sidebar{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* SECTION */

.shield-sidebar .sidebar-section{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:.25s ease;
}

.shield-sidebar .sidebar-section:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* TITLES */

.shield-sidebar .sidebar-title{
  padding:14px 16px;
  font-size:15px;
  font-weight:700;
  color:#111827;
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
}

/* LINKS WRAPPER */

.shield-sidebar .sidebar-links{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* LINK CARD */

.shield-sidebar .sidebar-link-card{
  display:block;
  padding:12px 14px;

  text-decoration:none;
  color:#1f2937;

  background:#ffffff;

  border:1px solid #e5e7eb;
  border-radius:10px;

  font-size:14px;
  font-weight:500;

  transition:.25s ease;
}

.shield-sidebar .sidebar-link-card:hover{
  background:#f3f4f6;
  border-color:#3b82f6;
  color:#2563eb;
  transform:translateX(4px);
}

/* TELEGRAM */

.shield-sidebar .telegram-card{
  display:flex;
  justify-content:center;
  align-items:center;

  margin:10px;

  min-height:52px;

  text-decoration:none;

  border-radius:12px;

  color:#fff;
  font-weight:600;

  background:#229ED9;

  transition:.25s ease;
}

.shield-sidebar .telegram-card:hover{
  background:#1c8bc2;
  transform:translateY(-2px);
}

/* SECTION COLORS */

.shield-sidebar .sidebar-section:nth-child(1){
  border-left:4px solid #16a34a;
}

.shield-sidebar .sidebar-section:nth-child(2){
  border-left:4px solid #2563eb;
}

.shield-sidebar .sidebar-section:nth-child(3){
  border-left:4px solid #dc2626;
}

.shield-sidebar .sidebar-section:nth-child(4){
  border-left:4px solid #f59e0b;
}

.shield-sidebar .sidebar-section:nth-child(5){
  border-left:4px solid #7c3aed;
}

.shield-sidebar .sidebar-section:nth-child(6){
  border-left:4px solid #0891b2;
}

/* DESKTOP */

@media (min-width:901px){

  .shield-sidebar{
    position:sticky;
    top:90px;
  }

}

/* MOBILE */

@media (max-width:900px){

  .shield-sidebar{
    margin-top:20px;
  }

}@media (min-width:901px){

  .shield-sidebar{

    position:fixed;

    top:88px;
    right:24px;

    width:340px;

   

  }

  .shield-sidebar-inner{

    height:calc(100vh - 112px);

    overflow-y:auto;
    overflow-x:hidden;

    padding-right:6px;

    scrollbar-width:thin;

  }

  .shield-sidebar-inner::-webkit-scrollbar{
    width:6px;
  }

  .shield-sidebar-inner::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:999px;
  }

}

/* ==========================================================================
   🚀 INFO-SHIELD CARD IMAGE ASPECT RATIO & COVER FIX (PRODUCTION READY)
   ========================================================================== */

/* 1. Outer Frame Box (Dabba): Iska ratio 1.50 par lock kiya */
.blog-card__thumb {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  
  /* Browser ko forced math calculations di taaki PageSpeed 100/100 rahe */
  aspect-ratio: 354 / 236 !important; 
}

/* 2. Actual Image: Box bada hone par photo bina khinche poora cover karegi */
.blog-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  
  /* 🔥 Sabse main jadu: Image stretch nahi hogi, automatic crop hokar tight fit ho jayegi */
  object-fit: cover !important; 
  object-position: center !important; /* Photo ka center area hamesha focus me rahega */
  
  transition: transform 0.3s ease !important; /* Smooth hover effect ke liye (optional) */
}

/* 3. Hover Effect (Optional but cool): Card par hover karne se photo makkhan jaisi zoom hogi */
.blog-card:hover .blog-card__thumb img {
  transform: scale(1.05) !important;
}
/* ==========================================================================
   🛡️ INFOSHIELD INDIA CLEAN INLINE-TO-CSS REFACTORING
   ========================================================================== */

/* Main Layout Wrapper */
.shield-page-wrapper {
  padding-top: var(--nav-height);
}

/* Hero Section Base */
.shield-hero {
  padding: var(--space-16) 0 var(--space-12); 
  background: linear-gradient(135deg, #ff9933 0%, #fff7ef 38%, #ffffff 55%, #4caf50 100%); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
  position: relative; 
  overflow: hidden;
}

/* Background Radial Glow Shape */
.shield-hero__glow {
  position: absolute;
  right: -120px;
  top: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 153, 51, 0.22) 0%, rgba(76, 175, 80, 0.14) 45%, transparent 52%);
  pointer-events: none;
}

.shield-hero__container {
  position: relative;
}

.shield-hero__label {
  color: #145c1a;
}

.shield-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem); 
  font-weight: var(--fw-black); 
  letter-spacing: -0.03em; 
  line-height: 1.3; 
  color: #111111; 
  margin-bottom: var(--space-4);
}

.shield-hero__title--alert {
  color: #c62828;
}

.shield-hero__desc {
  font-size: var(--fs-md); 
  color: #222222; 
  max-width: 55ch; 
  line-height: var(--lh-loose);
}

/* Search Container Styles */
.shield-search-box {
  margin-bottom: 40px; 
  display: flex; 
  justify-content: center; 
  width: 100%;
}

.shield-search-box input {
  width: 100%; 
  max-width: 600px; 
  padding: 14px 24px; 
  border: 2px solid var(--clr-border, #e2e8f0); 
  border-radius: 30px; 
  background: var(--clr-bg-surface, #ffffff); 
  color: var(--clr-text-dark, #0f172a); 
  font-size: 16px; 
  outline: none; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Dynamic Pagination Layout CSS */
.shield-pagination {
  display: flex; 
  gap: 8px; 
  justify-content: center; 
  margin-top: 50px; 
  align-items: center; 
  flex-wrap: wrap;
}

/* Custom Card Content Adjustment */
.blog-card__desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-2, #475569);
  margin-top: var(--space-2);
}

/* ==========================================================================
   🚀 CARD THUMBNAIL ASPECT RATIO & IMAGE STRETCH FIX
   ========================================================================== */
.blog-card__thumb {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  aspect-ratio: 354 / 236 !important; /* Lock 1.50 Frame Ratio for PageSpeed */
}

.blog-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Image fills completely without squishing */
  object-position: center !important;
  display: block !important;
}
/* ==========================================================================
   🎯 ANTI-LAYOUT SHIFT (CLS) AIRTIGHT LOCKS 
   ========================================================================== */

/* 1. Search Box Container ko pehle se hi fixed height de do */
.shield-search-box {
  min-height: 54px !important; /* Input box ki pixel height */
  margin-bottom: 40px !important;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 2. Grid Container (Wrapper) ka structural safety lock */
#post-wrapper.grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  
  /* 🔥 JADU: Browser ko pehle se pata hoga ki 1st page par kam se kam 2 raw ki height reserve rakhni hai, 
     chahe JS load ho rahi ho ya khali ho rahi ho. Isse dabba zero height nahi banega. */
  min-height: 550px !important; 
}

/* 3. Mobile aur Tablet responsive par layout shift lock pixels adjust karo */
@media (max-width: 900px) {
  #post-wrapper.grid-3 {
    grid-template-columns: repeat(2, 1fr);
    min-height: 1200px !important; /* Mobile grid stack height layout lock */
  }
}

@media (max-width: 600px) {
  #post-wrapper.grid-3 {
    grid-template-columns: 1fr;
    min-height: 2200px !important; /* Single column layout stack height */
  }
}