/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   LARGE SCREEN RESPONSIVE STYLES
   File:
   /public_html/assets/css/responsive/large-screen.css

   Purpose:
   - Large desktop / wide screens
   - 1440px+
   - 1600px+
   - 1920px+
   - 2560px+
   - 4K displays

   IMPORTANT:
   This file contains PRESENTATION ONLY.
   No marketplace/business/vendor/product data is stored here.

   LIVE DATA FLOW:
   UI -> JS -> API -> Backend -> Service -> Repository -> Database

   ========================================================================== */


/* ==========================================================================
   1. LARGE SCREEN BASE
   ========================================================================== */

@media (min-width: 1440px) {

    html {
        font-size: 16px;
    }

    body {
        min-width: 1200px;
    }

    img,
    video,
    iframe {
        max-width: 100%;
    }

    .container,
    .container-fluid {
        width: 100%;
    }
}


/* ==========================================================================
   2. EXTRA LARGE CONTAINERS
   ========================================================================== */

@media (min-width: 1440px) {

    .container {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }

    .container-wide {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }

    .container-xl {
        max-width: 1560px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 28px;
        padding-right: 28px;
    }
}


/* ==========================================================================
   3. 1600PX+
   ========================================================================== */

@media (min-width: 1600px) {

    .container {
        max-width: 1440px;
    }

    .container-wide {
        max-width: 1520px;
    }

    .container-xl {
        max-width: 1680px;
    }
}


/* ==========================================================================
   4. 1920PX+
   ========================================================================== */

@media (min-width: 1920px) {

    html {
        font-size: 17px;
    }

    .container {
        max-width: 1560px;
    }

    .container-wide {
        max-width: 1680px;
    }

    .container-xl {
        max-width: 1840px;
    }
}


/* ==========================================================================
   5. 2560PX+
   ========================================================================== */

@media (min-width: 2560px) {

    html {
        font-size: 18px;
    }

    .container {
        max-width: 1680px;
    }

    .container-wide {
        max-width: 1920px;
    }

    .container-xl {
        max-width: 2200px;
    }
}


/* ==========================================================================
   6. 4K / ULTRA WIDE
   ========================================================================== */

@media (min-width: 3200px) {

    .container {
        max-width: 1840px;
    }

    .container-wide {
        max-width: 2160px;
    }

    .container-xl {
        max-width: 2560px;
    }
}


/* ==========================================================================
   7. HEADER
   ========================================================================== */

