/* Informačné karty zarovnané s ľavým okrajom hero obsahu. */
.hero .date-pill {
  margin-top: clamp(42px, 3.2vw, 52px) !important;
}

.hero .quick-facts {
  left: 108px !important;
  bottom: clamp(30px, 2.2vw, 38px) !important;
  width: min(calc(100% - 128px), 1104px) !important;
  transform: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(10px, 0.94vw, 15px) !important;
}

.hero .quick-facts article {
  min-height: clamp(64px, 4.25vw, 74px) !important;
  padding: 9px clamp(12px, 0.94vw, 16px) !important;
  gap: clamp(12px, 1vw, 17px) !important;
  border: 1px solid rgba(8, 47, 95, 0.075) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.985) !important;
  box-shadow:
    0 6px 15px rgba(8, 47, 95, 0.10),
    0 1px 3px rgba(8, 47, 95, 0.05) !important;
}

.hero .fact-icon {
  width: clamp(45px, 3.05vw, 53px) !important;
  height: clamp(45px, 3.05vw, 53px) !important;
  flex: 0 0 clamp(45px, 3.05vw, 53px) !important;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hero .fact-icon.teal-bg {
  background: linear-gradient(145deg, #2ab7b8, #159da4) !important;
}

.hero .fact-icon.orange-bg {
  background: linear-gradient(145deg, #ff7b34, #ff5f22) !important;
}

.hero .fact-icon.green-bg {
  background: linear-gradient(145deg, #75b987, #5da66f) !important;
}

.hero .quick-facts strong {
  font-size: clamp(15px, 1.04vw, 18px) !important;
  line-height: 1.04 !important;
}

.hero .quick-facts small {
  margin-top: 2px !important;
  font-size: clamp(12px, 0.77vw, 15px) !important;
  line-height: 1.05 !important;
}

/* V karte miesta sú obe slová „Banská Bystrica“ tučné. */
.hero .quick-facts article:last-child small {
  font-weight: 900 !important;
}

@media (max-width: 900px) {
  .hero .date-pill {
    margin-top: 20px !important;
  }

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

@media (max-width: 560px) {
  .hero .quick-facts {
    width: min(calc(100% - 24px), 414px) !important;
    grid-template-columns: 1fr !important;
  }

  .hero .quick-facts article {
    min-height: 69px !important;
  }
}