/* Full-bleed photographic hero; fixed copy stays readable between slides. */
.hero.hero-slider { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 680px; padding: 84px 0 148px; overflow: hidden; border: 0; background: var(--wine-900); color: var(--paper); }
.hero-slides, .hero-slide, .hero-slide img, .hero-slide video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slides { z-index: -2; }
.hero-slide { opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img, .hero-slide video { object-fit: cover; object-position: center; }
.hero-slider::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(101, 31, 50, .94) 0%, rgba(101, 31, 50, .82) 36%, rgba(101, 31, 50, .25) 72%, rgba(101, 31, 50, 0) 92%), linear-gradient(0deg, rgba(46, 12, 21, .7), transparent 30%); }
.hero-slider .hero-copy { max-width: 690px; padding: 0; }
.hero-slider .label { color: #ead4ad; }
.hero-slider h1 { color: #fff; font-size: clamp(40px, 4.5vw, 62px); text-wrap: balance; }
.hero-slider h1 span { color: #ead4ad; }
.hero-slider .lead { color: #f2e9de; max-width: 610px; }
.hero-slider .btn-wine { background: var(--paper); color: var(--wine-800); }
.hero-slider .btn-wine:hover { background: #fff; }
.hero-slider .btn-line { color: #fff; border-color: var(--gold-soft); }
.hero-slider .btn-line:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.hero-slider .hero-note { border-color: rgba(255, 255, 255, .25); color: #e1d3c8; max-width: 650px; gap: 12px 26px; }
.hero-slider .hero-note b { color: #fff; }
.hero-slider-footer { position: absolute; bottom: 28px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.hero-caption { display: grid; gap: 3px; }
.hero-scene { font-family: var(--serif); font-size: 23px; line-height: 1.25; }
.hero-caption small { color: #d6c4b8; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.hero-nav { display: flex; align-items: center; gap: 14px; }
.hero-arrow { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .4); color: #fff; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.hero-arrow svg { width: 17px; }
.hero-arrow:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.hero-progress { display: flex; gap: 4px; }
.hero-progress button { width: 52px; height: 42px; display: grid; align-items: center; padding: 0 3px; }
.hero-progress i { display: block; height: 2px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden; transition: height .2s; }
.hero-progress button:hover i { height: 4px; }
.hero-progress i::after { content: ""; position: absolute; inset: 0; background: #ead4ad; transform: scaleX(0); transform-origin: left; }
.hero-progress .done i::after { transform: scaleX(1); }
.hero-progress .run i::after { animation: heroBar var(--slide-delay, 4000ms) linear forwards; }
.slider-paused .hero-progress .run i::after { animation-play-state: paused; }
@keyframes heroBar { to { transform: scaleX(1); } }
.hero-slide.is-active img { animation: heroZoom 9s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-slider :is(button, a):focus-visible { outline: 2px solid #ead4ad; outline-offset: 5px; }
/* Mobile: slide fills the first screen; copy, buttons and nav sit at the bottom on a dark fade. */
@media (max-width: 700px) {
  .hero.hero-slider { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding: 0; flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .hero-slider::before { background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .78) 32%, rgba(0, 0, 0, .25) 62%, rgba(0, 0, 0, 0) 78%), linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 22%); }
  .hero-slider .hero-content { width: calc(100% - 32px); }
  .hero-slider .hero-copy { padding-bottom: 6px; }
  .hero-slider h1 { font-size: clamp(32px, 8.6vw, 42px); margin-bottom: 14px; }
  .hero-slider .label { font-size: 10px; margin-bottom: 10px; }
  .hero-slider .lead { font-size: 14.5px; line-height: 1.55; margin-bottom: 22px; }
  .hero-slider .hero-actions { gap: 10px; }
  .hero-slider .hero-actions .btn { flex: 1 1 0; justify-content: center; font-size: 11px; padding: 13px 10px; }
  .hero-slider-footer { position: static; width: calc(100% - 32px); margin: 0 auto; padding: 18px 0 22px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 22px; }
  .hero-scene { font-size: 16px; }
  .hero-nav { gap: 8px; }
  .hero-arrow { width: 36px; height: 36px; }
  .hero-progress button { width: 30px; }
}
@media (prefers-reduced-motion: reduce), (max-width: 700px) { .hero-slide.is-active img { animation: none; } }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }