/* =========================
   BLOG GRID
========================= */
.blogGrid {
  position: relative;
  z-index: 5;
  grid-template-columns: repeat(9,6fr);
  gap: 40px;
  padding: 2rem;
  display: grid;
  align-items: start;
  max-width: fit-content;
}





  /* 5. Image Visibility & Scaling */
  .blogGrid img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;      
    height: 160px !important; /* Uniform height that looks good on both widths */   
    object-fit: cover !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;         
  }

  /* 6. Typography Protection */
  .blogGrid h1, .blogGrid h2, .blogGrid h3, .blogGrid h4, 
  .blogGrid p, .blogGrid a, .blogGrid span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important; 
  }





/* =========================
   BASE CARD
========================= */
.card-base {
  --rot: -2deg;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 50px 74px 2px 74px;
  padding: 1.5rem;
  color: #dedbdb;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
              0 0 30px rgba(211, 202, 202, 0.6),
              0 0 45px rgba(220, 38, 38, 0.5),
              0 10px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.4s ease, box-shadow 0.4s ease, z-index 0.2s ease;
}

.card-base .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.card-base button,
.card-base .btn,
.card-base a.btn {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: normal;
}

.card-base:hover {
  --rot: -2deg;
  animation: float 6s ease-in-out infinite;
  z-index: 10;
  background: rgba(220, 38, 38, 1);
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.9),
              0 0 30px rgba(220, 38, 38, 0.8),
              0 0 45px rgba(220, 38, 38, 0.7),
              0 3px 8px #000;
}

.card-base h1,
.card-base h2,
.card-base h3,
.card-base p {
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.card-base p {
  flex-grow: 1;
}

/* =========================
   CARD SIZES
========================= */
.xLargeCard {
  grid-column: span 6;
  grid-row: span 6;
  width: 100%;
  max-width: 940px;
  max-height: 280px;
  padding: 20px;
}

.LargeCard {
  grid-column: span 2;
  grid-row: span 2;
  width: 100%;
  max-width: 480px;
  min-height: 250px;
  padding: 10px;
}

.wideCard {
  grid-column: span 2;
  grid-row: span 1;
  width: 90%;
  max-width: 580px;
  max-height: 220px;
  padding: 20px;
  gap: 20px;
  
}








.longCard {
  grid-column: span 1;
  grid-row: span 4;
  width: 100%;
  max-width: 100px;
  min-height: 500px;
  padding: 1rem;
}

.smallCard {
  grid-column: span 1;
  grid-row: span 1;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  max-height: 200px;
  padding: 10px;
}






















/* =========================
   POST GRID CONTAINER
========================= */
.post-grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}






/* =========================
   BASE POST CARD
========================= */
.post-card-base {
  --rot: -3deg;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 50px 74px 2px 74px;
  padding: 1.5rem;
  color: #dedbdb;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
              0 0 30px rgba(211, 202, 202, 0.6),
              0 0 45px rgba(220, 38, 38, 0.5),
              0 10px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.4s ease, box-shadow 0.4s ease, z-index 0.2s ease;
}

.post-card-base:hover {
  --rot: -2deg;
  animation: float 6s ease-in-out infinite;
  z-index: 10;
  background: rgb(54, 56, 60);
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.9),
              0 0 30px rgba(220, 38, 38, 0.8),
              0 0 45px rgba(220, 38, 38, 0.7),
              0 3px 8px #000;
}

/* =========================
   POST CARD VARIANTS
========================= */
.post-card-base-white {
  --rot: -3deg;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 50px 74px 2px 74px;
  padding: 1.5rem;
  color: #000000;
  background: #555;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
              0 0 30px rgba(211, 202, 202, 0.6),
              0 0 45px rgba(139, 131, 131, 0.5),
              0 10px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.4s ease, box-shadow 0.4s ease, z-index 0.2s ease;
}

