/*
  Case Study Detail — Related Case Studies grid.
  Source: Figma 772:2142 (Frame 97653, 1440×742 at 1600 viewport).

  Header: eyebrow (/ Lorem Ipsum) + "Related [Case Studies]" heading (green
  accent on "Case Studies") + subheading on the right.

  3 white cards in a row, joined edge-to-edge (single 8px rounded ul with
  divider between cards). Each card: dark navy image tile with logo(s)
  layered in, industry eyebrow (green uppercase), title (h3), body, and
  a "Read Case Study" cta-link at the bottom.

  Cards themselves are non-linked; the cta-link at the bottom is the
  active link. That keeps the industry-logo images swappable without
  nested interactives.
*/

.case-study-related {
  padding-inline: var(--space-inline);
  padding-block: var(--section-padding-block);
}

.case-study-related__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* --- Header --- */
.case-study-related__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.case-study-related__eyebrow {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: 0.93;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}

.case-study-related__eyebrow-slash {
  color: var(--color-green-2);
}

.case-study-related__heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.case-study-related__heading {
  font-family: var(--font-family-display);
  font-size: clamp(36px, 22px + 2vw, 60px);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-black);
  margin: 0;
  max-width: 659px;
}

.case-study-related__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.case-study-related__subheading {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 28px;
  color: var(--color-body-copy);
  margin: 0;
  max-width: 585px;
  align-self: flex-end;
}

/* --- Grid of 3 cards, joined edge-to-edge --- */
.case-study-related__cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.case-study-related__card {
  position: relative;
  min-height: 595px;
  background: var(--color-white);
  padding: 32px;
  border: 1px solid var(--color-card-border);
  border-radius: 8px 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  cursor: pointer;
  transition: background-color 0.22s ease-out, color 0.22s ease-out;
}

/* Stretched-link — the title's <a> becomes a clickable overlay covering the
   whole card. Other inner links (Edit, Read Case Study CTA) sit above via
   z-index so they stay independently interactive. */
.case-study-related__card-title a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.case-study-related__card-edit,
.case-study-related__card-cta {
  position: relative;
  z-index: 2;
}

/* Site-wide card hover treatment — matches products / card-grid-with-stat-tile:
   card flips to navy, text goes white, image gains a 1px white ring. Triggered
   on hover OR any inner link focus (multiple links inside the card). */
.case-study-related__card:hover,
.case-study-related__card:focus-within {
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.case-study-related__card:hover .case-study-related__card-title a,
.case-study-related__card:focus-within .case-study-related__card-title a,
.case-study-related__card:hover .case-study-related__card-desc,
.case-study-related__card:focus-within .case-study-related__card-desc {
  color: var(--color-text-on-dark);
}

/* Title link — inherit color, no underline. Color transitions in sync with
   the card's background flip on hover. */
.case-study-related__card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.22s ease-out;
}

.case-study-related__card:hover .case-study-related__card-divider,
.case-study-related__card:focus-within .case-study-related__card-divider {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Trigger the site-wide .cta-link hover treatment (accent color + underline
   wipe + arrow slide-in) whenever the whole card is hovered/focused. */
.case-study-related__card:hover .cta-link,
.case-study-related__card:focus-within .cta-link {
  color: var(--color-accent);
}

.case-study-related__card:hover .cta-link::after,
.case-study-related__card:focus-within .cta-link::after {
  transform: scaleX(0);
}

.case-study-related__card:hover .cta-link::before,
.case-study-related__card:focus-within .cta-link::before {
  opacity: 1;
  transform: translate(0, 50%);
  transition-delay: 0.35s;
}

/* Admin-only edit link — only rendered when the current user can edit. */
.case-study-related__card-edit {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-family: var(--font-family-sans);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-decoration: none;
}

.case-study-related__card-edit:hover,
.case-study-related__card-edit:focus-visible {
  background: var(--color-green-2, #00a86b);
  color: #fff;
}

/* Hairline divider between description and partner-logos row. */
.case-study-related__card-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* Dark navy image tile */
.case-study-related__card-image {
  position: relative;
  width: 100%;
  max-width: 416px;
  aspect-ratio: 416 / 222;
  margin-inline: auto;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-navy-blue);
}

.case-study-related__card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Body — eyebrow + logos + title + description + cta-link */
.case-study-related__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
}

.case-study-related__card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4_5);
  flex: 1;
}

.case-study-related__card-eyebrow {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: 0.93;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-green-2);
  margin: 0;
}

.case-study-related__card-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.case-study-related__card-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 10px;
  background: var(--color-white);
  border-radius: 4px;
}

.case-study-related__card-logo img {
  display: block;
  width: 110px;
  height: 20px;
  object-fit: contain;
}

.case-study-related__card-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--color-navy-blue);
  margin: 0;
}

.case-study-related__card-desc {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-body-copy);
  margin: 0;
}

.case-study-related__card-cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Related Products variant — slim card without logos row. Card fits its
   content (no 595px floor) and the CTA sits immediately below the
   description instead of being pushed to the card bottom by flex growth. */
.case-study-related--products .case-study-related__card {
  min-height: 0;
}

.case-study-related--products .case-study-related__card-inner {
  flex: 0 0 auto;
}

.case-study-related--products .case-study-related__card-body {
  gap: var(--space-4);
  flex: 0 0 auto;
}

.case-study-related--products .case-study-related__card-cta {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .case-study-related__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Bottom-row single card would render alone — keep it visually joined. */
  .case-study-related__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .case-study-related__cards {
    grid-template-columns: 1fr;
  }

  .case-study-related__card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .case-study-related__heading-row {
    flex-direction: column;
    gap: var(--space-6);
  }

  .case-study-related__subheading {
    align-self: flex-start;
  }
}