/* ==========================================================================
   KESTUL PrintHub — responsive.css
   Breakpoints: 1024px (tablet) / 768px (small tablet) / 600px (mobile) / 400px (small mobile)
   ========================================================================== */

/* ---------------------------------
   BREAKPOINT 1 — 1024px (tablets / small laptops)
--------------------------------- */
@media (max-width: 1024px){
  :root{ --header-h: 76px; }

  .main-nav{
    position: fixed; top: var(--header-h); left:0; right:0; bottom:0;
    background: var(--surface); padding: 40px 24px;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    overflow-y:auto;
  }
  body.dark-mode .main-nav{ background: var(--surface); }
  .main-nav.open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap: 0; }
  .main-nav ul li{ border-bottom: 1px solid var(--border-soft); }
  .nav-link{ display:block; padding: 18px 4px; font-size: 1.1rem; }
  .nav-toggle{ display:flex; }
  .header-call{ display:none; }

  .nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .hero-grid{ grid-template-columns: 1fr; text-align:center; gap: 50px; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; }
  .hero-actions, .hero-trust{ justify-content:center; }
  .hero-visual{ height: 360px; max-width: 420px; margin: 0 auto; }

  .about-grid{ grid-template-columns: 1fr; gap: 90px; }
  .about-media{ max-width: 420px; margin: 0 auto; }

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

  .contact-grid{ grid-template-columns: 1fr; gap: 50px; }

  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px 24px; }
}

/* ---------------------------------
   BREAKPOINT 2 — 768px (small tablets / large phones landscape)
--------------------------------- */
@media (max-width: 768px){
  .container{ padding: 0 20px; }

  .hero{ padding: calc(var(--header-h) + 40px) 0 70px; }
  .hero-title{ font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero-actions{ flex-direction:column; width:100%; max-width: 320px; margin-left:auto; margin-right:auto; }
  .hero-actions .btn{ width:100%; }

  .about{ padding: 90px 0; }
  .services{ padding: 90px 0; }
  .why-us{ padding: 90px 0; }
  .story{ padding: 90px 0; }
  .faq{ padding: 90px 0; }
  .contact{ padding: 90px 0; }

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

  .process-track{ flex-direction:column; }
  .process-line{ width: 2px; height: 30px; margin: 0; }

  .contact-form-wrap{ padding: 30px 24px; }

  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }

  .float-btn{ width: 48px; height:48px; right: 16px; }
  .float-btn svg{ width:22px; height:22px; }
  .float-whatsapp{ bottom:16px; }
  .float-call{ bottom: 74px; }
  .back-to-top{ bottom: 132px; }
}

/* ---------------------------------
   BREAKPOINT 3 — 600px (phones, portrait)
--------------------------------- */
@media (max-width: 600px){
  .eyebrow{ font-size: .72rem; }
  .section-title{ font-size: 1.7rem; }
  .section-head{ margin-bottom: 2.2rem; text-align:center; }
  .section-sub{ margin: 0 auto; }

  .about-card{ position:static; margin-top: 20px; max-width:none; }
  .about-media{ height: 260px; }

  .g-tall{ grid-row: span 1; }
  .g-icon{ font-size: 1.8rem; }

  .timeline-item{ padding-left: 46px; }
  .timeline-track{ left: 15px; }
  .timeline-dot{ left: 4px; width:20px; height:20px; }

  .faq-question{ padding: 16px 18px; font-size:.92rem; }
  .faq-answer p{ padding: 0 18px 16px; }

  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .footer-col ul{ align-items:center; }

  .cta{ padding: 70px 0; }
  .cta-actions{ flex-direction:column; align-items:center; }
  .cta-actions .btn{ width: 100%; max-width: 280px; }
}

/* ---------------------------------
   BREAKPOINT 4 — 400px (small phones)
--------------------------------- */
@media (max-width: 400px){
  .brand-logo{ height: 40px; }
  .site-header.scrolled .brand-logo{ height: 34px; }

  .hero-title{ font-size: 2rem; }
  .hero-sub{ font-size: 1rem; }
  .hero-trust{ flex-direction:column; align-items:center; gap: 10px; }
  .divider-dot{ display:none; }

  .press-card{ transform: scale(.9); }

  .service-card{ padding: 26px 20px; }
  .why-card{ padding: 24px 20px; }


  .contact-form-wrap{ padding: 24px 18px; }
  .form-row input, .form-row select, .form-row textarea{ font-size: .9rem; }
}