.post-card-base-white:hover {
  --rot: -2deg;
  animation: float 6s ease-in-out infinite;
  z-index: 10;
  background: rgb(108, 122, 132);
  box-shadow: 0 0 15px rgba(104, 99, 99, 0.9),
              0 0 30px rgba(103, 85, 85, 0.8),
              0 0 45px rgba(243, 240, 240, 0.7),
              0 3px 8px #000;
}

.post-card-base-teal {
  --rot: -3deg;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 50px 74px 2px 74px;
  padding: 1.5rem;
  color: #000000;
  background: #27606d;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
              0 0 30px rgba(211, 202, 202, 0.6),
              0 0 45px rgba(139, 131, 131, 0.5),
              0 10px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.4s ease, box-shadow 0.4s ease, z-index 0.2s ease;
}

.post-card-base-teal:hover {
  --rot: -2deg;
  animation: float 6s ease-in-out infinite;
  z-index: 10;
  background: rgb(43, 105, 118);
  box-shadow: 0 0 15px rgba(104, 99, 99, 0.9),
              0 0 30px rgba(103, 85, 85, 0.8),
              0 0 45px rgba(243, 240, 240, 0.7),
              0 3px 8px #000;
}

.post-card-base-purple {
  --rot: -3deg;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 50px 74px 2px 74px;
  padding: 1.5rem;
  color: #000000;
  background: #300360;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 0 15px rgba(98, 37, 131, 0.7),
              0 0 30px rgba(113, 47, 200, 0.6),
              0 0 45px rgba(104, 70, 149, 0.5),
              0 10px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.4s ease, box-shadow 0.4s ease, z-index 0.2s ease;
}

.post-card-base-purple:hover {
  --rot: -2deg;
  animation: float 6s ease-in-out infinite;
  z-index: 10;
  background: rgb(87, 44, 157);
  box-shadow: 0 0 15px rgba(104, 99, 99, 0.9),
              0 0 30px rgba(48, 3, 94, 0.8),
              0 0 45px rgba(243, 240, 240, 0.7),
              0 3px 8px #000;
}

.post-card-base-beige {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 50px 74px 2px 74px;
  padding: 1.5rem;
  color: #000000;
  background: #949331;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 0 15px rgba(71, 71, 72, 0.7),
              0 0 30px rgba(51, 50, 52, 0.6),
              0 0 45px rgba(112, 111, 112, 0.5),
              0 10px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.4s ease, box-shadow 0.4s ease, z-index 0.2s ease;
}

.post-card-base-beige:hover {
  animation: float 6s ease-in-out infinite;
  z-index: 10;
  background: rgb(244, 252, 171);
  box-shadow: 0 0 15px rgba(104, 99, 99, 0.9),
              0 0 30px rgba(48, 3, 94, 0.8),
              0 0 45px rgba(243, 240, 240, 0.7),
              0 3px 8px #000;
}

.post-card-base-pink {
  --rot: -3deg;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 50px 74px 2px 74px;
  padding: 1.5rem;
  color: #dedbdb;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
              0 0 30px rgba(211, 202, 202, 0.6),
              0 0 45px rgba(220, 38, 38, 0.5),
              0 10px 20px rgba(0, 0, 0, 0.5);
  transition: background 0.4s ease, box-shadow 0.4s ease, z-index 0.2s ease;
}

.post-card-base-pink:hover {
  --rot: -2deg;
  animation: float 6s ease-in-out infinite;
  z-index: 10;
  background: rgb(187, 71, 197);
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.9),
              0 0 30px rgba(220, 38, 38, 0.8),
              0 0 45px rgba(220, 38, 38, 0.7),
              0 3px 8px #000;
}

/* =========================
   POST CARD VARIANTS (SIZES)
========================= */
.post-xLargeCard {
  grid-column: span 4;
  grid-row: span 4;
  max-width: 940px;
  max-height: 780px;
  padding: 10px;
  gap: 10px;
  background: rgba(198, 196, 97, 0.85);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 2rem;
  padding: 0;
  overflow: hidden;
}

