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

/* =========================
   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: 100%;
  max-width: 600px;
  max-height: 120px;
  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(6, 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 {
  --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: #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 {
  --rot: -2deg;
  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%;
  max-width: 100px;
  min-height: 500px;
  padding: 1rem;
  background: rgba(97, 198, 195, 0.85);
}

.post-smallCard {
  grid-column: span 2;
  grid-row: span 2;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  max-height: 200px;
  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;
  pointer-events: none;
}

/* =========================
   RESPONSIVE DESIGN
========================= */
@media (max-width: 948px) {
  .blogGrid {
    grid-template-columns: repeat(4, 1fr);
    padding: 20px;
  }

  .xLargeCard {
    grid-column: span 4;
    max-width: 390px;
  }

  .wideCard {
    grid-column: span 4;
    max-width: 380px;
  }

  .LargeCard,
  .longCard {
    grid-column: span 2;
    max-width: 150px;
  }

  .smallCard {
    grid-column: span 1;
    max-height: 130px;
    max-width: 140px;
    padding: 1.1rem;
  }
}

@media (max-width: 648px) {
  .post-grid-container {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
  }

  .post-xLargeCard,
  .post-wideCard {
    grid-column: span 2;
    max-width: 100%;
  }

  .post-wideCard {
    width: 90%;
  }

  .post-longCard {
    grid-column: span 2;
    max-width: 80%;
  }

  .post-LargeCard,
  .post-smallCard {
    grid-column: span 1;
    max-width: 100%;
  }
}