/*
 * PRECISE Bespoke Award Manufacturing - Responsive Stylesheet (Modern 2026 Design)
 *
 * This file contains media queries for various screen sizes, ensuring the site
 * adapts gracefully from large desktops to the smallest mobile devices.
 * Optimized for performance with modern CSS techniques.
 */

/* --- Performance Optimizations --- */
* {
    -webkit-tap-highlight-color: transparent;
}

img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* --- 1. Large Desktops / Smaller Laptops (Max-width 1400px) --- */
@media (max-width: 1400px) {
    .container {
        padding: 0 var(--space-lg); /* Increase side padding slightly */
    }

    /* Hero Section */
    .hero-section h2 {
        font-size: 4.5rem; /* Slight reduction for large screens */
    }
}


/* --- 2. Tablet Landscape & Smaller Desktops (Max-width 1200px) --- */
@media (max-width: 1200px) {
    html {
        font-size: 15px; /* Slightly reduce base font size */
    }

    .container {
        padding: 0 var(--space-md); /* Standard padding on tablets */
    }

    /* Header */
    .main-header .main-nav ul {
        gap: var(--space-md); /* Reduce navigation item spacing */
    }

    /* Hero Section */
    .hero-section {
        padding: 8rem var(--space-md); /* Adjust padding */
        margin: var(--space-xl) auto; /* Adjust margin */
    }
    .hero-section h2 {
        font-size: 3.8rem; /* Smaller heading */
    }
    .hero-section p {
        font-size: 1.15rem;
    }

    /* Product Grids */
    .awards-grid {
        gap: var(--space-lg); /* Adjust gap between cards */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Allow slightly smaller min-width for cards */
    }
    .award-card img {
        height: 250px; /* Slightly shorter images */
    }

    /* Why Choose Us */
    .why-choose-us li {
        flex: 1 1 calc(50% - var(--space-xl)); /* Two items per row */
        max-width: 450px; /* Allow wider cards if only two */
    }

    /* Product Details Page */
    .product-images,
    .product-info {
        flex: 1 1 100%; /* Stack columns on smaller desktops/large tablets */
        max-width: 700px; /* Limit width when stacked */
    }
    .product-content {
        flex-direction: column;
        align-items: center;
    }

    /* Forms */
    .forms-wrapper {
        gap: var(--space-lg);
        max-width: 800px;
    }
    .auth-section {
        flex: 1 1 calc(50% - var(--space-lg) / 2); /* Maintain 2 columns, adjust gap */
    }
    .customer-details-section, .inquiry-form-section, .customization-section {
        flex: 1 1 100%; /* Ensure these sections take full width */
        max-width: 700px;
    }

    /* Profile Page */
    .profile-sections-grid {
        grid-template-columns: 1fr; /* Stack profile sections */
        max-width: 700px;
        gap: var(--space-lg);
    }
}

