/* Homepage ingredient feature carousel: media first, compact article caption. */
.hero-feature{position:relative;min-width:0}
.hero-feature [hidden]{display:none!important}
.hero-feature .hero-visual{margin:0}
.hero-feature .hero-image{position:relative;height:380px;overflow:hidden;background:var(--wash)}
.hero-feature .hero-image img{width:100%;height:100%;object-fit:cover}
.hero-feature .feature-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.hero-feature .feature-video.is-playing{opacity:1}
.hero-feature .hero-visual figcaption{position:relative;display:block;height:144px;padding:14px 18px 48px}
.hero-feature .hero-visual figcaption strong{margin-bottom:4px;line-height:1.25}
.hero-feature .feature-description{display:block;font-size:.8125rem;line-height:1.4;margin-top:5px}
.hero-feature .hero-visual figcaption>a{position:absolute;bottom:19px;left:18px;margin:0;max-width:calc(100% - 156px);white-space:normal;line-height:1.35}
.feature-controls{position:absolute;bottom:14px;right:18px;display:flex;align-items:center;gap:7px;color:var(--navy)}
.feature-controls button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);font-size:1.1rem;cursor:pointer}
.feature-controls button:hover{background:var(--wash);border-color:var(--navy)}
.feature-controls button:focus-visible{outline-color:var(--accent)}
.feature-controls [data-feature-page]{font-size:.75rem;font-variant-numeric:tabular-nums;min-width:28px;text-align:center}
@media(max-width:1100px){.hero-feature .hero-image{height:360px}.hero-feature .hero-visual figcaption{height:160px}}
@media(max-width:800px){.hero-feature .hero-image{height:auto;aspect-ratio:3/2}.hero-feature .hero-image img{position:absolute;inset:0}.hero-feature .hero-visual figcaption{height:144px}}
@media(max-width:520px){.hero-feature .hero-visual figcaption{height:168px;padding:14px 14px 50px}.hero-feature .hero-visual figcaption>a{left:14px;bottom:20px;max-width:calc(100% - 128px)}.feature-controls{right:14px;bottom:14px;gap:5px}.feature-controls button{width:28px;height:28px}.feature-controls [data-feature-page]{min-width:24px}}
@media(max-width:360px){.hero-feature .hero-visual figcaption{height:184px}}
@media(prefers-reduced-motion:reduce){.hero-feature .feature-video{display:none}}