/* =================== hc-cat-feat.css =================== */
.hc-cat-feat {background: linear-gradient(160deg, #f3e9d6 0%, #e8dfd0 100%); position: relative; overflow: hidden; isolation: isolate; transition: transform 0.25s ease, box-shadow 0.25s ease; grid-row: 1 / span 2; min-height: 320px; padding: clamp(24px, 3vw, 40px); color: var(--hc-ink, #1a1714); border-radius: 28px; display: flex; flex-direction: column; justify-content: space-between; grid-column: 1 / span 1; border: 1px solid rgba(139, 115, 85, 0.18); text-decoration: none}
.hc-cat-feat__bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0}
.hc-cat-feat::before {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.86) 100%); opacity: 1; transition: opacity 0.25s ease; z-index: 0; pointer-events: none}
.hc-cat-feat::after {content: ""; position: absolute; left: -55%; top: -90%; width: 42%; height: 240%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.42), transparent); opacity: 0; transform: translateX(0); transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; pointer-events: none; z-index: 1}
.hc-cat-feat > * {position: relative; z-index: 2}
.hc-cat-feat:hover {transform: translateY(-4px); box-shadow: 0 14px 40px rgba(27, 20, 13, 0.12)}
.hc-cat-feat:hover::before {opacity: .78}
.hc-cat-feat:hover::after {opacity: 0.95; transform: translateX(280%)}
.hc-cat-feat__arrow {transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); width: 48px; height: 48px; background: var(--hc-ink, #1a1714); border-radius: 50%; display: grid; align-items: center; justify-content: center; color: var(--hc-bg, #f8f6f3); align-self: flex-end; place-items: center; margin-top: 16px; position: relative; z-index: 2}
.hc-cat-feat:hover .hc-cat-feat__arrow {transform: translate(4px, -4px); background: var(--hc-gold); color: var(--hc-ink)}
.hc-cat-feat__title {transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: clamp(28px, 3.5vw, 44px); line-height: 1; margin-top: var(--hc-sp-2); color: var(--hc-ink, #1a1714); font-weight: 400; margin: var(--hc-sp-2, 10px) 0 var(--hc-sp-3, 14px); letter-spacing: -0.01em}
.hc-cat-feat:hover .hc-cat-feat__title {transform: translateY(-2px)}
.hc-cat-feat__count {font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; color: var(--hc-accent-dark, #7a6548); letter-spacing: 0.08em; text-transform: uppercase}
.hc-cat-feat__desc {font-size: 14px; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62)); margin-top: var(--hc-sp-3); max-width: 38ch; line-height: 1.5; margin: 0}
.hc-cat-feat__body {position: relative; z-index: 2}