/* ============================================================
   RESPONSIVE.CSS — Global breakpoint overrides
   MWeb Design V2
   Breakpoints:  xs <576  |  sm 576+  |  md 768+  |  lg 992+  |  xl 1200+
   ============================================================ */


/* ============================================================
   GLOBAL — applies at all widths
   ============================================================ */

/* Touch target minimum */
button, a, [role="button"] { min-height: 44px; }

/* Fluid images */
img { max-width: 100%; height: auto; }

/* Horizontal scroll guard — set on html in global.css, not body (body clips fixed elements on iOS) */


/* ============================================================
   LARGE DESKTOP  1200px+
   ============================================================ */
@media (min-width: 1200px) {
  :root {
    --container-max: 1240px;
  }
}


/* ============================================================
   DESKTOP  992px – 1199px
   ============================================================ */
@media (max-width: 1199px) {
  :root {
    --container-px: clamp(24px, 4vw, 48px);
  }
}


/* ============================================================
   TABLET  768px – 991px
   ============================================================ */
@media (max-width: 991px) {

  /* Typography scale down */
  :root {
    --fs-5xl: clamp(2.5rem, 6vw, 3.5rem);
    --fs-4xl: clamp(2rem, 5vw, 2.75rem);
    --fs-3xl: clamp(1.75rem, 4vw, 2.25rem);
  }

  /* Homepage — hero split becomes stacked */
  .hero-split { grid-template-columns: 1fr !important; }
  .hero-visual { display: none; } /* hide carousel on tablet if needed */

  /* Services detail sections — stack */
  .svc-detail { grid-template-columns: 1fr !important; gap: var(--sp-10) !important; }
  .svc-detail--reverse .svc-detail__visual { order: -1; }

  /* Pricing tabs — allow scroll */
  .prc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .prc-tab  { white-space: nowrap; flex-shrink: 0; }

  /* Plans grid — 2 col */
  .prc-plans { grid-template-columns: repeat(2, 1fr) !important; }

  /* Find-your-design — hide sidebar, show filter bar */
  .fyd-sidebar { display: none !important; }
  .fyd-main    { grid-template-columns: 1fr !important; }

  /* About — header stack */
  .abt-header__inner { grid-template-columns: 1fr !important; }
  .abt-header__photo-wrap { max-width: 360px; }
  .abt-skills__inner { grid-template-columns: 1fr !important; gap: var(--sp-10) !important; }

  /* Contact — stack */
  .cnt-body__inner { grid-template-columns: 1fr !important; }
  .cnt-sidebar { max-width: 100%; }

  /* Designs — 2 col grid */
  .dsg-grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ============================================================
   SMALL TABLET / LARGE PHONE  576px – 767px
   ============================================================ */
@media (max-width: 767px) {

  :root {
    --container-px: 20px;
  }

  /* Footer — 2 col on small tablet */
  .mwd-footer__grid { grid-template-columns: 1fr 1fr !important; gap: var(--sp-8) !important; }

  /* Mission/vision */
  .abt-mission__grid { grid-template-columns: 1fr !important; }
  .abt-mission__col:first-child { border-right: none !important; border-bottom: 1px solid var(--clr-warm-200); }

  /* Values — 2 col */
  .abt-values__grid { grid-template-columns: 1fr 1fr !important; }

  /* Why grid — 2 col */
  .abt-why__grid { grid-template-columns: 1fr 1fr !important; }

  /* Process grid */
  .svc-process__grid { grid-template-columns: 1fr 1fr !important; }

  /* Stats strip — 2 col */
  .hp-stats__grid { grid-template-columns: 1fr 1fr !important; }

  /* Legal TOC — hidden */
  .legal-toc { display: none !important; }
  .legal-body__inner { grid-template-columns: 1fr !important; }
}


/* ============================================================
   MOBILE  < 576px
   ============================================================ */
@media (max-width: 575px) {

  :root {
    --container-px: 16px;
    --navbar-h: 58px;
    --fs-5xl: clamp(2rem, 9vw, 2.75rem);
    --fs-4xl: clamp(1.75rem, 7.5vw, 2.25rem);
    --fs-3xl: clamp(1.5rem, 6.5vw, 1.875rem);
    --fs-2xl: clamp(1.25rem, 5vw, 1.5rem);
  }

  /* Section spacing tighter */
  .mwd-section { padding: clamp(52px, 12vw, 80px) 0; }

  /* Section headers */
  .mwd-section-title { font-size: var(--fs-3xl) !important; }
  .mwd-section-sub   { font-size: var(--fs-sm) !important; }

  /* Footer — single column */
  .mwd-footer__grid  { grid-template-columns: 1fr !important; }
  .mwd-footer__bottom-inner { flex-direction: column; gap: var(--sp-3); text-align: center; }
  .mwd-footer__legal { justify-content: center; }

  /* Buttons — full width in stacked CTA groups */
  .mwd-btn-group--mobile-full .mwd-btn { width: 100%; justify-content: center; }

  /* Homepage hero */
  .hp-hero__actions { flex-direction: column; align-items: stretch; }
  .hp-hero__actions .mwd-btn { justify-content: center; }
  .hp-hero__stats { grid-template-columns: 1fr 1fr; }

  /* Platforms strip — smaller speed */
  .hp-platforms__track { animation-duration: 16s !important; }

  /* Designs — single column */
  .dsg-grid     { grid-template-columns: 1fr !important; }
  .dsg-filters__inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .dsg-filter-btn { flex-shrink: 0; }

  /* Modal */
  .dsg-modal__inner  { border-radius: 0 !important; }
  .dsg-modal__thumbs { display: none; }
  .dsg-modal__info   { padding: var(--sp-5); }

  /* Pricing — single column */
  .prc-plans     { grid-template-columns: 1fr !important; }
  .prc-tabs      { overflow-x: auto; flex-wrap: nowrap; }
  .prc-table     { font-size: var(--fs-xs) !important; }
  .prc-addons__grid { grid-template-columns: 1fr 1fr !important; }

  /* Contact */
  .cnt-form__row     { grid-template-columns: 1fr !important; }
  .cnt-form__section { padding: var(--sp-5) var(--sp-4) !important; }
  .cnt-form__foot    { padding: var(--sp-5) var(--sp-4) !important; }

  /* About */
  .abt-values__grid  { grid-template-columns: 1fr !important; }
  .abt-why__grid     { grid-template-columns: 1fr !important; }
  .abt-header__stats { flex-direction: column; gap: var(--sp-4); }

  /* Services FAQ */
  .svc-faq-q  { font-size: var(--fs-sm) !important; }

  /* Find-Your-Design */
  .fyd-top-bar      { flex-direction: column; gap: var(--sp-3); }
  .fyd-search-wrap  { width: 100%; }

  /* 404 */
  .e404-search { flex-direction: column; }
  .e404-search__btn { width: 100%; border-radius: var(--radius-sm) !important; height: 46px; }
  .e404-actions { flex-direction: column; width: 100%; }
  .e404-actions .mwd-btn { justify-content: center; width: 100%; }

  /* Legal */
  .legal-header__meta { flex-direction: column; gap: var(--sp-2); }
  .legal-header__meta-sep { display: none; }

  /* Maintenance countdown smaller */
  .mnt-count-block { min-width: 60px; padding: var(--sp-3); }
  .mnt-count-num   { font-size: var(--fs-2xl) !important; }
  .mnt-newsletter-form { flex-direction: column; }
  .mnt-newsletter-btn  { width: 100%; height: 44px; }
}


/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .mwd-navbar,
  .mwd-scroll-top,
  #mwd-chat-bubble,
  .fb_dialog,
  .mwd-footer__social,
  .mwd-footer__top-rule { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; color: #555; }
  .mwd-section { break-inside: avoid; }
}