/*
 * Curated, block-local styles for the Reher Blog Hero.
 */

.reher-blog-hero {
  overflow-wrap: anywhere;
}

@supports (container-type: size) {
  .reher-blog-hero .reher-blog-hero__native-cover {
    /* Reserve the text-driven card while native auto-sizes sees its cover raster. */
    container-type: size;
  }

  .reher-blog-hero .reher-blog-hero__native-cover > [data-reher-cover-auto="true"] {
    inset: auto;
    top: 50%;
    left: 50%;
    width: max(100cqw, calc(100cqh * var(--reher-blog-image-ratio)));
    height: auto;
    max-width: none;
    aspect-ratio: var(--reher-blog-image-ratio);
    translate: -50% -50%;
  }
}

.reher-blog-hero .reher-blog-hero__media-overlay {
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 90%) 0%,
    rgb(0 0 0 / 64%) 52%,
    rgb(0 0 0 / 60%) 100%
  );
}

.reher-blog-hero .reher-blog-hero__image-placeholder {
  background:
    radial-gradient(circle at 72% 24%, color-mix(in oklab, var(--primary) 24%, transparent), transparent 36%),
    linear-gradient(135deg, var(--color-taupe-300), var(--color-taupe-600));
}

.dark .reher-blog-hero .reher-blog-hero__image-placeholder {
  background:
    radial-gradient(circle at 72% 24%, color-mix(in oklab, var(--primary) 30%, transparent), transparent 36%),
    linear-gradient(135deg, var(--color-taupe-700), var(--color-taupe-950));
}