/* Converted from src/components/site/profiles/CaseStudyCard.module.css (CSS Module): local classes are prefixed "profiles-case-study-card__". */
/* "Cases of Studies" cards of the profile pages (Ohio blog card, layout 3). */

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

/* Masonry columns (MasonryList): each item is placed under the previous one of its column. */
.profiles-case-study-card__grid[data-masonry] {
  position: relative;
}

.profiles-case-study-card__grid[data-masonry] > li {
  position: absolute;
  top: var(--masonry-y);
  left: var(--masonry-x);
  width: var(--masonry-w);
}

.profiles-case-study-card__card {
  display: flex;
  align-items: stretch;
}

/* ----- Image ----- */
.profiles-case-study-card__media {
  position: relative;
  flex: 0 0 50%;
  align-self: flex-start;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-fill);
}

.profiles-case-study-card__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. */
.profiles-case-study-card__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);
}

.profiles-case-study-card__card:hover .profiles-case-study-card__media img {
  transform: scale(1.06);
}

.profiles-case-study-card__card:hover .profiles-case-study-card__media::after {
  opacity: 1;
  transform: none;
}

/* ----- Details ----- */
.profiles-case-study-card__details {
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0 0 var(--spacer);
}

.profiles-case-study-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 4px;
  font-size: var(--text-xs);
  line-height: 1.6;
}

/* "date • 1 min read" */
.profiles-case-study-card__meta time + .profiles-case-study-card__readingTime::before {
  content: "•";
  display: inline-block;
  margin: -2px 4px 0;
  font-size: 0.8em;
  color: var(--color-brand);
}

.profiles-case-study-card__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);
  overflow-wrap: break-word;
}

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

.profiles-case-study-card__details .profiles-case-study-card__pills {
  margin-top: 12px;
}

.profiles-case-study-card__details .profiles-case-study-card__more {
  align-self: flex-start;
  margin-top: 16px;
}

/* As on the original, a long category pill (never wrapped) widens the details column of the
   card, which then overflows into the 40px gutter (28px for "Health, Pharmaceutical &
   Biotechnology" at 1440px). The original kept overflowing beyond it, over the image of the next
   card (up to ~1320px wide): here the negative margin lends the details the gutter only, and the
   image shrinks for the rest. */
@media (min-width: 1181px) {
  .profiles-case-study-card__media {
    flex-shrink: 1;
    min-width: 0;
  }

  .profiles-case-study-card__details {
    min-width: auto;
    margin-right: -40px;
  }

  .profiles-case-study-card__details .profiles-case-study-card__pills a {
    white-space: nowrap;
  }
}

/* Two narrow columns (769–1180px): the original kept the pills on one line there too, and the
   widened cards overflowed the page (up to 120px of horizontal scroll at 769px). Here the details
   column grows to its longest pill (up to 60% of the card) at the expense of the image, and only a
   pill longer than that wraps. */
@media (min-width: 769px) and (max-width: 1180px) {
  .profiles-case-study-card__media {
    flex-shrink: 1;
    min-width: 0;
  }

  .profiles-case-study-card__details {
    min-width: auto;
    max-width: 60%;
  }

  .profiles-case-study-card__details .profiles-case-study-card__pills li {
    max-width: 100%;
  }

  .profiles-case-study-card__details .profiles-case-study-card__pills a {
    width: max-content;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .profiles-case-study-card__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profiles-case-study-card__card {
    flex-direction: column;
  }

  .profiles-case-study-card__media {
    flex: none;
    align-self: stretch;
  }

  .profiles-case-study-card__details {
    flex: none;
    justify-content: flex-start;
    padding: 16px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profiles-case-study-card__card:hover .profiles-case-study-card__media img,
  .profiles-case-study-card__media::after {
    transform: none;
  }
}