/* ============================================
   EthiTrade - Responsive CSS File
   Mobile-First Responsive Design
   ============================================ */

/* ============================================
   MOBILE FIRST APPROACH (Base styles for mobile)
   ============================================ */

/* Base mobile styles are already defined in main.css */

/* ============================================
   SMALL DEVICES (576px and up) - Landscape phones
   ============================================ */
@media (min-width: 576px) {
    
    .hero-section h1 {
        font-size: 2.5rem;
    padding-top: 200px;
}
    
    .hero-section h2 {
        font-size: 1.25rem;
    }
    
    /* Feature cards spacing */
    .feature-card {
        margin-bottom: 1.5rem;
    }
    
    /* Team member grid adjustment */
    .col-lg-2-4 {
        width: 50%;
    }
    
    /* Timeline adjustments for small devices */
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item {
        flex-direction: row !important;
        margin-left: 60px;
    }
    
    .timeline-year {
        flex: 0 0 120px;
        margin-right: 2rem;
    }
    
    .timeline-content {
        margin: 0;
    }
}

/* ============================================
   MEDIUM DEVICES (768px and up) - Tablets
   ============================================ */
@media (min-width: 768px) {
    
    /* Typography scaling */
    h1 {
        font-size: 2.75rem;
    }
    
    h2 {
        font-size: 2.25rem;
    }
    
    .hero-section h1 {
        font-size: 3.25rem;
    padding-top: 200px;
}
    
    .hero-section h2 {
        font-size: 1.5rem;
    }
    
    /* Navigation improvements */
    .navbar {
        padding: 1rem 0;
    }
    
    .navbar-brand {
        font-size: 1.75rem !important;
    }
    
    /* Hero section enhancements */
    .hero-decorative-shape {
        width: 120px;
        height: 120px;
    }
    
    /* Card spacing improvements */
    .feature-card {
        padding: 2.5rem;
    }
    
    .service-card .card-body {
        padding: 2rem;
    overflow-x: hidden;
}
    
    .price-card {
        padding: 3rem 2rem;
    }
    
    /* Team grid for tablets */
    .col-lg-2-4 {
        width: 33.333333%;
    }
    
    /* Process steps layout */
    .process-step {
        margin-bottom: 2rem;
    }
    
    /* Timeline back to center */
    .timeline::before {
        left: 50%;
    }
    
    .timeline-item {
        margin-left: 0;
    }
    
    .timeline-item:nth-child(odd) {
        flex-direction: row;
    }
    
    .timeline-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    
    .timeline-year {
        flex: 0 0 140px;
    }
    
    .timeline-content {
        margin: 0 2rem;
    }
    
    /* Contact form layout */
    .contact-form {
        padding: 3.5rem;
    }
    
    /* Verification timeline for tablets */
    .verification-timeline {
        gap: 2.5rem;
    }
    
    .verification-step .step-icon {
        margin-right: 2.5rem;
    }
}

/* ============================================
   LARGE DEVICES (992px and up) - Desktops
   ============================================ */
@media (min-width: 992px) {
    
    /* Full typography scaling */
    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
    
    .hero-section h1 {
        font-size: 3.5rem;
    padding-top: 200px;
}
    
    .hero-section h2 {
        font-size: 1.75rem;
    }
    
    /* Navigation full size */
    .navbar-brand {
        font-size: 2rem !important;
    }
    
    /* Hero decorative elements */
    .hero-decorative-shape {
        width: 150px;
        height: 150px;
    }
    
    /* Enhanced spacing and sizing */
    .feature-card {
        padding: 3rem;
    }
    
    .service-card .card-body {
        padding: 2.5rem;
    }
    
    .price-card {
        padding: 3.5rem 2.5rem;
    }
    
    /* Team grid full layout */
    .col-lg-2-4 {
        width: 20%;
    }
    
    /* Process steps horizontal layout */
    .process-step {
        margin-bottom: 0;
    }
    
    /* Timeline full desktop version */
    .timeline-year {
        flex: 0 0 150px;
    }
    
    /* Contact section layout */
    .contact-form {
        padding: 4rem;
    }
    
    /* Certification grid optimization */
    .certifications-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
    
    /* Additional page specific layouts */
    .verification-timeline {
        gap: 3rem;
    }
    
    .verification-step .step-icon {
        width: 100px;
        height: 100px;
        margin-right: 3rem;
        font-size: 2rem;
    }
}