.post-xLargeCard .post-content {
  padding: 2.5rem;
}

.post-xLargeCard .post-hero-media-wrap {
  height: 100%;
  margin-bottom: 0;
  border-radius: 0;
}

.post-LargeCard {
  grid-column: span 2;
  grid-row: span 4;
  max-width: 380px;
  max-height: 350px;
  padding: 10px;
  gap: 25px;
  background: rgba(198, 196, 97, 0.85);
}

.post-wideCard {
  grid-column: span 4;
  grid-row: span 1;
  width: 100%;
  max-width: 600px;
  max-height: 120px;
  padding: 20px;
  background: rgba(198, 97, 179, 0.85);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.post-wideCard .post-hero-media-wrap {
  flex: 0 0 40%;
  height: 100%;
  margin-bottom: 0;
}

.post-wideCard .post-content {
  flex: 1;
}

.post-longCard {
  grid-column: span 1;
  grid-row: span 6;
  width: 100%;
  font:10px;
  /* 1. Give the card some room to breathe */
  max-width: 200px; /* Increased from 100px */
  max-height: 700px;
  padding: 1rem;
  
  /* 2. Ensure padding doesn't shrink your content area further */
  box-sizing: border-box; 
  
  /* 3. Clean, modern text-wrapping */
  overflow-wrap: break-word;
  word-break: break-word; /* Legacy support */
  
  background: rgba(97, 198, 195, 0.85);
}

.post-smallCard {
  grid-column: span 2;
  grid-row: span 2;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  max-height: 2500px;
  padding: 10px;
  background: rgba(198, 115, 97, 0.85);
}

/* =========================
   POST CARD UTILITIES
========================= */
.post-img-wrap {
  position: relative;
  flex: 0 0 40%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  min-width: 0;
}

.post-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   HOVER GLOW VARIANTS
========================= */
.hover-red:hover {
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.9),
              0 0 30px rgba(220, 38, 38, 0.8),
              0 0 45px rgba(220, 38, 38, 0.7),
              0 3px 8px #000;
}

.hover-blue:hover {
  box-shadow: 0 0 15px rgba(30, 144, 255, 0.9),
              0 0 30px rgba(30, 144, 255, 0.8),
              0 0 45px rgba(30, 144, 255, 0.7),
              0 3px 8px #000;
}

.hover-green:hover {
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.9),
              0 0 30px rgba(34, 197, 94, 0.8),
              0 0 45px rgba(34, 197, 94, 0.7),
              0 3px 8px #000;
}

.hover-purple:hover {
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.9),
              0 0 30px rgba(168, 85, 247, 0.8),
              0 0 45px rgba(168, 85, 247, 0.7),
              0 3px 8px #000;
}

.hover-pink:hover {
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.9),
              0 0 30px rgba(236, 72, 153, 0.8),
              0 0 45px rgba(236, 72, 153, 0.7),
              0 3px 8px #000;
}

.hover-teal:hover {
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.9),
              0 0 30px rgba(45, 212, 191, 0.8),
              0 0 45px rgba(45, 212, 191, 0.7),
              0 3px 8px #000;
}

.hover-orange:hover {
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.9),
              0 0 30px rgba(249, 115, 22, 0.8),
              0 0 45px rgba(249, 115, 22, 0.7),
              0 3px 8px #000;
}

.hover-gray:hover {
  box-shadow: 0 0 15px rgba(107, 114, 128, 0.9),
              0 0 30px rgba(107, 114, 128, 0.8),
              0 0 45px rgba(107, 114, 128, 0.7),
              0 3px 8px #000;
}

.hover-beige:hover {
  box-shadow: 0 0 15px rgba(128, 128, 107, 0.9),
              0 0 30px rgba(240, 213, 4, 0.8),
              0 0 45px rgba(167, 169, 62, 0.7),
              0 3px 8px #000;
}

/* =========================
   GRADIENT UTILITIES
========================= */
.post-gradient-red {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(105, 10, 10, 0.85));
}

