/* ============================================================
   RESPONSIVE.CSS — Megademy Global Sdn. Bhd.
   Mobile and tablet breakpoints
   ============================================================ */

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
  :root {
    --container-padding: 1.5rem;
  }

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

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

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .display-heading {
    font-size: 3rem;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  .section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }

  .hero {
    padding: var(--space-12) 0 var(--space-8);
  }

  .hero-shell {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

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

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

  .hero .display-heading {
    max-width: 14ch;
  }

  .hero-proof {
    grid-template-columns: 1fr;
  }

  .hero-signal-grid {
    grid-template-columns: 1fr;
  }

  .intro-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .workflow-visual {
    flex-direction: column;
    padding: var(--space-6);
  }

  .workflow-arrow {
    transform: rotate(90deg);
  }

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

  .demo-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
    --nav-height: 64px;
  }

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

  .nav-desktop {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .nav-cta {
    display: none;
  }

  .display-heading {
    font-size: 2.25rem;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .hero-description {
    font-size: var(--text-body);
  }

  .hero-copy {
    text-align: left;
  }

  .hero-eyebrow {
    margin-left: 0;
    margin-right: 0;
  }

  .hero .display-heading,
  .hero-description,
  .hero-trust {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-points {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-8);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .section {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
  }

  .section-heading {
    margin-bottom: var(--space-8);
  }

  .section-heading p {
    font-size: var(--text-body);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

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

  .hero-proof {
    grid-template-columns: 1fr;
  }

  .hero-signal-grid {
    grid-template-columns: 1fr;
  }

  .footer-col {
    min-width: 0;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    padding: var(--space-8) var(--space-4);
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .trust-panel {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .case-study-details {
    grid-template-columns: 1fr 1fr;
  }

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

  .pricing-factors {
    grid-template-columns: 1fr 1fr;
  }

  .page-404 h1 {
    font-size: 5rem;
  }

  .page-404 {
    padding: var(--space-16) 0;
  }

  .content-page {
    padding: var(--space-4) 0 var(--space-8);
  }

  .answer-block {
    padding: var(--space-4) var(--space-6);
  }

  .related-links {
    grid-template-columns: 1fr;
  }

  .about-leadership {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    border-radius: var(--radius-small);
  }

  .intro-copy h2 {
    max-width: none;
  }

  .hero-panel-top,
  .hero-panel-body {
    padding: var(--space-4);
  }

  .hero-process-step {
    grid-template-columns: 1fr;
  }

  .hero-step-number {
    width: 2.5rem;
    height: 2.5rem;
  }

  .intro-metrics {
    grid-template-columns: 1fr;
  }

  .workflow-step {
    min-width: 100px;
    padding: var(--space-3);
  }

  .nav-mobile .nav-link {
    height: 48px;
  }
}

/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
  :root {
    --container-padding: 0.75rem;
  }

  .display-heading {
    font-size: 1.875rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .trust-panel {
    grid-template-columns: 1fr;
  }

  .case-study-details {
    grid-template-columns: 1fr;
  }

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

  .pricing-factors {
    grid-template-columns: 1fr;
  }

  .card {
    padding: var(--space-4);
  }

  .solution-card,
  .case-study-card {
    padding: var(--space-4);
  }

  .content-meta {
    flex-direction: column;
    gap: var(--space-1);
  }

  .breadcrumbs {
    font-size: 0.75rem;
  }
}