/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Utility Classes for Reusability */
.padding-inline { padding-inline: 1rem; }
.flex-column { display: flex; flex-direction: column; gap: var(--spacing-md); }
.text-center { text-align: center; }
.max-width-90 { max-inline-size: 90%; margin-inline: auto; }

/* Base Media Query for Small Screens */
@media (max-width: 576px) {
    body { padding-inline: 0; }
    .mobile-only { display: block; }
    .section-padding { padding-inline: 1rem; }
    .navbar-brand { font-size: clamp(1rem, 4vw, 1.25rem); }
    .navbar-nav { padding-inline-end: var(--spacing-md); gap: var(--spacing-md); }
    .nav-link { 
        margin-inline-end: var(--spacing-lg); 
        font-size: clamp(0.75rem, 2.5vw, 0.9rem); 
        padding-block: var(--spacing-xs); 
    }
    .close-overlay-btn { 
        margin-inline-end: var(--spacing-lg); 
        padding-block: var(--spacing-xs); 
    }
    .navbar-collapse { 
        inline-size: 100%; 
        transform: translateX(100%); 
        transition: transform 0.3s ease-in-out; 
    }
    .navbar-collapse.show { transform: translateX(0); }
    .navbar-collapse .social-icon-link { inline-size: 35px; block-size: 35px; }
    .navbar-collapse .social-icon-link i { font-size: 1rem; }
    .tile-background { block-size: clamp(150px, 50vh, 250px); }
    .banner-section { 
        padding: var(--spacing-md) var(--spacing-xs); 
        min-block-size: clamp(300px, 60vh, 500px); 
    }
    .banner-title-wrapper { flex-direction: column; text-align: center; }
    .banner-image { 
        inline-size: clamp(150px, 90vw, 300px); 
        max-block-size: clamp(250px, 65vh, 400px); 
        aspect-ratio: 1 / 1; 
    }
    .banner-buttons { 
        position: static; 
        transform: none; 
        flex-direction: row; 
        margin-block-start: var(--spacing-lg); 
        justify-content: center; 
    }
    .happy-clients { 
        position: static; 
        font-size: clamp(0.75rem, 2vw, 0.9rem); 
        padding: var(--spacing-sm); 
        margin: var(--spacing-md) auto; 
        inline-size: 80%; 
        justify-content: center; 
        text-align: center; 
        gap: var(--spacing-sm); 
    }
    .happy-clients .d-flex { flex-wrap: wrap; justify-content: center; gap: var(--spacing-xs); }
    .skills-inner { animation: scroll 15s linear infinite; will-change: transform; }
    .experience-list li { flex-direction: column; text-align: center; align-items: flex-start; }
    .duration { margin-block-start: var(--spacing-sm); }
    .project-card { 
        inline-size: 100%; 
        padding: var(--spacing-sm); 
        min-block-size: 350px; 
        max-block-size: 480px; 
    }
    .project-slider .swiper-slide { padding: var(--spacing-sm); }
    .project-cta { max-inline-size: 150px; padding: 6px 16px; }
    .project-image img, .testimonial-image img { max-block-size: 200px; }
    .testimonial-image img { max-inline-size: 80px; max-block-size: 80px; }
    /* Pricing Section */
    .pricing-staircase { gap: var(--spacing-md); flex-direction: column; flex-wrap: nowrap; }
    .smallest-tile, .medium-tile { min-height: auto; padding: var(--spacing-md); flex-grow: 1; }
    .pricing-card { max-width: 80%; margin-bottom: var(--spacing-lg); }
    .pricing-card.recommended { transform: scale(1); }
    .pricing-features-list { text-align: center; display: flex; flex-direction: column; align-items: center; }
    .pricing-features-list li { justify-content: center; }
    .pricing-price { font-size: clamp(1.5rem, 3vw, 2rem); }
    .pricing-unit { font-size: var(--font-size-md); }
    .pricing-cta { max-width: 180px; width: auto; margin: 0 auto; padding: var(--spacing-sm) var(--spacing-md); }
    .recommended-badge { top: -10px; right: 10px; font-size: var(--font-size-sm); padding: 3px 10px; }
    .footer-title { font-size: clamp(1.2rem, 3vw, 1.5rem); }
    .footer-link { font-size: clamp(0.75rem, 2vw, 0.875rem); }
    .footer-content { flex-direction: column; align-items: center; text-align: center; }
    .footer-nav { justify-content: center; }
    .social-icon-link { inline-size: 40px; block-size: 40px; }
    .social-icon-link i { font-size: 1.25rem; }
    .footer-cta { inline-size: 100%; max-inline-size: 200px; padding: var(--spacing-sm) var(--spacing-lg); }
    .category-btn { font-size: clamp(var(--font-size-sm), 3vw, var(--font-size-md)); }
    .contact-form .contact-input { margin-block-end: var(--spacing-md); }
    .contact-submit-btn { max-inline-size: 180px; padding: var(--spacing-sm) var(--spacing-md); }
    .expertise-description { font-size: var(--font-size-sm); }
    .swiper-button-prev, .swiper-button-next { 
        inline-size: 25px; 
        block-size: 25px; 
        margin-inline: clamp(2px, 0.5vw, 5px); 
        inset-block-start: calc(50% - 12.5px); 
    }
    .swiper-button-prev i, .swiper-button-next i { font-size: clamp(0.75rem, 2vw, 1rem); }
    .quote-icon { display: none; }
    .swiper-slide img { block-size: 200px; aspect-ratio: 4 / 3; }
    /* Project Detail Responsive Styles */
    .project-header { 
        padding: var(--spacing-md) 1rem;
    }
    .project-header h1 { 
        font-size: clamp(1.75rem, 4vw, 3rem); 
    }
    .project-desc { 
        max-inline-size: 90%; 
        font-size: var(--font-size-sm); 
    }
    .project-banner { 
        height: 200px;
    }
    .banner-container { 
        height: 200px;
        width: 80%;
        left: 9%;
    }
    .myrole { 
        max-inline-size: 100%; 
        padding: var(--spacing-sm);
    }
    .project-about .row { 
        flex-direction: column; 
        gap: var(--spacing-sm); 
    }
    .project-about .row .col-md-6 { 
        flex: 1 1 100%; 
    }
    .project-about .row .col-md-6:first-child { 
        order: 1;
    }
    .project-about .row .col-md-6:last-child { 
        order: 2;
    }
    .project-about .img-fluid { 
        height: 250px;
        max-width: 80%;
        margin: 0 auto;
    }
    .project-metrics .col-md-4 { 
        flex: 1 1 30%; 
        max-inline-size: 33.33%; 
    }
    .project-metrics h3 { 
        font-size: clamp(1.25rem, 3vw, 1.5rem); 
    }
    .takeaway-list { 
        max-inline-size: 100%; 
    }
    .project-detail-slider .swiper-slide { 
        block-size: 200px; 
    }
    .project-nav .nav-link { 
        font-size: var(--font-size-sm); 
        padding: var(--spacing-xs) var(--spacing-sm); 
    }
}

