/**
 * Responsive Styles - Pháp Phục Tu Sĩ
 * Mobile-first approach
 */

/* ===========================
 * ROOT VARIABLES (Global Padding)
 * =========================== */
@media (max-width: 1199px) { :root { --pp-padding-x: 60px; } }
@media (max-width: 991px)  { :root { --pp-padding-x: 40px; } }
@media (max-width: 767px)  { :root { --pp-padding-x: 15px; } }

/* ===========================
 * TABLET (max-width: 1024px)
 * =========================== */
@media (max-width: 1024px) {
    
    /* Hero */
    .pp-hero__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .pp-hero__title {
        font-size: 2.5rem;
    }
    
    /* Promo Banner */
    .pp-promo-banner__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .pp-promo-banner__content {
        order: 2;
    }
    
    .pp-promo-banner__image {
        order: 1;
    }
    
    /* Brand Story */
    .pp-brand-story__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Services */
    .pp-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Product Grid */
    .pp-products-grid.pp-grid-4,
    .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
}

/* ===========================
 * MOBILE (max-width: 768px)
 * =========================== */
@media (max-width: 768px) {
    
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    /* Sections */
    .pp-section {
        padding: 60px 0;
    }
    
    .pp-section-lg {
        padding: 80px 0;
    }
    
    /* Hero */
    .pp-hero {
        min-height: auto;
    }
    
    .pp-hero__container {
        padding: 60px 20px;
    }
    
    .pp-hero__title {
        font-size: 2rem;
    }
    
    .pp-hero__buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .pp-hero__buttons .pp-button,
    .pp-hero__buttons .pp-btn {
        width: 100%;
        text-align: center;
    }
    
    /* Category Slider */
    .pp-category-slider {
        padding: 60px 0;
    }
    
    /* Product Tabs */
    .pp-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .pp-tab {
        padding: 10px 16px;
        font-size: 0.9375rem;
    }
    
    /* Promo Banner */
    .pp-promo-banner__title {
        font-size: 2rem;
    }
    
    /* Services */
    .pp-services__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    /* Product Grid */
    .pp-products-grid.pp-grid-4,
    .pp-products-grid.pp-grid-3,
    .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
    
    /* Section Heading */
    .pp-section-heading__title {
        font-size: 1.75rem;
    }
    
    /* Collection Header */
    .pp-collection-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    /* Product Card */
    .pp-product-card__content {
        padding: 16px;
    }
    
    .pp-product-card__title {
        font-size: 0.9375rem;
    }
    
    .pp-product-card__price {
        font-size: 1.125rem;
    }
    
}


/* ===========================
 * SMALL MOBILE (max-width: 480px)
 * =========================== */
@media (max-width: 480px) {
    
    /* Hero */
    .pp-hero__title {
        font-size: 1.75rem;
    }
    
    .pp-hero__description {
        font-size: 1rem;
    }
    
    /* Buttons */
    .pp-button,
    .pp-btn {
        padding: 12px 24px;
        font-size: 0.9375rem;
    }
    
    /* Promo Banner */
    .pp-promo-banner__title {
        font-size: 1.75rem;
    }
    
    /* Brand Story */
    .pp-brand-story__title {
        font-size: 1.75rem;
    }
    
    /* Product Grid - 1 column on very small screens if needed */
    .pp-products-grid.pp-grid-4.pp-mobile-1,
    .products.pp-mobile-1 {
        grid-template-columns: 1fr !important;
    }
    
    /* Cart Table - Stack on mobile */
    .woocommerce-cart-form table.cart td.product-thumbnail {
        display: none;
    }
    
    .woocommerce-cart-form table.cart td.product-name {
        text-align: left;
    }
    
    /* Checkout - Full width inputs */
    .woocommerce-checkout .form-row {
        width: 100%;
    }
    
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100%;
        float: none;
    }
    
}

/* ===========================
 * PRINT STYLES
 * =========================== */
@media print {
    
    /* Hide non-essential elements */
    #masthead,
    .header,
    #footer,
    .footer,
    .woocommerce-breadcrumb,
    .product_meta,
    .related.products {
        display: none;
    }
    
    /* Optimize for printing */
    body {
        background: white;
        color: black;
    }
    
    .pp-product-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
}

/* ===========================
 * LANDSCAPE MODE
 * =========================== */
@media (max-width: 768px) and (orientation: landscape) {
    
    .pp-hero {
        min-height: auto;
    }
    
    .pp-hero__container {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    
}