/* =========================================================
   POSTS SECTION – FULL RESPONSIVE VERSION
   Desktop unchanged • Tablet & Mobile redesigned
   ========================================================= */

/* --- Base Section Styling --- */
.posts-section {
  padding: 3rem 0;
  position: relative;
  background: rgba(255, 0, 0, 0);
  overflow: hidden;
}

/* Animated Background Gradient */
.posts-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fce7f300 0%, #fff1f200 50%, #ffe4e600 100%);
  z-index: -2;
}

/* Blurred Animated Balls */
.posts-section-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  background-color: #00000000;
}

.posts-section-bg .blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 20s ease-in-out infinite;
}

.posts-section-bg .blur:nth-child(1) {
  top: 10%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.6) 0%, rgba(236, 72, 153, 0.3) 50%, transparent 100%);
  animation-delay: 0s;
}

.posts-section-bg .blur:nth-child(2) {
  top: 50%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(251, 207, 232, 0.6) 0%, rgba(249, 168, 212, 0.3) 50%, transparent 100%);
  animation-delay: 5s;
}

.posts-section-bg .blur:nth-child(3) {
  bottom: 15%;
  left: 50%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(190, 24, 93, 0.5) 0%, rgba(219, 39, 119, 0.2) 50%, transparent 100%);
  animation-delay: 10s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.9); }
  75% { transform: translate(40px, 10px) scale(1.05); }
}

/* =========================================================
   DESKTOP (UNCHANGED)
   Four-column grid with fixed-size cards
   ========================================================= */

.posts-grid {
  display: grid;
  gap: 2rem;
  border-color: #be185d00;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1400px;
  margin: 0%;
  position: relative;
  background: rgba(165, 165, 165, 0);
  z-index: 1;
}

/* Card Base */
.post-card {
  position: relative;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.08);
  transition: all 0.4s ease;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.post-card:hover {
  background: rgba(253, 242, 248, 0.9);
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(236, 72, 153, 0.2);
  border-color: rgba(236, 72, 153, 0.3);
}

/* Card Inner Structure */
.post-card-inner {
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 220px;
}

/* Logo */
.post-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(243, 244, 246, 0.8);
}

.post-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.post-icon-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ec4899, #be185d);
  border-radius: 0.5rem;
}

/* Title */
.post-title {
  font-size: 5.45rem;
  font-weight: 550;
  margin: 0 0 0.75rem;
  color: #000000;
  line-height: 1.3;
  flex-grow: 1;
}

/* Excerpt */
.post-excerpt {
  font-size: 0.95rem;
  color: #000000;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
  text-align: left;
}

/* Neon border */
.neon-border {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 1rem;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(45deg, #ec4899, #be18a5) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.4s ease;
}

.post-card:hover .neon-border {
  opacity: 1;
  animation: neonPulse .8s infinite;
}

@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 8px #ec4899; }
  50% { box-shadow: 0 0 20px #ec4899, 0 0 30px #be185d; }
}

/* =========================================================
   ✅ TABLET VIEW (≤900px)
   ========================================================= */
@media (max-width: 900px) {

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 100%;
    margin: 0 auto;
  }

  .post-card-inner {
    padding: 1.25rem 1rem;
    min-height: 200px;
  }

  .post-title {
    font-size: 1.15rem;
    line-height: 1.35;
  }

  .post-excerpt {
    font-size: 0.95rem;
    text-align: left;
  }

  .post-logo {
    width: 42px;
    height: 42px;
  }

  /* Softer animated blur */
  .posts-section-bg .blur {
    width: 300px;
    height: 300px;
    filter: blur(60px);
    opacity: 0.35;
  }

  /* Disable heavy hover neon on touch */
  .neon-border {
    opacity: 0.4;
    animation: none;
  }
}

/* =========================================================
   ✅ MOBILE VIEW (≤600px)
   ========================================================= */
@media (max-width: 600px) {

  .posts-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    max-width: 640px;
    margin: 0 auto;
  }

  .post-card-inner {
    padding: 1rem 0.9rem;
    min-height: 180px;
  }

  .post-title {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
  }

  .post-excerpt {
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: left;
  }

  .post-logo {
    width: 38px;
    height: 38px;
  }

  /* Reduce animations on mobile */
  .neon-border {
    opacity: 0.25;
  }

  .post-card:hover {
    transform: none;
    box-shadow: 0 8px 18px rgba(236, 72, 153, 0.14);
  }

  /* Lighter bg blurs */
  .posts-section-bg .blur {
    width: 200px;
    height: 200px;
    filter: blur(40px);
    opacity: 0.28;
    animation-duration: 26s;
  }

  .posts-section {
    overflow-x: hidden;
  }
}