/* ===== RESPONSIVE DESIGN ===== */
/* Mobile First Approach */

/* ===== EXTRA SMALL DEVICES (PHONES) ===== */
/* Default styles already mobile-first in main.css */

/* ===== SMALL DEVICES (LARGE PHONES) ===== */
@media (min-width: 576px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    .container-sm {
        max-width: 540px;
    }
}

/* ===== MEDIUM DEVICES (TABLETS) ===== */
@media (min-width: 768px) {
    .hero-section h1 {
        font-size: 3rem;
    }
    
    .hero-section p {
        font-size: 1.25rem;
    }
    
    .section-title h2 {
        font-size: 2.5rem;
    }
    
    .navbar-nav .nav-link {
        margin: 0 var(--spacing-md);
    }
    
    .feature-card,
    .service-card,
    .element-card {
        height: 100%;
    }
    
    .contact-form {
        padding: var(--spacing-3xl);
    }
    
    .contact-info {
        margin-top: 0 !important;
    }
    
    .team-image {
        width: 150px;
        height: 150px;
    }
    
    /* Grid adjustments */
    .services-section .row {
        align-items: stretch;
    }
    
    .features-section .row {
        align-items: center;
    }
}

/* ===== LARGE DEVICES (DESKTOPS) ===== */
@media (min-width: 992px) {
    .hero-section h1 {
        font-size: 3.5rem;
    }
    
    .hero-section {
        padding-top: 6rem;
    }
    
    .section-title h2 {
        font-size: 3rem;
    }
    
    .navbar {
        padding: var(--spacing-lg) 0;
    }
    
    .navbar-brand {
        font-size: 1.5rem !important;
    }
    
    .feature-icon-wrapper {
        width: 80px;
        height: 80px;
    }
    
    .feature-icon-wrapper i {
        font-size: 2rem;
    }
    
    .service-image {
        height: 250px;
    }
    
    .price-card.popular {
        transform: scale(1.1);
    }
    
    .team-image {
        width: 180px;
        height: 180px;
    }
    
    .contact-form,
    .contact-info {
        padding: var(--spacing-3xl);
    }
    
    /* Hover effects for larger screens */
    .feature-card:hover,
    .service-card:hover,
    .price-card:hover,
    .team-card:hover,
    .review-card:hover,
    .element-card:hover {
        transform: translateY(-10px);
    }
    
    .btn:hover {
        transform: translateY(-3px);
    }
}

/* ===== EXTRA LARGE DEVICES (LARGE DESKTOPS) ===== */
@media (min-width: 1200px) {
    .hero-section h1 {
        font-size: 4rem;
    }
    
    .container {
        max-width: 1200px;
    }
    
    .section-title h2 {
        font-size: 3.5rem;
    }
    
    .feature-icon {
        font-size: 3rem;
    }
    
    .service-image {
        height: 280px;
    }
}

/* ===== ULTRA WIDE SCREENS ===== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-section h1 {
        font-size: 4.5rem;
    }
    
    .section-title h2 {
        font-size: 4rem;
    }
}

/* ===== HEIGHT-BASED MEDIA QUERIES ===== */
@media (max-height: 600px) {
    .hero-section {
        min-height: 100vh;
        padding-top: 4rem;
    }
    
    .hero-section h1 {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-md);
    }
    
    section {
        padding: var(--spacing-2xl) 0;
    }
}

/* ===== NEW SECTIONS RESPONSIVE ===== */

/* Case Studies */
@media (max-width: 767.98px) {
    .casestudy-image {
        height: 180px;
    }
    
    .casestudy-content {
        padding: var(--spacing-lg);
    }
}

/* Process Section */
@media (max-width: 991.98px) {
    .process-step {
        margin-bottom: var(--spacing-xl);
    }
}

