/* Component styles are dynamically loaded via JavaScript */
/* Add any EDS-specific Component overrides here if needed apart from min.css */
@import url("../../../platform-blocks/primary-hero/primary-hero.min.css");

/* Increased specificity to override platform styles loaded via JS */
.primary-hero.primary-hero [class*="hero"] .lds-layout-container {
  row-gap: var(--lds-g-spacing-300);
}

@media (max-width: 767px) {
  .primary-hero.primary-hero .btn-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

.primary-hero[data-block-status="loading"] * {
  display: none;
}

.primary-hero[data-block-status="loading"] {
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  min-height: 900px;
  display: flex;
  align-items: center;
  width: 100%;
}

.primary-hero[data-block-status="loading"] * {
  color: #fff;
  font-family: var(--lds-g-font-family-sans-serif-wide) !important;
}

/* Apply blackish gradient when text color is white (light container) */
.primary-hero .container.light ~ .dimmer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
}

.primary-hero .title.Garamond * {
  font-family: var(--lds-g-font-family-serif) !important;
}

.primary-hero .title.Ringside * {
  font-family: var(--lds-g-font-family-sans-serif-wide) !important;
}

/* Override cta.css filters to keep arrow white */
.primary-hero .cta-button-outline .icon-black-arrow,
.primary-hero .cta-button-outline:hover .icon-black-arrow,
.primary-hero .cta-button-outline:focus-visible .icon-black-arrow,
.primary-hero .cta-button-outline:active .icon-black-arrow {
  filter: brightness(0) invert(1) !important;
}
.primary-hero-wrapper .primary-hero .hero {
  background: var(--desktop-bg) no-repeat center center / cover !important;
}