/*
 * sKal Landing Page Mobile Template v1.0
 * Standard mobile optimization template for ALL landing pages
 * Automatically integrates with AMPI (Adaptive Mobile Performance Intelligence)
 * 
 * 📱 MANDATORY MOBILE OPTIMIZATION:
 * This template MUST be applied to every landing page created
 * Ensures consistent mobile experience across all sKal pages
 */

/* 🛡️ SAFEGUARD: Mobile-only application */
@media screen and (max-width: 768px) and (orientation: portrait), 
       screen and (max-width: 768px) and (orientation: landscape) {

/* 📱 AMPI Integration Variables */
:root {
    /* AMPI Performance Optimizations */
    --ampi-touch-target: 44px;
    --ampi-font-scale: clamp(14px, 4vw, 18px);
    --ampi-spacing-unit: clamp(8px, 2vw, 16px);
    --ampi-container-padding: clamp(16px, 4vw, 24px);
    
    /* Mobile Performance Variables */
    --mobile-transition-speed: 0.2s;
    --mobile-animation-delay: 0.1s;
    --mobile-scroll-behavior: smooth;
}

/* 📱 STANDARD MOBILE LAYOUT */

/* Container System */
.landing-container, 
.page-container,
.content-wrapper {
    max-width: 100% !important;
    padding: 0 var(--ampi-container-padding) !important;
    margin: 0 auto !important;
}

/* Header Mobile */
.header, 
.navigation,
.nav-container {
    padding: var(--ampi-spacing-unit) var(--ampi-container-padding) !important;
}

/* Typography Mobile */
h1 {
    font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: var(--ampi-spacing-unit) !important;
}

h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
    line-height: 1.3 !important;
    margin-bottom: var(--ampi-spacing-unit) !important;
}

h3 {
    font-size: clamp(1.2rem, 4vw, 1.4rem) !important;
    line-height: 1.4 !important;
    margin-bottom: var(--ampi-spacing-unit) !important;
}

p, .body-text {
    font-size: var(--ampi-font-scale) !important;
    line-height: 1.6 !important;
    margin-bottom: var(--ampi-spacing-unit) !important;
}

/* 🎯 AMPI TOUCH OPTIMIZATION */

/* Touch Targets */
button, 
.button,
.btn,
a.cta,
.touch-target {
    min-height: var(--ampi-touch-target) !important;
    min-width: var(--ampi-touch-target) !important;
    padding: calc(var(--ampi-spacing-unit) * 1.5) calc(var(--ampi-spacing-unit) * 2) !important;
    font-size: var(--ampi-font-scale) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

/* Form Elements */
input, 
textarea, 
select {
    min-height: var(--ampi-touch-target) !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: var(--ampi-spacing-unit) !important;
    border-radius: 8px !important;
}

/* 📐 RESPONSIVE GRIDS */

/* Grid Systems */
.grid, 
.feature-grid,
.card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: calc(var(--ampi-spacing-unit) * 2) !important;
}

.two-column {
    grid-template-columns: 1fr !important;
}

.three-column {
    grid-template-columns: 1fr !important;
}

/* Flex Systems */
.flex-row {
    flex-direction: column !important;
    gap: var(--ampi-spacing-unit) !important;
}

.flex-center {
    align-items: center !important;
    text-align: center !important;
}

/* 🖼️ MEDIA OPTIMIZATION */

/* Images */
img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* Videos */
video {
    max-width: 100% !important;
    height: auto !important;
}

/* Hero Images */
.hero-image,
.banner-image {
    max-height: 60vh !important;
    object-fit: cover !important;
}

/* 📱 NAVIGATION MOBILE */

.nav-menu {
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform var(--mobile-transition-speed) ease !important;
}

.nav-menu.active {
    transform: translateX(0) !important;
}

.nav-item {
    padding: var(--ampi-spacing-unit) var(--ampi-container-padding) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    min-height: var(--ampi-touch-target) !important;
    display: flex !important;
    align-items: center !important;
}

/* 🚀 PERFORMANCE OPTIMIZATIONS */

/* Reduce animations for better performance */
* {
    animation-duration: var(--mobile-transition-speed) !important;
    transition-duration: var(--mobile-transition-speed) !important;
}

/* Optimize scrolling */
body {
    scroll-behavior: var(--mobile-scroll-behavior) !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Hardware acceleration for smooth animations */
.animated, 
.fade-in,
.slide-in {
    will-change: transform, opacity !important;
    transform: translateZ(0) !important;
}

/* 📋 FORM OPTIMIZATION */

.form-container {
    padding: var(--ampi-container-padding) !important;
}

.form-group {
    margin-bottom: calc(var(--ampi-spacing-unit) * 2) !important;
}

.form-label {
    font-size: var(--ampi-font-scale) !important;
    margin-bottom: var(--ampi-spacing-unit) !important;
    display: block !important;
}

/* 💳 CTA OPTIMIZATION */

.cta-section {
    padding: calc(var(--ampi-spacing-unit) * 3) var(--ampi-container-padding) !important;
    text-align: center !important;
}

.cta-button {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto var(--ampi-spacing-unit) auto !important;
    display: block !important;
}

/* Close AMPI mobile optimization block */
}

/* 📱 AMPI Analytics Integration */
/* This section enables AMPI to track mobile performance metrics */
@media screen and (max-width: 768px) {
    .ampi-track {
        /* AMPI tracking attributes will be added automatically */
    }
}