/*
 * case-study-card — converted from src/components/case-studies/CaseStudyCard.module.css
 * Declarations are unchanged; only class selectors were renamed.
 */
.np-case-study-card__card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}

.np-case-study-card__card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.np-case-study-card__image-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #c8dac8, #9ab89a);
}

.np-case-study-card__image {
  height: 220px;
}

.np-case-study-card__image-compact {
  height: 160px;
}

.np-case-study-card__image-wrap img {
  object-fit: cover;
  transition: transform 0.4s;
}

.np-case-study-card__card:hover .np-case-study-card__image-wrap img {
  transform: scale(1.04);
}

.np-case-study-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--green2);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}

.np-case-study-card__tag-compact {
  position: static;
  display: inline-block;
  margin-bottom: 6px;
}

.np-case-study-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.np-case-study-card__body-compact {
  padding: 18px;
}

.np-case-study-card__body h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.2;
}

.np-case-study-card__body-compact h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

/* See the note on the excerpt widget in case-studies-preview.css. */
.np-case-study-card__body p,
.np-case-study-card__body .elementor-widget-theme-post-excerpt {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 16px;
}

/*
 * The summary is clamped so the cards in a row are the same shape.
 *
 * A Loop Grid stretches every cell to the tallest card in the row, so an
 * unusually long excerpt used to set the height for all four and leave the
 * rest with dead space under the link. Four lines is what the longest of the
 * published summaries runs to; anything past it ends in an ellipsis.
 */
.np-case-study-card__body p,
.np-case-study-card__body .elementor-widget-theme-post-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}


.np-case-study-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green2);
  font-size: 13px;
  font-weight: 600;
  transition: gap 0.2s;
}

.np-case-study-card__link:hover {
  gap: 10px;
}

.np-case-study-card__link::after {
  content: "→";
}

/*
 * Stretched link.
 *
 * The design's card is a single anchor wrapping the whole tile. Elementor
 * cannot reproduce that inside a Loop Grid: a container's link resolves once
 * rather than per item, so every card ends up pointing at the same post.
 *
 * The link therefore lives on the title, where it does resolve per post, and
 * an overlay makes the rest of the tile clickable. One meaningful link per
 * card, and the whole card is still a click target.
 *
 * This is the containing block for that overlay; the overlay itself is in
 * utilities.css, because all five card designs need it and this one was the
 * only one that had it.
 */
.np-case-study-card__card {
  position: relative;
}