/*
 * Dark appearance overrides.
 * Light appearance retains the existing hero-light.css settings.
 */

.pc-hero-appearance-dark .pc-hero {
  --pc-black-start: 0.94;
  --pc-black-middle: 0.78;
  --pc-black-end: 0.22;
  --pc-black-bottom: 0.75;

  background: #151515;
  color: #fff;
}

/* Dark overlay strength presets. */

.pc-hero-appearance-dark .pc-hero--soft {
  --pc-black-start: 0.90;
  --pc-black-middle: 0.62;
  --pc-black-end: 0.12;
  --pc-black-bottom: 0.60;
}

.pc-hero-appearance-dark .pc-hero--strong {
  --pc-black-start: 0.99;
  --pc-black-middle: 0.90;
  --pc-black-end: 0.45;
  --pc-black-bottom: 0.90;
}

/* Replace the white gradients when Dark is selected. */

.pc-hero-appearance-dark .pc-hero .pc-hero__media::after {
  opacity: 1;

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

/* White, upright text over the dark photograph. */

.pc-hero-appearance-dark .pc-hero__title,
.pc-hero-appearance-dark .pc-hero__statement,
.pc-hero-appearance-dark .pc-hero .pc-explore {
  color: #fff;
  font-style: normal;
}


/* Dark decorative sweep. */

.pc-hero-appearance-dark .pc-hero__sweep {
  background: rgb(15 15 15 / 94%);
  opacity: 1;
}

/* Retain the statement's current 20% backing strength. */

.pc-hero-appearance-dark .pc-hero__statement {
  background: rgb(21 21 21 / 20%);
}

/* Extra photograph coverage on narrow screens. */

@media (max-width: 35rem) {
  .pc-hero-appearance-dark .pc-hero {
    --pc-black-end: 0.72;
  }
}