/*
 * "More Shakes. More Savings." bundles hero on the storefront entrance.
 * Built from the NutriPod handoff brief (1271 x 880 / 1906 x 1320 masters):
 * stacked on mobile, a 1271:880 split from 900px, and capped at the 1906 master.
 *
 * Google Sans is self-hosted (latin subset, OFL, from @fontsource/google-sans)
 * because the CSP only allows fonts from our own origin. Loaded only on the
 * entrance via content_for :head.
 */

@font-face {
  font-family: "Google Sans";
  src: url("/assets/google-sans-regular-e17de05e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("/assets/google-sans-bold-250a4999.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.np-banner {
  --np-black: #0a0a0a;
  --np-white: #ffffff;
  --np-green: #5fa044;
  --np-grey: #d4d4d4;

  position: relative;
  overflow: hidden;
  background: var(--np-black);
  color: var(--np-white);
  font-family:
    "Google Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

/* Mobile first: photo on top, copy underneath */
.np-banner__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.np-banner__media {
  display: block;
  order: -1;
}

.np-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  /* Wider than the brief's 1:1 so the photo takes less of a phone screen;
     5:4 at 38% still frames both stacks top to bottom. */
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 38%;
}

.np-banner__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 32px 20px 40px;
}

.np-banner__headline {
  margin: 0;
  font-size: clamp(36px, 10vw, 56px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.np-banner__line {
  display: block;
}

.np-banner__line--accent {
  color: var(--np-green);
}

.np-banner__body {
  margin: 0;
  max-width: 17em;
  font-size: clamp(16px, 4.4vw, 19px);
  line-height: 1.35;
  color: var(--np-grey);
}

/* Full page width (beyond the 1906 cap too), flush with the bottom of both panels */
.np-banner__stripe {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background: url("/assets/storefront/entrance/bundles/nutripod-stripe-d2d2accb.svg") repeat-x left center / auto
    100%;
}

/* Desktop and tablet: split layout. The banner keeps the 1271:880 master ratio
   until that would push the stripe to the fold; then it is capped so the stripe
   ends 8% of the viewport above the fold, under the 84px site header (and at
   the 1906 master's 1320px), the
   photo crops further, and the type scales from the banner height so the copy
   keeps the mockup's proportions. */
@media (min-width: 900px) {
  .np-banner {
    --np-h: max(440px, min(100vw * 880 / 1271, 92vh - 84px, 1320px));
  }

  /* A custom property accepts any tokens, so an unguarded svh value would replace
     the vh one even where svh is unsupported (Chrome < 108) and void every value
     built from it. */
  @supports (height: 100svh) {
    .np-banner {
      --np-h: max(440px, min(100vw * 880 / 1271, 92svh - 84px, 1320px));
    }
  }

  .np-banner__inner {
    flex-direction: row;
    max-width: 1906px;
    height: var(--np-h);
    margin-inline: auto;
  }

  .np-banner__text {
    flex: 0 0 47.2%;
    gap: calc(var(--np-h) * 28 / 880);
    padding: 0 4.4vw calc(var(--np-h) * 12 / 880) 6.3vw;
  }

  /* Width of the master's text column (464px at 80px type), so the headline
     still breaks MORE / SHAKES. / MORE / SAVINGS. when the type is scaled down. */
  .np-banner__headline {
    max-width: 5.8em;
    font-size: calc(var(--np-h) * 80 / 880);
  }

  .np-banner__body {
    font-size: max(16px, calc(var(--np-h) * 25 / 880));
  }

  .np-banner__media {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .np-banner__img {
    aspect-ratio: auto;
    object-position: 50% 44%;
  }

  .np-banner__stripe {
    height: max(8px, calc(var(--np-h) * 12 / 880));
  }
}

/* Keep the left margin at the 1906 master's on very wide screens */
@media (min-width: 1906px) {
  .np-banner__text {
    padding-right: 84px;
    padding-left: 120px;
  }
}