/* Template: taxonomy-product_category.php — mockup EXALCO-Products › list view ("Product list").
   The banner is .ex-inner-banner (sections/inner_banner.css); cards are components/product-card.css.
   ========================================================================== */

/* Category banner (mockup "Product list banner"): smaller than the landing banner. Measured at 1680px:
   eyebrow 11.5px / .26em with 14px under it, h1 53.8px, 48px bottom padding, lighter gradient. */
@media (min-width: 900px) {
  .ex-inner-banner--category .ex-inner-banner__content { max-width: 820px; padding-block: clamp(28px, 3.4vw, 48px); }
  .ex-inner-banner--category .ex-inner-banner__eyebrow { margin-bottom: 14px; font-size: 11.5px; line-height: normal; letter-spacing: .26em; }
  .ex-inner-banner--category .ex-inner-banner__title { font-size: clamp(30px, 3.2vw, 54px); }
  .ex-inner-banner--category .ex-inner-banner__media::after { background: linear-gradient(90deg, rgba(32, 35, 43, .92) 0%, rgba(32, 35, 43, .5) 55%, rgba(32, 35, 43, .12) 100%); }
}

.ex-product-category { padding-block: clamp(28px, 3.4vw, 48px); background: var(--ex-white); }

/* Term description: one full-width paragraph */
.ex-product-category__intro { margin: 0 0 clamp(46px, 5.5vw, 88px); font-size: var(--ex-fs-body); line-height: 1.65; color: var(--ex-ink); }
.ex-product-category__intro > p { margin: 0; }
.ex-product-category__intro > p + p { margin-top: 14px; }

/* Thermal filter tabs + legend sentence */
.ex-product-category__thermal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.ex-product-category__legend { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ex-ink); }

.ex-product-category__grid { margin-top: clamp(36px, 4vw, 56px); }
.ex-product-category .ex-container > .ex-product-category__grid:first-child { margin-top: 0; }
.ex-product-category__empty { margin-top: 24px; }

@media (max-width: 1199px) {
  .ex-product-category__intro { margin-bottom: clamp(32px, 4vw, 48px); }
}
@media (max-width: 899px) {
  .ex-product-category__intro { margin-bottom: 28px; }
  .ex-product-category__thermal { flex-direction: column; align-items: flex-start; }
  .ex-product-category__grid { margin-top: 24px; }
}
@media (max-width: 599px) {
  .ex-product-category__tabs { width: 100%; }
  .ex-product-category__tabs .ex-chip { flex: 1 1 auto; }
}

/* Quiz / quote band under the grid (beta audit v3, from the client's screenshot; not in the mockups): two halves in the
   container width, dark (quiz) and red (quote) meeting on a diagonal seam. Title 26px Uniform Pro Medium, compact
   buttons: red on the dark half, white with red text on the red half. Tablet / mobile: stacked, needs approval. */
.ex-help-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: calc(100% - 2 * var(--ex-gutter));
  margin: 0 auto clamp(56px, 6vw, 96px);
  overflow: hidden;
}
.ex-help-band--single { grid-template-columns: minmax(0, 1fr); }
.ex-help-band__half {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  min-height: 140px;
  padding: clamp(28px, 2.6vw, 40px) clamp(24px, 2.6vw, 44px);
  color: var(--ex-white);
}
.ex-help-band__half--quiz { background: var(--ex-dark); }
.ex-help-band__half--quote { background: var(--ex-red); }
/* Diagonal seam: the red half reaches 40px into the dark one at the bottom. */
.ex-help-band:not(.ex-help-band--single) .ex-help-band__half--quote { margin-left: -40px; padding-left: calc(clamp(24px, 2.6vw, 44px) + 40px); clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%); }
.ex-help-band__title { max-width: 440px; margin: 0; font-size: clamp(20px, 1.6vw, 26px); font-weight: var(--ex-fw-title); line-height: 1.15; letter-spacing: -.005em; color: inherit; }
.ex-help-band__half--quote .ex-help-band__btn { --ex-btn-dot-bg: var(--ex-red); --ex-btn-dot-fg: var(--ex-white); --ex-btn-dot-arrow: var(--ex-arrow-white); border: 0; background: var(--ex-white); color: var(--ex-red); }
.ex-help-band__half--quote .ex-help-band__btn:hover,
.ex-help-band__half--quote .ex-help-band__btn:focus-visible { border: 0; background: var(--ex-white); color: var(--ex-red); }

@media (max-width: 899px) {
  .ex-help-band { grid-template-columns: minmax(0, 1fr); }
  .ex-help-band:not(.ex-help-band--single) .ex-help-band__half--quote { margin-left: 0; padding-left: clamp(24px, 2.6vw, 44px); clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%); margin-top: -18px; padding-top: calc(clamp(28px, 2.6vw, 40px) + 18px); }
}