/*
 * product-card — converted from src/components/products/ProductCard.module.css
 * Declarations are unchanged; only class selectors were renamed.
 */
.np-product-card__card {
  display: grid;

  /* The containing block for the stretched title link; see utilities.css. */
  position: relative;
  grid-template-columns: 380px 1fr;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* The custom Elementor widget replaces the old `.np-products__cards` wrap. */
.np-product-card__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* The photograph fills the card's media column, matching the legacy cards. */
.np-product-card__image {
  background: linear-gradient(135deg, #c8dac8, #9ab89a);
  min-height: 280px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Legacy NanoPrep and Belzona artwork is 800 x 720: at the 380px
   desktop column width its frame must be at least 342px tall. Otherwise
   shorter Elementor copy shrinks the row and cover crops the photographs.
   R230 has different artwork proportions and retains its existing frame. */
@media (min-width: 801px) {
  .np-product-card__card--nanoprep .np-product-card__image,
  .np-product-card__card--belzona-1111 .np-product-card__image {
    min-height: 342px;
  }
}

/*
 * Stretch the image wrapper to the card's full height before applying the
 * crop. Leaving the image at `height: auto` exposes white above or below it
 * whenever the copy or feature chips make the text column taller. WordPress
 * already supplies the purpose-made 800 × 720 `np-card` crop, so `cover` only
 * trims the small remainder caused by different card heights and keeps the
 * R230 and Belzona lockups in frame.
 *
 * The Elementor featured-image selectors retain compatibility with product
 * Loop Items created before the dedicated Product Cards widget was added.
 */
.np-product-card__image > .elementor-widget-theme-post-featured-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.np-product-card__image > .elementor-widget-theme-post-featured-image .elementor-widget-container,
.np-product-card__image .np-product-card__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.np-product-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.np-product-card__card-image {
  width: 100%;
  height: 100%;
  display: block;
}

/*
 * A product with no artwork yet. This keeps the gradient the frame used to
 * carry, so a missing image still reads as a deliberate empty state rather
 * than a blank corner of the card.
 */
.np-product-card__image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c8dac8, #9ab89a);
}

.np-product-card__image-placeholder span {
  border: 2px dashed rgba(255, 255, 255, 0.4);
  padding: 16px 20px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

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

.np-product-card__body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.np-product-card__body h2 {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.15;
}

.np-product-card__subtitle {
  font-size: 14px;
  color: var(--green2);
  font-weight: 500;
  margin-bottom: 16px;
}

/* See the note on the excerpt widget in case-studies-preview.css. */
.np-product-card__body p,
.np-product-card__body .elementor-widget-theme-post-excerpt {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 18px;
}

.np-product-card__feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.np-product-card__feature-list li {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--light);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.np-product-card__feature-list li::before {
  content: "✓";
  color: var(--green2);
  font-weight: 700;
}

.np-product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 4px;
  align-self: flex-start;
  transition: background 0.2s;
}

/* Elementor resets the feature list margin, so give the action its own
   stable separation from the chips. */
.np-product-card__body .np-product-card__cta {
  margin-top: 18px;
}

.np-product-card__cta:hover {
  background: var(--orange2);
}

.np-product-card__cta::after {
  content: "→";
}

@media (max-width: 800px) {
  .np-product-card__card {
    grid-template-columns: 1fr;
  }

  .np-product-card__image {
    min-height: 200px;
  }
}