@media (min-width: 1440px) {

    .site-header {
        width: 100%;
    }

    .site-header .header-inner {
        min-height: 76px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .site-logo {
        max-width: 230px;
    }

    .site-logo img {
        max-height: 58px;
        width: auto;
    }

    .header-actions {
        gap: 14px;
    }

    .header-action {
        min-height: 44px;
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ==========================================================================
   8. TOP BAR
   ========================================================================== */

@media (min-width: 1440px) {

    .topbar-inner {
        min-height: 40px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .topbar-left,
    .topbar-right {
        gap: 18px;
    }
}


/* ==========================================================================
   9. MAIN NAVIGATION
   ========================================================================== */

@media (min-width: 1440px) {

    .main-navigation {
        min-height: 56px;
    }

    .main-navigation .nav-inner {
        min-height: 56px;
    }

    .main-navigation .nav-list {
        gap: 4px;
    }

    .main-navigation .nav-link {
        min-height: 48px;
        padding-left: 18px;
        padding-right: 18px;
        white-space: nowrap;
    }
}


/* ==========================================================================
   10. SEARCH AREA
   ========================================================================== */

@media (min-width: 1440px) {

    .search-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .search-box {
        width: 100%;
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }

    .search-box-large {
        max-width: 1280px;
    }

    .search-box-xl {
        max-width: 1440px;
    }

    .search-input {
        min-height: 58px;
    }

    .search-button {
        min-height: 58px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .location-selector {
        min-height: 58px;
    }
}


/* ==========================================================================
   11. HOMEPAGE HERO
   ========================================================================== */

@media (min-width: 1440px) {

    .hero-section {
        min-height: 480px;
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .hero-content {
        max-width: 900px;
    }

    .hero-title {
        font-size: clamp(2.4rem, 4vw, 4rem);
        line-height: 1.1;
    }

    .hero-description {
        max-width: 760px;
        font-size: 1.15rem;
    }
}


@media (min-width: 1920px) {

    .hero-section {
        min-height: 560px;
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .hero-content {
        max-width: 1080px;
    }

    .hero-description {
        max-width: 900px;
        font-size: 1.2rem;
    }
}


/* ==========================================================================
   12. GRID SYSTEM
   ========================================================================== */

@media (min-width: 1440px) {

    .grid {
        display: grid;
    }

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

    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .grid-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .grid-gap {
        gap: 24px;
    }

    .grid-gap-lg {
        gap: 32px;
    }

    .grid-gap-xl {
        gap: 40px;
    }
}


@media (min-width: 1920px) {

    .grid-gap {
        gap: 28px;
    }

    .grid-gap-lg {
        gap: 40px;
    }

    .grid-gap-xl {
        gap: 48px;
    }
}


/* ==========================================================================
   13. CARD GRID
   ========================================================================== */

@media (min-width: 1440px) {

    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid,
    .category-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}


@media (min-width: 1800px) {

    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid,
    .category-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 28px;
    }
}


@media (min-width: 2400px) {

    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid,
    .category-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 32px;
    }
}


/* ==========================================================================
   14. MARKETPLACE CARDS
   ========================================================================== */

@media (min-width: 1440px) {

    .business-card,
    .vendor-card,
    .service-card,
    .product-card,
    .category-card {
        min-width: 0;
    }

    .business-card .card-image,
    .vendor-card .card-image,
    .service-card .card-image,
    .product-card .card-image {
        aspect-ratio: 16 / 10;
    }

    .business-card .card-body,
    .vendor-card .card-body,
    .service-card .card-body,
    .product-card .card-body {
        padding: 20px;
    }
}


/* ==========================================================================
   15. SEARCH RESULTS LAYOUT
   ========================================================================== */

@media (min-width: 1440px) {

    .search-results-layout {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 32px;
    }

    .search-results-main {
        min-width: 0;
    }

    .search-sidebar {
        min-width: 0;
    }
}


@media (min-width: 1800px) {

    .search-results-layout {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 40px;
    }
}


/* ==========================================================================
   16. SEARCH RESULT CARD
   ========================================================================== */

@media (min-width: 1440px) {

    .search-result-card {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 24px;
    }

    .search-result-card .result-image {
        width: 260px;
        aspect-ratio: 16 / 10;
    }

    .search-result-card .result-content {
        min-width: 0;
    }
}


@media (min-width: 1920px) {

    .search-result-card {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 30px;
    }

    .search-result-card .result-image {
        width: 300px;
    }
}


/* ==========================================================================
   17. FILTER PANEL
   ========================================================================== */

@media (min-width: 1440px) {

    .filter-panel {
        width: 100%;
    }

    .filter-group {
        padding: 20px;
    }

    .filter-options {
        max-height: 420px;
        overflow-y: auto;
    }
}


/* ==========================================================================
   18. PRODUCT DETAIL
   ========================================================================== */

@media (min-width: 1440px) {

    .product-detail-layout {
        display: grid;
        grid-template-columns: minmax(500px, 1.1fr) minmax(420px, 0.9fr);
        gap: 48px;
    }

    .product-gallery {
        min-width: 0;
    }

    .product-information {
        min-width: 0;
    }
}


@media (min-width: 1920px) {

    .product-detail-layout {
        grid-template-columns: minmax(650px, 1.15fr) minmax(520px, 0.85fr);
        gap: 64px;
    }
}


/* ==========================================================================
   19. BUSINESS DETAIL
   ========================================================================== */

@media (min-width: 1440px) {

    .business-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 40px;
    }

    .business-main-content {
        min-width: 0;
    }

    .business-sidebar {
        min-width: 0;
    }
}


@media (min-width: 1920px) {

    .business-detail-layout {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 52px;
    }
}


/* ==========================================================================
   20. VENDOR DETAIL
   ========================================================================== */

@media (min-width: 1440px) {

    .vendor-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 40px;
    }
}


/* ==========================================================================
   21. SERVICE DETAIL
   ========================================================================== */

@media (min-width: 1440px) {

    .service-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 40px;
    }
}


/* ==========================================================================
   22. LOCATION PAGES
   ========================================================================== */

@media (min-width: 1440px) {

    .location-page-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 40px;
    }

    .location-map {
        min-height: 560px;
    }
}


@media (min-width: 1920px) {

    .location-page-layout {
        grid-template-columns: minmax(0, 1fr) 500px;
        gap: 52px;
    }

    .location-map {
        min-height: 680px;
    }
}


/* ==========================================================================
   23. MAP SEARCH
   ========================================================================== */

@media (min-width: 1440px) {

    .map-search-layout {
        display: grid;
        grid-template-columns: minmax(420px, 0.8fr) minmax(600px, 1.2fr);
        min-height: 720px;
    }

    .map-search-results {
        overflow-y: auto;
    }

    .map-search-map {
        min-height: 720px;
        position: sticky;
        top: 0;
    }
}


@media (min-width: 1920px) {

    .map-search-layout {
        grid-template-columns: minmax(520px, 0.75fr) minmax(800px, 1.25fr);
        min-height: 820px;
    }

    .map-search-map {
        min-height: 820px;
    }
}


/* ==========================================================================
   24. ENQUIRY / QUOTE
   ========================================================================== */

@media (min-width: 1440px) {

    .enquiry-layout,
    .quote-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 40px;
    }

    .enquiry-form,
    .quote-form {
        max-width: none;
    }

    .enquiry-sidebar,
    .quote-sidebar {
        min-width: 0;
    }
}


