/* === HERO SEKSTSIOONI PAIGUTUS JA TSENTREERIMINE === */

/* 1. Peamine konteiner, mis tsentreerib oma sisu */
.hero-wrapper {
  position: relative;
  display: grid;
  place-items: center; /* See rida tsentreerib sisu (hero-container) nii horisontaalselt kui ka vertikaalselt */
  min-height: 60vh; /* Annab sektsioonile piisavalt kõrgust. Muuda vastavalt vajadusele. */
  padding: 4rem 2rem 1rem 2rem;
  overflow: hidden; /* Peidab kõik, mis ulatub konteinerist väljapoole */
}

/* 2. Asetame tausta ja gradiendi absoluutselt konteineri taha */
.hero-background,
.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 3. Määrame kihtide järjekorra */
.hero-background {
  z-index: 2;
}

.hero-gradient {
  z-index: 1;
  background: linear-gradient(to top, #5f5cc5 0%, #18296f 100%);
}

/* 4. Sisu konteiner, mis on kõige peal */
.hero-container {
  position: relative;
  z-index: 3;
  text-align: center; /* See tagab, et tekst ise on oma konteineri sees keskel */
  color: white; /* Hele tekst tumedal taustal */
  width: 100%; /* Tagab, et konteiner on paindlik väiksematel ekraanidel */
  max-width: 800px; /* MÄÄRA MAKSIMAALNE LAIUS. See on kõige olulisem rida. Muuda väärtust vastavalt oma disainile. */
  margin-left: auto; /* Tsentreerib konteineri horisontaalselt */
  margin-right: auto; /* Tsentreerib konteineri horisontaalselt */
  padding: 1rem;
}

/* 5. Paneme pildi oma konteinerit täitma */
.hero-background picture,
.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Väldib pildi venitamist ja katab kogu ala */
}

.hero-subtitle p {
  font-size: 1.25rem;
}

.hero-cta-text p {
  font-size: 1.5rem;
}

/* --- Responsive Styles --- */

/* Small devices (e.g., phones, up to 576px) */
@media (max-width: 576px) {
  .hero-wrapper {
    min-height: 50vh; /* Make the hero section a bit shorter on small screens */
    padding: 2rem 1rem; /* Reduce padding */
  }

  .hero-subtitle p {
    font-size: 1.25rem; /* Smaller subtitle font size */
  }

  .hero-cta-text p {
    font-size: 1.2rem; /* Smaller CTA text font size */
  }

  .hero-container {
    padding: 0.5rem; /* Reduce inner padding for the content container */
  }
}

/* Medium devices (e.g., tablets, 577px to 768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .hero-wrapper {
    min-height: 55vh; /* Slightly taller than small screens */
    padding: 3rem 1.5rem; /* Adjust padding */
  }

  .hero-subtitle p {
    font-size: 1.15rem; /* Slightly larger subtitle */
  }

  .hero-cta-text p {
    font-size: 1.35rem; /* Slightly larger CTA text */
  }
}

/* Large devices (e.g., desktops, 769px to 992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .hero-wrapper {
    min-height: 65vh; /* Taller hero section */
    padding: 4.5rem 3rem; /* Increase padding */
  }

  .hero-subtitle p {
    font-size: 1.35rem; /* Larger subtitle */
  }

  .hero-cta-text p {
    font-size: 1.65rem; /* Larger CTA text */
  }
}

/* Extra large devices (e.g., large desktops, 993px and up) */
@media (min-width: 993px) {
  .hero-wrapper {
    min-height: 70vh; /* Even taller hero section for very large screens */
    padding: 5rem 4rem; /* More padding */
  }

  .hero-subtitle p {
    font-size: 1.5rem; /* Even larger subtitle */
  }

  .hero-cta-text p {
    font-size: 1.8rem; /* Even larger CTA text */
  }

  .hero-container {
    max-width: 900px; /* Allow content to be a bit wider on very large screens */
  }
}