.landing-storyteller-wrapper {
  width: 100vw;
  height: auto;
  aspect-ratio: var(--aspect-ratio-default);
  position: relative;
  display: block;
}

.landing-storyteller-background-color {
  background: linear-gradient(to top, #B07387 15%, #e49568 50%, #e49568 85%, #ab619e 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.landing-storyteller-image {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.landing-storyteller-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landing-storyteller-foreground-plants {
  position: absolute;
  top: 46.8%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.landing-storyteller-foreground-plants picture,
.landing-storyteller-foreground-plants img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.storyteller-container {
  position: absolute;
  top: 36%;
  left: 15%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 40%;
  color: white;
  text-align: center;
  hyphens: none;
}

.storyteller-container p {
  hyphens: none;
}


/* --- Desktop / Base Styles --- */
.storyteller-cta-container {
  position: absolute;
  top: 65%;
  left: 36%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 20vw; /* Muudetud: laius suhteline vaateaknaga */
  max-width: 320px; /* Lisa max-width, et see ei veniks liiga suureks */
  color: white;
  text-align: center; /* Muudetud: Algselt left, kuid cta puhul tihti center */
  background: linear-gradient(to bottom, #c579f9, #5a69ff);
  padding: 1vw; /* Muudetud: padding suhteline vaateaknaga */
  border-radius: 2rem; /* Võid jätta px või muuta vw-ks */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

  font-family: --character-dialogue-font, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.4vw; /* Muudetud: font-size suhteline vaateaknaga */
  line-height: 1.6; /* Hoia suhteline või kohanda vajadusel */
  font-weight: 400;
  letter-spacing: 0.1vw; /* Muudetud: letter-spacing suhteline vaateaknaga */
}



.storyteller-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.storyteller-content p {
  font-size: 1.25rem;
}



.storyteller-button-outer {
  position: absolute;
  left: 75%;
  bottom: 27%;
  transform: translate(-50%, 50%);
  padding: 0.3vw; /* Muudetud: padding suhteline ekraani laiusega */
  background-color: #4c42de;
  border-radius: 10px; /* Võib ka olla vh/vw */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 15vw; /* Muudetud: laius 15% vaateakna laiusest */
  height: 7vw; /* Muudetud: kõrgus 7% vaateakna laiusest */
  box-sizing: border-box;
}

.storyteller-button-inner:hover,
.storyteller-button-inner:focus {
  background-color: #1d4ed8;
  transform: scale(1.03);
  color: #fff
}


.storyteller-button-outer p {
  margin: 0;
  padding: 0;
}

.storyteller-button-inner {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 0;
  font-size: 2.5vw; /* Algne font-size, nüüd suhteline */
  text-transform: capitalize;
  color: white;
  border: 2px solid white;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-sizing: border-box;
}


.storyteller-pointing-arrow {
  position: absolute;
  left: 84%;
  bottom: 24%;
  transform: translate(-50%, 50%) scaleX(-1);
  width: 70px;
  height: 70px;
  z-index: 2;
  animation: move-diagonal 1s ease-in-out infinite alternate;
}

@keyframes move-diagonal {
  0% {
    transform: translate(-50%, 50%) scaleX(-1) translate(0, 0);
  }
  100% {
    transform: translate(-50%, 50%) scaleX(-1) translate(10px, -10px);
  }
}

.storyteller-pointing-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /*transform: scaleX(-1); /* vertikaalne peegeldus */
}

@media (max-width: 767px) {
  .landing-storyteller-wrapper {
    aspect-ratio: var(--aspect-ratio-mobile);
  }

  .landing-storyteller-background-color {
  background: linear-gradient(to top, #B07387 5%, #e49568 25%, #e49568 65%, #ab619e 85%, #ab619e 100%);
}


  .landing-storyteller-foreground-plants {
  position: absolute;
  top: 49%;
  left: 0;
}


  .storyteller-button-outer {
        left: 34%;
        transform: translateX(-50%) rotate(3deg);
        padding: 1vw;
        bottom: 15%;
        width: 30vw;
        height: 12vw;
        border-radius: 5px;
  }

  .storyteller-button-inner {
    font-size: 5vw; /* Suurem font mobiilis */
  }

  .storyteller-container {
    max-width: 90%;
    left: 5%;
    top: 10%;
    transform: translateY(-50%);
  }

  .storyteller-cta-container {
    top: 64%;
    left: 64%; /* Tsentreeri horisontaalselt mobiilis */
    transform: translate(-50%, -50%);
    width: 50vw; /* Suurem protsent, et mobiilis oleks loetav */
    padding: 2.1vw; /* Kohanda paddingut mobiilis */
    border-radius: 1.5rem; /* Vajadusel kohanda */
    font-size: 4vw; /* Suurenda fonti mobiilis, et see oleks loetav */
    letter-spacing: 0.2vw;
  }


  .storyteller-title {
    font-size: 1.5rem;
  }

  .storyteller-content {
    font-size: 1rem;
  }

  .storyteller-content p {
  font-size: var(--landing-paragraph);
}


.storyteller-pointing-arrow {
    position: absolute;
    left: 59%;
    bottom: 14%;
    transform: translate(-50%, 50%) scaleX(-1);
    width: 45px;
    height: 45px;
}
}

@media (min-width: 768px) and (max-width: 1024px) {

.landing-storyteller-background-color {
  background: linear-gradient(to top, #B07387 15%, #e49568 70%, #ab619e 85%,  #ab619e 100%);
}



   .landing-storyteller-wrapper {
    aspect-ratio: var(--aspect-ratio-pad);
  }
  
  .storyteller-container {
        max-width: 50%;
        left: 8%;
        top: 42%;
  }

  .storyteller-title {
    font-size: 1.75rem;
  }

  .storyteller-content {
    font-size: 1.25rem;
  }

.storyteller-cta-container {
    top: 67%;
    left: 70%; /* Kohanda asukohta tahvelarvutis */
    transform: translate(-50%, -50%);
    width: 30vw; /* Kohanda laiust tahvelarvutile */
    padding: 1.5vw; /* Kohanda paddingut tahvelarvutis */
    font-size: 2.2vw; /* Kohanda fonti tahvelarvutis */
    letter-spacing: 0.15vw;
  }


  .storyteller-button-outer {
        left: 34%;
        transform: translateX(-50%) rotate(3deg);
        padding: 0.5vw;
        bottom: 15%;
        width: 30vw;
        height: 13vw;
        border-radius: 8px;
  }


  .storyteller-button-inner {
  font-size: 4vw; /* Kohanda tahvelarvutis */
  }

  .storyteller-pointing-arrow {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translate(-50%, 50%) scaleX(-1);
    width: 70px;
    height: 70px;
  }

    .landing-storyteller-foreground-plants {
  position: absolute;
  top: 49.2%;
  left: 0;
}


}