/* ============================================================
   ВитринаПро — Responsive Styles
   Breakpoints:
     Mobile  : < 640px
     Tablet  : 640px – 1023px
     Desktop : ≥ 1024px  (base styles)
   ============================================================ */


/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 1023px) {

  :root {
    --section-y: 4rem;
    --container-pad: 1.25rem;
  }

  /* section titles */
  .section-title { font-size: var(--text-3xl); }

  /* nav */
  .nav__links,
  .nav__cta,
  .nav__contacts { display: none; }

  .nav__burger { display: flex; }

  /* hero */
  .hero { padding-top: calc(3rem + 64px); padding-bottom: 3.5rem; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .hero__title { font-size: var(--text-4xl); }

  .hero__visual { max-width: 560px; margin-inline: auto; }

  /* problem */
  .problem__grid { grid-template-columns: 1fr; }

  /* solution */
  .solution__grid { grid-template-columns: repeat(2, 1fr); }

  /* connection */
  .connection__grid { grid-template-columns: repeat(2, 1fr); }

  /* how */
  .how__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
  }

  .how__steps::before { display: none; }

  /* interfaces */
  .interfaces__block {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .interfaces__block--reverse { direction: ltr; }

  /* demo cards */
  .demo__cards { grid-template-columns: repeat(2, 1fr); }

  /* for whom */
  .forwhom__grid { grid-template-columns: repeat(2, 1fr); }

  /* advantages */
  .advantages__grid { grid-template-columns: repeat(2, 1fr); }

  /* contact */
  .contact__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .contact__title { font-size: var(--text-3xl); }

  /* footer */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer__contacts { align-items: flex-start; }

  .footer__bottom { flex-direction: column; gap: var(--sp-2); }
}


/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 639px) {

  :root {
    --section-y: 3rem;
    --container-pad: 1rem;
  }

  /* nav */
  .nav { padding-block: var(--sp-3); }

  /* hero */
  .hero { padding-top: calc(2.5rem + 56px); padding-bottom: 2.5rem; }

  .hero__title { font-size: var(--text-3xl); }

  .hero__sub { font-size: var(--text-base); }

  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* badges, labels */
  .hero__badge { font-size: var(--text-xs); }

  /* problem */
  .problem-card { flex-direction: column; gap: var(--sp-3); }

  /* solution */
  .solution__grid { grid-template-columns: 1fr; }

  /* connection */
  .connection__grid { grid-template-columns: 1fr; }
  .connection__callout { flex-direction: column; gap: var(--sp-3); }

  /* how */
  .how__steps { grid-template-columns: 1fr; gap: var(--sp-6); }

  /* section title */
  .section-title { font-size: var(--text-2xl); }

  .section-lead { font-size: var(--text-base); }

  /* interfaces */
  .interfaces__block-title { font-size: var(--text-2xl); }

  .mobile-frame { max-width: 240px; }

  /* demo cards */
  .demo__cards { grid-template-columns: 1fr; }

  /* for whom */
  .forwhom__grid { grid-template-columns: 1fr; }

  /* advantages */
  .advantages__grid { grid-template-columns: 1fr; }

  /* contact */
  .form-card { padding: var(--sp-6); }

  .contact__title { font-size: var(--text-2xl); }

  /* footer */
  .footer__contact-link { justify-content: flex-start; }
}