/* ==========================================================
   MoreTech BMP360 — MOBILE RESPONSIVE FIX
   Layer: 6 (Override — Mobile Fixes)
   Version: 1.0.0
   ──────────────────────────────────────────────────────────
   Depends on: 00-tokens, 01-foundation, 03-sections-home,
               03-sections-home-process-flow-v4
   ──────────────────────────────────────────────────────────
   PURPOSE:
   Fix mobile layout issues on visitor-facing homepage sections:
     1. Process Flow (.process-flow-section)
     2. Services Preview (.platform-modules)
     3. Capabilities Overview (.capabilities-overview)

   ISSUES ADDRESSED:
   - Process flow cards overflow on small screens due to
     flex-row layout cramming number + icon + title + desc
     into one horizontal line
   - Text getting cut off / wrapping poorly in step cards
   - Icons not aligned correctly on mobile
   - Inconsistent spacing between sections
   - Elements too large for 320-480px screens
   - Missing single-column collapse for capabilities
   - Buttons not full-width on mobile

   RULES:
   - Desktop layout is NOT affected (all rules inside media queries)
   - No inline style hacks
   - Uses existing design tokens from 00-tokens.css
   - No structural PHP changes required
   - Load AFTER all section CSS files
   ========================================================== */


/* ██████████████████████████████████████████████████████████
   §1  PROCESS FLOW — MOBILE FIX
   ──────────────────────────────────────────────────────────
   ROOT CAUSE:
   The v4 mobile layout uses flex-direction: row with
   step-number + icon + title + description all side-by-side.
   On screens < 480px this causes horizontal overflow because
   the icon (52px) + step number (28px) + text content don't
   fit. The description text wraps but gets clipped.

   FIX:
   Switch to a stacked vertical card layout on mobile where:
   - Step number badge stays top-left (absolute positioned)
   - Icon is centered above text
   - Title and description are below, full-width
   - Each card is self-contained with proper padding
   ██████████████████████████████████████████████████████████ */

