/* ========================================================
   AutoPelle Italia — Responsive Stylesheet
   Breakpoints:
     Desktop:    1200px+
     Laptop:     992px - 1199px
     Tablet:     768px - 991px
     Mobile-L:   576px - 767px
     Mobile:     < 576px
   ======================================================== */

/* --------------------------------------------------------
   Laptop (992px - 1199px)
   -------------------------------------------------------- */
@media (max-width: 1199px) {
    :root {
        --section-padding: 60px;
        --container-pad: 32px;
    }

    .hero__title {
        font-size: 44px;
    }

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

    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
        gap: 32px;
    }

    .process-steps::before {
        display: none;
    }
}

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

    /* Navigation */
    .nav__links {
        display: none;
    }

    .nav__hamburger {
        display: flex;
        align-items: center;
    }

    .top-bar__item--hours {
        display: none;
    }

    /* Hero */
    .hero__title {
        font-size: 38px;
    }

    .hero__desc {
        font-size: 17px;
    }

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

    /* Two-column */
    .two-col,
    .two-col--reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .two-col--reverse .two-col__image {
        order: -1;
    }

    /* Materials */
    .materials-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .material-item__image {
        aspect-ratio: 16/9;
    }

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

    .process-steps::before {
        display: none;
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Gallery */
    .gallery-grid,
    .gallery-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .contact-info {
        padding-right: 0;
        padding-bottom: 40px;
    }

    /* Contact page layout */
    .contact-page-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer__col--brand {
        grid-column: 1 / -1;
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Workshop images */
    .workshop-images {
        grid-template-columns: 1fr;
    }

    /* Page hero */
    .page-hero__title {
        font-size: 38px;
    }

    /* Section heading */
    h2 { font-size: 30px; }
    .section__title { font-size: 30px; }
}

/* --------------------------------------------------------
   Mobile Large (576px - 767px)
   -------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --section-padding: 40px;
        --container-pad: 20px;
    }

    h1   { font-size: 32px; }
    h2   { font-size: 26px; }
    h3   { font-size: 22px; }
    h4   { font-size: 18px; }

    .section__title { font-size: 26px; }

    /* Top bar */
    .top-bar__item:not(:first-child):not(:last-child) {
        display: none;
    }

    /* Hero */
    .hero__title {
        font-size: 30px;
        line-height: 1.25;
    }

    .hero__label {
        font-size: 15px;
    }

    .hero__desc {
        font-size: 16px;
    }

    .hero__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__buttons .btn {
        text-align: center;
        justify-content: center;
    }

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

    .trust-bar__number {
        font-size: 32px;
    }

    /* Process */
    .process-steps {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-page-grid {
        grid-template-columns: 1fr;
    }

    /* Form row */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Page hero */
    .page-hero__title {
        font-size: 32px;
    }

    /* Two-col */
    .two-col,
    .two-col--reverse {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer__col--brand {
        grid-column: auto;
    }

    .footer__legal {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    /* CTA band */
    .cta-band {
        padding: 48px 0;
    }

    /* Btn */
    .btn {
        padding: 14px 28px;
        font-size: 14px;
    }

    /* Trust bar single column */
    .trust-bar {
        padding: 32px 0;
    }
}

/* --------------------------------------------------------
   Mobile Small (< 576px)
   -------------------------------------------------------- */
@media (max-width: 575px) {
    :root {
        --section-padding: 32px;
        --container-pad: 16px;
    }

    h1 { font-size: 28px; }
    h2 { font-size: 24px; }

    .hero {
        min-height: 80vh;
    }

    .hero__title {
        font-size: 26px;
    }

    .trust-bar__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .trust-bar__number {
        font-size: 28px;
    }

    /* Page hero */
    .page-hero {
        min-height: 40vh;
    }

    .page-hero__title {
        font-size: 26px;
    }

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

    /* Gallery filter */
    .gallery-filter {
        gap: 8px;
    }

    .filter-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    /* Mobile menu */
    .mobile-menu {
        width: 100%;
        max-width: 100%;
    }

    /* Contact form panel */
    .contact-form-panel {
        padding: 32px 20px;
    }

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

    /* Color swatches */
    .color-swatch {
        width: 30px;
        height: 30px;
    }

    /* Partners */
    .partners-row {
        flex-direction: column;
        align-items: stretch;
    }

    .partner-badge {
        min-width: auto;
    }

    /* Section label */
    .section-label {
        font-size: 16px;
    }

    /* Testimonial */
    .testimonial-card__text {
        font-size: 17px;
    }

    /* Footer */
    .footer__bottom {
        gap: 8px;
    }
}

/* --------------------------------------------------------
   Focus Styles (Accessibility)
   -------------------------------------------------------- */
:focus-visible {
    outline: 2px solid #C8A962;
    outline-offset: 2px;
}

/* --------------------------------------------------------
   Print Styles
   -------------------------------------------------------- */
@media print {
    .top-bar,
    .site-header,
    .mobile-menu,
    .footer {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }
}