/* Realistic photo hero backgrounds. Loaded after page-level CSS. */
:root {
  --hero-photo: url('/assets/visuals/realistic/alisynn-curation-hero.jpg');
}

:where(
  .ed-hero,
  .hero-card,
  .sel-hero,
  .topic-hero,
  .ti-hero,
  .cat-hero,
  .answer-hero,
  .answer-index-hero,
  .event-hero,
  .contact-hero,
  .method-hero,
  .policy-hero,
  .page-hero,
  .product-hero,
  .product-index-hero,
  .hero-article
) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #241a16 !important;
  background-image:
    linear-gradient(105deg, rgba(20, 14, 12, 0.82), rgba(41, 24, 22, 0.66) 46%, rgba(41, 24, 22, 0.34)),
    var(--hero-photo) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #fffaf2 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

:where(
  .ed-hero,
  .hero-card,
  .sel-hero,
  .topic-hero,
  .ti-hero,
  .cat-hero,
  .answer-hero,
  .answer-index-hero,
  .event-hero,
  .contact-hero,
  .method-hero,
  .policy-hero,
  .page-hero,
  .product-hero,
  .product-index-hero,
  .hero-article
)::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34)) !important;
  pointer-events: none !important;
}

:where(
  .ed-hero,
  .hero-card,
  .sel-hero,
  .topic-hero,
  .ti-hero,
  .cat-hero,
  .answer-hero,
  .answer-index-hero,
  .event-hero,
  .contact-hero,
  .method-hero,
  .policy-hero,
  .page-hero,
  .product-hero,
  .product-index-hero,
  .hero-article
)::after {
  z-index: 0 !important;
  opacity: 0.05 !important;
}

:where(
  .ed-hero,
  .hero-card,
  .sel-hero,
  .topic-hero,
  .ti-hero,
  .cat-hero,
  .answer-hero,
  .answer-index-hero,
  .event-hero,
  .contact-hero,
  .method-hero,
  .policy-hero,
  .page-hero,
  .product-hero,
  .product-index-hero,
  .hero-article
) > * {
  position: relative;
  z-index: 1;
}

:where(
  .ed-hero,
  .hero-card,
  .sel-hero,
  .topic-hero,
  .ti-hero,
  .cat-hero,
  .answer-hero,
  .answer-index-hero,
  .event-hero,
  .contact-hero,
  .method-hero,
  .policy-hero,
  .page-hero,
  .product-hero,
  .product-index-hero,
  .hero-article
) :where(h1, h2, p, small, .hero-subtitle, .hero-sub, .sel-hero-sub, .ed-hero-lede) {
  color: #fffaf2 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
}

:where(.hero-category, .hero-tag, .topic-hero-tag, .sel-hero-tag, .method-hero-label, .product-hero-badge) {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #fffaf2 !important;
  backdrop-filter: blur(6px);
}

.ed-hero {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: max(56px, calc((100vw - 1440px) / 2 + 56px)) !important;
  padding-right: max(56px, calc((100vw - 1440px) / 2 + 56px)) !important;
}

.ed-hero .ed-hero-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

@media (max-width: 768px) {
  .ed-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  :where(
    .hero-card,
    .sel-hero,
    .topic-hero,
    .ti-hero,
    .cat-hero,
    .answer-hero,
    .answer-index-hero,
    .event-hero,
    .contact-hero,
    .method-hero,
    .policy-hero,
    .page-hero,
    .product-hero,
    .product-index-hero,
    .hero-article
  ) {
    background-position: center !important;
  }
}