/* webbond.ai – Bitti kurkistukset
 * WAIT_PUBLISH: piilotettu kunnes body.wbai-hahmo-on
 * Julkaisu: define('WBAI_HAHMO', true) wp-configissa TAI ?wbai_hahmo=1 esikatselu
 * 2026-10-28: UKK-mobiili – ei peitä FAQ-tekstiä (reunakurkistus / piilotus)
 */
.wbai-hahmo{
  position:absolute;
  pointer-events:none;
  z-index:0;
  line-height:0;
  user-select:none;
  display:none!important; /* WAIT_PUBLISH */
}
body.wbai-hahmo-on .wbai-hahmo{display:block!important}
.wbai-hahmo img,
.wbai-hahmo svg{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  /* ohita .wbai .hero svg -sääntö */
  position:static!important;
  right:auto!important;
  top:auto!important;
  opacity:1!important;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
}

/* Hero: vilkuttaa – oikea reuna, CTA-nappien yläpuolella/ulkopuolella */
.wbai .hero{position:relative}
.wbai-hahmo--hero{
  right:-36px;
  bottom:28px;
  width:148px;
  opacity:.92;
  transform:rotate(-6deg);
  z-index:2;
}
@media (min-width:900px){
  .wbai-hahmo--hero{width:180px;right:-48px;bottom:40px}
}

/* UKK: miettii – vasen reuna, tekstisisältö aina hahmon päällä */
#ukk{position:relative;overflow:visible}
#ukk > *:not(.wbai-hahmo){
  position:relative;
  z-index:1;
}
.wbai-hahmo--ukk{
  left:-52px;
  top:16px;
  width:120px;
  opacity:.75;
  transform:rotate(4deg);
  z-index:0;
}
@media (min-width:900px){
  .wbai-hahmo--ukk{width:148px;left:-64px;top:28px;opacity:.85}
}

/* Chat-demo: puhekupla – kortin oikea yläkulma */
#wbai-chat{position:relative;overflow:visible}
.wbai-hahmo--chat{
  right:-18px;
  top:-36px;
  width:110px;
  opacity:.95;
  transform:rotate(8deg);
  z-index:3;
}
@media (min-width:900px){
  .wbai-hahmo--chat{width:132px;right:-28px;top:-44px}
}

/* Kartoitus/CTA: suurennuslasi – cta-wrap oikea reuna, ei peitä lomaketta */
.wbai .cta-wrap{position:relative}
.wbai-hahmo--kartoitus{
  right:-22px;
  bottom:-18px;
  width:120px;
  opacity:.9;
  transform:rotate(-5deg);
  z-index:0;
}
@media (min-width:900px){
  .wbai-hahmo--kartoitus{width:150px;right:-36px;bottom:-24px}
}

/* Tabletti/mobiili ≤899: UKK vain ohut reunakurkistus */
@media (max-width:899px){
  .wbai-hahmo--ukk{
    width:56px;
    left:-44px; /* ~12px näkyy reunasta */
    top:2px;
    opacity:.5;
  }
}

/* Mobiili ≤700: pienemmät; UKK pois – peitti FAQ-otsikon/tekstin */
@media (max-width:700px){
  .wbai-hahmo--hero{width:96px;right:-20px;bottom:12px;opacity:.75}
  body.wbai-hahmo-on .wbai-hahmo--ukk{display:none!important}
  .wbai-hahmo--chat{width:78px;right:-10px;top:-28px}
  .wbai-hahmo--kartoitus{width:88px;right:-12px;bottom:-10px;opacity:.75}
}
@media (max-width:420px){
  /* erittäin kapea: jätä vain hero-kurkistus */
  body.wbai-hahmo-on .wbai-hahmo--chat,
  body.wbai-hahmo-on .wbai-hahmo--kartoitus{display:none!important}
}