/* hero — prvi ekran.
   Naslov i uvod levo, slika desno. Preko donjeg dela slike stoji kartica sa
   skalom nivoa; oko slike su tri pločice. */

.pew-hero {
    padding-top: calc(var(--header-h) + var(--sp-2xl));
    padding-bottom: var(--sp-2xl);
}

.pew-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
/* Bez slike naslov ne treba da se razvuče preko cele širine — ostaje u svojoj
   koloni, jer je ovaj naslov meren na ~15 reči po redu. */
.pew-hero__grid:only-child,
.pew-hero__copy:only-child { max-width: 46rem; }

.pew-hero__text { margin-block: var(--sp-md) var(--sp-xl); }

/* Slika, pločice oko nje i kartica preko donjeg dela.
   Bez overflow:hidden — pločice namerno izlaze iz okvira slike. */
.pew-hero__media { position: relative; }
.pew-hero__img   { position: relative; z-index: 1; }

/* Pozicije pločica su fiksne, ne nasumične: motiv treba da izgleda kao mreža
   koja je pomerena, a ne kao konfete. */
.pew-tile--a { top: -26px;  right: -26px; width: 88px;  height: 88px; }
.pew-tile--b { bottom: 22%; left: -34px;  width: 108px; height: 108px; }
.pew-tile--c { top: 34%;    right: -46px; width: 62px;  height: 62px; }

.pew-hero__card {
    position: absolute;
    z-index: 2;
    left: var(--sp-md);
    right: var(--sp-md);
    bottom: var(--sp-md);
    padding: var(--sp-sm) var(--sp-md);
    background: var(--pew-white);
    border: 1px solid var(--pew-line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
}
.pew-hero__card-title {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--pew-ink-muted);
    margin-bottom: var(--sp-2xs);
}

/* Skala nivoa A1–C2. Šest ćelija; koje su aktivne odlučuje raspon "od–do" u
   bloku. Neaktivne OSTAJU vidljive: skala bez svojih krajeva ne govori ništa
   o tome gde se raspon nalazi. */
.pew-levels {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
}
.pew-levels__step {
    padding: .4rem 0;
    text-align: center;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--pew-ink-muted);
    background: var(--pew-cream);
    border-radius: var(--r-xs);
}
.pew-levels__step.is-active {
    background: var(--pew-gold-wash);
    color: var(--pew-gold-ink);
}

/* Kartica je uvek bela, i na zelenoj sekciji — pa mora sama da postavi svoje
   boje umesto da nasledi tokene sekcije. */
.pew-section--green .pew-hero__card,
.pew-section--green-deep .pew-hero__card { color: var(--pew-ink-body); }

@media (max-width: 1024px) {
    .pew-hero__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
}
@media (max-width: 640px) {
    /* Na telefonu pločice samo prave horizontalni preliv koji body mora da
       seče — ne nose ništa što se na toj širini vidi. */
    .pew-tiles { display: none; }
}
@media (max-width: 560px) {
    .pew-hero { padding-top: calc(var(--header-h) + var(--sp-lg)); }
    .pew-hero__actions .pew-btn { width: 100%; }
}