/* ==========================================================================
   responsive.css — mobile-first: rozszerzenia dla większych ekranów
   Bazowy układ (style.css / components.css) jest zaprojektowany dla telefonu.
   ========================================================================== */

/* --- ≥ 600px: dwie kolumny tam, gdzie ma to sens ------------------------ */
@media (min-width: 600px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }

  .trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards,
  .tile-grid,
  .process,
  .ps-grid,
  .split-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .integration__schema {
    padding: 32px;
  }

  .banner__actions {
    flex-wrap: nowrap;
  }

  .mockup__cta {
    display: inline-flex;
  }
}

/* --- ≥ 768px: tablet ---------------------------------------------------- */
@media (min-width: 768px) {
  .shell {
    padding: 0 28px;
  }

  .section {
    padding: 88px 0;
  }

  .hero .shell {
    padding-top: 64px;
    padding-bottom: 76px;
  }

  .page-hero .shell {
    padding-top: 34px;
    padding-bottom: 68px;
  }

  .mockup__side {
    display: flex;
  }

  .mockup__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mockup__grid {
    grid-template-columns: 1.35fr 1fr;
  }

  .app__kpis,
  .app__two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__search-hint {
    display: inline-flex;
  }

  .app__tr {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
  }

  .app__tr--head {
    display: grid;
  }

  .app__panel {
    width: 340px;
    padding: 20px;
  }

  .tabs__note {
    display: inline-flex;
  }

  .card {
    padding: 26px;
  }

  .card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc__products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .final__contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .price-panel__row {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }

  .price-panel__row .price-block__label {
    width: 30%;
  }

  .price-panel__row small {
    margin-left: auto;
  }
}

/* --- ≥ 992px: desktop --------------------------------------------------- */
@media (min-width: 992px) {
  .shell {
    padding: 0 32px;
  }

  .section {
    padding: 104px 0;
  }

  /* Nawigacja: menu poziome zamiast hamburgera */
  .nav__menu {
    display: flex;
  }

  .nav__actions {
    display: flex;
  }

  .nav__toggle {
    display: none;
  }

  .nav__mobile {
    display: none !important;
  }

  /* Sticky CTA tylko na telefonie */
  .mobile-cta {
    display: none;
  }

  /* Hero */
  .hero .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items: center;
    gap: 56px;
    padding-top: 88px;
    padding-bottom: 96px;
  }

  .hero__visual {
    margin-top: 0;
  }

  .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 48px;
  }

  .page-hero__grid--single {
    grid-template-columns: minmax(0, 720px);
  }

  .trust__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cards--3,
  .tile-grid--4,
  .process,
  .ps-grid,
  .split-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tile-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .process--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ps-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq,
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .tile-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .growth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 48px;
  }

  .journey {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
  }

  .journey__aside {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }

  .integration {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
  }

  .integration__schema {
    grid-row: span 3;
  }

  .price-panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }

  .about {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
  }

  .calc {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .calc__result {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }

  .final__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
  }

  .dedicated {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 56px;
  }

  .footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Demo aplikacji: pełny interfejs z panelem bocznym */
  .app__side {
    display: flex;
  }

  .app__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .app__two {
    grid-template-columns: 1.5fr 1fr;
  }

  .app__panel {
    position: relative;
    inset: auto;
    flex: none;
    box-shadow: none;
  }

  .mockup--compact .mockup__side {
    display: flex;
  }
}

/* --- ≥ 1200px: duże ekrany --------------------------------------------- */
@media (min-width: 1200px) {
  .hero .shell {
    gap: 72px;
  }

  .app {
    height: 672px;
  }

  .app__docs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Telefony: dopasowania --------------------------------------------- */
@media (max-width: 599px) {
  body {
    padding-bottom: 84px; /* miejsce na sticky CTA */
  }

  h1 {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .section-head h2 {
    font-size: clamp(1.5rem, 6.4vw, 1.9rem);
  }

  .app {
    height: 560px;
  }

  .app__bar {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .app__bar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .app__notices .app__popover {
    right: auto;
    left: -60px;
    width: min(280px, calc(100vw - 64px));
  }

  .tabs {
    gap: 6px;
  }

  .tabs__tab {
    flex: 1;
    justify-content: center;
    padding: 10px 12px;
    font-size: 13px;
  }

  .banner {
    padding: 20px;
  }

  .banner .btn,
  .banner__actions {
    width: 100%;
  }

  .banner .btn {
    justify-content: center;
  }

  .calc__result,
  .calc__controls {
    padding: 20px;
  }

  .modal__box {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }

  .footer__product small {
    font-size: 11.5px;
  }

  .demo__intro h3 {
    font-size: 15px;
  }

  .app__panel {
    position: absolute;
  }
}

/* --- Użytkownik bez JavaScriptu: pokaż wszystko ------------------------ */
@media (max-width: 991px) {
  .nav__mobile[hidden] {
    display: none;
  }
}

/* --- Drukowanie: bez interaktywnych warstw ----------------------------- */
@media print {
  .tabs,
  .demo-guide,
  .mobile-cta,
  .app__panel,
  .modal,
  .demo-toast {
    display: none !important;
  }

  .app {
    height: auto;
  }
}