/* ── Tablet (481px – 767px): Keep row layout but fix overflow ── */
@media (max-width: 767px) and (min-width: 481px) {
  .process-flow-steps {
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-5);
    padding: 0 var(--mt-space-4);
  }

  .process-flow-step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--mt-space-2) var(--mt-space-4);
    align-items: start;
    text-align: left;
    padding: var(--mt-space-5) var(--mt-space-5) var(--mt-space-5) var(--mt-space-5);
    position: relative;
  }

  /* Step number: sits in row 1, col 1 */
  .process-flow-step .pf-step-number {
    position: static;
    grid-row: 1;
    grid-column: 1;
    flex-shrink: 0;
    align-self: center;
  }

  /* Icon: sits in row 1, col 1 area — hide on tablet row layout, show via grid */
  .process-flow-step .process-flow-icon {
    grid-row: 1 / 3;
    grid-column: 1;
    margin: 0;
    align-self: start;
    display: none; /* Hide icon on tablet to give text more room */
  }

  /* Title: row 1, col 2 */
  .process-flow-step .process-flow-step-title {
    grid-row: 1;
    grid-column: 2;
    text-align: left;
    margin-bottom: 0;
    align-self: center;
  }

  /* Description: row 2, spans both columns */
  .process-flow-step .process-flow-step-desc {
    grid-row: 2;
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* ── Small phones (320px – 480px): Full vertical stacked layout ── */
@media (max-width: 480px) {
  .process-flow-section {
    padding: var(--mt-space-12) 0;
  }

  .process-flow-header {
    margin-bottom: var(--mt-space-6);
    padding: 0 var(--mt-space-3);
  }

  .process-flow-title {
    font-size: 1.35rem !important;
    line-height: 1.3;
  }

  .process-flow-subtitle {
    font-size: var(--mt-text-sm) !important;
    line-height: 1.6;
  }

  /* Eyebrow */
  .pf-eyebrow {
    font-size: 0.65rem;
    padding-left: 16px;
  }

  .pf-eyebrow::before {
    width: 10px;
  }

  /* Steps container */
  .process-flow-scroll {
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    cursor: default !important;
  }

  .process-flow-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mt-space-4) !important;
    padding: 0 var(--mt-space-3) !important;
  }

  /* Each step: VERTICAL stacked card layout */
  .process-flow-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: var(--mt-space-5) var(--mt-space-4) var(--mt-space-5) !important;
    gap: 0 !important;
    position: relative;
    scroll-snap-align: none !important;
  }

  /* Remove hover transform on touch */
  .process-flow-step:hover {
    transform: none !important;
  }

  /* Top accent bar: full width on mobile */
  .process-flow-step::before {
    left: 0 !important;
    right: 0 !important;
    opacity: 1 !important;
  }

  /* Step number: top-left badge */
  .process-flow-step .pf-step-number {
    position: absolute !important;
    top: 12px !important;
    left: 14px !important;
    width: 26px;
    height: 26px;
    font-size: 0.62rem;
    background: rgba(var(--mt-brand-primary-rgb), 0.10);
    color: var(--mt-brand-primary);
  }

  /* Icon: centered, properly sized */
  .process-flow-step .process-flow-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.15rem !important;
    margin: 0 auto var(--mt-space-3) auto !important;
    flex-shrink: 0;
    display: flex !important;
  }

  /* Title */
  .process-flow-step .process-flow-step-title {
    text-align: center !important;
    font-size: var(--mt-text-base) !important;
    font-weight: var(--mt-weight-bold);
    margin-bottom: var(--mt-space-2) !important;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Description */
  .process-flow-step .process-flow-step-desc {
    text-align: center !important;
    font-size: var(--mt-text-sm) !important;
    line-height: 1.65 !important;
    color: var(--mt-text-muted);
    margin-bottom: 0 !important;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Hide connector lines */
  .process-flow-step.has-connector::after {
    display: none !important;
  }

  /* Hide nav arrows */
  .pf-nav {
    display: none !important;
  }

  /* Hide scroll fades */
  .pf-fade {
    display: none !important;
  }
}


/* ██████████████████████████████████████████████████████████
   §2  SERVICES PREVIEW (Platform Modules) — MOBILE FIX
   ──────────────────────────────────────────────────────────
   ROOT CAUSE:
   Bootstrap grid columns (col-lg-*, col-md-*) stack on
   mobile but module-card padding and icon sizes don't
   scale down enough. Feature bullet lists and card links
   need tighter spacing on small screens.

   FIX:
   - Reduce card padding on small screens
   - Scale icons down
   - Make CTA buttons full-width
   - Tighten typography
   - Ensure proper single-column stack with even gaps
   ██████████████████████████████████████████████████████████ */

/* ── Tablet adjustments (481px – 767px) ── */
@media (max-width: 767px) {
  .platform-modules {
    padding: var(--mt-space-12) 0;
  }

  .platform-modules-header {
    margin-bottom: var(--mt-space-8);
    padding: 0 var(--mt-space-3);
  }

  /* Ensure cards stack with proper spacing */
  .platform-modules .row {
    gap: var(--mt-space-4) 0;
  }

  .platform-modules .row > [class*="col-"] {
    margin-bottom: var(--mt-space-4);
  }

  .module-card {
    padding: var(--mt-space-6) var(--mt-space-5);
  }

  /* CTA button full-width */
  .platform-modules-cta .btn {
    width: 100%;
    max-width: 320px;
    display: block;
    margin: 0 auto;
  }
}

/* ── Small phones (320px – 480px) ── */
@media (max-width: 480px) {
  .platform-modules {
    padding: var(--mt-space-10) 0;
  }

  .platform-modules-header {
    margin-bottom: var(--mt-space-6);
    padding: 0 var(--mt-space-2);
  }

  .platform-modules-header h2,
  .platform-modules-title {
    font-size: 1.35rem !important;
    line-height: 1.3;
  }

  .platform-modules-header p,
  .platform-modules-subtitle {
    font-size: var(--mt-text-sm) !important;
    line-height: 1.6;
  }

  /* Tighten card spacing */
  .platform-modules .row > [class*="col-"] {
    padding-left: var(--mt-space-2);
    padding-right: var(--mt-space-2);
    margin-bottom: var(--mt-space-3);
  }

  .module-card {
    padding: var(--mt-space-5) var(--mt-space-4) !important;
    border-radius: var(--mt-radius-lg);
  }

  /* Remove hover transforms on touch */
  .module-card:hover {
    transform: none;
  }

  /* Scale down icon */
  .module-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
    margin-bottom: var(--mt-space-4);
    border-radius: var(--mt-radius-md);
  }

  /* Card title */
  .module-card h4 {
    font-size: var(--mt-text-base);
    margin-bottom: var(--mt-space-2);
  }

  /* Card description */
  .module-card p {
    font-size: var(--mt-text-sm);
    margin-bottom: var(--mt-space-3);
  }

  /* Feature bullet list */
  .module-card ul li {
    font-size: 0.72rem;
    margin-bottom: var(--mt-space-1);
    padding-left: 16px;
  }

  /* Card link */
  .module-card a {
    font-size: 0.72rem;
  }

  /* CTA button */
  .platform-modules-cta {
    margin-top: var(--mt-space-8);
  }

  .platform-modules-cta .btn {
    width: 100%;
    max-width: 280px;
    padding: 12px 24px;
    font-size: var(--mt-text-sm);
  }
}


