/* =========================================================
   Responsive breakpoints — mobile first
   Targeted devices:
     < 360px   small phones
     360-479   default phone
     480-767   large phone
     768-1023  tablet portrait
     1024-1279 tablet landscape / small laptop
     1280-1535 desktop
     >= 1536   wide / 2K
   ========================================================= */

/* ---------- Default: < 768px (Mobile) ---------- */
.section { padding: var(--section-py) 0; }
.section--tight { padding: var(--section-py-tight) 0; }

/* Touch targets minimum 44px */
.btn, .menu-link, .pagination .page-numbers, .form__field input,
.form__field select, .form__field textarea, .social-links a {
  min-height: var(--tap);
}
.btn { padding: 0.85rem 1.25rem; }
.btn--lg { padding: 1rem 1.5rem; font-size: 1rem; }
.btn--lg.btn { min-height: 52px; }

/* Mobile-specific layout */
@media (max-width: 767px) {
  .site-header__inner { min-height: 64px; }
  .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); }

  /* Mobile drawer */
  .primary-menu {
    position: fixed;
    inset: 64px 0 0 0;
    background-color: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform var(--t-base);
    overflow-y: auto;
    z-index: 49;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav.is-open .primary-menu { transform: translateX(0); }
  .primary-menu > li { border-bottom: 1px solid var(--color-border); }
  .primary-menu > li > .menu-link {
    padding: var(--space-md) 0;
    font-size: 1.0625rem;
    justify-content: space-between;
    width: 100%;
  }
  .menu-cta { padding: var(--space-md) 0; border-bottom: 0 !important; }
  .menu-cta .menu-link.btn { width: 100%; }

  .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 var(--space-sm) var(--space-md);
    min-width: 0;
    display: none;
    background: transparent;
  }
  .menu-item-has-children[data-open="true"] > .sub-menu { display: block; }
  .sub-menu .menu-link { padding: var(--space-sm) 0; }

  body.menu-is-open { overflow: hidden; }

  /* All major grids collapse to single column on mobile */
  .services-grid,
  .services-grid--detailed,
  .post-grid,
  .case-grid,
  .value-grid,
  .value-grid--two,
  .value-grid--four,
  .stats-grid,
  .process-steps,
  .team-grid,
  .feature-section__grid,
  .contact-layout,
  .layout-with-sidebar,
  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .feature-section--reverse .feature-section__grid { direction: ltr; }

  .check-list--two-col { columns: 1; }

  .trusted-bar__logos { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

  .form__row--two { grid-template-columns: 1fr; gap: 0; }

  .section__header--row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-xl);
    gap: var(--space-md);
  }
  .cta-banner__inner .btn { width: 100%; }

  /* Hero scaled down */
  .hero--dark { padding: var(--space-3xl) 0 var(--space-2xl); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .hero__subtitle { font-size: 1rem; }

  /* Page hero */
  .page-hero { padding: var(--space-2xl) 0 var(--space-lg); }
  .page-hero__subtitle { font-size: 1rem; }

  /* Feature section — image first, then content */
  .feature-section__grid {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-lg);
  }
  .feature-section--reverse .feature-section__grid { flex-direction: column-reverse; }

  /* Trusted bar — 2 columns */
  .trusted-bar__logos { grid-template-columns: repeat(2, 1fr); }
  .trusted-bar { padding: var(--space-lg) 0; }

  /* Footer */
  .site-footer { padding: var(--space-2xl) 0 var(--space-lg); margin-top: var(--space-2xl); }
  .site-footer__cols { gap: var(--space-xl); padding-bottom: var(--space-xl); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

  /* Cards */
  .service-card { padding: var(--space-lg); }
  .service-card--detailed { padding: var(--space-lg); }
  .value-card { padding: var(--space-lg); }
  .process-step { padding: var(--space-lg); }

  /* Contact form padding */
  .contact-form { padding: var(--space-lg); }

  /* Tags on page heroes */
  .page-hero h1 { font-size: clamp(1.625rem, 6vw, 2.25rem); }
}

