/* ─── 3D Card Grid ─── */

.card-grid-3d {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.card-grid-3d.wp-block-columns {
  gap: 2rem !important;
}

/* ─── 3D Card ─── */
/* Base styling. The transform is driven by CSS custom properties
   (--tilt-x/--tilt-y/--tilt-z) set by tilt.js. Box-shadow and image
   zoom are handled here via :hover. */

.card-3d {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  transition:
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Card image */
.card-3d .wp-block-image,
.card-3d .card-image {
  margin: 0 !important;
  overflow: hidden;
  position: relative;
}

.card-3d .wp-block-image img,
.card-3d .card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/10;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-3d:hover .wp-block-image img,
.card-3d:hover .card-image img {
  transform: scale(1.06);
}

/* Card content padding */
.card-3d > .wp-block-group {
  padding: 1.75rem !important;
}

/* Card title hover */
.card-3d .wp-block-heading {
  transition: color 0.3s;
}

.card-3d:hover .wp-block-heading {
  color: #2D8B4E;
}

/* Read More link */
.card-3d a[href*="/blog"],
.card-3d .read-more-link {
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: #2D8B4E;
  text-decoration: none;
  font-size: 0.9rem;
  transition: transform 0.3s;
}

.card-3d a:hover {
  transform: translateX(4px);
}

/* ─── 2-column blog post grid (used by news-feed) ─── */

.card-grid-2col.wp-block-query .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2rem !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-grid-2col.wp-block-query .wp-block-post-template > li {
  margin: 0;
}

/* ─── Featured articles spacing ─── */

.featured-articles-section .card-grid-3d.wp-block-columns {
  margin-top: 2rem;
}

/* ─── Page content images ─── */

.page-content .wp-block-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(13, 59, 46, 0.10);
}