/* White-overlay presentation for the shared homepage hero. */

.pc-hero {
  --pc-white-start: 0.98;
  --pc-white-middle: 0.68;
  --pc-white-end: 0.20;
  --pc-white-bottom: 0.68;

  background: var(--pc-surface, #faf8f5);
  color: var(--pc-text, #363636);
}

.pc-hero--soft {
  --pc-white-start: 0.96;
  --pc-white-middle: 0.50;
  --pc-white-end: 0.10;
  --pc-white-bottom: 0.55;
}

.pc-hero--strong {
  --pc-white-start: 1;
  --pc-white-middle: 0.85;
  --pc-white-end: 0.40;
  --pc-white-bottom: 0.82;
}
/*
 * This selector overrides the previous dark overlay,
 * including its strength and mobile rules.
 */
.pc-hero .pc-hero__media::after {
  opacity: 1;

  background:
    linear-gradient(
      90deg,
      rgb(255 255 255 / var(--pc-white-start)) 0%,
      rgb(255 255 255 / var(--pc-white-middle)) 45%,
      rgb(255 255 255 / var(--pc-white-end)) 100%
    ),
    linear-gradient(
      0deg,
      rgb(255 255 255 / var(--pc-white-bottom)),
      transparent 75%
    );
}

/* Upright headings and editorial statement. */

.pc-hero__title,
.pc-hero__statement {
  color: var(--pc-heading, #242424);
  font-style: normal;
}


.pc-explore {
  color: var(--pc-text, #363636);
}

/* Replace the dark decorative sweep with a light surface. */

.pc-hero__sweep {
  background: var(--pc-surface-alt, #f5e8e9);
  opacity: 0.94;
}


/* Stronger coverage behind text on narrow screens. */

@media (max-width: 35rem) {
  .pc-hero {
    --pc-white-end: 0.9;
  }
}

/* Bottom-right statement: separate from the navigation rules. */

.pc-hero__statement {
  inline-size: fit-content;
  max-inline-size: min(100%, 16ch);
  padding: 1rem 1.15rem;
  border-radius: 0.35rem;

  background: var(--pc-surface, #faf8f5);
  background: color-mix(
    in srgb,
    var(--pc-surface, #faf8f5) 20%,
    transparent
  );

  color: var(--pc-heading, #242424);
  font-style: normal;
  line-height: 1.3;

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}