/* Tablets (577px and above) */
@media (min-width: 577px) {
    /* Project Detail Responsive Styles */
    .project-about .row { 
        flex-direction: row !important;
        gap: var(--spacing-md); 
        flex-wrap: nowrap !important;
    }
    .project-about .row .col-md-6 { 
        flex: 0 0 50% !important;
        max-width: 50% !important; 
    }
    .project-about .row .col-md-6:first-child { 
        order: 1;
    }
    .project-about .row .col-md-6:last-child { 
        order: 2;
    }
    .project-about p { 
        text-align: justify;
    }
}

/* Medium Screens (e.g., iPad Air, 577px-768px) */
@container (min-width: 577px) and (max-width: 768px) {
    body { padding-inline: 0; }
    .mobile-only { display: block !important; }
    .section-padding { padding-inline: 1rem; }
    .nav-link { font-size: clamp(var(--font-size-sm), 4vw, var(--font-size-md)); }
    .close-overlay-btn { margin-inline-end: var(--spacing-xl); padding-block: var(--spacing-md); }
    .banner-section { padding: var(--spacing-lg) var(--spacing-md); min-block-size: 500px; }
    .banner-title-wrapper { flex-direction: column; text-align: center; gap: var(--spacing-sm); }
    .display-4 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
    .banner-image { inline-size: 70%; max-block-size: 350px; margin: 0 auto var(--spacing-md); aspect-ratio: 1 / 1; }
    .happy-clients { 
        inset-block-end: 10%; 
        inset-inline-start: 50%; 
        transform: translateX(-50%); 
        inline-size: 60%; 
        padding: var(--spacing-sm); 
        margin: var(--spacing-md) auto; 
        justify-content: center; 
        text-align: center; 
    }
    .happy-clients .d-flex { flex-wrap: wrap; justify-content: center; }
    .banner-buttons { 
        inset-block-end: 5%; 
        position: static; 
        transform: none; 
        flex-direction: row; 
        margin-block-start: var(--spacing-lg); 
        justify-content: center; 
        gap: var(--spacing-sm); 
    }
    .cta-btn { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); }
    .resume-stats { flex-direction: column; gap: var(--spacing-md); }
    .resume-content { text-align: start; }
    .skills-inner { animation: scroll 20s linear infinite; will-change: transform; }
    .skill-item { font-size: clamp(1rem, 2.5vw, 1.25rem); margin-inline: var(--spacing-lg); }
    .experience-list { flex-direction: column; }
    .project-card { max-inline-size: 100%; margin: 0 auto; min-block-size: 350px; max-block-size: 480px; }
    .project-slider .swiper-slide { padding: var(--spacing-sm); }
    .project-cta { max-inline-size: 150px; padding: 6px 16px; }
    .project-image img, .testimonial-image img { max-block-size: 250px; }
    .testimonial-slider { padding: var(--spacing-md) var(--spacing-sm); }
    .testimonial-card { max-inline-size: 90%; flex-direction: row; padding: var(--spacing-md); }
    .testimonial-image img { inline-size: 80px; block-size: 80px; }
    /* Pricing Section */
    .pricing-card { max-width: 350px; margin-left: auto; margin-right: auto; }
    .pricing-cta { max-width: 180px; width: auto; margin: 0 auto; padding: var(--spacing-sm) var(--spacing-md); }
    .contact-section .row { flex-direction: column; gap: var(--spacing-md); }
    .contact-form .row { gap: var(--spacing-md); }
    .contact-form .contact-input { inline-size: 90%; margin: 0 auto var(--spacing-md); }
    .contact-info .contact-icon { inline-size: 35px; block-size: 35px; }
    .contact-submit-btn { max-inline-size: 160px; padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-md); }
    .footer-title { font-size: clamp(1.5rem, 3vw, 2rem); }
    .footer-content { flex-direction: column; align-items: center; text-align: center; }
    .footer-nav { justify-content: center; }
    .footer-cta { inline-size: 100%; max-inline-size: 250px; }
    .expertise-description { font-size: var(--font-size-sm); }
    .quote-icon { display: none; }
    /* Project Detail Responsive Styles */
    .project-header { 
        padding: var(--spacing-md) 1rem;
    }
    .project-header h1 { 
        font-size: clamp(1.5rem, 5vw, 2.5rem); 
    }
    .project-banner { 
        height: 250px;
    }
    .banner-container { 
        left: 1rem;
        width: calc(100% - 1rem - (1rem + var(--spacing-xl)));
        height: 250px; 
    }
    .project-about .img-fluid { 
        height: 300px;
        max-width: 85%;
        margin: 0 auto; 
    }
    .project-metrics .row { 
        flex-direction: column; 
        gap: var(--spacing-md); 
    }
    .project-metrics .col-md-4 { 
        max-inline-size: 80%; 
        margin: 0 auto; 
    }
    .project-metrics h3 { 
        font-size: clamp(1.25rem, 3vw, 1.75rem); 
    }
    .project-metrics i { 
        font-size: 2rem; 
    }
    .project-detail-slider .swiper-slide { 
        block-size: 250px; 
    }
}

