/* =================== cat-banner.css =================== */
/* Category landing hero — image cap + body overlays bottom-left. */

.cat-banner {
  position: relative;
  max-height: 460px;
  overflow: hidden;
  border-radius: 22px;
  margin: clamp(20px, 2.4vw, 32px) 0;
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.92) 100%);
  isolation: isolate;
}

.cat-banner__bg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}

.cat-banner__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 2.4vw, 32px);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 252, 246, 0.88) 36%, rgba(255, 252, 246, 0.96) 100%);
  backdrop-filter: blur(2px) saturate(1.1);
}

.cat-banner__title {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 6px;
}

.cat-banner__sub {
  margin: 0;
  max-width: 64ch;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
}

.cat-banner--dark { color: var(--hc-paper, #ffffff); }
.cat-banner--dark .cat-banner__body {
  background: linear-gradient(180deg, transparent 0%, rgba(26, 23, 20, 0.72) 50%, rgba(26, 23, 20, 0.92) 100%);
  color: #ffffff;
}
.cat-banner--dark .cat-banner__sub { color: rgba(255, 255, 255, 0.85); }
.cat-banner--light { color: var(--hc-ink, #1a1714); }

@media (max-width: 768px) {
  .cat-banner { max-height: 340px; }
  .cat-banner__bg { max-height: 340px; }
}