/*
   Talkiva - css\base\responsive.css
   Global responsive breakpoints (all components and pages)
   Extracted verbatim from the original style.css. No rules altered.
*/

/* ---------- 18. Responsive ---------- */
@media (max-width: 1240px) {
  .chip-3 { display: none; }
}

@media (max-width: 1080px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card:last-child { grid-column: 1 / -1; max-width: 540px; justify-self: center; width: 100%; }
  .listeners-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  :root { --nav-h: 68px; }
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;              /* fallback */
    height: 100dvh;             /* correct on mobile browser chrome */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    padding: 112px 10% 48px;
    /* fully OPAQUE background — nothing can bleed through */
    background:
      radial-gradient(700px 400px at 90% 0%, rgba(239, 27, 67, 0.22), transparent 60%),
      linear-gradient(165deg, #120209, #30060e);
    overflow-y: auto;           /* long menus scroll instead of clipping */
    visibility: hidden;         /* fully hidden + unclickable when closed */
    transform: translateX(100%);
    transition: transform 0.55s var(--ease-out), visibility 0s linear 0.55s;
    z-index: 1200;              /* above navbar (1000) and all hero content */
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.55s var(--ease-out), visibility 0s;
  }
  .nav-links > a:not(.btn) {
    font-family: var(--font-head);
    font-size: 1.7rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.3s;
  }
  .nav-links > a.nav-download { font-size: 1.15rem; color: #ffd2dc; margin: 16px 0 8px; }
  .nav-links.open > a:not(.btn) { opacity: 1; transform: none; }
  .nav-links.open > a:nth-child(1) { transition-delay: 0.08s; }
  .nav-links.open > a:nth-child(2) { transition-delay: 0.15s; }
  .nav-links.open > a:nth-child(3) { transition-delay: 0.22s; }
  .nav-links.open > a:nth-child(4) { transition-delay: 0.29s; }
  .nav-links .btn {
    margin-top: 24px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--ease-out) 0.36s, transform 0.5s var(--ease-out) 0.36s, box-shadow 0.3s;
  }
  .nav-links.open .btn { opacity: 1; transform: none; }

  .hero { min-height: auto; padding-bottom: 96px; }
  .hero-grid { grid-template-columns: 1fr; gap: 64px; text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .trust { justify-content: center; }
  .chip-1 { left: -20px; top: 2%; }
  .chip-2 { left: -70px; top: 24%; }

  .story-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .languages-container { flex-direction: column-reverse; gap: 48px; }
  .languages-content .h2,
  .languages-content .lead { max-width: none; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .section,
  .stats,
  .cta,
  .languages-section { padding: 64px 0; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .testi-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .section,
  .stats,
  .cta,
  .languages-section { padding: 48px 0; }
  .container { width: 100%; padding: 0 16px; }
  .footer { padding: 48px 0 0; }
  .section-head { margin-bottom: 40px; }
  .how-cta { margin-top: 40px; padding-top: 24px; }
  .how-cta .btn { margin-top: 24px; }
  .language-chip { font-size: 0.9rem; }
  .features-grid { grid-template-columns: 1fr; }
  .feature-card:last-child { grid-column: auto; max-width: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat { padding: 32px 16px; }
  .listeners-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .values-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .form-card { padding: 32px 24px; }
  .cta-card { padding: 56px 24px; }
  .cta-card .lead { margin: 16px auto 32px; }
  .cta-note { margin-top: 16px; }
  .mission-card { padding: 40px 24px; }
  .mission-card blockquote { font-size: 1.2rem; }
  .phone { width: 272px; }
  .phone-aura { inset: -40px; }
  .aura-ring { width: 350px; height: 350px; margin: -175px 0 0 -175px; }
  .chip { padding: 8px 16px; font-size: 0.78rem; }
  .chip-1 { left: -10px; }
  .chip-2 { left: -60px; top: 24%; }
  .hero { padding-bottom: 64px; }
  .hero-actions .btn { width: 100%; max-width: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .scroll-cue { display: none; }
  .page-hero { padding: calc(var(--nav-h) + 64px) 0 64px; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .btn { padding: 12px 24px; font-size: 0.92rem; }
  .call-controls { gap: 10px; }
  .ctrl { width: 44px; height: 44px; font-size: 0.95rem; }
  .ctrl-end { width: 52px; height: 52px; }
}