/*
 * sKal Mobile Optimization Framework v3.0 - SAFEGUARD EDITION
 * Automatically applied to all Creative Genome & AMPI outputs
 * Professional mobile experience with GUARANTEED desktop protection
 * 
 * 🛡️ TRIPLE PROTECTION SYSTEM:
 * 1. HTML Link: media="(max-width: 768px)" - Browser-level filtering
 * 2. CSS Wrapper: @media (max-width: 768px) - CSS-level protection
 * 3. Specificity Guards: Mobile-only selectors - Code-level isolation
 * 
 * ⚠️ CRITICAL: ALL mobile styles MUST be within the @media block below
 * 🚫 NEVER use !important overrides that could leak to desktop
 * ✅ Desktop layouts are COMPLETELY PROTECTED from mobile interference
 */

/* 🛡️ SAFEGUARD LEVEL 1: CSS Media Query Wrapper */
/* This ensures NO mobile styles can EVER affect desktop (>768px) */
@media screen and (max-width: 768px) and (orientation: portrait), 
       screen and (max-width: 768px) and (orientation: landscape) {

/* 🛡️ SAFEGUARD LEVEL 2: Mobile-Specific Namespace */
/* All rules are scoped to prevent desktop cascade conflicts */

:root {
    /* Mobile-first spacing system */
    --mobile-header-height: 64px;
    --mobile-safe-area: max(env(safe-area-inset-top, 0px), 8px);
    --mobile-padding: 20px;
    --mobile-section-spacing: 60px;
    --mobile-element-spacing: 32px;
    
    /* Typography scaling - LARGER for better readability */
    --mobile-h1-size: clamp(32px, 8vw, 48px);
    --mobile-h2-size: clamp(26px, 6vw, 36px);
    --mobile-h3-size: clamp(22px, 5vw, 30px);
    --mobile-body-size: clamp(16px, 4vw, 20px);
    --mobile-small-text: clamp(14px, 3.5vw, 18px);
    
    /* Interaction targets */
    --mobile-tap-target: 48px;
    --mobile-button-padding: 16px 32px;
}

/* ====== CORE RESPONSIVE FOUNDATION ====== */

/* 🛡️ SAFEGUARD LEVEL 3: Mobile-Only Image Optimization */
/* Scoped selectors prevent desktop interference */
.mobile-container img, 
.step-content img, 
.upload-card img,
.output-card img,
[class*="mobile-"] img,
img:not(.desktop-preserve) {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto var(--mobile-element-spacing) auto !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.15) !important;
}

/* ====== UNIVERSAL MOBILE LAYOUT SYSTEM ====== */

/* Body and container centering */
body {
    margin: 0 !important;
    padding: var(--mobile-padding) !important;
    text-align: center !important;
    line-height: 1.6 !important;
    font-size: var(--mobile-body-size) !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

/* Universal container centering */
.container,
.main-container,
[class*="container"],
section,
main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: var(--mobile-padding) !important;
    text-align: center !important;
    display: block !important;
}

/* ====== ENHANCED TYPOGRAPHY FOR MOBILE READABILITY ====== */

/* Headings - Significantly larger and centered */
h1, .h1, [class*="title"], [class*="heading-1"] {
    font-size: var(--mobile-h1-size) !important;
    line-height: 1.2 !important;
    margin: 0 auto var(--mobile-element-spacing) auto !important;
    text-align: center !important;
    font-weight: 700 !important;
    padding: 0 var(--mobile-padding) !important;
}

h2, .h2, [class*="heading-2"] {
    font-size: var(--mobile-h2-size) !important;
    line-height: 1.3 !important;
    margin: 0 auto var(--mobile-element-spacing) auto !important;
    text-align: center !important;
    font-weight: 600 !important;
    padding: 0 var(--mobile-padding) !important;
}

