/* 
========================================================================
   OptiFlow AI Ltd - Premium Responsive Media Queries
   Target: d:/Website Design/OPT/responsive.css
========================================================================
*/

/* 1. MOBILE-FIRST RESPONSIVE TYPOGRAPHY & SCALING */
:root {
    --container-padding-x: 1.5rem;
}

@media (min-width: 640px) {
    :root {
        --container-padding-x: 2rem;
    }
}

@media (min-width: 768px) {
    :root {
        --container-padding-x: 3rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding-x: 4rem;
    }
}

/* 2. SPECIFIC VIEWPORT ADAPTATIONS */

/* --- Ultra-Small Devices (under 360px) --- */
@media (max-width: 360px) {
    html {
        font-size: 14px;
    }
    
    .hero-title {
        font-size: 2.25rem !important;
    }
    
    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-ctas a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* --- Mobile Portrait & Landscape (up to 639px) --- */
@media (max-width: 639px) {
    .timeline-track::before {
        left: 15px !important;
    }
    
    .timeline-dot {
        left: 15px !important;
    }
    
    .timeline-track > div {
        padding-left: 2.5rem !important;
    }
    
    .whatsapp-widget {
        bottom: 1.25rem;
        right: 1.25rem;
    }
    
    .whatsapp-box {
        width: 290px;
        bottom: 70px;
    }
    
    /* Grid Adjustments for Cards */
    .responsive-grid-1 {
        grid-template-columns: 1fr !important;
    }
    
    /* Stats counters display nicely on small screens */
    .counter-value {
        font-size: 2.5rem !important;
    }
}

/* --- Tablets & iPads (640px to 1023px) --- */
@media (min-width: 640px) and (max-width: 1023px) {
    .hero-title {
        font-size: 3.5rem !important;
        text-align: center;
    }
    
    .hero-subtitle {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-ctas {
        justify-content: center;
    }
    
    .hero-dashboard {
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Adaptive layout columns */
    .tablet-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* --- Laptops & Small Desktops (1024px to 1279px) --- */
@media (min-width: 1024px) {
    /* Large Screen Navigation styling adjustments */
    #main-nav {
        padding: 1.25rem 0;
    }
    
    #main-nav.navbar-scrolled {
        padding: 0.75rem 0;
    }
    
    /* Prevent timeline collisions */
    .timeline-track {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .timeline-track::before {
        left: 0;
        right: 0;
        top: 12px;
        bottom: auto;
        width: 100%;
        height: 2px;
        transform: none;
    }
    
    .timeline-dot {
        left: 0;
        top: 4px;
        transform: translate(0, 0);
    }
    
    .timeline-track > div {
        padding-left: 0 !important;
        padding-top: 2rem !important;
    }
}

/* --- Large Desktops (1280px to 1535px) --- */
@media (min-width: 1280px) {
    .max-w-7xl {
        max-width: 80rem !important;
    }
}

/* --- Ultra-Wide Screens (1536px and above) --- */
@media (min-width: 1536px) {
    .max-w-7xl {
        max-width: 90rem !important;
    }
    
    body {
        font-size: 17px;
    }
    
    .hero-title {
        font-size: 4.5rem !important;
    }
}

/* 3. RESPONSIVE TOUCH TARGETS & ACCESSIBILITY */
@media (hover: none) {
    /* Touch friendly button padding expansions */
    .btn-glow-primary,
    .btn-glow-secondary,
    .whatsapp-action-btn {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        font-size: 1rem !important;
    }
    
    .social-icon-btn {
        width: 50px;
        height: 50px;
    }
    
    /* Ensure interactive hover features remain active on tap */
    .glass-panel-hover:active {
        border-color: rgba(6, 182, 212, 0.4);
        background: rgba(255, 255, 255, 0.05);
    }
}

/* 4. PERFORMANCE-READY ANCHOR ACTIONS */
.lazy-loaded {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.lazy-loaded.loaded {
    opacity: 1;
}

/* ========================================================================
   COMPREHENSIVE LUXURY RESPONSIVE ENHANCEMENTS
   ======================================================================== */

/* MOBILE-OPTIMIZED PREMIUM CARDS */
@media (max-width: 768px) {
    .premium-card {
        padding: 1.5rem;
        border-radius: 12px;
    }
    
    .section-heading {
        font-size: 1.75rem;
    }
    
    /* Mobile navbar optimization */
    #main-nav {
        padding: 1rem 0;
    }
    
    /* Reduce glow effects on mobile for performance */
    .glass-panel {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }
    
    .glass-panel:hover {
        box-shadow: 0 15px 35px rgba(212, 169, 77, 0.15);
    }
    
    /* Optimize button sizing for touch */
    .btn-premium-gold,
    .btn-premium-silver,
    .btn-glow-primary,
    .btn-glow-secondary {
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
        border-radius: 10px;
        width: 100%;
        text-align: center;
    }
    
    /* Footer optimization */
    .footer-column {
        margin-bottom: 2rem;
    }
    
    .footer-bottom-bar {
        flex-direction: column-reverse;
        text-align: center;
    }
    
    .footer-social-group {
        justify-content: center;
    }
    
    /* Responsive grid for cards on mobile */
    .grid-responsive {
        grid-template-columns: 1fr;
    }
    
    /* Social icons sizing for mobile */
    .social-icon-btn {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }
    
    /* Testimonial card sizing */
    .testimonial-card {
        padding: 1.5rem;
    }
}

/* TABLET OPTIMIZED PREMIUM DESIGN */
@media (min-width: 640px) and (max-width: 1023px) {
    .premium-card {
        padding: 1.75rem;
    }
    
    .section-heading {
        font-size: 2.25rem;
    }
    
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-bottom-bar {
        flex-direction: row;
        justify-content: space-between;
    }
    
    /* Optimize spacing for tablets */
    .py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* DESKTOP PREMIUM LUXURY ENHANCEMENTS */
@media (min-width: 1024px) {
    .premium-card {
        padding: 2.5rem;
    }
    
    .premium-card:hover {
        box-shadow: 0 30px 60px rgba(212, 169, 77, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    
    .section-heading {
        font-size: 2.75rem;
    }
    
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Desktop animation enhancement */
    @keyframes desktop-float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-8px); }
    }
    
    .hover-lift {
        animation: desktop-float 4s ease-in-out infinite;
        animation-play-state: paused;
    }
    
    .hover-lift:hover {
        animation-play-state: running;
    }
}

/* ULTRA-WIDE DISPLAY ENHANCEMENTS */
@media (min-width: 1536px) {
    .premium-card {
        padding: 3rem;
    }
    
    .section-heading {
        font-size: 3rem;
    }
    
    /* Maximize luxury effects on ultra-wide screens */
    .glass-panel {
        box-shadow: 0 20px 60px rgba(212, 169, 77, 0.12);
    }
}

/* LANDSCAPE MODE ADJUSTMENTS */
@media (max-height: 600px) and (orientation: landscape) {
    .subpage-hero {
        padding: 4rem 0 2rem 0;
    }
    
    header {
        min-h-[50vh];
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
}

/* PRINT MEDIA OPTIMIZATION */
@media print {
    body {
        background: white;
        color: #000;
    }
    
    .glass-panel,
    .premium-card {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
    }
    
    .btn-glow-primary,
    .btn-premium-gold {
        background: #D4A94D;
        color: #000;
    }
    
    #particle-canvas,
    .whatsapp-widget,
    .scroll-progress-container {
        display: none;
    }
}

/* DARK MODE PREFERENCE SUPPORT */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-muted: #999999;
    }
}

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================================================
   ABOUT PAGE — RESPONSIVE FINE-TUNING
   ======================================================================== */

/* Mobile-first about page adjustments */
@media (max-width: 639px) {
    /* Company Statement grid stacks vertically */
    .lg\:col-span-7,
    .lg\:col-span-5 {
        grid-column: span 1 / span 1;
    }

    /* Mission & Vision cards stack */
    .md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    /* Core values grid: 1 column on mobile */
    .sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* About page header text tightening */
    .about-header h1,
    header h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    /* Approach pillar cards full width */
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    /* Image height reduction on small screens */
    .h-\[350px\] {
        height: 220px;
    }

    .h-\[420px\] {
        height: 250px;
    }
}

/* Tablet about page adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Core values grid: 2 columns on tablet */
    .sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Image height on tablet */
    .h-\[350px\] {
        height: 280px;
    }

    .h-\[420px\] {
        height: 320px;
    }

    /* Mission & Vision boxes equal height */
    .glass-panel.rounded-3xl {
        min-height: auto;
    }
}

/* Desktop+ about page polish */
@media (min-width: 1024px) {
    /* Ensure 12-col grid splits work correctly */
    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }

    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }
}