/* =====================================================================
   Education — Small Feature Card grid (Figma 10159:15115).
   Four equal cards across the 1240 content area (295px @ 1440, 20px gap),
   each a bordered, rounded image tile with a soft-blue glow and an optional
   centered caption below. Tokens only; BEM; education- prefixed.
   ===================================================================== */

.education-cards {
  padding-block: var(--education-cards-pad-block);
}

.education-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--education-cards-gap);
  align-items: start;
}

.education-cards__cell {
  display: block;
}

.education-cards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--education-cards-cap-gap);
}

/* ---- Image tile: pale-blue base, soft-blue 1px border + glow ---- */
.education-cards__media {
  display: block;
  width: 100%;
  height: var(--education-card-media-h);
  border: 1px solid var(--soft-blue);
  border-radius: var(--radius-8);
  background: var(--pale-blue);
  box-shadow: var(--education-card-glow);
  overflow: hidden;
}
.education-cards__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-8);
}

/* ---- Caption (Axiforma SemiBold 16, centered) ---- */
.education-cards__caption {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: normal;
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}
/* Figma: card title goes bold on hover. */
.education-cards__card:hover .education-cards__caption,
.education-cards__card:focus-visible .education-cards__caption {
  font-weight: var(--fw-bold);
}

/* ---- Tablet (600–1023px): 4-up grid → 2-up. ---- */
@media (max-width: 1023.98px) {
  .education-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--education-cards-gap-mobile);
  }
}