/**
 * MIB LEATHER - Responsive Stylesheet
 * Breakpoints tested: 320px, 375px, 430px, 768px, 1024px, 1440px, 1920px
 */

/* ==========================================================================
   Mobile-First & Universal Responsive Tweaks
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Mobile header adjustments */
    .luxury-navbar {
        top: 0;
    }
    
    .luxury-topbar {
        font-size: 0.7rem;
    }
    
    .header-inner {
        height: 64px;
    }

    .brand-title {
        font-size: 1.35rem;
    }

    .brand-sub {
        font-size: 0.52rem;
    }

    /* Hero Padding for mobile */
    .hero-fullscreen {
        padding-top: 80px;
        padding-bottom: 80px;
        min-height: 90vh;
    }

    .hero-main-title {
        font-size: 2.3rem;
    }

    .hero-subtitle {
        font-size: 1.3rem;
    }

    .hero-desc {
        font-size: 0.95rem;
        margin-bottom: 1.8rem;
    }

    /* Inner Hero */
    .inner-page-hero {
        padding: 110px 0 50px;
    }

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

    /* Category Cards */
    .category-card {
        height: 380px;
    }

    .category-card-content {
        padding: 20px;
    }

    .category-card-title {
        font-size: 1.35rem;
    }

    /* Craftsmanship Section */
    .craft-image-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 30px;
    }

    .craft-grid-img {
        height: 200px;
    }

    /* Instagram grid on tablet */
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Padding for mobile action bar */
    body {
        padding-bottom: 60px;
    }

    .floating-whatsapp-btn {
        bottom: 75px;
        right: 20px;
        width: 52px;
        height: 52px;
        font-size: 1.6rem;
    }

    .back-to-top-btn {
        bottom: 75px;
        left: 20px;
        width: 40px;
        height: 40px;
    }

    /* Luxury form adjustments */
    .luxury-form-card {
        padding: 24px 16px;
    }

    /* Lightbox controls */
    .lightbox-prev {
        left: 5px;
    }

    .lightbox-next {
        right: 5px;
    }
}

/* Phones (320px - 480px) */
@media (max-width: 575.98px) {
    .hero-main-title {
        font-size: 1.85rem;
        letter-spacing: 0.01em;
    }

    .hero-subtitle {
        font-size: 1.15rem;
    }

    .hero-actions .btn-gold,
    .hero-actions .btn-outline-gold {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
        font-size: 0.8rem;
    }

    .product-actions {
        grid-template-columns: 1fr;
    }

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

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

    .gallery-item {
        height: 300px;
    }

    .brand-title {
        font-size: 1.2rem;
    }

    .brand-sub {
        font-size: 0.48rem;
    }

    .b2b-step-card {
        padding: 24px 18px;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop & Large Screens */
@media (min-width: 1400px) {
    .container-fluid.px-lg-5 {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }

    .hero-main-title {
        font-size: 4.8rem;
    }
}

/* Ultra-wide Screens */
@media (min-width: 1920px) {
    .container, .container-fluid {
        max-width: 1800px;
    }
}

/* Print styles */
@media print {
    .luxury-topbar,
    .luxury-navbar,
    .floating-whatsapp-btn,
    .mobile-action-bar,
    .back-to-top-btn,
    .footer-bottom-bar {
        display: none !important;
    }

    body {
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }
}