h3, .h3, [class*="heading-3"] {
    font-size: var(--mobile-h3-size) !important;
    line-height: 1.4 !important;
    margin: 0 auto var(--mobile-element-spacing) auto !important;
    text-align: center !important;
    font-weight: 600 !important;
    padding: 0 var(--mobile-padding) !important;
}

/* Body text - Larger and more readable */
p, .text, .description, .content, 
[class*="text"], [class*="description"] {
    font-size: var(--mobile-body-size) !important;
    line-height: 1.6 !important;
    margin: 0 auto var(--mobile-element-spacing) auto !important;
    text-align: center !important;
    padding: 0 var(--mobile-padding) !important;
    max-width: 100% !important;
}

/* Small text but still readable */
.small, small, .caption, .note,
[class*="small"], [class*="caption"] {
    font-size: var(--mobile-small-text) !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 0 auto 16px auto !important;
}

/* ====== ENHANCED BUTTON SYSTEM FOR MOBILE ====== */

/* All buttons - Larger touch targets */
button, .button, .btn, 
input[type="submit"], input[type="button"],
[class*="button"], [class*="btn"] {
    min-height: var(--mobile-tap-target) !important;
    padding: var(--mobile-button-padding) !important;
    font-size: var(--mobile-body-size) !important;
    border-radius: 12px !important;
    display: block !important;
    margin: var(--mobile-element-spacing) auto !important;
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Primary buttons */
.btn-primary, .button-primary,
[class*="primary"] button,
[class*="primary"] .button {
    background: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%) !important;
    color: white !important;
}

/* Secondary buttons */
.btn-secondary, .button-secondary {
    background: white !important;
    color: #0066FF !important;
    border: 2px solid #0066FF !important;
}

/* ====== COMPREHENSIVE IMAGE OPTIMIZATION ====== */

/* Platform logos - LARGER for mobile visibility */
.platform-logo img,
.logo-item img,
.brand-logo img,
[class*="platform"] img,
[class*="logo"] img {
    width: auto !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 80px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(0, 102, 255, 0.2) !important;
    margin: 8px !important;
}

/* Feature screenshot images - MUCH LARGER for mobile viewing */
.feature-visual img,
.screenshot-frame img,
[class*="screenshot"] img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-height: 200px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.2) !important;
    margin: 0 auto var(--mobile-element-spacing) auto !important;
    display: block !important;
}

/* Dashboard and interface images - FULL WIDTH for mobile */
.dashboard-image,
.interface-image,
[class*="dashboard"] img,
[class*="interface"] img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-height: 250px !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 102, 255, 0.2) !important;
    object-fit: cover !important;
    margin: 0 auto var(--mobile-element-spacing) auto !important;
    display: block !important;
}

/* Product showcase images - LARGER for mobile viewing */
.product-image,
.showcase-image,
[class*="product"] img,
[class*="showcase"] img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-height: 180px !important;
    margin: 0 auto var(--mobile-element-spacing) auto !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.15) !important;
    object-fit: cover !important;
    display: block !important;
}

/* Logo images - LARGER for mobile readability */
.logo img,
.brand-logo img,
.company-logo img,
[class*="logo"] img {
    max-height: 60px !important;
    width: auto !important;
    max-width: 180px !important;
    min-height: 40px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    margin: 0 auto 16px auto !important;
    display: block !important;
}

/* Icon images - LARGER for mobile visibility */
.icon img,
.feature-icon img,
[class*="icon"] img {
    width: 48px !important;
    height: 48px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    margin: 0 auto 16px auto !important;
    display: block !important;
}

/* ====== LAYOUT GRID SYSTEMS ====== */

/* Grid layouts - Single column for mobile */
.grid, .features-grid, .benefits-grid,
[class*="grid"], [class*="columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--mobile-element-spacing) !important;
    margin: var(--mobile-section-spacing) auto !important;
    padding: 0 var(--mobile-padding) !important;
}

