/* A hero dekoratív síkformái (DESIGN.md formanyelv: kör, döntött téglalap, háromszög,
   ötszög, tizenhat ágú csillag — clip-path-tal, árnyék és színátmenet nélkül).
   A formák a tartalom alatt vannak, és soha nem takarhatják a szöveget: a szélességük
   vw-alapú, a szövegoszlop pedig korlátozott — lásd hero.css. */

.hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__shapes span {
  position: absolute;
  display: block;
}

/* mustársárga ötszög — bal fent */
.shape--pent {
  left: -4vw;
  top: -3vw;
  width: 18vw;
  height: 17vw;
  max-width: 250px;
  max-height: 235px;
  background: var(--f-mustard);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

/* világoskék kör — jobb fent */
.shape--sky {
  right: 3vw;
  top: -6vw;
  width: 19vw;
  height: 19vw;
  max-width: 270px;
  max-height: 270px;
  border-radius: 50%;
  background: var(--f-sky);
}

/* zöld háromszög — bal oldal, a gombsor magasságában */
.shape--tri {
  left: -2vw;
  bottom: 14%;
  width: 11vw;
  height: 12vw;
  max-width: 165px;
  max-height: 180px;
  background: var(--f-mint);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotate(-12deg);
}

/* korallpiros kör — bal lent */
.shape--coral {
  left: -5vw;
  bottom: -7vw;
  width: 21vw;
  height: 21vw;
  max-width: 290px;
  max-height: 290px;
  border-radius: 50%;
  background: var(--f-coral);
}

/* tizenhat ágú csillag — jobb lent */
.shape--star {
  right: 4vw;
  bottom: -5vw;
  width: 17vw;
  height: 17vw;
  max-width: 240px;
  max-height: 240px;
  background: var(--f-primary);
  clip-path: polygon(50% 0, 63% 22%, 88% 12%, 84% 38%, 100% 50%, 84% 62%, 88% 88%, 63% 78%, 50% 100%, 37% 78%, 12% 88%, 16% 62%, 0 50%, 16% 38%, 12% 12%, 37% 22%);
}

/* döntött sáv — jobb szél, szintén a gombsor magasságában */
.shape--band {
  right: -8vw;
  bottom: 22%;
  width: 15vw;
  height: 7vw;
  max-width: 230px;
  max-height: 100px;
  background: var(--f-mustard);
  transform: rotate(-28deg);
}

/* Keskenyebb képernyőn a két oldalsó forma elfogyna a szövegoszlop mellől: elrejtjük,
   a négy sarokforma pedig kijjebb húzódik. */
@media (max-width: 1320px) {
  .hero__shapes .shape--band,
  .hero__shapes .shape--tri {
    display: none;
  }

  .shape--coral {
    left: -9vw;
    width: 18vw;
    height: 18vw;
  }

  .shape--star {
    right: -3vw;
    width: 15vw;
    height: 15vw;
  }
}

/* A gombsor mobilon teljes szélességet kap, ezért az alsó sarokformák lejjebb csúsznak. */
@media (max-width: 760px) {
  .shape--pent {
    top: -6vw;
    left: -8vw;
    width: 26vw;
    height: 22vw;
  }

  .shape--sky {
    top: -9vw;
    right: -9vw;
    width: 28vw;
    height: 28vw;
  }

  .shape--coral {
    left: -13vw;
    bottom: -16vw;
    width: 30vw;
    height: 30vw;
  }

  .shape--star {
    right: -8vw;
    bottom: -12vw;
    width: 26vw;
    height: 26vw;
  }
}