/*
 * Luminous bottle-led hero.
 * The approved photography provides the depth, so the UI stays restrained and tonal.
 */

.hero {
  background: #efe5d6;
  color: #251a13;
}

.hero-picture img {
  object-position: center center;
}

.hero-shade {
  background: transparent;
}

.hero .eyebrow {
  color: #735438;
}

.hero h1 {
  color: #251a13;
  text-shadow: none;
}

.hero-copy > p:not(.eyebrow) {
  color: #4b382a;
  text-shadow: none;
}

.hero .button.button-light {
  border-color: rgba(37, 26, 19, 0.72);
  background: rgba(255, 252, 247, 0.32);
  color: #251a13;
  backdrop-filter: none;
}

.hero .button.button-light .cta-arrow img {
  filter: none;
}

.hero .button.button-light:hover,
.hero .button.button-light:focus-visible {
  border-color: #251a13;
  background: #251a13;
  color: #fffaf2;
}

.hero .button.button-light:hover .cta-arrow img,
.hero .button.button-light:focus-visible .cta-arrow img {
  filter: brightness(0) invert(1);
}

.hero .hero-secondary {
  color: #251a13;
}

.hero .hero-secondary:focus-visible {
  outline-color: #251a13;
}

.hero-caption {
  color: rgba(37, 26, 19, 0.76);
}

@media (min-width: 701px) {
  .hero {
    height: min(780px, 43.2vw, calc(100svh - 119px));
    min-height: 560px;
  }
}

@media (max-width: 700px) {
  .hero,
  .hero .eyebrow,
  .hero h1,
  .hero-copy > p:not(.eyebrow),
  .hero-caption {
    color: #251a13;
  }

  .hero-picture img {
    object-position: center center;
  }

  .hero-shade {
    background: transparent;
  }

  .hero-copy {
    padding: 46px 22px 26px;
  }

  .hero .eyebrow {
    margin-bottom: 14px;
    color: #735438;
  }

  .hero h1,
  .hero-copy > p {
    text-shadow: none;
  }

  .hero-copy > p:not(.eyebrow) {
    max-width: 292px;
    margin: 23px 0 18px;
    color: #4b382a;
  }

  .hero .button,
  .hero .button.button-light {
    border-color: rgba(37, 26, 19, 0.72);
    background: rgba(255, 252, 247, 0.38);
    color: #251a13;
    backdrop-filter: none;
  }

  .hero .button:hover,
  .hero .button:focus-visible,
  .hero .button.button-light:hover,
  .hero .button.button-light:focus-visible {
    border-color: #251a13;
    background: #251a13;
    color: #fffaf2;
  }

  .hero .hero-secondary {
    margin-top: 14px;
    color: #251a13;
  }

  .hero-caption {
    color: rgba(37, 26, 19, 0.68);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .button.button-light {
    transition: none;
  }
}