/* ============================================================
   responsive.css — maisonguerin.com v7
============================================================ */

/* ============================================================
   Large (< 1200px)
============================================================ */
@media (max-width: 1199px) {
    .about-content { padding-left: 40px; }
    .about-badge   { right: -10px; bottom: -10px; }
}

/* ============================================================
   Tablet (< 992px)
============================================================ */
@media (max-width: 991px) {
    /* Hero — vertical overlay for smaller screens */
    .hero-parallax-bg {
        inset: 0;
        background-image:
            linear-gradient(to bottom, rgba(255,255,255,0.94), rgba(255,255,255,0.82)),
            url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?auto=format&fit=crop&w=1200&q=80');
        background-position: center;
    }

    .hero-content-wrap .col-lg-6 { text-align: center; }
    .hero-eyebrow { justify-content: center; }
    .hero-section .lead { margin: 0 auto 36px; }
    .hero-section .d-flex { justify-content: center; }

    /* About */
    .about-img-wrap     { margin-bottom: 64px; }
    .about-img-wrap img { height: 420px; }
    .about-badge        { right: 16px; bottom: -16px; }
    .about-content      { padding-left: 0; }

    /* Sliders */
    .collection-slide  { flex: 0 0 calc((100% - 24px) / 2); } /* 2 items, 1 gap */
    .testimonial-slide { flex: 0 0 calc(50% - 12px); }
    .testimonials-slider-wrap { padding: 0 52px; }

    /* Features: remove left border on first item */
    .features-section .row > div:first-child .feature-item { border-left: none; }

    /* Footer */
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

    /* Reveals — use vertical on tablet */
    .reveal-left,
    .reveal-right { transform: translateY(30px); }
}

/* ============================================================
   Mobile (< 768px)
============================================================ */
@media (max-width: 767px) {
    .hero-section    { min-height: 85vh; }
    .hero-split-text { font-size: 2.6rem !important; }
    .section-heading { font-size: 1.9rem; }

    .about-img-wrap img { height: 300px; }
    .about-badge { width: 110px; height: 110px; right: 12px; bottom: -12px; }
    .about-badge .num { font-size: 1.7rem; }
    .about-stats { flex-wrap: wrap; gap: 24px; }

    .category-card { height: 300px; }

    .cta-band { min-height: 420px; }
    .cta-band-content h2 { font-size: 2rem; }

    .testimonial-card { padding: 28px 24px; }

    .footer-mg { padding: 52px 0 24px; }
}

/* ============================================================
   Small mobile (< 576px)
============================================================ */
@media (max-width: 575px) {
    .hero-split-text { font-size: 2.1rem !important; }

    .hero-section .d-flex {
        flex-direction: column;
        align-items: center;
        gap: 12px !important;
    }
    .hero-section .d-flex .btn { width: 100%; text-align: center; }

    .about-stats     { gap: 20px; }
    .category-card   { height: 260px; }
    .feature-item    { padding: 28px 20px; }
    .cta-band-content h2 { font-size: 1.75rem; }

    .collection-slide  { flex: 0 0 100%; } /* 1 item full width on mobile */
    .testimonial-slide { flex: 0 0 calc(88% - 12px); }
    .testimonials-slider-wrap { padding: 0 48px; }

    .footer-mg .row > div:not(:last-child) { margin-bottom: 32px; }

    /* Reduce g-5 gutter on mobile to prevent horizontal overflow */
    .footer-mg .row.g-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 0; }
}

/* ============================================================
   Accessibility — reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .split-word,
    .reveal-fade,
    .reveal-left,
    .reveal-right,
    .reveal,
    .hero-parallax-bg {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Touch devices — disable parallax & tilt
============================================================ */
@media (hover: none) {
    .hero-parallax-bg { inset: 0; transform: none !important; animation: none !important; }
}

/* CTA band — remove max-width on mobile so text doesn't get clipped */
@media (max-width: 767px) {
    .cta-band-content p { max-width: 100%; }
    .cta-band-content h2 { font-size: 1.9rem; }
}

/* Contact section — reduce row gutter on mobile */
@media (max-width: 991px) {
    .contact-section .row.g-5 { --bs-gutter-x: 1.5rem; }
}