/* --- Responsive Styles --- */

/* Tablet / Laptop small - Reduce cursor size further */
@media (max-width: 1024px) {
    :root {
        --cursor-size: 6px;
        --cursor-outline-size: 24px;
    }

    body.hovering .cursor-outline {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Featured Works Stack & General Adjustments - Mobile/Tablet */
@media (max-width: 992px) {

    .section-padding,
    .section-padding-lg {
        padding: 80px 0 !important;
    }
    
    .mt-200 {
        margin-top: 150px !important;
    }

    .stack-wrapper {
        height: auto;
        min-height: 100vh;
    }

    .stack-card {
        flex-direction: column !important;
        height: 520px !important;
        width: 92% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .card-img-col {
        width: 100% !important;
        height: 220px !important;
        overflow: hidden;
    }

    .card-img-col img,
    .card-img-col div[class^="card-gradient-"] {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover;
    }

    .card-content-col {
        width: 100% !important;
        height: 300px !important;
        padding: 25px !important;
        justify-content: flex-start !important;
        background: #fff;
    }
    
    .works-grid-new {
        gap: 20px;
    }
}

/* General Mobile (768px) */
@media (max-width: 768px) {
    /* Layout & Spacing Defaults */
    .section-padding,
    .section-padding-lg {
        padding: 50px 0 !important;
    }

    .section-padding-md {
        padding: 40px 0 !important;
    }

    .pt-100 { padding-top: 50px !important; }
    .pb-100 { padding-bottom: 50px !important; }
    .mt-100 { margin-top: 50px !important; }
    .mt-200 { margin-top: 100px !important; }

    /* Typography Reductions */
    .display-1 {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
    }
    
    .display-2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
    }
    
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    
    .text-lg, .fs-2-rem {
        font-size: 1rem !important;
    }

    .marquee-item {
        font-size: 2.5rem !important;
    }

    /* Header & Navigation */
    .header {
        padding: 15px 0;
    }

    .logo-creative {
        font-size: 1.3rem;
    }

    .nav-desktop,
    .header .btn-primary,
    .header .btn-secondary {
        display: none !important;
    }

    .menu-toggle {
        display: flex;
    }

    .menu-overlay a {
        font-size: 18px;
        margin: 10px 0;
    }

    /* About Section Photo */
    .photo-container {
        width: 100% !important;
        max-width: 300px;
        height: 350px !important;
        margin: 40px auto 0;
    }

    /* Works Grid Updates */
    .works-grid-new {
        gap: 20px;
        margin-bottom: 50px;
    }

    .work-item-new {
        padding: 15px;
        border-radius: 16px;
    }

    .work-img-wrapper {
        margin-bottom: 15px;
    }

    .work-title-new {
        font-size: 1.25rem;
    }
    
    .work-tag-new {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .work-img-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
    }

    /* Premium Skills Cards Updates */
    .premium-skill-card {
        padding: 24px !important;
    }

    .premium-skill-badge {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }

    /* Accordion FAQ */
    .accordion-body {
        font-size: 0.9rem;
        padding-bottom: 20px;
    }

    .accordion-header {
        padding: 18px 0;
    }

    .accordion-title {
        font-size: 1.05rem;
    }

    /* Spectrum Grid Adjustments */
    .spectrum-card {
        padding: 30px !important;
        min-height: 300px !important;
    }
    .spectrum-title {
        font-size: 1.8rem !important;
    }
}

/* Small Smartphone (425px) */
@media (max-width: 426px) {

    /* Hide custom cursor on small mobile */
    .cursor-dot,
    .cursor-outline {
        display: none !important;
    }

    .hero-reveal.hero-arrow-container {
        bottom: 20px !important;
    }
    
    .works-grid-new {
        grid-template-columns: 1fr !important;
    }
}