/* Larger Tablets (769px-992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .mobile-only { display: block !important; }
    .section-padding { padding-inline: 1rem; }
    .close-overlay-btn { margin-inline-end: var(--spacing-xl); padding-block: var(--spacing-md); }
    .tile-background { inline-size: clamp(150px, 70vw, 400px); }
    .happy-clients { inset-block-end: clamp(35%, 8vh, 45%); }
    .banner-buttons { inset-block-end: clamp(10%, 4vh, 20%); justify-content: center; text-align: center; }
    .footer-content { gap: var(--spacing-md); }
    /* Pricing Section */
    .pricing-staircase { gap: var(--spacing-md); flex-direction: row; flex-wrap: wrap; }
    .col-md-4 { flex: 0 0 auto; max-width: 33.3333; }
    .smallest-tile { min-width: 100%; min-height: 300px; flex-grow: 1; }
    .medium-tile { min-width: 100%; min-height: 350px; flex-grow: 1; }
    .pricing-cta { max-width: 180px; width: auto; margin: 0 auto; padding: var(--spacing-sm) var(--spacing-md); }
    .navbar-collapse.show .navbar-nav .nav-item { display: none; }
    .navbar-collapse.show .navbar-nav .all-screens { display: block; }
    .navbar-collapse.show .navbar-nav .mobile-only { display: none; }
    /* Project Detail Responsive Styles */
    .banner-container { 
        height: 300px;
        width: 80%;
        left: 8%;
    }
    .project-about .img-fluid { 
        height: 350px;
        max-width: 90%; 
    }
    .project-detail-slider .swiper-slide { 
        block-size: 300px; 
    }
}

