/* Card Testimonial — SD-68
 * Non-interactive quote card in portrait (stacked) or landscape (side-by-side) variant.
 * Mobile-first: S default, M ≥1024px, L ≥1280px
 */

/* --- Base card --- */
.card-testimonial {
  display: flex;
  width: 100%;
  /* No overflow:hidden here: as a grid/flex item it would zero min-height and clip quotes */
}

/* --- Portrait: stacked (image on top, content below) --- */
.card-testimonial--portrait {
  flex-direction: column;
  height: 100%; /* stretch to grid row height (equal quote boxes in 2-col) */
}

/* Grow the quote box so paired portrait cards share one row height */
.card-testimonial--portrait .card-testimonial__content {
  flex: 1 1 auto;
}

/* --- Landscape: side by side at M/L (≥1024), stacked at S (≤1023) --- */
.card-testimonial--landscape {
  flex-direction: row;
  align-items: stretch;
  height: auto; /* size to quote; media aspect-ratio is only a floor */
  min-height: min-content;
}

@media (max-width: 63.9375rem) {
  .card-testimonial--landscape {
    flex-direction: column;
    align-items: unset;
  }
}

/* --- Media area (pattern bg + image) --- */
.card-testimonial__media {
  position: relative;
  overflow: hidden; /* clip image/pattern only — not the quote column */
  /* Rand via absolute inset on the img — not padding (padding wouldn’t affect abs children) */
  background-color: var(--dk-color-brand-secondary-01);  /* fallback when no pattern */
  background-size: cover;
  background-position: center;
}

.card-testimonial--portrait .card-testimonial__media {
  aspect-ratio: 594 / 334;
  flex-shrink: 0;
}

.card-testimonial--landscape .card-testimonial__media {
  flex: 1 0 0;              /* equal column beside content at M/L */
  aspect-ratio: 605 / 340;  /* Figma min frame — keeps image tall enough when quote is short */
  /* Longer quotes: align-items:stretch on the card grows this column past the ratio */
}

@media (max-width: 63.9375rem) {
  .card-testimonial--landscape .card-testimonial__media {
    flex: 0 0 auto;     /* stacked: don’t collapse under flex-grow */
    width: 100%;
  }
}

/* Fill media box with Rand; crop with cover (text / aspect-ratio drive the box) */
.card-testimonial__img {
  display: block;
  position: absolute;
  top: var(--dk-space-08);
  left: var(--dk-space-08);
  width: calc(100% - (2 * var(--dk-space-08)));
  height: calc(100% - var(--dk-space-08));
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* --- Content / blockquote --- */
.card-testimonial__content {
  background-color: var(--dk-color-brand-primary);
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-05);
  padding: var(--dk-space-06) var(--dk-space-07) var(--dk-space-06);
  margin: 0;
  color: var(--dk-color-black);
}

.card-testimonial--landscape .card-testimonial__content {
  flex: 1 0 0;
  align-self: stretch;
  min-height: min-content; /* never shrink below quote + name + role */
}

@media (max-width: 63.9375rem) {
  .card-testimonial--landscape .card-testimonial__content {
    flex: 0 0 auto;
  }
}

/* --- Quote text --- */
.card-testimonial__quote {
  line-height: 1.3;
  margin: 0;
}

/* --- Attribution --- */
.card-testimonial__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-02);
}

.card-testimonial__name {
  font-style: normal;
  line-height: 1.2;
  display: block;
}

.card-testimonial__role {
  line-height: 1.3;
  margin: 0;
}