/* Blog card grid — shared by blog.php and the home page resources section.
   Markup is rendered by includes/blog-card.php, so both grids stay identical. */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
  align-items: stretch;
}

.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(191, 205, 225, 0.85);
  border-top-width: 4px;
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
  isolation: isolate;
}

.blog-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
  z-index: 0;
}

/* Fallback accents; each card also sets its own colour inline from the post data. */
.blog-grid .blog-card:nth-child(1) {
  border-top-color: #5b7cfa;
}

.blog-grid .blog-card:nth-child(2) {
  border-top-color: #1eb980;
}

.blog-grid .blog-card:nth-child(3) {
  border-top-color: #f59e0b;
}

.blog-grid .blog-card:nth-child(4) {
  border-top-color: #2563eb;
}

.blog-grid .blog-card:nth-child(5) {
  border-top-color: #ef4444;
}

.blog-grid .blog-card:nth-child(6) {
  border-top-color: #6d28d9;
}

.blog-grid .blog-card:nth-child(7) {
  border-top-color: #0ea5e9;
}

.blog-card:hover {
  transform: translateY(-9px);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.94) inset;
  border-color: rgba(102, 126, 234, 0.18);
}

.blog-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

.blog-card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.blog-card__cover,
.blog-card__body,
.blog-card__footer {
  position: relative;
  z-index: 1;
}

.blog-card__cover {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 8px;
  color: #ffffff;
  text-align: left;
  position: relative;
  isolation: isolate;
}

.blog-card__cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}

.blog-card__title {
  margin: 0;
  color: #111827;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -0.02em;
  text-wrap: balance;
  align-self: center;
  flex: 1;
}

.blog-card__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #ffffff;
  flex: 0 0 52px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(2px);
}

.blog-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-card__body {
  padding: 4px 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  align-items: flex-start;
}

.blog-card__meta {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #4f46e5;
}

.blog-card__author {
  color: #4f46e5;
}

.blog-card__dot {
  color: #94a3b8;
}

.blog-card__date {
  color: #64748b;
  font-weight: 600;
}

.blog-card__text {
  margin: 0;
  color: #475569;
  line-height: 1.72;
  font-size: 0.96rem;
  text-align: left;
  flex: 1;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* flex: 1 stretches this box taller than the clamped line count, and the
     extra line then shows through under the ellipsis. Cap the height to the
     clamp so the excerpt is never cut mid-line. */
  max-height: calc(1.72em * 3);
}

.blog-card__footer {
  padding: 0 22px 22px 24px;
  display: flex;
  justify-content: flex-start;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4338ca;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  width: fit-content;
  padding: 0;
  border-radius: 0;
  background: transparent;
  transition: color 0.22s ease, transform 0.22s ease;
}

.blog-card__link:hover {
  color: #1d4ed8;
  text-decoration: none;
  transform: translateX(3px);
}

.blog-card__link:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .blog-card__content {
    padding: 0;
  }

  .blog-card__title {
    font-size: 1.02rem;
  }

  .blog-card__text {
    font-size: 0.94rem;
  }

  .blog-card__link {
    font-size: 1rem;
  }
}

@media (max-width: 767.98px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-card {
    border-radius: 20px;
  }

  .blog-card__content {
    padding: 0;
  }

  .blog-card__icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .blog-card__cover {
    padding: 18px 18px 8px;
  }

  .blog-card__body {
    padding: 4px 18px 18px;
  }

  .blog-card__footer {
    padding: 0 18px 18px;
  }

  .blog-card__text {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    max-height: calc(1.72em * 4);
  }
}