/* Converted from src/components/site/sectors/CaseStudyList.module.css (CSS Module): local classes are prefixed "sectors-case-study-list__". */
/* Case studies of a sector: Ohio "recent posts" widget, card layout 3, masonry in 2 columns. */

.sectors-case-study-list__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin: 0 -16px;
  padding: 0;
  list-style: none;
}

.sectors-case-study-list__item {
  padding: 20px;
}

/* <MasonryList> sets --masonry-span (item height in px). As on the former site, cards
   alternate between the two columns and each column stacks independently: fixed column,
   1px rows, dense packing. */
@media (min-width: 769px) {
  .sectors-case-study-list__list[data-masonry] {
    grid-auto-rows: 1px;
    grid-auto-flow: row dense;
  }

  .sectors-case-study-list__list[data-masonry] > * {
    grid-row-end: span var(--masonry-span, 1);
  }

  .sectors-case-study-list__list[data-masonry] > :nth-child(odd) {
    grid-column: 1;
  }

  .sectors-case-study-list__list[data-masonry] > :nth-child(even) {
    grid-column: 2;
  }
}

.sectors-case-study-list__card {
  display: flex;
  align-items: flex-start;
}

/* Images keep their own ratio (square crops, except a few portrait originals). */
.sectors-case-study-list__media {
  position: relative;
  display: block;
  flex: 0 0 50%;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-fill);
}

.sectors-case-study-list__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--duration) var(--ease);
}

/* Theme ".overlay-details.-top.-fade-down": dark gradient band over the top of the image,
   fading in (and settling from -6%) on hover. */
.sectors-case-study-list__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--spacer) * 2);
  background-image: linear-gradient(rgb(17 16 19 / 0.5), rgb(17 16 19 / 0));
  opacity: 0;
  transform: translateY(-6%);
  transition:
    opacity var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.sectors-case-study-list__card:hover .sectors-case-study-list__media img {
  transform: scale(1.06);
}

.sectors-case-study-list__card:hover .sectors-case-study-list__media::after {
  opacity: 1;
  transform: none;
}

.sectors-case-study-list__details {
  flex: 1;
  min-width: 0;
  padding: 20px 0 0 clamp(1rem, 1.5vw, 21.6px);
}

/* Side by side, the details stretch to the card height and are centred against the image
   (a details block taller than the image makes the card taller, the image stays on top). */
@media (min-width: 769px) {
  .sectors-case-study-list__card {
    align-items: stretch;
  }

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

  .sectors-case-study-list__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}

/* As on the original, a long category pill does not wrap and widens the details (and the
   title) beyond half of the card. Only where the 40px gutter absorbs the overflow. */
@media (min-width: 1380px) {
  .sectors-case-study-list__details {
    min-width: auto;
  }

  .sectors-case-study-list__details .sectors-case-study-list__pills a {
    white-space: nowrap;
  }
}

.sectors-case-study-list__meta {
  margin: 0 0 4px;
  font-size: var(--text-xs);
  line-height: 1.6;
}

.sectors-case-study-list__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--h4-size);
  font-weight: var(--weight-semibold);
  line-height: var(--h4-leading);
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

/* Theme "a:hover { transition: all … }": the colour eases in on hover and snaps back on leave. */
.sectors-case-study-list__titleLink:hover {
  color: var(--color-brand);
  transition: color var(--duration) var(--ease);
}

.sectors-case-study-list__details .sectors-case-study-list__pills {
  margin-top: 12px;
}

.sectors-case-study-list__details .sectors-case-study-list__more {
  margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .sectors-case-study-list__card:hover .sectors-case-study-list__media img,
  .sectors-case-study-list__media::after {
    transform: none;
  }
}

@media (max-width: 768px) {
  .sectors-case-study-list__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    margin-top: 20px;
  }

  .sectors-case-study-list__item {
    padding: 0 20px;
  }

  .sectors-case-study-list__card {
    flex-direction: column;
    align-items: stretch;
  }

  .sectors-case-study-list__media {
    flex: none;
    width: 100%;
  }

  .sectors-case-study-list__details {
    padding: 16px 0 0;
  }
}