.post-gradient-blue {
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.9), rgba(10, 40, 105, 0.85));
}

.post-gradient-green {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(10, 105, 40, 0.85));
}

.post-gradient-yellow {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(105, 90, 10, 0.85));
}

.post-gradient-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(60, 10, 105, 0.85));
}

.post-gradient-pink {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(105, 10, 60, 0.85));
}

.post-gradient-beige {
  background: linear-gradient(135deg, rgba(214, 188, 109, 0.9), rgba(105, 77, 10, 0.85));
}

.post-gradient-teal {
  background: linear-gradient(135deg, rgba(65, 108, 121, 0.9), rgba(96, 138, 138, 0.85));
}

.post-gradient-white {
  background: linear-gradient(135deg, rgba(143, 153, 152, 0.9), rgba(66, 73, 73, 0.85));
}

.post-gradient-orange {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.9), rgba(105, 60, 10, 0.85));
}

.post-gradient-gray {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.9), rgba(40, 45, 55, 0.85));
}

/* =========================
   FLOAT ANIMATION
========================= */
@keyframes float {
  0%, 100% {
    transform: rotate(var(--rot)) translateY(0) scale(1.05);
  }
  50% {
    transform: rotate(var(--rot)) translateY(-2px) scale(1.05);
  }
}

/* =========================
   CANVAS (FLAKES)
========================= */
#flakesCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

}

































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





