/* Wrapper spacing */
.two-col-cards {
  padding-block: var(--pad-y);
}

/* GRID: 2 columns on desktop; 1 column ≤1024px */
.two-col-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-d);
}

/* Tablet & Mobile: 1 column */
@media (max-width: 1024px) {
  .two-col-cards__grid {
    grid-template-columns: 1fr;
    gap: var(--gap-t);
  }
}
@media (max-width: 767px) {
  .two-col-cards__grid {
    gap: var(--gap-m);
  }
}

/* Card styles */
.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  padding: var(--card-padding);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* shadow: toggle via var */
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border: var(--card-border-width) solid var(--card-border);
}

.two-col-cards[style*="--card-shadow: 0"] .card {
  box-shadow: none;
}

/* Media (image) */
.card__media {
  /*border-radius: calc(var(--card-radius) - 2px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f1f5f9; /* subtle placeholder bg */
  */
}
.card__media img {
  width: 140px;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  display: block;
}

/* Text */
.card__title {
  margin: 0;
  font-size: 1.125rem; /* ~18px */
  line-height: 1.3;
}
.card__body {
  color: #475569;
}

/* CTA */
.card__cta {
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
  color: #0f172a;
  transition: color .2s ease;
}
.card__cta:hover { color: #2563eb; }

/* Empty state */
.card--empty {
  text-align: center;
  color: #64748b;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}