@media (max-width: 767.98px) {
    .process-number {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

/* Timeline */
@media (max-width: 767.98px) {
    .timeline-container::before {
        left: 20px;
    }
    
    .timeline-item {
        flex-direction: row !important;
        align-items: flex-start;
    }
    
    .timeline-year {
        min-width: 80px;
        font-size: 0.875rem;
        padding: var(--spacing-sm) var(--spacing-md);
        margin-right: var(--spacing-md);
    }
    
    .timeline-content {
        margin: 0;
        margin-left: var(--spacing-md);
    }
}

/* Career Cards */
@media (max-width: 767.98px) {
    .career-card {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
}

/* Core Info */
@media (max-width: 767.98px) {
    .core-icon {
        font-size: 2rem;
    }
    
    .coreinfo-card {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
}

/* Blog Section */
@media (max-width: 767.98px) {
    .blog-image {
        height: 180px;
    }
    
    .blog-content {
        padding: var(--spacing-lg);
    }
}

/* FAQ Section */
@media (max-width: 767.98px) {
    .faq-section .accordion-button {
        padding: var(--spacing-md);
        font-size: 0.875rem;
    }
    
    .faq-section .accordion-body {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }
}

/* Gallery */
@media (max-width: 767.98px) {
    .gallery-item img {
        height: 200px;
    }
}

@media (max-width: 575.98px) {
    .gallery-item {
        margin-bottom: var(--spacing-sm);
    }
    
    .gallery-item img {
        height: 150px;
    }
}

/* ===== MOBILE SPECIFIC STYLES ===== */
@media (max-width: 767.98px) {
    .hero-section {
        padding-top: 4rem;
        text-align: center;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
    
    .hero-section p {
        font-size: 1rem;
    }
    
    .hero-image {
        margin-top: var(--spacing-2xl);
    }
    
    .section-title h2 {
        font-size: 1.75rem;
    }
    
    .section-title p {
        font-size: 1rem;
    }
    
    section {
        padding: var(--spacing-2xl) 0;
    }
    
    .feature-card,
    .service-card,
    .price-card,
    .team-card,
    .review-card,
    .element-card {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    .feature-icon {
        font-size: 2rem;
    }
    
    .feature-icon-wrapper {
        width: 50px;
        height: 50px;
        margin-right: var(--spacing-md);
    }
    
    .feature-icon-wrapper i {
        font-size: 1.25rem;
    }
    
    .service-image {
        height: 180px;
    }
    
    .price-amount {
        font-size: 2rem;
    }
    
    .team-image {
        width: 100px;
        height: 100px;
    }
    
    .contact-form {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }
    
    .contact-info {
        padding: var(--spacing-lg);
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
        margin-bottom: var(--spacing-md);
    }
    
    .contact-item i {
        margin-right: 0;
        margin-bottom: var(--spacing-sm);
    }
    
    .navbar-toggler {
        border: none;
        padding: var(--spacing-xs);
    }
    
    .navbar-toggler:focus {
        box-shadow: none;
    }
    
    .navbar-collapse {
        margin-top: var(--spacing-md);
    }
    
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        margin: var(--spacing-xs) 0;
        padding: var(--spacing-md) !important;
        border-radius: var(--border-radius-md);
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-section .row > div {
        margin-bottom: var(--spacing-xl);
    }
    
    .footer-section .row > div:last-child {
        margin-bottom: 0;
    }
    
    /* Mobile button adjustments */
    .btn {
        width: 100%;
        margin-bottom: var(--spacing-md);
    }
    
    .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Mobile form adjustments */
    .contact-form .row .col-md-6 {
        margin-bottom: var(--spacing-md);
    }
    
    /* Hide complex animations on mobile for performance */
    .feature-card:hover,
    .service-card:hover,
    .price-card:hover,
    .team-card:hover,
    .review-card:hover,
    .element-card:hover {
        transform: none;
    }
}

/* ===== TABLET PORTRAIT ORIENTATION ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section h1 {
        font-size: 2.75rem;
    }
    
    .section-title h2 {
        font-size: 2.25rem;
    }
    
    .feature-card,
    .service-card,
    .element-card {
        margin-bottom: var(--spacing-xl);
    }
    
    .team-image {
        width: 140px;
        height: 140px;
    }
    
    .contact-form {
        margin-bottom: var(--spacing-xl);
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding-top: 3rem;
        padding-bottom: var(--spacing-xl);
    }
    
    .hero-section h1 {
        font-size: 2rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .hero-section p {
        margin-bottom: var(--spacing-sm);
    }
    
    section {
        padding: var(--spacing-xl) 0;
    }
    
    .navbar {
        padding: var(--spacing-sm) 0;
    }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-section::before {
        background-image: url('../RAG_images/hero-bg.webp');
    }
    
    /* Ensure crisp rendering on high DPI */
    .feature-icon-wrapper,
    .team-image,
    .service-image {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .header-section,
    .footer-section,
    .contact-form,
    .btn {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    .feature-card,
    .service-card,
    .element-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ===== DARK MODE SUPPORT ===== */

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    .hero-section,
    .feature-card,
    .service-card,
    .price-card,
    .team-card,
    .review-card,
    .element-card,
    .btn {
        transition: none !important;
        transform: none !important;
    }
    
    [data-sal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===== FOCUS STYLES FOR ACCESSIBILITY ===== */
@media (min-width: 768px) {
    .btn:focus,
    .nav-link:focus,
    .form-control:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
}

/* ===== CUSTOM BREAKPOINT UTILITIES ===== */
.responsive-text {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.responsive-heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

.responsive-spacing {
    padding: clamp(1rem, 4vw, 3rem) 0;
}

/* ===== CONTAINER QUERIES (FUTURE-PROOF) ===== */
@supports (container-type: inline-size) {
    .container {
        container-type: inline-size;
    }
    
    @container (min-width: 600px) {
        .responsive-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-xl);
        }
    }
}

/* ===== FLEXIBLE GRID SYSTEM ===== */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    margin: calc(var(--spacing-lg) * -1);
}

.flex-grid > * {
    flex: 1 1 300px;
    margin: var(--spacing-lg);
}

@media (max-width: 767.98px) {
    .flex-grid {
        margin: calc(var(--spacing-md) * -1);
    }
    
    .flex-grid > * {
        flex: 1 1 100%;
        margin: var(--spacing-md);
    }
}

/* ===== RESPONSIVE IMAGES ===== */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.img-contain {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
.responsive-h1 {
    font-size: clamp(2rem, 8vw, 4rem);
}

.responsive-h2 {
    font-size: clamp(1.5rem, 6vw, 3rem);
}

.responsive-h3 {
    font-size: clamp(1.25rem, 4vw, 2rem);
}

.responsive-body {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
}

/* ===== RESPONSIVE UTILITIES ===== */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: left;
    }
}

.mb-mobile-lg {
    margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
    .mb-mobile-lg {
        margin-bottom: 0;
    }
}