/*
 * Probna tamna varijanta uvodne sekcije Početne.
 * Izvorne postavke ostaju netaknute u style.css.
 * Za povratak ukloniti poveznicu na ovu datoteku iz index.html.
 */

.home-page .hero::before {
  background: linear-gradient(90deg, rgba(8, 20, 14, 0.75) 0%, rgba(8, 20, 14, 0.6) 30%, rgba(8, 20, 14, 0) 80%);
}

.home-page .hero::after { background: transparent; }
.home-page .hero .eyebrow { color: #e7cfad; }
.home-page .hero h1 {
  color: var(--paper);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(0, 0, 0, 0.3);
}
.home-page .hero h1 em { color: #e7cfad; }
.home-page .hero-lead {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

.home-page .hero .button--primary {
  color: var(--forest);
  border-color: var(--paper);
  background: var(--paper);
}
.home-page .hero .button--primary:hover { border-color: #e7cfad; background: #e7cfad; }
.home-page .hero .button--secondary {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.home-page .hero .button--secondary:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.12); }

.home-page .hero .hero-facts {
  /* Jednaki vodoravni razmaci uz rubove i između podataka. */
  --fact-spacing: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  width: fit-content;
  max-width: 100%;
  padding-inline: var(--fact-spacing);
  gap: var(--fact-spacing);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(8, 20, 14, 0.5);
}
.home-page .hero-facts dt { color: var(--paper); }
.home-page .hero-facts dd { color: rgba(255, 255, 255, 0.8); }

@media (max-width: 768px) {
  .home-page .hero::before {
    background: linear-gradient(180deg, rgba(8, 20, 14, 0.58), rgba(8, 20, 14, 0.72));
  }

}