/* ==========================================================================
   25. COMPARE
   ========================================================================== */

@media (min-width: 1440px) {

    .compare-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 24px;
    }

    .compare-table-wrapper {
        overflow-x: auto;
    }

    .compare-table {
        min-width: 1100px;
    }
}


/* ==========================================================================
   26. CART / CHECKOUT
   ========================================================================== */

@media (min-width: 1440px) {

    .cart-layout,
    .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 40px;
        align-items: start;
    }

    .cart-items,
    .checkout-main {
        min-width: 0;
    }

    .cart-summary,
    .checkout-summary {
        position: sticky;
        top: 24px;
    }
}


/* ==========================================================================
   27. ORDER DETAIL
   ========================================================================== */

@media (min-width: 1440px) {

    .order-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 40px;
    }
}


/* ==========================================================================
   28. ACCOUNT
   ========================================================================== */

@media (min-width: 1440px) {

    .account-layout {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 32px;
    }

    .account-sidebar {
        position: sticky;
        top: 24px;
        align-self: start;
    }

    .account-content {
        min-width: 0;
    }
}


@media (min-width: 1920px) {

    .account-layout {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 40px;
    }
}


/* ==========================================================================
   29. DASHBOARD STYLE PUBLIC ACCOUNT PAGES
   ========================================================================== */

@media (min-width: 1440px) {

    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .dashboard-card {
        min-width: 0;
    }
}


@media (min-width: 1920px) {

    .dashboard-grid {
        gap: 30px;
    }
}


/* ==========================================================================
   30. MEDIA GALLERY
   ========================================================================== */

@media (min-width: 1440px) {

    .media-gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .media-gallery-item {
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }
}


@media (min-width: 1920px) {

    .media-gallery-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
    }
}


/* ==========================================================================
   31. MODALS
   ========================================================================== */

