/* Component: system (product) card — template-parts/components/product-card.php
   Mockups: EXALCO-Products (list view), EXALCO-Erga (detail → --compact). Builds on .ex-card / .ex-media (base.css).
   ========================================================================== */

.ex-product-card { height: 100%; }
.ex-product-card__media { background: var(--ex-tint); }

/* Thermal-break badge, top-right of the image */
.ex-product-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: var(--ex-z-raised);
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .06em;
}
.ex-product-card__badge--with { background: var(--ex-red); color: var(--ex-white); }
.ex-product-card__badge--without { padding: 4.5px 10px; border: var(--ex-border-w) solid var(--ex-ink); background: var(--ex-white); color: var(--ex-ink); }

.ex-product-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; }
.ex-product-card__title { margin: 0; font-size: 17px; font-weight: 800; line-height: normal; letter-spacing: .02em; color: var(--ex-ink); }
.ex-product-card__text { margin: 0; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--ex-ink); }
.ex-product-card__more { margin-top: auto; padding-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--ex-red); }
.ex-product-card__more-arrow { display: inline-block; transition: transform var(--ex-t-btn); }
.ex-product-card:hover .ex-product-card__more-arrow,
.ex-product-card:focus-within .ex-product-card__more-arrow { transform: translateX(5px); }

/* --compact: one-line row without image ("systems used in this project") */
.ex-product-card--compact { flex-direction: row; align-items: center; gap: 13px; padding: 16px 18px; }
.ex-product-card--compact:hover,
.ex-product-card--compact:focus-within { transform: translateY(-3px); }
.ex-product-card--compact .ex-product-card__body { gap: 3px; padding: 0; }
.ex-product-card--compact .ex-product-card__title { font-size: 14.5px; }
.ex-product-card__note { margin: 0; font-size: 11px; font-weight: 600; line-height: normal; color: var(--ex-ink); }
/* "{category} · {thermal attribute}": a long category name breaks at the dot, never inside the attribute. */
.ex-product-card__note-part { white-space: nowrap; }
.ex-product-card__arrow { font-size: inherit; }

/* Ready-made list wrappers: <ul class="ex-product-cards"> / <ul class="ex-product-cards ex-product-cards--compact"> */
.ex-product-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ex-space-4); margin: 0; padding: 0; list-style: none; }
.ex-product-cards--compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ex-product-cards > [hidden] { display: none !important; }

@media (max-width: 1199px) {
  .ex-product-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ex-product-cards--compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 899px) {
  .ex-product-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-product-cards--compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .ex-product-card__title { font-size: 16px; }
  .ex-product-card--compact { min-height: var(--ex-touch); }
}
@media (max-width: 599px) {
  .ex-product-cards { gap: 10px; }
  .ex-product-cards--compact { grid-template-columns: minmax(0, 1fr); }
  .ex-product-card__body { padding: 14px; }
  .ex-product-card__title { font-size: 15px; }
  .ex-product-card__badge { top: 8px; right: 8px; padding: 5px 7px; font-size: 9px; letter-spacing: .03em; }
  .ex-product-card__badge--without { padding: 3.5px 7px; }
  .ex-product-card--compact .ex-product-card__body { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-product-card__more-arrow { transition: none; }
  .ex-product-card:hover .ex-product-card__more-arrow,
  .ex-product-card:focus-within .ex-product-card__more-arrow { transform: none; }
  .ex-product-card--compact:hover,
  .ex-product-card--compact:focus-within { transform: none; }
}