/* ============================================
   EXTRA LARGE DEVICES (1200px and up) - Large desktops
   ============================================ */
@media (min-width: 1200px) {
    
    /* Maximum typography sizes */
    .hero-section h1 {
        font-size: 4rem;
    padding-top: 200px;
}
    
    .hero-section h2 {
        font-size: 2rem;
    }
    
    /* Hero decorative elements at max size */
    .hero-decorative-shape {
        width: 180px;
        height: 180px;
    }
    
    /* Maximum card padding */
    .feature-card {
        padding: 3.5rem;
    }
    
    .service-card .card-body {
        padding: 3rem;
    }
    
    .price-card {
        padding: 4rem 3rem;
    }
    
    /* Contact form maximum size */
    .contact-form {
        padding: 4.5rem;
    }
    
    /* Certification grid at maximum */
    .certifications-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 3rem;
    }
    
    /* Timeline content maximum padding */
    .timeline-content {
        padding: 2.5rem;
    }
}

/* ============================================
   EXTRA EXTRA LARGE DEVICES (1400px and up) - Ultra-wide screens
   ============================================ */
@media (min-width: 1400px) {
    
    /* Container max width control */
    .container {
        max-width: 1320px;
    }
    
    /* Hero section maximum styling */
    .hero-section h1 {
        font-size: 4.5rem;
    padding-top: 200px;
}
    
    /* Ultimate card experience */
    .feature-card {
        padding: 4rem;
    }
    
    .contact-form {
        padding: 5rem;
    }
}

/* ============================================
   MOBILE SPECIFIC OPTIMIZATIONS
   ============================================ */