/* ██████████████████████████████████████████████████████████
   §3  CAPABILITIES OVERVIEW — MOBILE FIX
   ──────────────────────────────────────────────────────────
   ROOT CAUSE:
   The capabilities grid uses Bootstrap col-md-6 col-lg-4
   which collapses to 2-column on medium and 1-column
   on small — but the card padding, icon size, and
   metrics row don't adapt well to very narrow screens.
   Title underline accent overflows on small phones.
   Metrics row can be cramped.

   FIX:
   - Force single-column below 576px
   - Scale down card padding and icon sizes
   - Wrap metrics row properly
   - Full-width metric items on very small screens
   - Center-align text on mobile for cleaner look
   ██████████████████████████████████████████████████████████ */

/* ── Tablet (481px – 767px) ── */
@media (max-width: 767px) {
  .capabilities-overview {
    padding: var(--mt-space-12) 0;
  }

  .capabilities-overview .section-header,
  .capabilities-overview .text-center {
    padding: 0 var(--mt-space-3);
  }

  /* Ensure proper card stacking with gaps */
  .capabilities-overview .row > [class*="col-"] {
    margin-bottom: var(--mt-space-4);
  }

  .capability-card {
    padding: var(--mt-space-5) var(--mt-space-5);
    text-align: center;
    align-items: center;
  }

  .capability-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .capability-title {
    text-align: center;
  }

  .capability-text {
    text-align: center;
  }

  /* Remove hover transforms on touch */
  .capability-card:hover {
    transform: none;
  }

  /* Metrics */
  .capabilities-metrics {
    margin-top: var(--mt-space-8);
    padding-top: var(--mt-space-6);
  }

  .capabilities-metrics .row {
    gap: var(--mt-space-3) 0;
  }

  .capabilities-metrics .row > [class*="col-"] {
    margin-bottom: var(--mt-space-3);
  }
}

