/* ==========================================================================
   MI Brothers Tech — Responsive layer (mobile-first, min-width queries)
   Base styles in style.css target phones (< 576px).
   ========================================================================== */

/* Small phones: shrink the hero composition so floating cards stay inside */
@media (max-width: 575.98px) {
  .hero-visual { min-height: 360px; }
  .fc-code, .fc-voice { display: none; }
  .fc-chat { width: 232px; top: 0; }
  .fc-flow { width: 250px; bottom: 0; }
  .orb--1 { width: 240px; height: 240px; right: 4%; top: 12%; }
  .orb-ring { width: 310px; height: 310px; right: calc(4% - 35px); top: calc(12% - 35px); }
  .orb--2 { width: 80px; height: 80px; }
}

/* ≥ 576px — large phones */
@media (min-width: 576px) {
  :root { --gutter: 1.5rem; }
  .grid-2-sm { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .span-2 { grid-column: span 2; }
  .newsletter-form { flex-direction: row; }
  .newsletter-form .input { flex: 1; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .modal { align-items: center; padding: 1.5rem; }
  .modal-dialog { border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6) var(--sp-6); }
  .chat-window {
    inset: auto 1.25rem 6.25rem auto; width: 390px; height: min(640px, calc(100vh - 8rem));
    border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(6, 40, 27, .28); border: 1px solid var(--c-line);
  }
}

/* ≥ 768px — tablets */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .timeline { padding-left: 0; grid-template-columns: 1fr 1fr; column-gap: 4.5rem; row-gap: 2rem; }
  .timeline::before, .timeline::after { left: 50%; transform: translateX(-50%); }
  .timeline-item:nth-child(odd) { grid-column: 1; text-align: right; }
  .timeline-item:nth-child(even) { grid-column: 2; margin-top: 4.5rem; }
  .timeline-item:nth-child(odd) .timeline-dot { left: auto; right: -3.35rem; }
  .timeline-item:nth-child(even) .timeline-dot { left: -3.35rem; }
  .timeline-item:nth-child(odd) .timeline-card h3 { justify-content: flex-end; }
  .cta-band { grid-template-columns: 1.5fr auto; }
  .service-detail { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .ai-tab small { display: block; }
  .newsletter { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ≥ 992px — laptops */
@media (min-width: 992px) {
  :root { --nav-h: 80px; }
  .nav-toggle { display: none; }
  .nav-cta { display: inline-flex; }
  .main-nav {
    position: static; inset: auto; visibility: visible; opacity: 1; transform: none;
    background: none; padding: 0; flex-direction: row; overflow: visible; transition: none;
  }
  .main-nav ul { flex-direction: row; gap: .15rem; }
  .main-nav a.nav-link { padding: .55rem .8rem; font-size: .92rem; border-radius: var(--r-pill); position: relative; }
  .main-nav a.nav-link::after { content: ""; font-family: inherit; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; border-radius: 2px; background: var(--c-primary); transform: translateX(-50%); transition: width .3s var(--ease); }
  .main-nav a.nav-link:hover { background: transparent; }
  .main-nav a.nav-link:hover::after, .main-nav a.nav-link[aria-current="page"]::after { width: 18px; }
  .main-nav a.nav-link[aria-current="page"] { background: transparent; }
  .nav-cta-mobile { display: none; }
  body.nav-open { overflow: auto; }

  .hero-inner { grid-template-columns: 1.08fr 1fr; }
  .hero-visual { min-height: 540px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .about-grid { grid-template-columns: .95fr 1.05fr; }
  .about-grid.reverse > :first-child { order: 2; }
  .contact-grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .ai-layout { grid-template-columns: 330px 1fr; align-items: start; }
  .ai-tabs { flex-direction: column; overflow: visible; }
  .ai-panel { padding: var(--sp-6); }
  .voice-shell { grid-template-columns: 1fr 1.05fr; align-items: center; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
}

/* ≥ 1200px — desktops */
@media (min-width: 1200px) {
  .main-nav a.nav-link { padding: .55rem .95rem; font-size: .95rem; }
  .hero-visual { min-height: 580px; }
  .orb--1 { width: 380px; height: 380px; }
}

/* Very wide screens */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
}

/* Short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
  .chat-window { inset: 0; width: auto; height: auto; border-radius: 0; }
}