/* ---------- < 480px : Small phones ---------- */
@media (max-width: 479px) {
  :root { --container-pad: 0.875rem; }
  .hero__pills { gap: 0.375rem; }
  .pill { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .stat__number { font-size: 2rem; }
  .trusted-bar__logos { grid-template-columns: repeat(2, 1fr); }
  .cta-banner__inner { padding: var(--space-lg); }
  .breadcrumbs { font-size: 0.8125rem; }
  .faq { padding: var(--space-sm) var(--space-md); }
  .faq summary { font-size: 0.95rem; }
}

/* ---------- 480-767px : Larger phones ---------- */
@media (min-width: 480px) and (max-width: 767px) {
  .services-grid,
  .services-grid--detailed,
  .post-grid,
  .case-grid,
  .value-grid--four,
  .team-grid,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .value-grid--four .value-card:nth-child(n+3) { grid-column: span 1; }
}

/* ---------- >= 768px : Tablet portrait ---------- */
@media (min-width: 768px) {
  .services-grid             { grid-template-columns: repeat(2, 1fr); }
  .services-grid--detailed   { grid-template-columns: repeat(2, 1fr); }
  .post-grid                 { grid-template-columns: repeat(2, 1fr); }
  .case-grid                 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid                { grid-template-columns: repeat(4, 1fr); }
  .process-steps             { grid-template-columns: repeat(2, 1fr); }
  .team-grid                 { grid-template-columns: repeat(2, 1fr); }
  .value-grid                { grid-template-columns: repeat(3, 1fr); }
  .value-grid--two           { grid-template-columns: repeat(2, 1fr); }
  .value-grid--four          { grid-template-columns: repeat(2, 1fr); }
  .trusted-bar__logos        { grid-template-columns: repeat(6, 1fr); }
  .site-footer__cols         { grid-template-columns: repeat(2, 1fr); }
  .form__row--two            { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .cta-banner__inner         { flex-direction: row; align-items: center; }
  .feature-section__grid     { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}

/* ---------- >= 1024px : Tablet landscape / small laptop ---------- */
@media (min-width: 1024px) {
  .services-grid             { grid-template-columns: repeat(3, 1fr); }
  .post-grid                 { grid-template-columns: repeat(3, 1fr); }
  .case-grid                 { grid-template-columns: repeat(2, 1fr); }
  .process-steps             { grid-template-columns: repeat(4, 1fr); }
  .team-grid                 { grid-template-columns: repeat(4, 1fr); }
  .value-grid--four          { grid-template-columns: repeat(4, 1fr); }
  .site-footer__cols         { grid-template-columns: repeat(4, 1fr); }
  .feature-section__grid     { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
  .contact-layout            { grid-template-columns: 1.5fr 1fr; }
  .layout-with-sidebar       { grid-template-columns: 1fr 320px; }
}

/* ---------- >= 1280px : Desktop ---------- */
@media (min-width: 1280px) {
  .services-grid--detailed   { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- >= 1536px : Wide ---------- */
@media (min-width: 1536px) {
  .hero--dark { padding: var(--space-4xl) 0; }
}

/* ---------- Landscape phones — flatter heros ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero--dark { padding: var(--space-2xl) 0; }
  .page-hero { padding: var(--space-xl) 0 var(--space-md); }
  .primary-menu { padding-bottom: var(--space-2xl); }
}

/* ---------- Hover-capable only ---------- */
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
@media (hover: none) {
  /* Disable hover-only effects on touch */
  .card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .btn:hover  { transform: none; }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- High contrast & dark scheme nudge ---------- */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: #2a2a3e;
    --color-border: #b0b0b8;
  }
  .btn--ghost { border-width: 2px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cta-banner, .hero__pills,
  .site-nav, .skip-link, .pagination { display: none !important; }
  body { background: #fff; color: #000; }
  .hero--dark { background: #fff; color: #000; padding: 1rem 0; }
  .hero--dark h1, .hero--dark h2, .hero--dark h3 { color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding: 1rem 0; page-break-inside: avoid; }
}