/* ===================================
   COMPREHENSIVE RESPONSIVE FIXES
   Portfolio: Bijay Das
   Date: 2025-10-31
   Expert UI/UX & Frontend Engineering
====================================== */

/* ========== CRITICAL FIXES - ALL SCREENS ========== */

/* DISABLE PAGE TRANSITION SYSTEM - ENABLE NORMAL SCROLLING */
.pt-page {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    overflow: visible !important;
    z-index: 1 !important;
    padding: 60px 0 !important;
}

.pt-wrapper,
.subpages {
    height: auto !important;
    overflow: visible !important;
}

/* Remove 100vh constraint from content sections */
section,
.min-height-100vh,
.d-flex.align-items-lg-center.min-height-100vh {
    min-height: auto !important;
    height: auto !important;
}

/* HIDE SIDEBAR MENU - SINGLE PAGE SCROLL DESIGN */
.header-left {
    display: none !important;
}

/* Full width content - no sidebar */
.main-left {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    position: relative !important;
}

/* Fix container padding */
.container {
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%;
    max-width: 100%;
}

/* ========== LARGE SCREENS (≤1366px) ========== */
@media screen and (max-width: 1366px) {
    .pt-page {
        padding: 60px 0 !important;
    }
    
    .container {
        max-width: 1200px;
    }
}

/* ========== DESKTOP/TABLET (≤1199px) ========== */
@media screen and (max-width: 1199px) {
    /* Remove all height constraints */
    .pt-page,
    section,
    .min-height-100vh,
    .row {
        min-height: auto !important;
        height: auto !important;
    }
    
    .container {
        padding: 40px 20px;
    }
    
    /* Adjust typography */
    h1 {
        font-size: 2.2rem !important;
    }
    
    h2 {
        font-size: 1.6rem !important;
    }
    
    h3 {
        font-size: 1.3rem !important;
    }
}