@media (max-width: 948px) {
  /* 1. Main Grid Container Setup - Fixed Bottom Whitespace */
  .blogGrid,
  .post-grid-container { 
    display: grid !important; 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    grid-template-rows: auto !important; /* CRITICAL: Clears large empty vertical tracks */
    grid-auto-rows: auto !important; /* Forces all new rows to only be as tall as the cards */
    grid-auto-flow: dense !important; 
    gap: 20px !important; 
    position: relative !important; 
    z-index: 2 !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 0 auto !important; 
    padding: 16px !important; 
    box-sizing: border-box !important;
  }

  /* ========================================================
     2. INDIVIDUAL CARD OVERRIDES - NO SHARED BASE RULES
     ======================================================== */

  /* XLARGE CARD: Takes whole space. Drops vertical spacing blocks */
  .post-xLargeCard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important; /* CRITICAL: Clears desktop span 4 row heights */
    grid-template-columns: 1fr !important; 
    max-width: 100% !important; 
    max-height: none !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    gap: 1rem !important;
  }
  .post-xLargeCard .post-content {
    padding: 0 !important;
  }
  .post-xLargeCard .post-hero-media-wrap {
    height: 260px !important; 
    width: 100% !important;
  }

  /* LARGE CARD: Takes whole space horizontally */
  .post-LargeCard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important; /* CRITICAL: Clears desktop span 4 row heights */
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* WIDE CARD: Takes whole space. RETAINS HORIZONTAL ROW LAYOUT */
  .post-wideCard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important; /* CRITICAL: Clears desktop span 1 row heights */
    width: 90% !important;
    max-width: 99% !important; 
    max-height: none !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important;
    gap: 1.5rem !important;
    padding: 20px !important;
    margin: 0 auto !important; 
  }
  .post-wideCard .post-hero-media-wrap {
    flex: 0 0 30% !important; 
    height: 140px !important;
  }
  .post-wideCard .post-content {
    flex: 1 !important;
  }

  /* LONG CARD: TAKES HALF ROW TO SIT NEXT TO SMALL CARD */
  .post-longCard {
    grid-column: span 1 !important; /* Sits next to small cards */
    grid-row: auto !important; /* CRITICAL: Clears desktop span 6 row heights */
    width: 100% !important; 
    max-width: 100% !important; 
    min-height: 480px !important; /* Slightly lowered to look snugger on tablet */
    max-height: none !important; 
    height: auto !important; 
    padding: 16px !important; 
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-width: 0 !important; 
    overflow: visible !important; 
  }

  .post-longCard .post-content,
  .post-longCard div {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; 
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .post-longCard button,
  .post-longCard a[class*="btn"],
  .post-longCard a[class*="button"] {
    margin-top: auto !important; 
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }

  /* SMALL CARD: TAKES HALF ROW TO SIT NEXT TO LONG CARD */
  .post-smallCard {
    grid-column: span 1 !important; /* Pairs alongside long cards */
    grid-row: auto !important; /* CRITICAL: Clears desktop span 2 row heights */
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important; 
    aspect-ratio: 1 / 1 !important; 
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ========================================================
     3. REUSED ASSET & IMAGE WRAPPING LAWS
     ======================================================== */
  .post-img-wrap {
    position: relative !important;
    width: 100% !important;
    height: 180px !important; 
  }
  
  .post-LargeCard img,
  .post-longCard img,
  .post-smallCard img,
  .blogGrid img,
  .post-grid-container img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 180px !important; 
    object-fit: cover !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  .post-hero-media-wrap img,
  .post-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 4. Typography Text Wrapping Protections */
  .blogGrid h1, .blogGrid h2, .blogGrid h3, .blogGrid h4, 
  .blogGrid p, .blogGrid a, .blogGrid span,
  .post-grid-container h1, .post-grid-container h2, .post-grid-container h3, .post-grid-container h4,
  .post-grid-container p, .post-grid-container a, .post-grid-container span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important; 
  }

  /* ========================================================
     3. FIXED MENU VISIBILITY (Unified across the 948px breakpoint)
     ======================================================== */
  /* FIXED: Activated layout menu track for ALL device screens under 948px */
  .mobile-arc-menu {
    display: block !important; 
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    z-index: 9999999 !important; /* Absolute layout dominance */
    pointer-events: auto !important;
  }

  /* Universal style enforcer for your dynamic dynamic toggles */
  .mobile-arc-menu .mobile-toggle,
  .mobile-arc-menu div[class^="mobile-toggle"],
  body.smoothbgred .mobile-togglered {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important; /* FIXED: Overrides the 'display: none' hidden block in home layout */
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important; /* Managed cleanly by parent menu wrapper */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  /* Fallback visibility insurance if Blade variables compile empty class values */
  .mobile-arc-menu div[class="mobile-toggle"] {
    background: #dc2626 !important;
    color: #ffffff !important;
  }

  /* Keeps card systems from stretching or breaking text sizes inside menu drawer links */
  .mobile-arc-menu .mobile-items a.arc-btn {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin: revert !important;
    transform: none !important; /* Removes your heavy desktop -20deg layout tilts */
    animation: none !important;  /* Pauses floating loops so dropdown text is readable */
  }
}
















  /* 480px */




@media (max-width: 480px) { 
  /* 1. Main Grid Container Setup */
  .blogGrid { 
    display: grid !important; 
    /* Set up a strict 2-column track system */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    /* Fills empty spaces intelligently if small/long cards are separated */
    grid-auto-flow: dense !important; 
    gap: 16px !important; 
    position: relative !important; 
    z-index: 2 !important; 
    width: 100% !important; 
    max-width: 100% !important; /* Spans full width of the screen */
    margin: 0 auto !important; 
    padding: 10px !important; 
    box-sizing: border-box !important;
  }



  /* 3. WHOLE SPACE ENFORCEMENT (Forces large/wide cards to take 100% width) */
 
  .blogGrid > [class*="LargeCard"], 
  .blogGrid > [class*="wideCard"] {
    grid-column: 1 / -1 !important; /* Spans from the first grid line to the very last */
    width: 90% !important;
    max-width: 99% !important;
  }


  .blogGrid > [class*="longCard"],
  .blogGrid > [class*="smallCard"] {
    grid-column: span 1 !important; /* Only takes up half the row width */
  }

  /* 5. Image Visibility & Scaling */
  .blogGrid img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;      
    height: 160px !important; /* Uniform height that looks good on both widths */   
    object-fit: cover !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;         
  }

  /* 6. Typography Protection */
  .blogGrid h1, .blogGrid h2, .blogGrid h3, .blogGrid h4, 
  .blogGrid p, .blogGrid a, .blogGrid span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important; 
  }

    

  /* 1. Main Grid Container Setup */
  .post-grid-container { 
    display: grid !important; 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    grid-auto-flow: dense !important; 
    gap: 16px !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 0 auto !important; 
    padding: 10px !important; 
    box-sizing: border-box !important;
  }

  /* ========================================================
     2. INDIVIDUAL CARD OVERRIDES - NO SHARED BASE RULES
     ======================================================== */

  /* XLARGE CARD: Takes whole space. Flattens to vertical grid layout on mobile */
  .post-xLargeCard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    display: grid !important;
    padding: 12px !important;
    gap: 1rem !important;
  }
  .post-xLargeCard .post-content {
    padding: 0 !important;
  }
  .post-xLargeCard .post-hero-media-wrap {
    height: 160px !important;
    width: 100% !important;
  }

  /* LARGE CARD: Takes whole space. Vertical block stacked format */
  .post-LargeCard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    max-width: 90% !important;
    max-height: 90% !important;
    height: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* WIDE CARD: Takes whole space. RETAINS HORIZONTAL ROW LAYOUT */
  .post-wideCard {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 90% !important;
    max-width: 99% !important;
    max-height: 75% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important;
    gap: 1rem !important;
    padding: 12px !important;
  }
  .post-wideCard .post-hero-media-wrap {
    flex: 0 0 35% !important; 
    height: 90px !important;
  }
  .post-wideCard .post-content {
    flex: 1 !important;
  }

  /* LONG CARD: BRING BACK BUTTONS AND PREVENT TEXT SPILLING */
  .post-longCard {
    grid-column: span 1 !important; 
    grid-row: auto !important;
    width: 100% !important; 
    max-width: 100% !important; 
    min-height: 480px !important; /* Retains long layout shape fallbacks */
    max-height: none !important; /* FIXED: Removes pixel caps so buttons are not cut off */
    height: auto !important; /* FIXED: Allows card to stretch dynamically to show buttons */
    padding: 12px !important; 
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-width: 0 !important; 
    overflow: visible !important; /* FIXED: Changes from hidden to visible so buttons render */
  }

  /* Target nested inner elements of long card for text safety and button placement */
  .post-longCard .post-content,
  .post-longCard div {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Pushes content down logically */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Scale text down inside long cards so they consume less layout height */
  .post-longCard h1, .post-longCard h2, .post-longCard h3 {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .post-longCard p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Fix for buttons inside the long card layout track */
  .post-longCard button,
  .post-longCard a[class*="btn"],
  .post-longCard a[class*="button"] {
    margin-top: auto !important; /* Pin buttons beautifully to the bottom edge of the card */
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* SMALL CARD: Takes half row space. RETAINS PERFECT SQUARE PROFILE */
  .post-smallCard {
    grid-column: span 1 !important; 
    grid-row: auto !important;
    width: 90% !important;
    max-width: 950% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important; 
    padding: 5px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ========================================================
     3. REUSED ASSET & IMAGE WRAPPING LAWS
     ======================================================== */
  .post-img-wrap {
    position: relative !important;
    width: 100% !important;
    height: 120px !important;
  }
  
  .post-LargeCard img,
  .post-longCard img,
  .post-smallCard img {
    width: 100% !important;
    height: 110px !important;
    object-fit: cover !important;
  }

  .post-hero-media-wrap img,
  .post-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Typography Text Wrapping Protections */
  .post-grid-container h1, .post-grid-container h2, .post-grid-container h3, .post-grid-container h4,
  .post-grid-container p, .post-grid-container a, .post-grid-container span,
  .post-cards h1, .post-cards h2, .post-cards p, .post-cards span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}