/* ============================================================
   KTech & Capital LTD – mobile.css
   Styles applied exclusively on mobile screens (max-width: 767px).
   Linked in every HTML page via:
     <link rel="stylesheet" href="css/mobile.css" media="(max-width: 767px)">
   All rules are self-contained inside a single @media block.
   ============================================================ */

@media (max-width: 767px) {

  /* ----------------------------------------------------------
     Layout
     ---------------------------------------------------------- */
  .hero { min-height: 75vh; }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-card { order: -1; }

  /* ----------------------------------------------------------
     Buttons
     ---------------------------------------------------------- */
  .btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }

  /* Stretch hero CTAs to full width for easier tapping */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { text-align: center; justify-content: center; }

  /* CTA banner buttons stack vertically */
  .cta-banner__btns { flex-direction: column; align-items: center; }

  /* ----------------------------------------------------------
     Cards
     ---------------------------------------------------------- */
  .pricing-card { padding: 1.75rem 1.25rem; }
  .job-card { flex-direction: column; }

  /* ----------------------------------------------------------
     Typography
     ---------------------------------------------------------- */
  .section-header { text-align: left; }

  /* ----------------------------------------------------------
     Nav – host-level override (shadow DOM handles inner menu)
     ---------------------------------------------------------- */
  ktech-nav { height: auto; }

  /* ----------------------------------------------------------
     Footer
     ---------------------------------------------------------- */
  /* The footer grid is managed inside the <ktech-footer> shadow DOM;
     the host-level .footer-top class is a fallback for non-shadow usage. */
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* ----------------------------------------------------------
     Forms
     ---------------------------------------------------------- */
  .form-row { flex-direction: column; }

  /* ----------------------------------------------------------
     Process steps
     ---------------------------------------------------------- */
  .process-step { flex-direction: column; }
  .process-step__num { margin-bottom: .5rem; }

  /* ----------------------------------------------------------
     Stats bar
     ---------------------------------------------------------- */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* ----------------------------------------------------------
     Touch-target enlargement (WCAG 2.5.5 – 44×44px minimum)
     ---------------------------------------------------------- */
  .btn { min-height: 44px; }
  .form-control { min-height: 44px; }

}