/* =========================================
   CARD BASE
   (works with Bootstrap .card markup)
========================================= */

.card {
  border-radius: var(--border-radius);
  background: var(--color-white);
  color: var(--text-color);
  overflow: hidden; /* helps rounded corners with images/child backgrounds */
  border: unset;
}


/* =========================================
   CARD SPACING
   (Bootstrap has these, but this makes cards consistent)
========================================= */

.card-body,
.card-header,
.card-footer {
  padding: var(--space-md);
}

.card-title {
  margin-bottom: var(--space-sm);
}

.card-text {
  margin-bottom: var(--space-md);
}


/* =========================================
   CARD VARIANTS
========================================= */

/* subtle shadow version */
.card--shadow {
  border: 0;
  box-shadow: var(--shadow-sm);
}

/* muted background version */
.card--muted {
  background: var(--bg-light);
}

/* clickable card */
.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .2s ease;
}

.card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.card--link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: 3px;
}


/* =========================================
   CARD MEDIA
========================================= */

/* With overflow:hidden on .card, these are optional—but harmless. */
.card-img-top,
.card-img-bottom {
  display: block;
}

.card-carousel-row .slick-track {
    margin-left: 0;
    display: flex;
    align-items: stretch;
}

.card-carousel-row .slick-slide {
    height: auto;
    display: flex;
}

.card-carousel-row .slick-slide > div {
    display: flex;
    height: 100%;
    width: 100%;
}

.card-carousel-row .card {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    width: 100%;
}

.card-carousel-row .card > a {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-carousel-row .card-body {
    flex: 1;
}

.card-carousel-row .card-footer {
    margin-top: auto;
}