/* ===================================
   PieceMotive - Responsive Styles
   =================================== */

/* ===================================
   Large: 992px - 1199px
   =================================== */
@media (max-width: 1199px) {
    :root {
        --section-padding: 70px;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }

    .hero-title { font-size: 2.8rem; }

    .pre-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .counters-grid {
        gap: 20px;
    }

    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .brands-logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================================
   Medium: 768px - 991px
   =================================== */
@media (max-width: 991px) {
    :root {
        --section-padding: 60px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    /* Header */
    .main-nav,
    .nav-cta {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 60px 0;
        gap: 40px;
    }

    .hero-image {
        order: -1;
    }

    .hero-title { font-size: 2.4rem; }

    .hero-subtitle {
        max-width: 100%;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brands-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .counters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap);
    }

    .cta-section {
        padding: 60px 24px;
    }

    /* Pre-footer */
    .pre-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    /* Catalogue */
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brands-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .guide-inner {
        grid-template-columns: 1fr;
    }

    .guide-image {
        order: -1;
    }

    /* About */
    .about-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Timeline */
    .timeline::before {
        left: 16px;
    }

    .timeline-item {
        grid-template-columns: auto 1fr;
        gap: 16px;
    }

    .timeline-date {
        display: none;
    }

    .timeline-item:nth-child(even) .timeline-date { display: none; }
    .timeline-item:nth-child(even) .timeline-content { order: 2; }

    /* Engagements */
    .engagement-block {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* On mobile, always show image first (on top) regardless of DOM order */
    .engagement-image {
        order: -1;
    }

    .engagement-block.reverse .engagement-image {
        order: -1;
    }

    .price-cards {
        grid-template-columns: 1fr;
    }

    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Search bar */
    .search-bar-inner {
        flex-direction: column;
    }

    .search-bar-wrapper,
    .select-filter {
        min-width: 100%;
    }
}

/* ===================================
   Small: 576px - 767px
   =================================== */
@media (max-width: 767px) {
    :root {
        --section-padding: 50px;
        --card-padding: 24px;
        --grid-gap: 20px;
    }

    body { font-size: 0.95rem; }

    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }

    .hero-title { font-size: 2rem; }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-trust {
        flex-direction: column;
        gap: 12px;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }

    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .search-form {
        flex-direction: column;
        border-radius: 12px;
        overflow: visible;
    }

    .search-input {
        border-radius: 12px;
        border-right: 2px solid var(--border);
    }

    .search-btn {
        border-radius: 12px;
        justify-content: center;
    }

    .search-input:focus {
        border-right: 2px solid var(--primary);
    }

    .counters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .counter-item .counter-number {
        font-size: 2.2rem;
    }

    .pre-footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Catalogue */
    .cat-grid {
        grid-template-columns: 1fr;
    }

    .brands-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Team */
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Trust */
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA buttons */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-cta-outline,
    .cta-section .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* Legal */
    .legal-card {
        padding: 24px;
    }

    /* Contact */
    .form-card {
        padding: 24px;
    }

    .coords-card {
        padding: 24px;
    }

    /* Return */
    .return-card {
        padding: 32px 24px;
    }
}

/* ===================================
   Extra Small: < 576px
   =================================== */
@media (max-width: 575px) {
    :root {
        --section-padding: 40px;
    }

    .container {
        padding: 0 16px;
    }

    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.5rem; }

    .hero-title { font-size: 1.8rem; }

    .hero-inner {
        padding: 40px 0;
    }

    .badge {
        font-size: 0.75rem;
    }

    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .btn-full {
        width: 100%;
    }

    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .brands-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .counters-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .search-bar-card {
        padding: 20px;
    }

    .cta-section {
        padding: 48px 20px;
        border-radius: 16px;
    }

    .cta-wrapper {
        margin: 50px auto;
    }

    .top-bar {
        display: none;
    }

    .timeline-item {
        gap: 12px;
    }

    .price-cards {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .engagement-block {
        padding: 40px 0;
    }

    .about-cta-card {
        padding: 32px 20px;
    }

    .catalogue-cta-card {
        padding: 32px 20px;
    }
}

/* ===================================
   Hamburger menu open state
   =================================== */
body.menu-open {
    overflow: hidden;
}

/* ===================================
   Focus styles for accessibility
   =================================== */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

button:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

a:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}