@media (max-width: 767.98px) {
    
    /* Typography mobile optimization */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .hero-section h1 {
        font-size: 2.25rem;
    padding-top: 200px;
}
    
    .hero-section h2 {
        font-size: 1.1rem;
    }
    
    /* Mobile navigation */
    .navbar {
        padding: 0.5rem 0;
    }
    
    .navbar-brand {
        font-size: 1.25rem !important;
    }
    
    /* Hero section mobile */
    .hero-section {
        padding-top: 70px;
        text-align: center;
    }
    
    .hero-decorative-shape {
        display: none;
    }
    
    /* Cards mobile optimization */
    .feature-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .service-card .card-body {
        padding: 1.25rem;
    }
    
    .price-card {
        padding: 2rem 1.25rem;
    }
    
    .review-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .team-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Process steps mobile */
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    /* Timeline mobile optimization */
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        flex-direction: row !important;
        margin-left: 50px;
    }
    
    .timeline-year {
        flex: 0 0 100px;
        padding: 0.75rem;
        font-size: 1rem;
        margin-right: 1rem;
    }
    
    .timeline-content {
        padding: 1.5rem;
        margin: 0;
    }
    
    /* Contact form mobile */
    .contact-form {
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .contact-info {
        padding: 1rem;
    }
    
    /* FAQ mobile optimization */
    .faq-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .faq-card h4 {
        font-size: 1rem;
    }
    
    /* Gallery mobile */
    #gallery .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    /* Footer mobile */
    footer {
        text-align: center;
    }
    
    footer .col-lg-4 {
        margin-bottom: 2rem;
    }
    
    /* Additional pages mobile optimizations */
    .overview-item,
    .framework-item,
    .integration-card,
    .support-card,
    .supply-chain-card,
    .initiative-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .verification-step {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .verification-step .step-icon {
        margin-right: 0;
        margin-bottom: 1rem;
        width: 70px;
        height: 70px;
    }
    
    .tool-card .card-body,
    .impact-card .card-body,
    .case-card .card-body,
    .blog-card .card-body {
        padding: 1.25rem;
    }
    
    .certification-item {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .certifications-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ============================================
   MOBILE LANDSCAPE SPECIFIC (landscape phones)
   ============================================ */
@media (max-width: 991.98px) and (orientation: landscape) {
    
    .hero-section {
        min-height: 60vh;
    }
    
    .navbar {
        padding: 0.25rem 0;
    }
    
    section {
        padding: 2rem 0;
    }
}

/* ============================================
   TABLET SPECIFIC OPTIMIZATIONS
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    
    /* Cards tablet layout */
    .service-card .card-img-top,
    .case-card .card-img-top,
    .blog-card .card-img-top,
    .tool-card .card-img-top,
    .impact-card .card-img-top {
        height: 160px;
    }
    
    /* Certification grid for tablets */
    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    /* Process steps tablet layout */
    .col-lg-2-4 {
        width: 50%;
        margin-bottom: 2rem;
    }
}

/* ============================================
   ANIMATION CONTROL FOR MOBILE
   ============================================ */
@media (max-width: 767.98px) {
    
    /* Disable animations on mobile for better performance */
    .feature-card:hover,
    .service-card:hover,
    .price-card:hover,
    .team-card:hover,
    .review-card:hover,
    .case-card:hover,
    .info-card:hover,
    .blog-card:hover,
    .faq-card:hover {
        transform: none;
    }
    
    /* Keep only essential transitions */
    .navbar-nav .nav-link,
    .btn {
        transition: color 0.2s ease, background-color 0.2s ease;
    }
    
    /* Remove complex transitions on mobile */
    .verification-step,
    .overview-item,
    .framework-item,
    .integration-card,
    .support-card,
    .supply-chain-card,
    .initiative-card {
        transition: none;
    }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */
@media (prefers-contrast: high) {
    
    :root {
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-color: #000000;
        --shadow: rgba(0, 0, 0, 0.5);
    }
    
    .feature-card,
    .service-card,
    .price-card,
    .team-card,
    .review-card,
    .case-card,
    .info-card,
    .blog-card,
    .faq-card {
        border: 2px solid var(--text-primary);
    }
}

/* ============================================
   DARK MODE SUPPORT (if user prefers)
   ============================================ */

/* ============================================
   PRINT RESPONSIVENESS
   ============================================ */
@media print {
    
    /* Hide interactive elements */
    .navbar,
    .breadcrumb-section,
    footer,
    .contact-form,
    .btn,
    .hero-decorative-shape {
        display: none !important;
    }
    
    /* Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1 { font-size: 18pt; }
    h2 { font-size: 16pt; }
    h3 { font-size: 14pt; }
    h4 { font-size: 13pt; }
    
    /* Remove shadows and backgrounds for print */
    .feature-card,
    .service-card,
    .price-card,
    .team-card,
    .review-card,
    .case-card,
    .info-card,
    .blog-card,
    .faq-card {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
        break-inside: avoid;
    }
    
    /* Page breaks */
    section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ============================================
   ACCESSIBILITY RESPONSIVE FEATURES
   ============================================ */

/* Touch target sizing for mobile */
@media (max-width: 767.98px) {
    
    .navbar-nav .nav-link,
    .btn,
    .contact-info .info-item {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .form-control {
        min-height: 44px;
    }
}

/* Reduced motion for mobile users */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   CONTAINER BREAKPOINT OVERRIDES
   ============================================ */

/* Ensure proper spacing on all devices */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ============================================
   CUSTOM GRID SYSTEM RESPONSIVENESS
   ============================================ */

/* Team member grid responsive behavior */
@media (max-width: 575.98px) {
    .col-lg-2-4 {
        width: 100%;
        margin-bottom: 1rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .col-lg-2-4 {
        width: 50%;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .col-lg-2-4 {
        width: 33.333333%;
        margin-bottom: 1.5rem;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for smooth animations on supported devices */
@media (min-width: 768px) {
    
    .feature-card,
    .service-card,
    .price-card,
    .team-card,
    .review-card,
    .case-card,
    .info-card,
    .blog-card,
    .faq-card {
        will-change: transform;
    }
}

/* Disable will-change on mobile for better performance */
@media (max-width: 767.98px) {
    
    .feature-card,
    .service-card,
    .price-card,
    .team-card,
    .review-card,
    .case-card,
    .info-card,
    .blog-card,
    .faq-card {
        will-change: auto;
    }
}