/*
  Not In The Supermarket — responsive corrections, revision 5
  - Keeps faces visible in all people-led images.
  - Prevents hero copy and CTA clipping when the viewport is resized or zoomed.
  - Keeps the mobile navigation control visible whenever desktop navigation is hidden.
*/

/* Face-first cropping */
.hero__image {
  object-fit: cover;
  object-position: 68% 0% !important;
}

.journey-card--shopper .journey-card__media img,
.journey-card--producer .journey-card__media img,
.editorial-card:first-child .editorial-card__image img {
  object-fit: cover;
  object-position: 50% 0% !important;
  transform-origin: 50% 0%;
}

/* Do not let a hover enlargement remove the small amount of space above a face. */
.journey-card--shopper:hover .journey-card__media img,
.journey-card--producer:hover .journey-card__media img,
.editorial-card:first-child:hover .editorial-card__image img {
  transform: none !important;
}

/* Desktop: retain the approved visual minimum, but allow the hero to grow. */
@media (min-width: 921px) {
  .hero {
    height: auto !important;
    min-height: 398px !important;
    align-items: stretch !important;
  }

  .hero__content {
    display: flex !important;
    min-height: 398px;
    align-items: center;
    box-sizing: border-box;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .hero__copy {
    width: clamp(455px, 36vw, 540px) !important;
    max-width: 54vw !important;
  }

  .hero h1 {
    font-size: clamp(42px, 3.75vw, 54px) !important;
    line-height: .99 !important;
  }

  .button--hero {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
  }
}

/* Tablet and mobile: never force the hero into a fixed-height frame. */
@media (max-width: 920px) {
  .hero {
    height: auto !important;
  }

  .hero__image {
    object-position: 68% 0% !important;
  }

  .menu-button {
    display: grid !important;
    flex: 0 0 44px;
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .hero__image {
    object-position: 68% 0% !important;
  }

  .journey-card--shopper .journey-card__media img,
  .journey-card--producer .journey-card__media img,
  .editorial-card:first-child .editorial-card__image img {
    object-position: 50% 0% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-card__media img {
    transition: none !important;
  }
}