/* Kompaktná responzívna hero sekcia podľa vizuálnej predlohy. */
.hero {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: clamp(680px, 46vw, 720px);
  margin-inline: auto;
  padding: 0 !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(8, 47, 95, 0.08);
  background-color: #fffaf0 !important;
  background-image: url("../assets/images/hero-background.png") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
}

.hero::before,
.hero::after {
  display: none !important;
}

.hero .hero-grid {
  position: relative;
  display: block !important;
  width: min(calc(100% - 160px), 1440px) !important;
  max-width: 1440px !important;
  height: 100%;
  margin-inline: auto !important;
  padding: 0 !important;
}

.hero .hero-copy {
  position: absolute;
  z-index: 2;
  top: clamp(64px, 4.8vw, 76px);
  left: 28px;
  width: min(42%, 575px);
  padding: 0 !important;
}

.hero .hero-copy h1 {
  margin: 0 0 clamp(20px, 1.4vw, 25px) !important;
  font-size: clamp(50px, 3.55vw, 58px) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.045em !important;
}

.hero .hero-copy > p {
  width: min(100%, 430px);
  max-width: 430px !important;
  margin: 0 0 clamp(20px, 1.45vw, 24px) !important;
  font-size: clamp(16px, 1.05vw, 18px) !important;
  line-height: 1.52 !important;
  font-weight: 700 !important;
  text-wrap: balance;
}

.hero .date-pill {
  min-height: 64px !important;
  margin-bottom: clamp(20px, 1.4vw, 24px) !important;
  padding-inline: clamp(19px, 1.4vw, 23px) !important;
  gap: 15px !important;
  border-radius: 10px !important;
}

.hero .date-pill svg {
  width: 28px !important;
  height: 28px !important;
}

.hero .date-pill strong {
  font-size: clamp(20px, 1.42vw, 23px) !important;
}

.hero .hero-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(14px, 1.1vw, 18px) !important;
}

.hero .hero-actions .button {
  min-width: clamp(225px, 15.7vw, 250px) !important;
  min-height: 64px !important;
  padding-inline: clamp(20px, 1.5vw, 25px) !important;
  font-size: clamp(17px, 1.2vw, 19px) !important;
  border-radius: 9px !important;
}

.hero .hero-actions .button-outline {
  min-width: clamp(215px, 15vw, 240px) !important;
}

.hero .hero-visual {
  display: none !important;
}

.hero .quick-facts {
  position: absolute !important;
  z-index: 3;
  margin: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-top: clamp(270px, 43vw, 350px) !important;
    background-size: auto clamp(300px, 47vw, 390px) !important;
    background-position: 68% 0 !important;
  }

  .hero .hero-grid {
    width: min(calc(100% - 48px), 720px) !important;
    height: auto;
    padding: 28px 0 24px !important;
  }

  .hero .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .hero .hero-copy h1 {
    max-width: 680px;
    font-size: clamp(40px, 6.4vw, 52px) !important;
  }

  .hero .hero-copy > p {
    width: auto;
    max-width: 520px !important;
    font-size: 17px !important;
    text-wrap: pretty;
  }

  .hero .hero-actions {
    flex-wrap: wrap !important;
  }

  .hero .quick-facts {
    position: static !important;
    width: min(calc(100% - 48px), 680px) !important;
    margin: 0 auto 28px !important;
    transform: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }
}

@media (max-width: 700px) {
  .hero {
    padding-top: 265px !important;
    background-size: auto 295px !important;
    background-position: 69% 0 !important;
  }

  .hero .hero-grid {
    width: min(calc(100% - 32px), 620px) !important;
    padding: 26px 0 21px !important;
  }

  .hero .hero-copy h1 {
    font-size: clamp(36px, 8.6vw, 48px) !important;
  }

  .hero .hero-actions .button {
    flex: 1 1 210px;
  }

  .hero .quick-facts {
    width: min(calc(100% - 32px), 620px) !important;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 228px !important;
    background-size: auto 258px !important;
    background-position: 70% 0 !important;
  }

  .hero .hero-grid {
    width: min(calc(100% - 24px), 520px) !important;
    padding-top: 22px !important;
  }

  .hero .hero-copy h1 {
    font-size: clamp(33px, 10vw, 43px) !important;
    line-height: 1.06 !important;
  }

  .hero .hero-copy > p {
    font-size: 16px !important;
  }

  .hero .date-pill {
    width: 100% !important;
    justify-content: center;
  }

  .hero .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero .hero-actions .button {
    width: 100%;
    min-width: 0 !important;
  }

  .hero .quick-facts {
    width: min(calc(100% - 24px), 520px) !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}