/* ========== TABLET (≤991px) ========== */
@media screen and (max-width: 991px) {
    /* Sidebar remains 90px on tablet - original design */
    
    /* Critical layout fixes */
    .pt-page {
        display: block !important;
        padding: 50px 0 !important;
        align-items: flex-start !important;
    }
    
    .row.align-items-lg-center {
        align-items: flex-start !important;
    }
    
    /* Typography scaling */
    h1,
    h1[style] {
        font-size: 2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.2rem !important;
    }
    
    h2,
    h2[style] {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }
    
    h3,
    h3[style] {
        font-size: 1.3rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    h4,
    h4[style] {
        font-size: 1.1rem !important;
    }
    
    p,
    p[style] {
        font-size: 1rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Fix inline flex layouts */
    div[style*="display: flex"],
    div[style*="display:flex"] {
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    
    /* Metrics grid - 2 columns */
    div[style*="display: flex"] > div[style*="text-align: center"] {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
    
    /* Card spacing */
    .bg-white.border.rounded,
    div[class*="col-"] .bg-white {
        margin-bottom: 20px !important;
        padding: 20px !important;
    }
    
    /* List optimization */
    ul,
    ul[style] {
        font-size: 0.95rem !important;
        line-height: 1.8 !important;
        padding-left: 20px !important;
    }
    
    /* Image adjustments */
    .slider-image {
        margin-bottom: 30px;
    }
    
    .slider-image img {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }
}

/* ========== MOBILE (≤767px) ========== */
@media screen and (max-width: 767px) {
    /* Hide sidebar, show hamburger */
    .header-left {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    .header-left.open {
        transform: translateX(0) !important;
    }
    
    .main-left {
        margin-left: 0 !important;
    }
    
    .sidemenu_btn {
        display: block !important;
        position: fixed !important;
        top: 20px !important;
        left: 20px !important;
        z-index: 1000 !important;
    }
    
    /* Critical mobile fixes */
    .pt-page {
        padding: 40px 0 !important;
    }
    
    .container {
        padding: 30px 15px !important;
    }
    
    /* Typography - mobile optimized */
    h1,
    h1[style] {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    h2,
    h2[style] {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.8rem !important;
    }
    
    h3,
    h3[style] {
        font-size: 1.2rem !important;
    }
    
    h4,
    h4[style] {
        font-size: 1.1rem !important;
    }
    
    p,
    p[style] {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* Stack all metrics vertically */
    div[style*="display: flex"] > div[style*="text-align: center"],
    div[style*="display:flex"] > div[style*="text-align:center"] {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px;
    }
    
    /* Full-width buttons */
    a[style*="padding"][style*="border-radius"],
    a[style*="padding"][style*="background"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Gradient boxes - reduce padding */
    div[style*="padding"][style*="gradient"],
    div[style*="background: linear-gradient"] {
        padding: 20px 15px !important;
        margin: 20px 0 !important;
        border-radius: 10px !important;
    }
    
    /* Card content spacing */
    .bg-white.border.rounded {
        padding: 18px !important;
        margin-bottom: 18px !important;
    }
    
    /* Hide hero image on mobile */
    .slider-image {
        display: none !important;
    }
    
    /* Column stacking */
    .row > [class*="col-"] {
        margin-bottom: 20px;
    }
    
    /* Service cards - full width */
    .col-md-6.col-lg-4,
    .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin-bottom: 20px;
    }
    
    /* Progress bars */
    .progress-item {
        margin-bottom: 20px !important;
    }
    
    /* Counters - stack */
    .counter-area .counters {
        flex: 1 1 100% !important;
        margin-bottom: 20px;
    }
}

/* ========== SMALL MOBILE (≤567px) ========== */
@media screen and (max-width: 567px) {
    /* Ultra-compact typography */
    h1,
    h1[style] {
        font-size: 1.5rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    h2,
    h2[style] {
        font-size: 1.25rem !important;
        margin-bottom: 0.6rem !important;
    }
    
    h3,
    h3[style] {
        font-size: 1.1rem !important;
    }
    
    h4,
    h4[style],
    h5[style] {
        font-size: 1rem !important;
    }
    
    p,
    p[style] {
        font-size: 0.9rem !important;
    }
    
    /* Ultra-compact spacing */
    .container {
        padding: 25px 12px !important;
    }
    
    .pt-page {
        padding: 30px 0 !important;
    }
    
    .bg-white.border.rounded {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Buttons - compact */
    a[style*="padding"] {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
    
    /* Metric numbers - reduce size */
    h3[style*="font-size"][style*="rem"] {
        font-size: 1.5rem !important;
    }
    
    /* Force vertical stacking */
    div[style*="display: flex"],
    div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Lists - compact */
    ul,
    ul[style] {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        padding-left: 18px !important;
    }
    
    li {
        margin-bottom: 8px;
    }
}

/* ========== LANDSCAPE MODE FIX ========== */
@media screen and (max-height: 600px) and (orientation: landscape) {
    .pt-page {
        min-height: auto !important;
        padding: 25px 0 !important;
    }
    
    .slider-image {
        display: none !important;
    }
    
    .container {
        padding: 20px 15px !important;
    }
}

/* ========== EXTRA SMALL (≤400px) ========== */
@media screen and (max-width: 400px) {
    h1,
    h1[style] {
        font-size: 1.35rem !important;
    }
    
    h2,
    h2[style] {
        font-size: 1.15rem !important;
    }
    
    .container {
        padding: 20px 10px !important;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .header-left,
    .sidemenu_btn,
    a[href="#contact"],
    a[href="#portfolio"],
    .slider-image,
    img[src*="girl.png"] {
        display: none !important;
    }
    
    .main-left {
        padding-left: 0 !important;
    }
    
    .pt-page {
        page-break-inside: avoid;
        padding: 20px 0 !important;
    }
    
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}