/* ============================================================================
   RESPONSIVE.CSS — breakpoint overrides
   Mobile-first concerns are handled here on top of the desktop-first base in
   style.css. Tested at 320 / 375 / 425 / 768 / 1024 / 1440 / 1920.
   ========================================================================== */

/* ---------------------------------------------------------------------
 * ≤ 1200px — laptop
 * ------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 0.8fr 1fr; }
  .footer-grid .footer-col:nth-child(3) { display: none; }
}

/* ---------------------------------------------------------------------
 * ≤ 1024px — tablet landscape
 * ------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section { padding-block: 96px; }

  .nav-menu { position: fixed; inset: 0 0 0 auto; top: 0; height: 100vh; width: min(360px, 86vw);
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0;
    background: var(--bg-elevated); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
    padding: 100px 32px 40px; transform: translateX(100%); transition: transform var(--duration-base) var(--ease-out);
    overflow-y: auto;
  }
  .nav-menu.is-open { transform: translateX(0); }
  .nav-menu ul { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
  .nav-menu ul li { width: 100%; }
  .nav-menu ul a { display: block; padding: 14px 4px; font-size: 1.05rem; width: 100%; }
  .nav-menu ul a::after { display: none; }
  .nav-menu__social { border-left: none; padding-left: 0; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); width: 100%; }
  .nav-toggle { display: flex; }
  body.nav-open { overflow: hidden; }

  .hero__inner { grid-template-columns: 1fr; gap: 56px; text-align: center; }
  .hero__media { max-width: 380px; margin-inline: auto; }
  .hero__text { display: flex; flex-direction: column; align-items: center; }
  .hero__desc { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__social { flex-direction: column; gap: 12px; }

  .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .about__media { max-width: 420px; margin-inline: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .contact__grid { grid-template-columns: 1fr; gap: 48px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-grid .footer-col:nth-child(3) { display: flex; }
}

/* ---------------------------------------------------------------------
 * ≤ 768px — tablet portrait
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container { padding-inline: 20px; }
  .section { padding-block: 76px; }
  .section__header { margin-bottom: 44px; }

  .services-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 28px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: left; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .hero { min-height: auto; padding-block: 120px 60px; }
  .hero__badge { left: 50%; transform: translateX(-50%); bottom: -20px; }
  .hero__ring { display: none; }
}

/* ---------------------------------------------------------------------
 * ≤ 425px — large phones
 * ------------------------------------------------------------------- */
@media (max-width: 425px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .btn { padding: 14px 22px; }
  .back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .toast { width: calc(100% - 32px); left: 16px; right: 16px; transform: translate(0, 20px); text-align: center; justify-content: center; }
  .toast.is-visible { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------------
 * ≤ 375px / ≤ 320px — small phones
 * ------------------------------------------------------------------- */
@media (max-width: 375px) {
  .container { padding-inline: 16px; }
  .hero__name { font-size: 2.2rem; }
  .section__title { font-size: 1.7rem; }
  .stat-card__value { font-size: 1.9rem; }
  .contact-form { padding: 20px; }
  .hero__badge { padding: 12px 16px; gap: 10px; }
  .hero__badge strong { font-size: 0.95rem; }
}

/* ---------------------------------------------------------------------
 * ≥ 1600px — large / ultra-wide desktop
 * ------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .container { max-width: 1360px; }
}