/* Navbar Collapse Range */
@media (min-width: 577px) and (max-width: 992px) {
    .navbar-collapse {
        inline-size: clamp(250px, 75%, 400px);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }
    .navbar-collapse.show { transform: translateX(0); }
}

/* Desktop (993px and above) */
@media (min-width: 993px) {
    .close-overlay-btn { display: none; }
    .navbar-nav {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(1rem, 2vw, 2rem);
    }
    .nav-item { inline-size: auto; text-align: center; }
    .nav-link { text-align: center; padding: var(--spacing-sm) var(--spacing-md); margin-inline-end: 0; }
    .navbar .social-links, .navbar-collapse .social-links { display: none; }
    .navbar-collapse {
        position: static;
        inline-size: auto;
        block-size: auto;
        background: transparent;
        padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        transform: none;
    }
    /* Pricing Section */
    .pricing-staircase { gap: var(--spacing-lg); flex-direction: row; flex-wrap: nowrap; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .pricing-card { width: 100%; }
    /* Project Detail Responsive Styles */
    .project-banner { 
        height: 350px;
    }
    .banner-container { 
        left: 1rem;
        height: 350px;
        width: 70%;
        left: 14%;
    }

    .project-about .row { 
        display: flex !important; 
        flex-direction: row !important; 
        align-items: center; 
        flex-wrap: nowrap !important;
    }
    .project-about .col-md-6 { 
        flex: 0 0 50% !important;
        max-width: 50% !important; 
    }
    .project-about .row .col-md-6:first-child { 
        order: 1;
    }
    .project-about .row .col-md-6:last-child { 
        order: 2;
    }
    .project-about .img-fluid { 
        height: 400px;
        max-width: 90%;
    }
    .project-metrics .col-md-4 { 
        flex: 1 1 30%; 
        max-inline-size: 33.333%; 
    }
}

/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
    .container { max-inline-size: 1140px; }
    .banner-section { padding: var(--spacing-xl) var(--spacing-lg); }
    .tile-background { inline-size: clamp(400px, 80vw, 600px); block-size: clamp(300px, 70vh, 500px); }
    .banner-image { inline-size: clamp(400px, 70vw, 550px); max-block-size: clamp(500px, 85vh, 650px); }
    /* Pricing Section */
    .smallest-tile { min-width: 25%; min-height: 400px; }
    .medium-tile { min-width: 30%; min-height: 450px; }
    /* Project Detail Responsive Styles */
    .banner-container { 
        height: 400px;
    }
    .project-about .img-fluid { 
        height: 450px;
        max-width: 90%;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .skills-inner, .experience-box, .experience-card, .experience-item, 
    .pricing-card, .pricing-cta::before, .pricing-features-list li, 
    .project-card, .card-base, section, .cta-btn, .footer-cta, 
    .navbar, .nav-link, .social-icon-link { transition: none; }
}

@media (prefers-contrast: high) {
    :root {
        --background-color: #000;
        --text-heading: #fff;
        --text-body: #ddd;
        --text-muted: #aaa;
        --accent-pink: #ff69b4;
        --accent-orange: #ffa500;
    }
    .pricing-card, .card-base { background: #222; border-color: #fff; }
}

/* Feature Fallbacks */
@supports not (aspect-ratio: 1 / 1) {
    .banner-image, .project-banner img { block-size: auto; }
}