/**
 * RMG–NexGN Software - Comprehensive Responsive Stylesheet
 * 
 * Covers: Home Page, Products Page, Contact Us Page
 * Breakpoints: 1280px (Large Desktop), 1024px (Tablet Landscape),
 *              768px (Tablet Portrait), 640px (Large Mobile), 480px (Small Mobile)
 * 
 * This file supplements editorial.css, home.css, base.css, and components.css
 * with deep responsive rules for all inline-styled layouts and missing breakpoints.
 */

/* ==========================================================================
   VIEWPORT META SAFETY
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ==========================================================================
   SHARED RESPONSIVE CONTAINER OVERRIDES
   ========================================================================== */
.nom-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* ==========================================================================
   1280px — Large Desktop Adjustments
   ========================================================================== */
@media (max-width: 1280px) {
  /* Ecosystem canvas slightly smaller */
  .nx-ecosystem-canvas {
    max-width: 600px;
  }
}

/* ==========================================================================
   1024px — TABLET LANDSCAPE
   ========================================================================== */
@media (max-width: 1024px) {

  /* --- HEADER / NAV --- */
  .nom-nav-container {
    padding: 0 16px;
  }

  /* --- HOME: Stats Strip --- */
  .nx-stats-strip-section .nx-stats-strip-card {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding: 20px;
  }

  .nx-stat-divider {
    display: none;
  }

  .nx-stat-item {
    flex: 0 1 calc(33.33% - 12px);
    justify-content: center;
  }

  /* --- HOME: Workflow Track --- */
  .nx-workflow-track {
    flex-wrap: wrap !important;
    gap: 12px !important;
    overflow-x: visible !important;
  }

  .nx-wf-step {
    flex: 0 1 calc(20% - 10px) !important;
    min-width: 110px !important;
  }

  /* --- HOME: Ecosystem --- */
  .nx-ecosystem-canvas {
    max-width: 520px;
    min-height: 420px;
  }

  .nx-eco-satellite-node {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
  }

  /* --- HOME: Outcomes Grid (inline styled as 1fr 1fr) --- */
  .nom-outcomes-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* --- PRODUCTS: Showcase Card --- */
  .product-showcase-card,
  .product-showcase-card.is-even {
    grid-template-columns: 1fr !important;
    padding: 28px !important;
    gap: 28px !important;
  }

  .product-showcase-card.is-even .product-showcase-content {
    order: 1 !important;
  }

  .product-showcase-card.is-even .product-showcase-media {
    order: 2 !important;
  }

  .product-showcase-media img {
    height: 260px !important;
  }

  /* --- PRODUCTS: Feature Grid inside cards (inline 1fr 1fr) --- */
  .product-showcase-content [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- CONTACT: Main Form + Offices Grid --- */
  .contact-main-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- CONTACT: Form rows stack on tablet --- */
  .contact-form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* --- CONTACT: Map header flex --- */
  .contact-map-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
}

/* ==========================================================================
   900px — IN-BETWEEN BREAKPOINT
   ========================================================================== */
@media (max-width: 900px) {

  /* --- HOME: Solutions Section Header --- */
  .nx-sol-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* --- HOME: Agentic Grid --- */
  .nx-agentic-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- HOME: Workflow Track --- */
  .nx-workflow-track {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  .nx-wf-step {
    scroll-snap-align: start;
    flex: 0 0 140px !important;
    min-width: 140px !important;
  }

  /* --- FOOTER: Footer top columns --- */
  .nom-footer-grid,
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

/* ==========================================================================
   768px — TABLET PORTRAIT
   ========================================================================== */
@media (max-width: 768px) {

  /* --- SHARED: Reduce section padding for inner pages --- */
  .nom-inner-hero {
    padding: 100px 0 40px !important;
  }

  /* --- SHARED: Container padding tighter --- */
  .nom-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --- HOME: Stats Strip --- */
  .nx-stats-strip-section .nx-stats-strip-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px !important;
  }

  .nx-stat-item {
    flex: 1 1 100% !important;
    width: 100% !important;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .nx-stat-item:last-child {
    border-bottom: none;
  }

  /* --- HOME: Ecosystem Canvas --- */
  .nx-ecosystem-canvas {
    max-width: 380px;
    min-height: 380px;
  }

  .nx-eco-satellite-node {
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
  }

  .nx-eco-center-hub {
    transform: scale(0.85);
  }

  /* --- HOME: Workflow Track --- */
  .nx-wf-step {
    flex: 0 0 130px !important;
    min-width: 130px !important;
    padding: 12px !important;
  }

  .nx-wf-title {
    font-size: 0.78rem !important;
  }

  /* --- HOME: Outcomes metrics grid (inline 1fr 1fr inside outcomes) --- */
  .nom-outcomes-section [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* --- PRODUCTS: Product image height --- */
  .product-showcase-media img {
    height: 220px !important;
  }

  /* --- PRODUCTS: Product title size --- */
  .product-showcase-content h2 {
    font-size: 1.6rem !important;
  }

  /* --- PRODUCTS: Product pricing hook flex --- */
  .product-pricing-hook {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* --- CONTACT: Form field grids --- */
  .contact-form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* --- CONTACT: Main two-column grid --- */
  .contact-main-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- CONTACT: Map section header --- */
  .contact-map-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
    padding: 16px 20px !important;
  }

  /* --- CONTACT: Map iframe height --- */
  .contact-map-frame {
    height: 280px !important;
  }

  /* --- CONTACT: Payment section grid --- */
  .contact-payment-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- CONTACT: Main page padding reduction --- */
  .contact-page-main {
    padding: 40px 0 60px !important;
  }

  /* --- FOOTER --- */
  .nom-footer-grid,
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

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

/* ==========================================================================
   640px — LARGE MOBILE
   ========================================================================== */
@media (max-width: 640px) {

  /* --- SHARED: Hero title sizing --- */
  .nom-inner-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
  }

  .nom-inner-hero p {
    font-size: 0.95rem !important;
  }

  /* --- SHARED: Hero action buttons stack --- */
  .nom-inner-hero [style*="display: flex"][style*="gap: 14px"] {
    flex-direction: column !important;
    width: 100%;
  }

  .nom-inner-hero .btn-nom-black,
  .nom-inner-hero .btn-nom-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* --- HOME: Visual pillars mockup --- */
  .nx-pillar-mockup [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* --- HOME: Ecosystem Canvas Hide --- */
  .nx-ecosystem-canvas svg {
    display: none;
  }

  .nx-ecosystem-canvas {
    max-width: 100%;
    min-height: 320px;
  }

  .nx-eco-satellite-node {
    position: static !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
  }

  .nx-eco-satellites {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px !important;
    position: static !important;
  }

  .nx-eco-center-hub {
    position: static !important;
    transform: none !important;
    margin: 0 auto 16px auto !important;
  }

  .nx-ecosystem-canvas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 24px !important;
  }

  /* --- HOME: Journey Track --- */
  .nx-journey-track {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* --- HOME: Solutions card images --- */
  .nx-sol-img-wrap img {
    height: 160px !important;
  }

  /* --- PRODUCTS: Feature grid inside cards --- */
  .product-features-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- PRODUCTS: Card padding --- */
  .product-showcase-card {
    padding: 20px !important;
    gap: 20px !important;
  }

  /* --- PRODUCTS: Title smaller --- */
  .product-showcase-content h2 {
    font-size: 1.4rem !important;
  }

  /* --- PRODUCTS: Media image --- */
  .product-showcase-media img {
    height: 180px !important;
  }

  /* --- PRODUCTS: Buttons stack --- */
  .product-action-buttons {
    flex-direction: column !important;
    width: 100%;
  }

  .product-action-buttons .btn-nom-black,
  .product-action-buttons .btn-nom-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* --- PRODUCTS: Showcase list gap --- */
  .products-showcase-list {
    gap: 40px !important;
  }

  /* --- PRODUCTS: Main padding --- */
  .products-page-main {
    padding: 40px 0 60px !important;
  }

  /* --- CONTACT: Reduce padding on all cards --- */
  .contact-page-main .nom-container > div {
    border-radius: 12px !important;
  }

  /* --- CONTACT: Submit button --- */
  #formSubmitBtn {
    font-size: 0.92rem !important;
    padding: 12px 20px !important;
  }

  /* --- CONTACT: Map toggle buttons stack --- */
  .contact-map-header > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .contact-map-header .btn-nom-outline {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    flex: 1 1 auto;
    text-align: center;
  }

  /* --- CONTACT: Map frame --- */
  .contact-map-frame {
    height: 240px !important;
  }
}

/* ==========================================================================
   480px — SMALL MOBILE
   ========================================================================== */
@media (max-width: 480px) {

  /* --- SHARED: Container minimal padding --- */
  .nom-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* --- SHARED: Inner hero tighter --- */
  .nom-inner-hero {
    padding: 90px 0 32px !important;
  }

  .nom-inner-hero h1 {
    font-size: 1.65rem !important;
  }

  /* --- SHARED: Section padding tighter --- */
  .section,
  section[style*="padding: 80px 0"],
  section[style*="padding: 70px 0"],
  section[style*="padding: 60px 0"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* --- SHARED: Section header title --- */
  section h2[style*="font-family: var(--font-serif)"] {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
  }

  /* --- HOME: Agentic visual card --- */
  .nx-agentic-visual-card {
    padding: 16px !important;
  }

  .nx-agentic-flow-step {
    gap: 10px !important;
  }

  /* --- HOME: Pillar card padding --- */
  .nx-pillar-card {
    padding: 20px !important;
  }

  /* --- HOME: Trust Bar --- */
  .nom-trust-bar {
    padding: 16px 0 !important;
  }

  .nom-trust-items {
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .nom-trust-item {
    font-size: 0.82rem !important;
  }

  /* --- PRODUCTS: Card smaller padding --- */
  .product-showcase-card {
    padding: 16px !important;
    gap: 16px !important;
    border-radius: 12px !important;
  }

  /* --- PRODUCTS: Media image shorter --- */
  .product-showcase-media img {
    height: 150px !important;
  }

  /* --- PRODUCTS: Title --- */
  .product-showcase-content h2 {
    font-size: 1.25rem !important;
  }

  /* --- PRODUCTS: Description --- */
  .product-showcase-content p {
    font-size: 0.88rem !important;
  }

  /* --- PRODUCTS: Badge and meta info --- */
  .product-showcase-content [style*="font-size: 0.75rem"] {
    font-size: 0.68rem !important;
  }

  /* --- PRODUCTS: Gap between product cards --- */
  .products-showcase-list {
    gap: 28px !important;
    margin-bottom: 40px !important;
  }

  /* --- PRODUCTS: Even tighter on small mobile --- */
  .products-page-main {
    padding: 24px 0 40px !important;
  }

  /* --- CONTACT: Tighter padding on mobile --- */
  .contact-page-main {
    padding: 24px 0 40px !important;
  }

  .contact-main-grid {
    margin-bottom: 32px !important;
  }

  /* --- CONTACT: Map frame even shorter --- */
  .contact-map-frame {
    height: 200px !important;
  }
}

/* ==========================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-dependent transforms on touch */
  .product-showcase-card:hover,
  .nom-product-card:hover,
  .card-glass:hover {
    transform: none;
  }

  /* Ensure tap targets are large enough (48px minimum) */
  .btn-nom-black,
  .btn-nom-outline,
  .btn,
  button,
  a.btn-nom-black,
  a.btn-nom-outline {
    min-height: 44px;
  }

  /* Enlarge form controls for touch */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    min-height: 48px;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}

/* ==========================================================================
   LANDSCAPE MOBILE (short viewport height)
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .nom-inner-hero {
    padding: 80px 0 24px !important;
    min-height: auto !important;
  }

  .hero-section {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 32px !important;
  }
}

/* ==========================================================================
   PRINT MEDIA (Progressive Enhancement)
   ========================================================================== */
@media print {
  .nom-header,
  .nom-loader-overlay,
  .nom-mouse-light,
  .mobile-drawer,
  .nx-ecosystem-canvas svg,
  .orbit-ring,
  .floating-badge {
    display: none !important;
  }

  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .nom-container,
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }
}