/* ════════════════════════════════════════════════════════════════════
   CASE STUDIES — Bento grid on dark primary background
   BEM block: .cs
   Structure: .section.cs > .container > content

   Cards use container queries to adapt typography when wide.
   Horizontal cards vertically center content against media.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .cs {
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  }


  /* ── Header ───────────────────────────────────────────────────── */

  .cs__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--container-gap);
    margin-block-end: var(--container-gap);
  }

  .cs__header-left {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .cs__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .cs__eyebrow-dash {
    inline-size: var(--space-s);
    block-size: var(--line-medium);
    background-color: var(--secondary);
    border-radius: var(--radius-full);
  }

  .cs__eyebrow-text {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide-caps);
    text-transform: uppercase;
    color: var(--white);
  }

  .cs__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--white);
    text-transform: uppercase;
  }

  .cs__view-all {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset-m);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .cs__view-all:hover {
    color: var(--secondary-hover);
  }


  /* ── Bento grid ───────────────────────────────────────────────── */

  .cs__grid {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
  }

  .cs__row {
    display: grid;
    gap: var(--grid-gap);
  }

  .cs__row--2 {
    grid-template-columns: var(--grid-2);
  }

  .cs__row--full {
    grid-template-columns: 1fr;
  }


  /* ── Card ──────────────────────────────────────────────────────── */

  .cs-card {
    display: flex;
    flex-direction: column;
    background-color: var(--surface-page);
    border-radius: var(--radius-s);
    overflow: hidden;
    container-type: inline-size;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
  }

  .cs-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-l);
  }

  .cs-card--horizontal {
    display: grid;
    grid-template-columns: var(--grid-narrow-wide);
    align-items: center;
  }


  /* ── Card media ────────────────────────────────────────────────── */

  .cs-card__media {
    overflow: hidden;
    background-color: var(--neutral-ultra-light);
  }

  .cs-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .cs-card:hover .cs-card__media img {
    transform: scale(1.03);
  }

  /* Vertical card media — full width, fixed aspect */
  .cs-card:not(.cs-card--horizontal) .cs-card__media {
    aspect-ratio: var(--ratio-card);
  }

  /* Horizontal card media — fills grid column, min height for empty state */
  .cs-card--horizontal .cs-card__media {
    align-self: stretch;
    min-block-size: var(--space-3xl);
  }


  /* ── Card body ─────────────────────────────────────────────────── */

  .cs-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--card-padding-compact);
  }

  .cs-card__tags {
    display: flex;
    align-items: center;
    gap: var(--cluster-gap);
  }

  .cs-card__tag {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .cs-card__tag-sep {
    color: var(--neutral-semi-light);
  }

  .cs-card__title {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
    text-transform: uppercase;
  }

  .cs-card__desc {
    font-size: var(--text-s);
    color: var(--text-muted);
  }

  .cs-card__link {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset-m);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .cs-card__link:hover {
    color: var(--secondary-hover);
  }


  /* ── Container query — wide card typography step-up ────────────── */

  @container (min-inline-size: 40rem) {
    .cs-card__body {
      padding: var(--card-padding);
    }

    .cs-card__title {
      font-size: var(--heading-m);
    }

    .cs-card__desc {
      font-size: var(--text-m);
    }

    .cs-card__tag {
      font-size: var(--text-xs);
    }

    .cs-card__link {
      font-size: var(--text-m);
    }
  }

  .cs-card--horizontal .cs-card__body {
    padding: var(--card-padding);
    justify-content: center;
    gap: var(--stack-gap);
  }


  /* ── Tablet ───────────────────────────────────────────────────── */

  @media (max-width: 63.99em) {
    .cs__heading {
      font-size: var(--heading-l);
    }

    .cs-card--horizontal {
      grid-template-columns: var(--grid-2);
    }
  }


  /* ── Mobile ───────────────────────────────────────────────────── */

  @media (max-width: 47.99em) {
    .cs__header {
      flex-direction: column;
      align-items: start;
      gap: var(--stack-gap);
    }

    .cs__heading {
      font-size: var(--heading-m);
    }

    .cs__row--2 {
      grid-template-columns: 1fr;
    }

    .cs-card--horizontal {
      grid-template-columns: var(--grid-1);
    }

    .cs-card--horizontal .cs-card__media {
      aspect-ratio: var(--ratio-card);
    }
  }

}