.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem;
}

.kurzus-leckeszam {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--wp--preset--color--dark-walnut, #633521);
}
@media (max-width: 1180px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--l-plus);
  }
}

.course-card {
  position: relative;
  width: 100%;
  outline: 2px solid transparent;
  outline-offset: 0;
  background: var(--wp--preset--color--white, #FFFFFF);
  border-radius: 1.25rem;
  box-shadow: var(--wp--preset--shadow--lesson-card, 0.625rem 0.625rem 0.625rem rgba(129, 91, 74, 0.25));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, outline-color 0.2s ease;
}

.course-card:not(.course-card--zarolt):hover,
.course-card:not(.course-card--zarolt):focus-visible,
.course-card:not(.course-card--zarolt):focus-within {
  outline-color: var(--wp--preset--color--dark-walnut, #633521);
  box-shadow: 0.625rem 0.625rem 0.625rem 0 rgba(129, 91, 74, 0.25);
}

.course-card:focus-visible {
  outline-offset: 3px;
}

.course-card--zarolt {
  cursor: default;
}

.course-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 449 / 287.66;
  background: linear-gradient(135deg, #c9ab90, #8a6650);
}
.course-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-card__media::after {
  content: "";
  position: absolute;
  inset: 0 0 -0.0625rem;
  z-index: 1;
  pointer-events: none;
}
.course-card--uj .course-card__media::after,
.course-card--nemelkezdett .course-card__media::after {
  background: rgba(129, 91, 74, 0.9);
}
.course-card--folyamatban .course-card__media::after {
  background: rgba(174, 85, 41, 0.9);
}
.course-card--befejezett .course-card__media::after {
  background: rgba(56, 66, 50, 0.9);
}

/* A média-doboz (44x44, kör alakú érintési célpont) és a lejátszó-ikon (kör overlay) mérete
   szándékosan fix (nem padding+szöveg határozza meg) – ezért maradt px/rem méretben explicit. */
.media-heart {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: none;
  border-radius: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  padding: 0;
}
.media-heart::before {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  border-radius: 50%;
  background: var(--wp--preset--color--white, #FFFFFF);
}
.media-heart svg {
  position: relative;
  z-index: 1;
}
.media-heart:focus-visible {
  outline: 2px solid var(--wp--preset--color--dark-walnut, #633521);
  outline-offset: 3px;
}
.media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66.91px;
  height: 65.92px;
  background: rgba(255, 252, 249, 0.60);
  border-radius: 3.125rem;
  outline: 1px solid var(--wp--preset--color--parchment, #FFFCF9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.media-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.125rem;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--wp--preset--color--parchment, #FFFCF9);
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  z-index: 2;
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--caption, clamp(0.75rem, max(0.75rem, calc(0.42vw + 0.38rem)), 0.875rem));
  line-height: 1.25rem;
}
.media-badge--folyamatban { color: var(--wp--preset--color--bronze-spice, #AE5529); }
.media-badge--folyamatban .dot { background: var(--wp--preset--color--bronze-spice, #AE5529); }
.media-badge--befejezett { background: var(--wp--preset--color--success, #7A9069); color: var(--wp--preset--color--parchment, #FFFCF9); }
.media-badge--befejezett .dot { background: var(--wp--preset--color--white, #FFFFFF); }
.media-badge .dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; }
.media-badge .dot::before,
.media-badge .dot::after {
  content: none !important;
  display: none !important;
}
.media-badge--uj {
  top: auto;
  bottom: 1rem;
  left: 1rem;
  color: var(--wp--preset--color--burnt-rose, #833742);
  font-family: var(--wp--preset--font-family--ui, 'Inter', sans-serif);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--caption, clamp(0.75rem, max(0.75rem, calc(0.42vw + 0.38rem)), 0.875rem));
  line-height: 1.25rem;
}

.course-card__body {
  padding: 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.25rem;
}
.course-card__instructor {
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 300;
  font-size: var(--wp--preset--font-size--14-16, clamp(0.875rem, calc(0.1389vw + 0.8333rem), 1rem));
  line-height: 1.5rem;
  color: var(--wp--preset--color--dark-walnut, #633521);
}
.course-card__title {
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--18-20, clamp(1.125rem, calc(0.1389vw + 1.0833rem), 1.25rem));
  line-height: 1.875rem;
  color: var(--wp--preset--color--dark-walnut, #633521);
}
.course-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.25rem;
}
.course-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 300;
  font-size: var(--wp--preset--font-size--14-16, clamp(0.875rem, calc(0.1389vw + 0.8333rem), 1rem));
  line-height: 1.5rem;
  color: var(--wp--preset--color--dark-walnut, #633521);
}
.course-card__meta-sep {
  font-family: var(--wp--preset--font-family--ui, 'Inter', sans-serif);
  font-weight: 300;
  font-size: var(--wp--preset--font-size--14-16, clamp(0.875rem, calc(0.1389vw + 0.8333rem), 1rem));
  line-height: 1.5rem;
  color: var(--wp--preset--color--dark-walnut, #633521);
}
.course-card__admin-course-id {
  margin-top: 0.125rem;
  color: var(--wp--preset--color--dark-walnut, #633521);
  font-family: var(--wp--preset--font-family--ui, 'Inter', sans-serif);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1;
  opacity: 0.45;
}

@media (max-width: 700px) {
  .media-play {
    width: 3.4375rem;
    height: 3.4375rem;
  }

}

/* A tagsági Hang- és videóanyagok rácsán minden nézetben azonos a kártyaköz. */
.profil-oldal-fo--hang-video .card-grid {
  gap: 1.5rem;
}