/* Case study teasers (T33). Mobile first: one card per row; from 600 px two per row (three cards: 2 + 1 with
   the last spanning, from layout.css .grid--3); from 1024 px three in a row. Cards are solid Deep Blue panels
   (.card--panel tokens), so their small white text passes contrast on any band (A2). Tokens only. */

.case-teasers {
  /* The band's own focus colour (white on blue themes, Mid Blue on grey), taken before the cards switch to white. */
  --case-teasers-ring: var(--color-focus);
}
/* The band's own, roomier top and bottom space (T46b, N1): the prototype's "Recent projects" padding
   clamp(72px, 9vw, 132px), in place of the shared --section-space. Only this band; other blocks keep theirs. */
.case-teasers.section { padding-block: clamp(72px, 9vw, 132px); }

.case-teasers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.case-teasers__intro-block { min-width: 0; max-width: var(--container-text); }
/* Optional small label above the heading (T33a): the shared .eyebrow style, as on the other section labels. */
.case-teasers__label { margin-bottom: var(--space-6); overflow-wrap: break-word; }
.case-teasers__heading { margin: 0; }
/* Intro (T33a): the prototype's measure (about 360 px) and 16 px text (T02's --fs-body-md, T46a). */
.case-teasers__intro {
  max-width: 33ch;
  margin: var(--space-4) 0 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.case-teasers__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-teasers__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--c-deep-blue);
  border-radius: var(--radius-card);
  background: var(--c-deep-blue);
  color: var(--color-text);
}

.case-teasers__photo { background: var(--c-dark-blue); }
.case-teasers__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.case-teasers__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}
.case-teasers__sector { margin: 0 0 var(--space-2); }
.case-teasers__title { margin: 0 0 var(--space-3); overflow-wrap: break-word; }
.case-teasers__summary {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  overflow-wrap: break-word;
}

/* The title is the card's one link; its ::after covers the whole card (expanded hit area). */
.case-teasers__link {
  color: var(--color-heading);
  text-decoration: none;
}
.case-teasers__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;   /* above the photo, so the whole card, corners included, is the link (B23, from the B14 test) */
  border-radius: var(--radius-card);
}
.case-teasers__card:hover .case-teasers__link { text-decoration: underline; text-underline-offset: 0.15em; }

/* Focus: the ring goes round the whole card, in the band's focus colour. */
.case-teasers__link:focus-visible { outline: none; }
.case-teasers__card:has(.case-teasers__link:focus-visible) {
  outline: var(--focus-width) solid var(--case-teasers-ring);
  outline-offset: var(--focus-offset);
}
@supports not selector(:has(*)) {
  .case-teasers__link:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
}

.case-teasers__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}
.case-teasers__more svg { flex: none; }

@media (min-width: 600px) {
  .case-teasers__img { aspect-ratio: 16 / 9; }
}

@media (min-width: 1024px) {
  .case-teasers__head { margin-bottom: var(--space-12); }
  .case-teasers__body { padding: var(--space-8); }
  .grid--2 > .case-teasers__card .case-teasers__img { aspect-ratio: 21 / 10; }
  .grid--3 > .case-teasers__card .case-teasers__img { aspect-ratio: 3 / 2; }
}

/* One case study (B23): the card keeps the width it has in a two-card row and sits in the middle. */
@media (min-width: 600px) {
  .case-teasers__list--single {
    max-width: calc((100% - var(--grid-gap, var(--gutter))) / 2);
    margin-inline: auto;
  }
}