.page-hero {
  background: var(--color-surface);
  border-radius: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) 0
    clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) 0;
  min-height: clamp(19.5rem, 17.675rem + 9.125vw, 28.625rem);
  display: flex;
}

.page-hero--black-coffee {
  background: var(--color-primary);
}

.page-hero--coffee {
  background: var(--color-accent-green);
}

.page-hero--accessories {
  background: var(--color-primary-blog);
}

.page-hero--cups {
  background: var(--color-hero-cups);
}

.page-hero--blog {
  background: var(--color-hero-blog);
}

.page-hero--blog .page-hero__media {
  width: clamp(16.25rem, 12rem + 21.25vw, 37.5rem);
}

.page-hero__wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.875rem, 1rem + 4.375vw, 6.25rem);
  text-align: center;
  padding: var(--space-l) 0;
}

.page-hero__title {
  font-family: var(--font-body-extrabolt);
  font-size: clamp(2.375rem, 1.475rem + 4.5vw, 6.875rem);
  line-height: clamp(2.625rem, 1.375rem + 6.25vw, 8.875rem);
  text-transform: none;
}

.page-hero__title--black-coffee,
.page-hero__title--accessories {
  color: var(--color-text-invert);
}

.page-hero__title--cups {
  color: var(--color-surface-alt);
}

.page-hero__title--coffee {
  color: var(--color-primary);
}

.page-hero__media {
  width: clamp(8.375rem, 6.65rem + 8.625vw, 17rem);
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .page-hero__inner {
    flex-direction: row;
    align-items: center;
  }
}

/* ==========================================================================
   Category hero motion (js/modules/categoryHero.js)
   ========================================================================== */

/* Pre-hide before first paint so the entrance has no flash. Lifted by
   .is-hero-ready; the failsafe animation reveals everything anyway if the
   JS never runs. Reduced motion: no pre-hide at all. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-category-hero]:not(.is-hero-ready) {
    clip-path: inset(100% 0 0 0);
    animation: category-hero-failsafe 0s linear 2.5s forwards;
  }

  html.js [data-category-hero]:not(.is-hero-ready) .page-hero__title,
  html.js [data-category-hero]:not(.is-hero-ready) .page-hero__media,
  html.js [data-category-hero]:not(.is-hero-ready) ~ .breadcrumbs {
    opacity: 0;
    animation: category-hero-failsafe 0s linear 2.5s forwards;
  }
}

@keyframes category-hero-failsafe {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.page-hero__title-mask {
  display: block;
  overflow: hidden;
}

[data-category-hero] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Pointer light (fine pointer only): a very large, very faint warm wash that
   only lifts the category colour by a few percent. */
.page-hero__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-hero__light-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 110vw;
  max-width: 1600px;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 246, 232, 0.08), transparent);
  will-change: transform;
}

[data-category-hero].is-pointer-active .page-hero__light {
  opacity: 1;
}