/* Case Study Responsive Styles */

/* 480px and below responsive styles */
@media (max-width: 480px) {
    /* Automation Hero Section */
    .automation-hero {
        padding: 8rem 2rem 0 !important;
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .automation-hero h1 {
        font-size: 2.5rem !important;
    }

    .automation-hero h2 {
        font-size: 1.8rem !important;
    }

    /* Portfolio Showcase adjustments */
    .portfolio-showcase {
        padding: 1rem 1rem 0 !important;
        background-position: 20% !important;
    }

    .portfolio-showcase .content-wrapper {
        padding: 2rem 0 !important;
    }

    .portfolio-item {
        padding: 0 !important;
    }

    .portfolio-item-bullet {
        font-size: 1rem !important;
        font-weight: 400 !important;
        top: 0 !important;
    }

    .portfolio-item .problem-title {
        font-size: 1.7rem !important;
    }

    /* Hide floating icon and align Think image to the right */
    .floating-icon {
        display: none !important;
    }

    .portfolio-image img:not(.floating-icon) {
        width: 200px !important;
        height: auto !important;
        transform: none !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .portfolio-image {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        padding-right: 0 !important;
    }

    /* Case Study Section adjustments */
    .case-study-section .content-wrapper {
        padding: 0 1rem !important;
    }

    /* Module sections responsive */
    .module-section {
        margin-bottom: 2rem !important;
    }

    .module-section h3 {
        font-size: 1.4rem !important;
        margin-bottom: 1rem !important;
    }

    /* Screenshots responsive */
    .screenshots-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .screenshots-row > div {
        width: 100% !important;
        flex-shrink: 1 !important;
    }

    .screenshots-row img {
        width: 100% !important;
        height: auto !important;
    }

    /* Portfolio text responsive */
    .portfolio-text h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .portfolio-text h3 {
        font-size: 1.2rem !important;
    }

    .portfolio-text p {
        font-size: 1rem !important;
    }

    .portfolio-text b {
        font-size: 1.1rem !important;
    }

    /* List items responsive */
    .portfolio-text ul li {
        margin-bottom: 0.8rem !important;
        padding-left: 1.2rem !important;
    }

    /* Floating icons responsive */
    .floating-icon {
        width: 80px !important;
        height: auto !important;
    }



    .modules-section-no-bg {
        padding: 1rem !important;
    }

    /* Modal responsive */
    .modal-content {
        max-width: 85% !important;
        max-height: 85% !important;
    }

    /* Mobile menu styling - match automation.html exactly */
    .mobile-menu-toggle i {
        color: var(--primary-color) !important;
    }

    .fa-solid.fa-bars {
        color: var(--primary-color) !important;
        font-size: 1.5rem !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Fix hamburger menu positioning - match automation.html exactly */
    .mobile-menu-toggle {
        color: var(--primary-color) !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Force header to be exactly like other pages */
    header {
        padding: 1.2rem 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        transition: all 0.3s ease !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: visible !important;
        margin: 0 !important;
    }
    
    /* Force header-content to fit exactly within viewport */
    .header-content {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 1.5rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Glass effect only when scrolled */
    header.scrolled {
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    header .logo {
        color: var(--primary-color) !important;
        text-shadow: none !important;
    }

    header .logo img {
        content: url("../../images/SYNCFINITY LOGO (B).png") !important;
        filter: none !important;
    }

    header nav ul li a {
        color: var(--primary-dark) !important;
        text-shadow: none !important;
    }

    header .btn-small {
        box-shadow: 0 3px 8px rgba(100, 44, 144, 0.2) !important;
    }

    /* Remove body padding to let hero section go to top */
    body {
        padding-top: 0 !important;
    }

    /* Ensure header is always fixed */
    html {
        scroll-padding-top: 80px !important;
    }

    /* Remove any conflicting styles */
    .header-content .logo {
        flex-shrink: 0 !important;
    }

    .header-content nav {
        display: none !important;
    }
    
    /* Ensure mobile menu functionality works */
    .mobile-menu-toggle {
        position: relative !important;
        z-index: 1001 !important;
    }
    
    /* Mobile nav when active */
    nav.active {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 70% !important;
        height: 100vh !important;
        background: white !important;
        flex-direction: column !important;
        padding: 2rem !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
    }
    
    .nav-overlay.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 999 !important;
    }

    .module-section .mobile-image {
        width: auto !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* Screenshots use fixed desktop widths in the markup; allow them to shrink. */
.screenshots-row > div {
    min-width: 0;
    max-width: 100%;
    flex-shrink: 1 !important;
}
.screenshots-row img,
.mobile-image-container > div {
    max-width: 100%;
}
@media (max-width: 992px) {
    .screenshots-row { flex-direction: column !important; }
    .screenshots-row > div { width: 100% !important; }
    .screenshots-row img:not(.mobile-image) { width: 100% !important; height: auto !important; }
    .module-section .mobile-image { object-fit: contain !important; }
}
.portfolio-item > .portfolio-image { min-width: 0; }
.portfolio-image img { max-width: 100%; }

/* Shared portfolio detail template: tablet landscape spacing and screenshot layouts. */
@media (min-width: 993px) and (max-width: 1279px) {
    .case-study-page .portfolio-showcase { padding-inline: 3rem !important; }
    .case-study-page .portfolio-showcase .content-wrapper { padding-inline: 0 !important; }
    .case-study-page .portfolio-text { padding-inline: 0; }
    .case-study-page .portfolio-text h2 { font-size: 2rem; }
    .case-study-page .automation-hero h1 { font-size: 3.5rem !important; }
    .case-study-page .automation-hero h2 { font-size: 2rem !important; }
    .case-study-page .case-study-section .content-wrapper { padding-inline: 3rem !important; }
    .case-study-page .screenshots-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem !important;
    }
    .case-study-page .screenshots-row:has(.mobile-image-container) {
        grid-template-columns: minmax(0, 1fr) 180px;
    }
    .case-study-page .screenshots-row > div:only-child { grid-column: 1 / -1; }
    .case-study-page .screenshots-row > div { width: 100% !important; }
    .case-study-page .screenshots-row img:not(.mobile-image) { width: 100% !important; }
    .case-study-page .mobile-image-container > div { height: 360px !important; }
    .case-study-page .mobile-image { object-fit: contain !important; }
    .case-study-page .portfolio-image { padding-left: 1.5rem; padding-right: 0; }
    .case-study-page .portfolio-image img:not(.floating-icon) {
        width: 170px !important; height: auto !important; object-fit: contain; transform: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .case-study-page .automation-hero h1 { font-size: 3.5rem !important; }
    .case-study-page .automation-hero h2 { font-size: 2rem !important; }
    .case-study-page .portfolio-showcase { padding-inline: 2rem !important; }
    .case-study-page .portfolio-showcase .content-wrapper { padding-inline: 0 !important; }
    .case-study-page .portfolio-text h2 { font-size: 2rem; }
    .case-study-page .portfolio-item > .portfolio-image { height: 160px; flex-direction: row !important; align-items: center !important; gap: 2rem; }
    .case-study-page .portfolio-image > div { display: none; }
    .case-study-page .portfolio-image img { position: static; margin: 0 !important; }
    .case-study-page .portfolio-image img:not(.floating-icon) {
        width: 140px !important; height: 140px !important; object-fit: contain; transform: none !important;
    }
    .case-study-page .portfolio-image .floating-icon { width: 70px !important; height: 70px !important; }
    .case-study-page .case-study-section .content-wrapper { padding-inline: 2rem !important; }
    .case-study-page .screenshots-row { display: flex !important; flex-direction: column !important; gap: 2rem !important; }
    .case-study-page .screenshots-row > div { width: 100% !important; }
    .case-study-page .screenshots-row img:not(.mobile-image) { width: 100% !important; height: auto !important; }
    .case-study-page .module-section .mobile-image { object-fit: contain !important; }
}

/* Shared portfolio detail refinements: tablet portrait only. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .case-study-page:has(.modules-section-no-bg) .automation-hero { padding-inline: clamp(3rem, 6vw, 4rem); }
    .case-study-page:has(.modules-section-no-bg) .automation-hero h1 { font-size: 3rem !important; }
    .case-study-page:has(.modules-section-no-bg) .automation-hero h2 { font-size: 1.75rem !important; text-wrap: balance; }
    .case-study-page:has(.modules-section-no-bg) .portfolio-showcase { padding-inline: clamp(3rem, 6vw, 4rem) !important; }
    .case-study-page:has(.modules-section-no-bg) .case-study-section .content-wrapper { padding-inline: clamp(3rem, 6vw, 4rem) !important; }
    .case-study-page:has(.modules-section-no-bg) .portfolio-showcase .portfolio-item { margin-bottom: 0; padding-block: 1.5rem; }
    .case-study-page:has(.modules-section-no-bg) .portfolio-text .problem-title { display: block; font-size: 1.75rem !important; margin-bottom: .75rem; }
    .case-study-page:has(.modules-section-no-bg) .portfolio-text h3 { font-size: 1.25rem !important; line-height: 1.6; }
    .case-study-page:has(.modules-section-no-bg) .portfolio-text h2 { font-size: 1.75rem; }
    .case-study-page:has(.modules-section-no-bg) .portfolio-text b { font-size: 1.2rem !important; }
    .case-study-page:has(.modules-section-no-bg) .portfolio-item > .portfolio-image { display: none !important; }
    .case-study-page:has(.modules-section-no-bg) .screenshots-row .mobile-image-container { align-items: center !important; }
    .case-study-page:has(.modules-section-no-bg) .mobile-image-container > div { height: 400px !important; }
    .case-study-page:has(.modules-section-no-bg) .module-section .mobile-image { width: auto !important; height: 100% !important; object-fit: contain !important; }
    .case-study-page:has(.modules-section-no-bg) .screenshots-row p { font-size: 1rem !important; line-height: 1.6; }
}