/*
 * Homepage hero, October 2026 artwork.
 * Desktop/tablet: the product photo sits on the right of a wide image, so the
 * copy moves to the left over the plain wall with a fade behind it.
 * Phones: a portrait photo shown as a picture, with the copy below it instead
 * of on top of the products.
 * Selectors are one class more specific than homepage.css/premium.css so they
 * win without editing those files.
 */

.eco-homepage .eco-home-hero__media {
  position: absolute;
  inset: 0;
}

@media (min-width: 768px) {
  .eco-homepage .eco-home-hero__image {
    object-position: 62% 72%;
  }

  .eco-homepage .eco-home-hero__overlay {
    background: linear-gradient(90deg,
      rgba(36, 57, 46, .9) 0%,
      rgba(36, 57, 46, .78) 30%,
      rgba(36, 57, 46, .32) 50%,
      rgba(36, 57, 46, 0) 66%);
  }

  .eco-homepage .eco-home-hero__content {
    justify-items: start;
    text-align: left;
  }

  .eco-homepage .eco-home-hero__copy {
    max-width: 560px;
    margin-inline: 0;
    text-align: left;
  }

  .eco-homepage .eco-home-hero .eco-eyebrow,
  .eco-homepage .eco-home-hero h1,
  .eco-homepage .eco-home-hero__copy > p:not(.eco-eyebrow) {
    margin-left: 0;
    text-align: left;
  }

  .eco-homepage .eco-home-hero h1 {
    max-width: 14ch;
  }

  .eco-homepage .eco-home-hero__copy > p:not(.eco-eyebrow) {
    max-width: 500px;
  }

  .eco-homepage .eco-home-hero .eco-button-row {
    justify-content: flex-start;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .eco-homepage .eco-home-hero__image {
    object-position: 82% 72%;
  }

  .eco-homepage .eco-home-hero__copy,
  .eco-homepage .eco-home-hero__copy > p:not(.eco-eyebrow) {
    max-width: 410px;
  }

  .eco-homepage .eco-home-hero__overlay {
    background: linear-gradient(90deg,
      rgba(36, 57, 46, .92) 0%,
      rgba(36, 57, 46, .8) 40%,
      rgba(36, 57, 46, .3) 62%,
      rgba(36, 57, 46, .05) 80%);
  }
}

@media (max-width: 767px) {
  .eco-homepage .eco-home-hero {
    display: block;
    min-height: 0;
    border-radius: 0;
    background: var(--eco-forest-dark, #24392e);
  }

  .eco-homepage .eco-home-hero__media {
    position: relative;
    display: block;
  }

  /* Blend the bottom of the photo into the green panel below it. */
  .eco-homepage .eco-home-hero__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 22%;
    background: linear-gradient(180deg, rgba(36, 57, 46, 0), var(--eco-forest-dark, #24392e));
  }

  .eco-homepage .eco-home-hero__image {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 82%;
    animation: none;
    transform: none;
  }

  .eco-homepage .eco-home-hero__overlay {
    display: none;
  }

  .eco-homepage .eco-home-hero__content {
    align-items: start;
    padding-block: 18px 40px;
  }

  .eco-homepage .eco-home-hero__copy {
    padding-top: 0;
  }
}