/* ===========================================================================
   Responsywność + ruch
   Ładowane na końcu — nadpisuje komponenty świadomie, nie przypadkiem.
   =========================================================================== */

/* ── Tablet ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero__content { max-width: none; order: 2; }
  .hero__figure { order: 1; width: min(100%, 18rem); justify-self: start; }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

/* Wykres: poniżej 720px etykieta nie mieści się obok słupka.
   Przenosimy ją nad słupek, "razem" ląduje w tej samej linii co etykieta. */
@media (max-width: 720px) {
  .bars__head { display: none; }

  .bars__row {
    grid-template-columns: 1fr auto;
    gap: 0.35rem var(--sp-2);
    padding-block: 0.55rem;
  }

  .bars__label {
    text-align: left;
    grid-row: 1;
    grid-column: 1;
  }

  .bars__total {
    grid-row: 1;
    grid-column: 2;
  }

  .bars__total::before {
    content: 'razem ';
    font-weight: 400;
    color: var(--text-muted);
  }

  .bars__track {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .bars__seg { height: 1.8rem; font-size: 0.875rem; }
}

@media (max-width: 560px) {
  .hero {
    /* Na wąskim ekranie głębokie wcięcie zjadałoby róg przycisku CTA */
    --hero-cut: 6rem;
    padding-top: var(--sp-4);
  }

  /* Slider: okrąg z numerem obok tekstu zjadałby połowę szerokości */
  .slider__content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .slider__num { width: 3.5rem; font-size: 1.25rem; }

  .slider__arrow { width: 2.5rem; height: 2.5rem; }

  /* Ramka z danymi: źródło pod spodem, nie obok */
  .factbox {
    flex-direction: column;
    align-items: flex-start;
  }

  .factbox__source { text-align: left; }

  /* Wykres ocen: etykieta nad słupkiem, wartość w tej samej linii */
  .rate__row {
    grid-template-columns: 1fr auto;
    gap: 0.2rem var(--sp-2);
  }

  .rate__label { grid-row: 1; grid-column: 1; }
  .rate__value { grid-row: 1; grid-column: 2; }
  .rate__track { grid-row: 2; grid-column: 1 / -1; }

  .rate__list { gap: 0.9rem; }

  .hero__figure {
    width: 12rem;
    border-width: 7px;
  }

  .section-tag {
    padding: 0.8em 1.6em;
    font-size: 1rem;
  }

  .btn { width: 100%; }
}

/* ── Animacje wejścia ─────────────────────────────────────────────────────── */
/* Klasę .reveal dodaje main.js dopiero gdy JS działa — bez JS treść jest widoczna */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Szacunek dla ustawień systemowych ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }
}

/* ── Druk ─────────────────────────────────────────────────────────────────── */

@media print {
  .hero { background: none; color: #000; border-radius: 0; }
  .download, .footer { display: none; }
}