@media (min-width: 1440px) {

    .modal-dialog {
        width: 100%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .modal-dialog-lg {
        max-width: 960px;
    }

    .modal-dialog-xl {
        max-width: 1200px;
    }
}


@media (min-width: 1920px) {

    .modal-dialog-xl {
        max-width: 1360px;
    }
}


/* ==========================================================================
   32. CHAT
   ========================================================================== */

@media (min-width: 1440px) {

    .chat-widget {
        width: 390px;
        max-width: calc(100vw - 48px);
    }

    .chat-window {
        width: 420px;
        max-width: calc(100vw - 48px);
        max-height: 720px;
    }
}


/* ==========================================================================
   33. NOTIFICATIONS
   ========================================================================== */

@media (min-width: 1440px) {

    .notification-panel {
        width: 420px;
    }

    .notification-center {
        max-width: 560px;
    }
}


/* ==========================================================================
   34. FOOTER
   ========================================================================== */

@media (min-width: 1440px) {

    .site-footer {
        padding-top: 64px;
        padding-bottom: 32px;
    }

    .footer-grid {
        display: grid;
        grid-template-columns:
            minmax(220px, 1.3fr)
            repeat(4, minmax(160px, 1fr));
        gap: 40px;
    }
}


@media (min-width: 1920px) {

    .footer-grid {
        gap: 56px;
    }
}


/* ==========================================================================
   35. SEO CONTENT WIDTH
   ========================================================================== */

@media (min-width: 1440px) {

    .seo-content {
        max-width: 980px;
    }

    .seo-content-wide {
        max-width: 1200px;
    }

    .seo-content-full {
        max-width: none;
    }
}


@media (min-width: 1920px) {

    .seo-content {
        max-width: 1080px;
    }

    .seo-content-wide {
        max-width: 1360px;
    }
}


/* ==========================================================================
   36. BREADCRUMB
   ========================================================================== */

@media (min-width: 1440px) {

    .breadcrumb {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .breadcrumb-list {
        gap: 10px;
    }
}


/* ==========================================================================
   37. PAGINATION
   ========================================================================== */

@media (min-width: 1440px) {

    .pagination {
        gap: 8px;
    }

    .pagination-item,
    .pagination-button {
        min-width: 42px;
        min-height: 42px;
    }
}


/* ==========================================================================
   38. TABLES
   ========================================================================== */

@media (min-width: 1440px) {

    .responsive-table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .data-table {
        width: 100%;
        min-width: 900px;
    }

    .data-table th,
    .data-table td {
        padding: 14px 16px;
    }
}


/* ==========================================================================
   39. FORM LAYOUT
   ========================================================================== */

@media (min-width: 1440px) {

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .form-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .form-field-full {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   40. BUTTONS
   ========================================================================== */

@media (min-width: 1440px) {

    .btn {
        min-height: 44px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .btn-lg {
        min-height: 52px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .btn-xl {
        min-height: 58px;
        padding-left: 32px;
        padding-right: 32px;
    }
}


/* ==========================================================================
   41. SPACING
   ========================================================================== */

@media (min-width: 1440px) {

    .section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .section-sm {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section-lg {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .section-xl {
        padding-top: 104px;
        padding-bottom: 104px;
    }
}


@media (min-width: 1920px) {

    .section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .section-lg {
        padding-top: 104px;
        padding-bottom: 104px;
    }

    .section-xl {
        padding-top: 128px;
        padding-bottom: 128px;
    }
}


/* ==========================================================================
   42. TYPOGRAPHY
   ========================================================================== */

@media (min-width: 1440px) {

    .display-1 {
        font-size: 4rem;
        line-height: 1.08;
    }

    .display-2 {
        font-size: 3.5rem;
        line-height: 1.1;
    }

    .display-3 {
        font-size: 3rem;
        line-height: 1.12;
    }

    .page-title {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }
}


@media (min-width: 1920px) {

    .display-1 {
        font-size: 4.5rem;
    }

    .display-2 {
        font-size: 4rem;
    }

    .display-3 {
        font-size: 3.5rem;
    }

    .page-title {
        font-size: 2.75rem;
    }

    .section-title {
        font-size: 2.25rem;
    }
}


/* ==========================================================================
   43. HORIZONTAL CONTENT
   ========================================================================== */

@media (min-width: 1440px) {

    .horizontal-scroll {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        scroll-behavior: smooth;
    }

    .horizontal-scroll > * {
        flex: 0 0 auto;
    }
}


/* ==========================================================================
   44. STICKY ELEMENTS
   ========================================================================== */

@media (min-width: 1440px) {

    .sticky-desktop {
        position: sticky;
        top: 24px;
    }

    .sticky-header-offset {
        top: 120px;
    }
}


/* ==========================================================================
   45. FULL WIDTH SECTIONS
   ========================================================================== */

@media (min-width: 1440px) {

    .full-width-section {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .full-bleed {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}


/* ==========================================================================
   46. VISIBILITY HELPERS
   ========================================================================== */

@media (min-width: 1440px) {

    .desktop-large-only {
        display: block;
    }

    .desktop-large-flex {
        display: flex;
    }

    .desktop-large-grid {
        display: grid;
    }

    .desktop-large-hidden {
        display: none;
    }
}


/* ==========================================================================
   47. ACCESSIBILITY
   ========================================================================== */

@media (min-width: 1440px) {

    :focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }

    .keyboard-navigation-target {
        scroll-margin-top: 120px;
    }
}


/* ==========================================================================
   48. REDUCED MOTION
   ========================================================================== */

@media (min-width: 1440px) {

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}


/* ==========================================================================
   49. PRINT SAFETY
   ========================================================================== */

@media print {

    .chat-widget,
    .notification-panel,
    .mobile-navigation,
    .modal,
    .cookie-banner,
    .sticky-desktop {
        display: none !important;
    }

    .container,
    .container-wide,
    .container-xl {
        max-width: none !important;
        width: 100% !important;
    }

    body {
        min-width: 0 !important;
    }
}


/* ==========================================================================
   50. END
   ========================================================================== */