/* ==========================================================================
   GIIB — responsive.css
   Breakpoints: 1024 · 860 · 640
   ========================================================================== */

@media (max-width: 1120px) {
  .hero-visual .chip.top { left: 0; }
  .hero-visual .chip.bot { right: 0; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 100%; margin: 20px 0 0; aspect-ratio: 5 / 4; }
  .hero[data-variant="editorial"] .hero-highlights { grid-template-columns: repeat(2, 1fr); }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: none; }
  .step:nth-child(1), .step:nth-child(2) { border-bottom: 1px solid var(--line); }

  .about-grid,
  .faq-grid,
  .misp-grid { grid-template-columns: 1fr; }
  .about-visual { max-width: 520px; }

  .mpn-benefits { grid-template-columns: 1fr; }
  .mpn-screen .shot { padding: 24px; }

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

  .nav-main { display: none; }
  .hamburger { display: flex; }
  .nav-actions .btn-brand { display: none; }
}

@media (max-width: 760px) {
  :root { --section-y: clamp(64px, 12vw, 96px); }

  body { font-size: 16px; }

  .container-giib { padding: 0 20px; }

  .hero-highlights { grid-template-columns: 1fr; gap: 20px; }
  .hero-kicker { font-size: .75rem; }

  .services-grid { grid-template-columns: 1fr; }
  .services-header { flex-direction: column; align-items: flex-start; }
  .service-tabs { overflow-x: auto; max-width: 100%; white-space: nowrap; }

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

  .why-grid { grid-template-columns: 1fr; }

  .blog-grid { grid-template-columns: 1fr; }

  .team-grid { grid-template-columns: 1fr 1fr; }

  .steps-grid { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: none; }

  .t-card { padding: 32px 22px; }

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

  .mpn-screen .shot { grid-template-columns: 1fr; aspect-ratio: auto; padding: 20px; }
  .mpn-screen .side { display: none; }
  .mpn-screen .main .cards { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .about-visual .badge { left: 16px; padding: 16px 20px; }
  .about-visual .badge b { font-size: 1.6rem; }

  #tweaks-panel { bottom: 12px; right: 12px; left: 12px; width: auto; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1; justify-content: center; }
  .service-tabs button { padding:10px; }
}

@media print {
  .site-header, .hero-visual, #tweaks-panel, .hamburger, .nav-actions { display: none !important; }
}



/* ==========================================================================
   Additional Responsive Rules for New Pages
   ========================================================================== */

/* Tablet screens */
@media (max-width: 992px) {
  .blog-grid .col-md-6 {
    margin-bottom: 20px;
  }
  
  .sidebar-widget {
    margin-top: 30px;
  }
  
  .post-navigation {
    gap: 15px;
  }
}

/* Mobile screens */
@media (max-width: 576px) {
  .blog-card .body {
    padding: 20px;
  }
  
  .blog-card h3 {
    font-size: 1rem;
  }
  
  .form-card {
    padding: 24px 20px;
  }
  
  .form-row {
    gap: 12px;
  }
  
  .t-card {
    padding: 30px 20px;
  }
  
  .t-card blockquote {
    font-size: 1.1rem;
  }
  
  /* Legal pages */
  .privacy-content h3,
  .terms-content h3,
  .cookie-content h3 {
    font-size: 1.2rem;
  }
  
  /* Contact page */
  .contact-info {
    margin-bottom: 30px;
  }
  
  /* Blog details */
  .blog-content h3 {
    font-size: 1.2rem;
  }
  
  .meta {
    flex-wrap: wrap;
    gap: 10px !important;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  .service-card .body {
    padding: 20px;
  }
  
  .why-card {
    padding: 24px 20px;
  }
  
  .team-card {
    padding: 20px 15px;
  }
  
  .team-card .portrait {
    width: 100px;
    height: 100px;
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  
  .mpn-featured {
    padding: 30px 20px;
  }
  
  .mpn-mock .float-chip {
    display: none;
  }
  
  .mpn-mock .browser {
    transform: none;
  }
  
  /* Blog listing */
  .blog-card .cover {
    aspect-ratio: 16/9;
  }
  
  /* Form elements */
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 0.9rem;
  }
}

/* Landscape orientation */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 600px;
    padding: 100px 0 60px;
  }
  
  .hero-card {
    margin-top: 30px;
  }
}

/* Print styles */
@media print {
  .site-header,
  .footer-bottom ul,
  .socials-footer,
  .newsletter-form,
  .hero-cta,
  .post-navigation,
  #tweaks-panel {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .container {
    max-width: 100%;
    padding: 0;
  }
  
  a {
    text-decoration: none;
    color: black;
  }
}