/* ── Small phones (320px – 480px) ── */
@media (max-width: 480px) {
  .capabilities-overview {
    padding: var(--mt-space-10) 0;
  }

  .capabilities-title {
    font-size: 1.35rem !important;
    padding-bottom: var(--mt-space-3);
  }

  .capabilities-title::after {
    width: 48px;
    height: 3px;
  }

  .capabilities-subtitle {
    font-size: var(--mt-text-sm) !important;
    line-height: 1.6;
    padding: 0 var(--mt-space-2);
  }

  /* Force single column */
  .capabilities-overview .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: var(--mt-space-2);
    padding-right: var(--mt-space-2);
    margin-bottom: var(--mt-space-3);
  }

  .capability-card {
    padding: var(--mt-space-5) var(--mt-space-4) !important;
    border-radius: var(--mt-radius-lg);
    text-align: center;
    align-items: center;
  }

  .capability-icon {
    width: 46px !important;
    height: 46px !important;
    font-size: 1.2rem !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--mt-space-4);
  }

  .capability-title {
    font-size: var(--mt-text-base);
    text-align: center;
  }

  .capability-text {
    font-size: var(--mt-text-sm);
    text-align: center;
    line-height: 1.6;
  }

  /* Metrics: 2-column grid on small phones */
  .capabilities-metrics .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--mt-space-2);
    justify-content: center;
  }

  .capabilities-metrics .row > [class*="col-"] {
    flex: 0 0 calc(50% - var(--mt-space-2));
    max-width: calc(50% - var(--mt-space-2));
    padding: 0;
    margin-bottom: 0;
  }

  .metric-item {
    padding: var(--mt-space-3) var(--mt-space-2) !important;
    border-radius: var(--mt-radius-md);
  }

  .metric-value {
    font-size: 1.4rem !important;
  }

  .metric-label {
    font-size: 0.62rem;
  }
}


/* ██████████████████████████████████████████████████████████
   §4  GLOBAL MOBILE SAFETY RULES
   ──────────────────────────────────────────────────────────
   These rules prevent overflow on ALL homepage sections
   without targeting specific classes. Safe global fixes.
   ██████████████████████████████████████████████████████████ */

/* Prevent any horizontal overflow on narrow screens */
@media (max-width: 767px) {
  .process-flow-section,
  .platform-modules,
  .capabilities-overview {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Ensure all containers respect viewport */
  .process-flow-section .container,
  .platform-modules .container,
  .capabilities-overview .container {
    padding-left: var(--mt-space-4);
    padding-right: var(--mt-space-4);
    max-width: 100%;
  }

  /* Prevent text overflow globally */
  .process-flow-step-title,
  .process-flow-step-desc,
  .module-card h4,
  .module-card p,
  .capability-title,
  .capability-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

@media (max-width: 480px) {
  .process-flow-section .container,
  .platform-modules .container,
  .capabilities-overview .container {
    padding-left: var(--mt-space-3);
    padding-right: var(--mt-space-3);
  }
}

/* ── Very small screens (320px) ── */
@media (max-width: 360px) {
  .process-flow-title,
  .platform-modules-header h2,
  .platform-modules-title,
  .capabilities-title {
    font-size: 1.25rem !important;
  }

  .process-flow-subtitle,
  .platform-modules-header p,
  .platform-modules-subtitle,
  .capabilities-subtitle {
    font-size: 0.8rem !important;
  }

  .process-flow-step {
    padding: var(--mt-space-4) var(--mt-space-3) !important;
  }

  .module-card {
    padding: var(--mt-space-4) var(--mt-space-3) !important;
  }

  .capability-card {
    padding: var(--mt-space-4) var(--mt-space-3) !important;
  }

  .process-flow-step .process-flow-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 1rem !important;
  }
}


/* ██████████████████████████████████████████████████████████
   §5  TOUCH DEVICE OPTIMIZATIONS
   ──────────────────────────────────────────────────────────
   Remove hover effects that cause issues on touch devices.
   Using @media (hover: none) for proper detection.
   ██████████████████████████████████████████████████████████ */

@media (hover: none) {
  .process-flow-step:hover,
  .module-card:hover,
  .capability-card:hover,
  .metric-item:hover {
    transform: none !important;
    box-shadow: var(--mt-shadow-card) !important;
  }

  .process-flow-step:hover .process-flow-icon,
  .module-card:hover .module-icon,
  .capability-card:hover .capability-icon {
    transform: none !important;
  }

  /* Keep the accent bar visible on mobile for process flow */
  .process-flow-step::before {
    opacity: 0.6;
  }
}


/* ██████████████████████████████████████████████████████████
   §6  REDUCED MOTION SUPPORT
   ██████████████████████████████████████████████████████████ */

@media (prefers-reduced-motion: reduce) {
  .process-flow-step,
  .module-card,
  .capability-card,
  .metric-item,
  .process-flow-icon,
  .module-icon,
  .capability-icon {
    transition: none !important;
  }
}