/* --- Üldised stiilid (Nüüd on need vaikimisi desktopi jaoks) --- */
.story-character-callout-wrapper {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* --- Põhikonteiner --- */
.story-character-callout-content {
  position: relative; 
  border-radius: 11%;
  overflow: hidden; 
  width: 100%;
  z-index: 0;
  /* Desktop stiilid */
  height: 350px; 
}

/* --- Ornamendid --- */
.story-character-callout-ornament {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}

.story-character-callout-ornament.upper {
  top: 13px;
  transform: translateY(-50%) rotate(180deg); 
}

.story-character-callout-ornament.bottom {
  bottom: 10px;
  transform: translateY(50%);
}

.story-character-callout-ornament img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Pildi ja teksti paigutus --- */
.story-character-callout-image {
  position: absolute;
  top: 110%;
left: 79%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.story-character-callout-image figure {
  position: absolute;
  margin: 0;
  z-index: 2; 
  transform: translate(-50%, -50%) rotate(-8deg); 
  pointer-events: auto;
  /* Desktop stiilid */
  width: 320px;
}

.story-character-callout-image figure img {
  display: block;
  width: 100%;
  height: auto;
}

.story-character-callout-text {
  position: absolute;
  top: -65%;
    right: 82%;
  z-index: 1; 
  transform: translate(-50%, -50%);
  background: var(--character-dialogue-color);
  backdrop-filter: blur(5px);
  padding: 20px;
  border-radius: 35px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  pointer-events: auto;
  width: 350px;
}

.story-character-callout-text p {
  font-family: var(--character-dialogue-font);
  text-align: center;
  line-height: 1.6rem;
  margin-bottom: 1rem;
}


/* --- Mobiili stiilid (kuni 767px laiuseni) --- */
@media (max-width: 767px) {
  
  .story-character-callout-content {
    height: 440px; 
    border-radius: 6%;
  }

  .story-character-callout-image figure {
    top: 105%;
    left: 75%;
    width: 300px;
  }

  .story-character-callout-text {
    top: 34%;
    left: 43%;
    width: 300px;
  }
  
  .story-character-callout-text p {
    text-align: center;
  }

  .story-character-callout-ornament.upper {
  top: 3px;
}


  .story-character-callout-ornament.bottom {
  bottom: 6px;
  transform: translateY(50%);
}

.story-character-callout-image {
  position: absolute;
  top: 0%;
left: 1%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

}