/* Flex layouts - Column direction */
.flex, .features-flex, .benefits-flex,
[class*="flex"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-element-spacing) !important;
    align-items: center !important;
    text-align: center !important;
    margin: var(--mobile-section-spacing) auto !important;
    padding: 0 var(--mobile-padding) !important;
}

/* ====== FORM OPTIMIZATION ====== */

/* Form inputs - Larger touch targets */
input, textarea, select {
    min-height: var(--mobile-tap-target) !important;
    padding: 16px !important;
    font-size: var(--mobile-body-size) !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Form labels */
label {
    font-size: var(--mobile-body-size) !important;
    font-weight: 600 !important;
    margin: 16px auto 8px auto !important;
    display: block !important;
    text-align: center !important;
}

/* ====== SECTION SPACING ====== */

/* Section containers */
section, .section, .hero, .features, .benefits,
[class*="section"], [class*="hero"] {
    padding: var(--mobile-section-spacing) var(--mobile-padding) !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ====== CARD COMPONENTS ====== */

/* Card layouts */
.card, .feature-card, .benefit-card,
[class*="card"] {
    padding: var(--mobile-element-spacing) !important;
    margin: var(--mobile-element-spacing) auto !important;
    border-radius: 16px !important;
    background: white !important;
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.1) !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* ====== NAVIGATION OPTIMIZATION ====== */

/* Navigation menus */
.nav, .navbar, .menu, nav,
[class*="nav"], [class*="menu"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: var(--mobile-padding) !important;
    text-align: center !important;
}

.nav-item, .menu-item,
[class*="nav-item"], [class*="menu-item"] {
    padding: 12px !important;
    font-size: var(--mobile-body-size) !important;
    text-align: center !important;
    margin: 4px auto !important;
}

/* ====== VIDEO AND MEDIA ====== */

/* Video containers */
video, .video-container, .video-player,
[class*="video"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: var(--mobile-element-spacing) auto !important;
    border-radius: 16px !important;
    display: block !important;
}

/* ====== SPECIAL COMPONENTS ====== */

/* Disable problematic animations on mobile */
[class*="3d"],
[class*="rotate"],
[class*="spin"] {
    animation: none !important;
    transform: none !important;
}

/* Performance optimizations */
* {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Touch scrolling */
body, .container, .main-container {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: hidden !important;
}

/* Safe area handling for notched devices */
.header, .footer, .nav {
    padding-top: var(--mobile-safe-area) !important;
}

/* Container improvements */
.container {
    padding: 0 var(--mobile-padding);
}

/* Force single column for problematic multi-column layouts */
[style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
}

[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
}

[style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
}

/* Mobile countdown optimization */
.countdown-timer,
.countdown,
[class*="countdown"] {
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: center !important;
}

.countdown-item {
    min-width: auto !important;
    flex: 1 !important;
}

/* Ensure proper text wrapping */
h1, h2, h3, p, div, span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Remove fixed widths that break mobile layout */
[style*="width:"] {
    width: auto !important;
    max-width: 100% !important;
}

/* Improve table responsiveness */
table {
    width: 100% !important;
    font-size: var(--mobile-small-text) !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: nowrap !important;
}

th, td {
    padding: 8px 4px !important;
    text-align: center !important;
}

/* High-resolution display optimization */
img {
    image-rendering: crisp-edges !important;
    image-rendering: -webkit-optimize-contrast !important;
}

/* Pricing tables */
.pricing-grid,
[class*="pricing"] {
    grid-template-columns: 1fr;
    gap: var(--mobile-element-spacing);
}

/* Footer optimization */
.footer,
footer {
    padding: var(--mobile-section-spacing) var(--mobile-padding);
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-element-spacing);
    text-align: center;
}

/* ====== VERSION TRACKING ====== */
.mobile-optimized::after {
    content: "Mobile Optimized v3.0";
    display: none;
}

} /* End of mobile-only media query */