/* --- 3. Tablet Portrait & Smaller (Max-width 992px) --- */
@media (max-width: 992px) {
    html {
        font-size: 14px; /* Further reduce base font size */
    }

    /* Header */
    .main-nav {
        display: none; /* Hide desktop navigation */
    }
    .hamburger-menu {
        display: block; /* Show hamburger icon */
    }
    .header-icons .profile-link,
    .header-icons .login-link {
        display: none; /* Hide text links for login/profile, rely on mobile menu */
    }
    .header-icons .icon-link {
        font-size: 1.5rem; /* Make remaining icons larger */
        gap: 0; /* No text next to icons */
        flex-direction: column; /* Stack icon and text label for clarity */
        line-height: 1.2;
        text-align: center;
    }
    .icon-link span { /* Style for text label below icon (if you add them to icon-link) */
        font-size: 0.7em;
        display: block;
    }
    .icon-link .cart-count {
        position: static; /* Remove absolute positioning for stacked layout */
        transform: none; /* Remove transform */
        margin-left: 0;
        margin-top: 5px; /* Space between icon and count */
    }


    /* Mobile Menu Overlay - adjust content positioning for smaller screens */
    .mobile-menu-content {
        width: 90%; /* Wider menu on smaller screens */
        max-width: 350px; /* Still limit max width */
    }


    /* Hero Section */
    .hero-section {
        padding: 6rem var(--space-md);
        margin: var(--space-md) auto;
    }
    .hero-section h2 {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    .hero-section p {
        font-size: clamp(0.95rem, 2vw, 1.1rem);
    }
    .hero-section .btn {
        display: block; /* Stack buttons vertically */
        margin: var(--space-sm) auto;
        width: 80%;
        max-width: 300px;
    }

    /* Product Grids */
    .awards-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
        gap: var(--space-md);
    }
    .award-card img {
        height: 200px; /* Shorter images on mobile */
    }
    .award-card .card-content {
        padding: var(--space-md) var(--space-sm);
    }

    /* Why Choose Us */
    .why-choose-us li {
        flex: 1 1 100%; /* One item per row on very small tablets/large phones */
        max-width: 400px;
    }

    /* Product Details Page */
    .product-images,
    .product-info {
        padding: var(--space-lg); /* Adjust padding */
    }
    .primary-product-image {
        max-height: 400px;
    }
    .product-gallery {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); /* Smaller thumbnails */
        gap: 5px;
    }
    .product-gallery img {
        height: 70px;
    }
    .crystal-shape-preview {
        max-width: 100%; /* Allow canvas to fill parent width */
    }
    .customization-controls .form-group {
        flex: 1 1 100%; /* Stack controls vertically */
    }
    .customization-controls button {
        width: 100%; /* Full width buttons */
    }

    /* Footer */
    .site-footer .footer-grid {
        grid-template-columns: 1fr; /* Single column */
        text-align: center;
    }
    .site-footer .footer-col h3 {
        margin-top: var(--space-md);
    }
    .site-footer .footer-col ul {
        padding-bottom: var(--space-sm);
    }

    /* Checkout & Other Forms */
    .checkout-content {
        padding: var(--space-md);
    }
    .checkout-steps {
        flex-wrap: wrap;
        margin-bottom: var(--space-lg);
    }
    .checkout-steps .step {
        flex-basis: 48%; /* Two steps per row */
        font-size: 0.9em;
        padding: 8px;
        margin-bottom: var(--space-xs);
    }
    .forms-wrapper {
        flex-direction: column;
        gap: var(--space-md);
    }
    .auth-section {
        flex-basis: 100%;
        max-width: 500px; /* Limit single column width */
    }

    /* Cart Page */
    .cart-item {
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
    .item-image, .item-details, .item-actions, .item-subtotal {
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .item-quantity-control {
        justify-content: center;
    }
    .item-subtotal {
        width: auto;
        margin-top: 10px;
    }
    .cart-actions {
        flex-direction: column;
        align-items: center;
    }
    .cart-actions .btn {
        width: 80%;
    }

    /* Profile Tables */
    .profile-table {
        font-size: 0.9em; /* Smaller table text */
    }
    .profile-table th, .profile-table td {
        padding: 8px 10px;
    }
    .status-badge {
        padding: 0.25em 0.6em;
        font-size: 0.75em;
    }
    .profile-table td .btn-sm {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
}


/* --- 4. Mobile Devices (Max-width 767px - generally phones) --- */
@media (max-width: 767px) {
    html {
        font-size: 13px; /* Smallest base font size for tiny screens */
    }
    .container {
        padding: 0 var(--space-sm);
    }

    /* Header */
    .main-header {
        padding: 0.8rem 0;
    }
    .site-logo {
        max-height: 45px; /* Smaller logo on very small screens */
    }
    .header-icons {
        gap: var(--space-sm);
    }
    .hamburger-menu {
        font-size: 1.8rem;
    }

    /* Mobile Menu Overlay */
    .mobile-menu-content {
        width: 100%; /* Full width for very small phones */
        padding: var(--space-lg) var(--space-md); /* Adjust padding */
    }
    .mobile-nav ul li a {
        font-size: 1.1rem; /* Slightly smaller mobile nav links */
        padding: 0.8rem 0;
    }

    /* Hero Section */
    .hero-section {
        padding: 4rem var(--space-sm);
        margin: var(--space-md) auto;
        border-radius: var(--br-md); /* Less rounded on small screens */
    }
    .hero-section h2 {
        font-size: clamp(1.8rem, 6vw, 2.8rem);
        line-height: 1.2;
    }
    .hero-section p {
        font-size: clamp(0.9rem, 3vw, 1rem);
        margin-bottom: var(--space-lg);
    }
    .hero-section .btn {
        font-size: clamp(0.85rem, 2vw, 0.95rem);
        padding: 0.7rem 1.5rem;
        width: 90%;
    }

    /* General Sections */
    .featured-awards, .awards-list-page, .why-choose-us,
    .product-details-page, .checkout-page, .login-registration-page, .customer-profile-page, .cart-page, .inquiry-page {
        padding: var(--space-xl) 0; /* Consistent vertical padding */
    }

    /* Cards */
    .award-card img {
        height: 180px; /* Even shorter images for phones */
    }
    .award-card h4 {
        font-size: 1.4rem;
    }

    /* Product Details Customization */
    .product-images, .product-info,
    .customization-section, .inquiry-form-section, .page-content,
    .checkout-content, .empty-cart-message, .cart-items, .cart-summary,
    .order-summary-details, .confirmation-header, .profile-card, .orders-card, .inquiries-card, .auth-section {
        padding: var(--space-md); /* Reduce padding on smaller screens */
    }
    .primary-product-image {
        max-height: 300px;
    }
    .product-gallery {
        grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
        gap: 5px;
    }
    .product-gallery img {
        height: 45px;
    }
    .crystal-shape-preview {
        max-width: 100%;
    }
    .customization-controls {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-md);
    }
    .customization-controls .form-group {
        min-width: unset;
    }


    /* Footer */
    .site-footer {
        padding: var(--space-xl) 0 var(--space-sm) 0;
    }
    .site-footer .footer-grid {
        gap: var(--space-md);
    }
}