.c-hero {
  display: grid;
  overflow: hidden;
}

@media (min-width: 64rem) {
  .c-hero {
    grid-template-columns: 1fr 1.15fr;
    min-height: clamp(28rem, 38vw, 35rem);
    align-items: stretch;
  }
}

.c-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: clamp(var(--space-10), 8vw, var(--space-16)) clamp(var(--gutter), 8%, 5rem);
  padding-left: clamp(var(--gutter), 8%, 5rem);
  background: var(--color-accent-fill);
  color: var(--color-white);
}

.c-hero__eyebrow {
  color: var(--color-white) !important;
  opacity: .9;
}

.c-hero__rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.c-hero__stars {
  color: var(--color-white);
  font-size: 1.1875rem;
  letter-spacing: .125rem;
}

.c-hero__rating-label {
  font-weight: 800;
  font-size: var(--text-small);
  color: var(--color-white);
}

/* nowrap only once there's room for it. "Mojo Coffee" set at the display
   size is ~308px wide, which clears a 390px phone but not a 320px one,
   and any longer hero title would blow out the panel at every phone
   width — so the no-wrap treatment starts at the tablet breakpoint. */
.c-hero__heading {
  font-size: var(--text-display-xl);
}

@media (min-width: 40rem) {
  .c-hero__heading {
    white-space: nowrap;
  }
}

.c-hero__body {
  max-width: 30ch;
  color: var(--color-white);
  opacity: .92;
  font-weight: 500;
  font-size: var(--text-lead);
  line-height: 1.55;
}

.c-hero__panel .wp-block-buttons {
  gap: var(--space-3) !important;
  margin-top: var(--space-2);
}

/* Learn More keeps the outline treatment, but re-tinted white: the
   ink-on-light colors it uses elsewhere (e.g. problem-need-state.php)
   would be near-illegible on this now-ember-600 panel. */
.c-hero__panel .c-button--outline {
  --button-color: var(--color-white);
  --button-border: var(--color-white);
}

.c-hero__panel .c-button--outline:hover:not(:disabled) {
  --button-bg: var(--color-white);
  --button-color: var(--color-accent);
}

/* Plain CSS background (not a wp:image) so the photo always covers this
   panel regardless of its intrinsic aspect ratio — a wp:image's figure
   wrapper doesn't stretch to the grid row's height by default, so the
   img's own object-fit: cover never had a definite box to cover,
   leaving a gap under the photo when its aspect ratio didn't happen to
   match the panel's. Same full-bleed-background approach as
   .c-newsletter / .c-testimonials. */
.c-hero__media {
  position: relative;
  min-height: 20rem;
  background: url("../../images/hero-mojo-lineup.webp") center / cover no-repeat, linear-gradient(135deg, var(--color-tan-300), var(--color-tan-500));
}

/* Photo first while the hero is stacked. The panel comes first in the
   markup because that is the order the two-column layout needs (copy
   left, photo right) and the order the content should be read in — the
   <h1> stays the first thing in the section for assistive tech and the
   editor. Stacked, though, leading with the product shot is the
   stronger opening, so the visual order is flipped here only. Safe to
   do with `order`: .c-hero__media is an empty div carrying a CSS
   background, so there is no text or focusable control whose reading or
   tab order could drift away from what is on screen. */
@media (max-width: 63.9375rem) {
  .c-hero__media {
    order: -1;
  }
}

@media (max-width: 47.9375rem) {
  /* Stacked buttons: side by side they were 2 x ~11rem plus a gap, which
     overran the panel and clipped "Learn More" at the viewport edge. */
  .c-hero__panel .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .c-hero__panel .wp-block-button__link,
  .c-hero__panel .c-button {
    width: 100%;
  }

  .c-hero__body {
    max-width: none;
  }

  .c-hero__media {
    min-height: 15rem;
    aspect-ratio: 4 / 3;
  }
}

/* The 20px optical inset that lines the hero copy up with the sections
   below it. Only meaningful in the side-by-side layout — stacked, the
   panel spans the viewport and the inset just knocks the copy off the
   page's gutter. This has to come after the base .c-hero__panel rule:
   both are single-class selectors, so source order decides. */
@media (min-width: 64rem) {
  .c-hero__panel {
    padding-left: calc(clamp(var(--gutter), 8%, 5rem) + 20px);
  }
}