/* ---- Media card ----
   Generic, reusable "text panel + video/image panel" horizontal card, with
   an optional centred play control over the media panel. First used by the
   Customer Stories page's case study cards (Figma 18607:14271, 18611:14309),
   but not named after that content — any page needing a large text+media
   split card (case studies, features, press) can reuse it.

   Structure:
     .media-card-list > .media-card (one or more)
       > .media-card__content   (label, title, body copy)
       > .media-card__media     (image/video poster, optional .media-card__play) */

.media-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6xl); /* 64px */
  width: 100%;
}

.media-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

/* ---- Content panel ---- */

.media-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 24px */
  /* Fixed-width column matching Figma (32+410+42=484px), not a growing
     flex item — the media panel is what fills the remaining row width.
     flex-shrink stays enabled so it can still narrow at tablet before the
     responsive breakpoint stacks the card. */
  flex: 0 1 484px;
  min-width: 0;
  padding: var(--space-5xl) var(--space-4xl) var(--space-5xl) var(--space-3xl); /* 42px 40px 42px 32px */
  box-sizing: border-box;
}

.media-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 8px */
}

.media-card__label {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  color: var(--colour-brand-teal);
}

/* Typography matches .text-h5 (css/typography.css) at its fixed desktop
   size — this card's copy length doesn't need the fluid ramp since the
   card itself reflows to full width well before the text would wrap
   awkwardly. */
.media-card__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 24px;
  line-height: 28.8px;
  color: var(--colour-header-grey);
}

.media-card__body {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--colour-body-grey);
}

.media-card__highlight {
  color: var(--colour-orange);
}

/* ---- Media panel ---- */

/* Fills whatever width is left beside the fixed content column, and
   whatever height the row itself ends up (the content column's own
   padding + copy length, via .media-card's default align-items: stretch)
   — matching Figma, where each card's video panel height simply matches
   its own content column's height rather than holding a fixed aspect
   ratio. The img is absolutely positioned so it never influences that
   sizing itself (a percentage height on a static-flow img can't reliably
   resolve against a flex item's own content-driven height). */
.media-card__media {
  position: relative;
  flex: 1 1 0;
  min-width: 320px;
  overflow: hidden;
}

.media-card__media img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  pointer-events: none;
}

.media-card__play img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Responsive ----
   Stacks to a single column below 1024px, same breakpoint as the site's
   other split text/media sections (css/split-content.css,
   css/category-page.css). */

@media (max-width: 1023px) {
  .media-card {
    flex-direction: column;
  }

  .media-card__content {
    flex-basis: auto;
    padding: var(--space-3xl); /* 32px, down from the desktop 42/40 */
  }

  /* Stacked, the media panel no longer shares a row with the content
     column (so no stretched height to fill) — it needs its own height,
     via the same aspect ratio the desktop row's proportions work out to. */
  .media-card__media {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
    aspect-ratio: 928 / 522;
  }
}

@media (max-width: 767px) {
  .media-card-list {
    gap: var(--space-4xl); /* 40px */
  }

  .media-card__content {
    padding: var(--space-2xl); /* 24px */
    gap: var(--space-l); /* 16px */
  }

  .media-card__play {
    width: 48px;
    height: 48px;
  }
}