/* ==========================================================================
   GK Hero — mobilná vrstva (načítava sa PO hero.css)

   Prepína návrhový rám z 1767 × 490 na 400 × 430. Keďže `--u` aj
   `aspect-ratio` čítajú tie isté dve premenné, preklopí sa tým celý
   súradnicový systém naraz.

   Rozloženie: obrázok hore, text pod ním na stred, tlačidlo vpravo,
   bodky dole. Tlačidlo je zámerne vpravo, nie na strede — tak to chcel
   klient.
   ========================================================================== */

@container (max-width: 899px) {

  .gh__viewport {
    --gh-design-w: 400;
    --gh-design-h: 430;
  }

  .gh__viewport * { --u: calc(100cqw / 400); }

  /* ── obrázok hore, cez celú šírku ──────────────────────────────────── */
  .gh__stage {
    left: calc(20 * var(--u));
    top:  calc(16 * var(--u));
    width:  calc(360 * var(--u));
    height: calc(196 * var(--u));
  }

  .gh__note {
    top: calc(-14 * var(--u));
    font-size: max(11px, calc(12 * var(--u)));
  }

  /* ── text pod obrázkom ─────────────────────────────────────────────
     Ukotvený ZDOLA: tlačidlo je vždy na tom istom mieste nad bodkami
     (top 350, ako v schválenej verzii) a nadpis sedí tesne nad ním —
     klient chcel text „nižšie, nad tlačidlom". Dlhší nadpis rastie
     smerom hore, k obrázku, nie do tlačidla. */
  .gh__content {
    left:  calc(28 * var(--u));
    right: calc(28 * var(--u));
    top: auto;
    bottom: calc(42 * var(--u));   /* tlačidlo na 350 ako v schválenej verzii, bodky na 398 */
    width: auto;
    height: auto;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    gap: calc(34 * var(--u));      /* miesto pre zelenú čiaru pod nadpisom */
  }

  .gh__title {
    font-size: calc(25 * var(--u));
    text-align: center;
  }

  /* Tlačidlo vpravo (nie na strede) — vedomé rozhodnutie klienta. */
  .gh__cta {
    align-self: flex-end;
    margin-top: 0;
    min-width: 0;          /* desktopových 226u by na mobile bolo príliš */
    height: auto;
    padding: calc(8 * var(--u)) calc(20 * var(--u));   /* ako schválená verzia */
    font-size: max(12px, calc(11 * var(--u)));
  }

  /* Promo text vľavo NAD nadpisom (na desktope je pod tlačidlom). */
  .gh__promo {
    top: auto;
    bottom: calc(100% + 12 * var(--u));
    left: 0;
    text-align: left;
    white-space: normal;
    font-size: calc(14 * var(--u));
    text-transform: uppercase;
  }

  /* Šípka vľavo, menšia, mieri do termoboxu. */
  .gh__arrow {
    left: calc(60 * var(--u));
    top:  calc(150 * var(--u));
    width: calc(95 * var(--u));
  }

  /* ── bodky ─────────────────────────────────────────────────────────── */
  .gh__dots {
    top: calc(398 * var(--u));
    gap: calc(11 * var(--u));
  }

  .gh__dot {
    width:  calc(16 * var(--u));
    height: calc(16 * var(--u));
  }
}

/* ── pás výhod: zalamovanie 5 → 3 → 2 → 1 ─────────────────────────────── */

@container (max-width: 1100px) { .gt { grid-template-columns: repeat(3, 1fr); } }

@container (max-width: 760px) {
  .gt { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gt__item { padding: 12px 14px; gap: 11px; }
  .gt__icon { flex-basis: 36px; }
  .gt__icon img { max-width: 36px; max-height: 36px; }
}

@container (max-width: 460px) {
  .gt { grid-template-columns: 1fr; }
  .gt__title { font-size: 14px; }
  .gt__text  { font-size: 12px; }
}

/* ==========================================================================
   Záloha pre prehliadače bez container queries
   Bez nej by sa mobilné rozloženie vôbec nespustilo, preto to isté ešte
   raz cez šírku okna.
   ========================================================================== */

@supports not (container-type: inline-size) {
  @media (max-width: 899px) {
    .gh__viewport { --u: calc(100vw / 400); aspect-ratio: 400 / 430; }
    .gh__viewport * { --u: calc(100vw / 400); }

    .gh__stage   { left: calc(20 * var(--u)); top: calc(16 * var(--u)); width: calc(360 * var(--u)); height: calc(196 * var(--u)); }
    .gh__note    { top: calc(-14 * var(--u)); font-size: max(11px, calc(12 * var(--u))); }
    .gh__content { left: calc(28 * var(--u)); right: calc(28 * var(--u)); top: auto; bottom: calc(42 * var(--u));
                   width: auto; height: auto; justify-content: flex-end; align-items: center;
                   text-align: center; gap: calc(34 * var(--u)); }
    .gh__title   { font-size: calc(25 * var(--u)); text-align: center; }
    .gh__cta     { align-self: flex-end; margin-top: 0; min-width: 0; height: auto; padding: calc(8 * var(--u)) calc(20 * var(--u)); font-size: max(12px, calc(11 * var(--u))); }
    .gh__promo   { top: auto; bottom: calc(100% + 12 * var(--u)); left: 0; text-align: left; white-space: normal; font-size: calc(14 * var(--u)); text-transform: uppercase; }
    .gh__arrow   { left: calc(60 * var(--u)); top: calc(150 * var(--u)); width: calc(95 * var(--u)); }
    .gh__dots    { top: calc(398 * var(--u)); gap: calc(11 * var(--u)); }
    .gh__dot     { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

    .gt { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .gt__item { padding: 12px 14px; gap: 11px; }
    .gt__icon { flex-basis: 36px; }
    .gt__icon img { max-width: 36px; max-height: 36px; }
  }

  @media (max-width: 460px) { .gt { grid-template-columns: 1fr; } }
}