/* =========================================================
   IRF HERO HORIZON
   Komponente: IRF-HERO-001
   Version: 1.1.0
   Abhängigkeit: irf-core.css
   ========================================================= */

.irf-horizon {
  /* Nur Hero-spezifische Konfiguration */
  --irf-horizon-image: none;
  --irf-horizon-overlay-start: rgba(0, 30, 50, 0.34);
  --irf-horizon-overlay-end: rgba(0, 30, 50, 0.88);
  --irf-horizon-min-height: clamp(430px, 58vw, 650px);
  --irf-horizon-image-position: center 48%;

  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  width: 100%;
  min-height: var(--irf-horizon-min-height);
  overflow: hidden;

  /* Oben gerade, unten weich abgerundet */
  border-radius:
    0 0
    var(--irf-radius-hero, 48px)
    var(--irf-radius-hero, 48px);

  color: var(--irf-white, #ffffff);
  background:
    linear-gradient(
      180deg,
      var(--irf-horizon-overlay-start),
      var(--irf-horizon-overlay-end)
    ),
    var(--irf-horizon-image)
      var(--irf-horizon-image-position) / cover no-repeat,
    var(
      --irf-gradient-ocean-deep,
      linear-gradient(145deg, #002d49 0%, #003a5d 45%, #006b91 100%)
    );
}

.irf-horizon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(112, 214, 210, 0.23),
      transparent 32%
    ),
    linear-gradient(
      115deg,
      rgba(0, 58, 93, 0.10),
      rgba(0, 58, 93, 0.58)
    );
  pointer-events: none;
}

.irf-horizon::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -90px;
  z-index: -1;
  height: 190px;
  border-radius: 50% 50% 0 0;
  background: rgba(112, 214, 210, 0.12);
  filter: blur(1px);
  transform: rotate(-1deg);
  pointer-events: none;
}

.irf-horizon__inner {
  width: min(
    calc(100% - 32px),
    var(--irf-content-large, 1100px)
  );
  margin-inline: auto;
  padding:
    clamp(70px, 10vw, 130px)
    0
    clamp(44px, 7vw, 80px);
}

.irf-horizon__panel {
  max-width: 790px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--irf-glass-border, rgba(255, 255, 255, 0.28));
  border-radius: var(--irf-radius-xlarge, 30px);
  background:
    linear-gradient(
      145deg,
      rgba(0, 58, 93, 0.54),
      rgba(0, 30, 50, 0.36)
    );
  box-shadow: var(--irf-shadow-large, 0 24px 60px rgba(0, 40, 65, 0.24));

  -webkit-backdrop-filter: var(--irf-blur-medium, blur(18px)) saturate(125%);
  backdrop-filter: var(--irf-blur-medium, blur(18px)) saturate(125%);
}

.irf-horizon__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--irf-space-5, 20px);
  padding: 8px 13px;
  border: 1px solid rgba(112, 214, 210, 0.42);
  border-radius: var(--irf-radius-round, 999px);
  background: rgba(16, 169, 183, 0.15);
  color: #dffdfb;
  font-family: var(--irf-font-family, Arial, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.irf-horizon__badge-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--irf-light-turquoise, #70d6d2);
  box-shadow: 0 0 0 5px rgba(112, 214, 210, 0.12);
}

.irf-horizon__title {
  max-width: 13ch;
  margin: 0;
  color: var(--irf-white, #ffffff);
  font-family: var(--irf-font-family, Arial, sans-serif);
  font-size: clamp(2.35rem, 7vw, 5.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.irf-horizon__subtitle {
  max-width: 650px;
  margin: var(--irf-space-5, 20px) 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--irf-font-family, Arial, sans-serif);
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  font-weight: 400;
  line-height: var(--irf-line-height-normal, 1.55);
}

.irf-horizon__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--irf-space-3, 12px);
  margin-top: var(--irf-space-7, 32px);
}

.irf-horizon__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--irf-radius-round, 999px);

  font-family: var(--irf-font-family, Arial, sans-serif);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;

  transition:
    transform var(--irf-transition-fast, 0.2s ease),
    box-shadow var(--irf-transition-fast, 0.2s ease),
    background var(--irf-transition-fast, 0.2s ease),
    border-color var(--irf-transition-fast, 0.2s ease),
    color var(--irf-transition-fast, 0.2s ease);
}

/* Primärer Button */

.irf-horizon__button--primary {
  color: var(--irf-dark-blue, #003a5d);

  background:
    linear-gradient(
      135deg,
      var(--irf-light-turquoise, #70d6d2),
      var(--irf-white, #ffffff)
    );

  box-shadow: 0 12px 30px rgba(16, 169, 183, 0.26);
}

.irf-horizon__button--primary:link,
.irf-horizon__button--primary:visited,
.irf-horizon__button--primary:hover,
.irf-horizon__button--primary:focus-visible {
  color: var(--irf-dark-blue, #003a5d);
}

.irf-horizon__button--primary:hover,
.irf-horizon__button--primary:focus-visible {
  box-shadow: 0 16px 36px rgba(16, 169, 183, 0.34);
}

/* Sekundärer Button */

.irf-horizon__button--secondary {
  color: var(--irf-white, #ffffff);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);

  -webkit-backdrop-filter: var(--irf-blur-small, blur(10px));
  backdrop-filter: var(--irf-blur-small, blur(10px));
}

.irf-horizon__button--secondary:link,
.irf-horizon__button--secondary:visited,
.irf-horizon__button--secondary:hover,
.irf-horizon__button--secondary:focus-visible {
  color: var(--irf-white, #ffffff);
}

.irf-horizon__button--secondary:hover,
.irf-horizon__button--secondary:focus-visible {
  border-color: rgba(112, 214, 210, 0.65);
  background: rgba(112, 214, 210, 0.13);
}

/* Gemeinsame Zustände */

.irf-horizon__button:hover,
.irf-horizon__button:focus-visible {
  transform: translateY(-2px);
}

.irf-horizon__button:focus-visible {
  outline: 3px solid var(--irf-yellow, #ffd447);
  outline-offset: 3px;
}

.irf-horizon.is-ready .irf-horizon__panel {
  animation:
    irf-horizon-enter
    700ms
    cubic-bezier(0.2, 0.7, 0.2, 1)
    both;
}

@keyframes irf-horizon-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .irf-horizon {
    --irf-horizon-min-height: 500px;
    --irf-horizon-image-position: center center;
  }

  .irf-horizon__inner {
    width: min(
      calc(100% - 22px),
      var(--irf-content-large, 1100px)
    );
    padding-bottom: 22px;
  }

  .irf-horizon__panel {
    padding: 24px 20px;
    border-radius: var(--irf-radius-large, 24px);
  }

  .irf-horizon__title {
    max-width: 100%;
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }

  .irf-horizon__actions {
    flex-direction: column;
  }

  .irf-horizon__button {
    width: 100%;
    color: var(--irf-white, #ffffff);
  }
  
  .irf-horizon__button:visited,
  .irf-horizon__button:hover,
  .irf-horizon__button:focus {
    color: var(--irf-white, #ffffff);
  }
}

@media (prefers-reduced-motion: reduce) {
  .irf-horizon.is-ready .irf-horizon__panel,
  .irf-horizon__button {
    animation: none;
    transition: none;
  }
}