/* =========================================================
   AluminiumGlass
   layout.css
   Global Layout System
   ========================================================= */

/* ---------------------------------------------------------
   1. ROOT LAYOUT VARIABLES
   --------------------------------------------------------- */

:root {
    --layout-max-width: 1440px;
    --layout-content-width: 1200px;

    --layout-gutter: 24px;
    --layout-gutter-mobile: 16px;

    --layout-section-padding: 64px;
    --layout-section-padding-mobile: 40px;

    --layout-sidebar-width: 280px;
    --layout-sidebar-gap: 24px;

    --layout-header-height: 72px;
    --layout-footer-padding: 48px;

    --layout-gap-xs: 4px;
    --layout-gap-sm: 8px;
    --layout-gap-md: 16px;
    --layout-gap-lg: 24px;
    --layout-gap-xl: 32px;
    --layout-gap-2xl: 48px;
    --layout-gap-3xl: 64px;
}


/* ---------------------------------------------------------
   2. GLOBAL PAGE WRAPPER
   --------------------------------------------------------- */

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    min-width: 320px;
}

#app,
.app,
.site,
.site-wrapper {
    width: 100%;
    min-height: 100vh;
}


/* ---------------------------------------------------------
   3. MAIN PAGE STRUCTURE
   --------------------------------------------------------- */

.page {
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.page-main {
    flex: 1 1 auto;
    width: 100%;
}

.page-content {
    width: 100%;
    max-width: var(--layout-content-width);
    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}


/* ---------------------------------------------------------
   4. UNIVERSAL CONTAINER
   --------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--layout-content-width);

    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}

.container-fluid {
    width: 100%;
    max-width: none;

    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}

.container-wide {
    width: 100%;
    max-width: var(--layout-max-width);

    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}

.container-narrow {
    width: 100%;
    max-width: 900px;

    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}


/* ---------------------------------------------------------
   5. FULL WIDTH SECTIONS
   --------------------------------------------------------- */

.section {
    width: 100%;
    padding-block: var(--layout-section-padding);
}

.section-sm {
    width: 100%;
    padding-block: 32px;
}

.section-lg {
    width: 100%;
    padding-block: 96px;
}

.section-xl {
    width: 100%;
    padding-block: 120px;
}

.section-compact {
    width: 100%;
    padding-block: 24px;
}


/* ---------------------------------------------------------
   6. SECTION INNER
   --------------------------------------------------------- */

.section-inner {
    width: 100%;
    max-width: var(--layout-content-width);

    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}

.section-inner-wide {
    width: 100%;
    max-width: var(--layout-max-width);

    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}


/* ---------------------------------------------------------
   7. SECTION HEADER
   --------------------------------------------------------- */

.section-header {
    width: 100%;
    margin-bottom: 32px;
}

.section-header-row {
    width: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
}

.section-title {
    margin: 0;
}

.section-description {
    max-width: 760px;
    margin-top: 8px;
}

.section-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 12px;
}


/* ---------------------------------------------------------
   8. FLEX LAYOUT
   --------------------------------------------------------- */

.flex {
    display: flex;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-none {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   9. FLEX GAPS
   --------------------------------------------------------- */

.gap-0 {
    gap: 0;
}

.gap-xs {
    gap: var(--layout-gap-xs);
}

.gap-sm {
    gap: var(--layout-gap-sm);
}

.gap-md {
    gap: var(--layout-gap-md);
}

.gap-lg {
    gap: var(--layout-gap-lg);
}

.gap-xl {
    gap: var(--layout-gap-xl);
}

.gap-2xl {
    gap: var(--layout-gap-2xl);
}

.gap-3xl {
    gap: var(--layout-gap-3xl);
}


/* ---------------------------------------------------------
   10. CSS GRID
   --------------------------------------------------------- */

.grid {
    display: grid;
}

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

.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));
}


/* ---------------------------------------------------------
   11. AUTO RESPONSIVE GRID
   --------------------------------------------------------- */

.auto-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: var(--layout-gap-lg);
}

.auto-grid-sm {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: var(--layout-gap-md);
}

.auto-grid-lg {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));

    gap: var(--layout-gap-xl);
}


/* ---------------------------------------------------------
   12. COMMON COLUMN LAYOUTS
   --------------------------------------------------------- */

.two-column {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: var(--layout-gap-xl);
}

.three-column {
    display: grid;

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

    gap: var(--layout-gap-xl);
}

.four-column {
    display: grid;

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

    gap: var(--layout-gap-lg);
}


/* ---------------------------------------------------------
   13. MAIN + SIDEBAR
   --------------------------------------------------------- */

.content-with-sidebar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        var(--layout-sidebar-width);

    gap: var(--layout-sidebar-gap);

    align-items: start;
}

.sidebar-left {
    display: grid;

    grid-template-columns:
        var(--layout-sidebar-width)
        minmax(0, 1fr);

    gap: var(--layout-sidebar-gap);

    align-items: start;
}

.sidebar {
    min-width: 0;
}

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


/* ---------------------------------------------------------
   14. SEARCH PAGE LAYOUT
   --------------------------------------------------------- */

.search-layout {
    display: grid;

    grid-template-columns:
        280px
        minmax(0, 1fr);

    gap: var(--layout-gap-xl);

    align-items: start;
}

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

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


/* ---------------------------------------------------------
   15. BUSINESS DETAIL LAYOUT
   --------------------------------------------------------- */

.business-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: var(--layout-gap-xl);

    align-items: start;
}

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

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


/* ---------------------------------------------------------
   16. DASHBOARD-LIKE CONTENT
   --------------------------------------------------------- */

.dashboard-layout {
    display: grid;

    grid-template-columns:
        240px
        minmax(0, 1fr);

    min-height: 100vh;
}

.dashboard-main {
    min-width: 0;
    overflow-x: hidden;
}

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


/* ---------------------------------------------------------
   17. HEADER / MAIN / FOOTER PAGE FRAME
   --------------------------------------------------------- */

.site-layout {
    min-height: 100vh;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;
}

.site-header {
    width: 100%;
    z-index: 100;
}

.site-main {
    width: 100%;
    min-width: 0;
}

.site-footer {
    width: 100%;
}


/* ---------------------------------------------------------
   18. HERO LAYOUT
   --------------------------------------------------------- */

.hero {
    width: 100%;
    min-height: 420px;

    display: flex;
    align-items: center;
}

.hero-inner {
    width: 100%;
    max-width: var(--layout-content-width);

    margin-inline: auto;
    padding-inline: var(--layout-gutter);

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.8fr);

    gap: var(--layout-gap-3xl);

    align-items: center;
}

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

.hero-media {
    min-width: 0;
}


/* ---------------------------------------------------------
   19. SEARCH HERO
   --------------------------------------------------------- */

.search-hero {
    width: 100%;
}

.search-hero-inner {
    width: 100%;
    max-width: 1000px;

    margin-inline: auto;
    padding-inline: var(--layout-gutter);

    display: flex;
    flex-direction: column;

    gap: var(--layout-gap-lg);
}


/* ---------------------------------------------------------
   20. CARD GRID
   --------------------------------------------------------- */

.card-grid {
    display: grid;

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

    gap: var(--layout-gap-lg);
}

.card-grid-2 {
    display: grid;

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

    gap: var(--layout-gap-lg);
}

.card-grid-4 {
    display: grid;

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

    gap: var(--layout-gap-lg);
}


/* ---------------------------------------------------------
   21. CATEGORY GRID
   --------------------------------------------------------- */

.category-grid {
    display: grid;

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

    gap: var(--layout-gap-lg);
}


/* ---------------------------------------------------------
   22. LOCATION GRID
   --------------------------------------------------------- */

.location-grid {
    display: grid;

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

    gap: var(--layout-gap-lg);
}


/* ---------------------------------------------------------
   23. FORM LAYOUT
   --------------------------------------------------------- */

.form-layout {
    display: grid;

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

    gap: var(--layout-gap-lg);
}

.form-layout-3 {
    display: grid;

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

    gap: var(--layout-gap-lg);
}

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


/* ---------------------------------------------------------
   24. ENQUIRY LAYOUT
   --------------------------------------------------------- */

.enquiry-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    gap: var(--layout-gap-xl);

    align-items: start;
}

.enquiry-main {
    min-width: 0;
}

.enquiry-summary {
    min-width: 0;
}


/* ---------------------------------------------------------
   25. PRICING LAYOUT
   --------------------------------------------------------- */

.pricing-grid {
    display: grid;

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

    gap: var(--layout-gap-xl);

    align-items: stretch;
}


/* ---------------------------------------------------------
   26. AUTH PAGE LAYOUT
   --------------------------------------------------------- */

.auth-layout {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 520px);
}

.auth-content {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 48px;
}

.auth-panel {
    width: 100%;
    max-width: 440px;
}


/* ---------------------------------------------------------
   27. CENTERED CONTENT
   --------------------------------------------------------- */

.center-content {
    width: 100%;
    max-width: 760px;

    margin-inline: auto;
}

.center-content-sm {
    width: 100%;
    max-width: 520px;

    margin-inline: auto;
}

.center-content-lg {
    width: 100%;
    max-width: 1000px;

    margin-inline: auto;
}


/* ---------------------------------------------------------
   28. STACK LAYOUT
   --------------------------------------------------------- */

.stack {
    display: flex;
    flex-direction: column;
}

.stack-xs {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-xs);
}

.stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-sm);
}

.stack-md {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-md);
}

.stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-lg);
}

.stack-xl {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-xl);
}


/* ---------------------------------------------------------
   29. ROW LAYOUT
   --------------------------------------------------------- */

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.row-between {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--layout-gap-lg);
}

.row-center {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: var(--layout-gap-md);
}


/* ---------------------------------------------------------
   30. PAGE TITLE AREA
   --------------------------------------------------------- */

.page-title-area {
    width: 100%;
    padding-block: 40px;
}

.page-title-inner {
    width: 100%;
    max-width: var(--layout-content-width);

    margin-inline: auto;
    padding-inline: var(--layout-gutter);
}

.page-title-actions {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--layout-gap-lg);
}


/* ---------------------------------------------------------
   31. BREADCRUMB LAYOUT
   --------------------------------------------------------- */

.breadcrumb-wrapper {
    width: 100%;
    margin-bottom: 16px;
}

.breadcrumb {
    width: 100%;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


/* ---------------------------------------------------------
   32. MEDIA / IMAGE CONTAINERS
   --------------------------------------------------------- */

.media {
    width: 100%;
    overflow: hidden;
}

.media-cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.media-contain {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ---------------------------------------------------------
   33. ASPECT RATIO
   --------------------------------------------------------- */

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-wide {
    aspect-ratio: 21 / 9;
}

.aspect-card {
    aspect-ratio: 4 / 3;
}


/* ---------------------------------------------------------
   34. WIDTH UTILITIES
   --------------------------------------------------------- */

.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.max-w-none {
    max-width: none;
}

.max-w-sm {
    max-width: 480px;
}

.max-w-md {
    max-width: 640px;
}

.max-w-lg {
    max-width: 800px;
}

.max-w-xl {
    max-width: 1000px;
}

.max-w-2xl {
    max-width: 1200px;
}


/* ---------------------------------------------------------
   35. MARGIN UTILITIES
   --------------------------------------------------------- */

.mx-auto {
    margin-inline: auto;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.mt-sm {
    margin-top: 8px;
}

.mt-md {
    margin-top: 16px;
}

.mt-lg {
    margin-top: 24px;
}

.mt-xl {
    margin-top: 32px;
}

.mb-sm {
    margin-bottom: 8px;
}

.mb-md {
    margin-bottom: 16px;
}

.mb-lg {
    margin-bottom: 24px;
}

.mb-xl {
    margin-bottom: 32px;
}


/* ---------------------------------------------------------
   36. PADDING UTILITIES
   --------------------------------------------------------- */

.p-0 {
    padding: 0;
}

.p-sm {
    padding: 8px;
}

.p-md {
    padding: 16px;
}

.p-lg {
    padding: 24px;
}

.p-xl {
    padding: 32px;
}

.px-md {
    padding-inline: 16px;
}

.px-lg {
    padding-inline: 24px;
}

.py-md {
    padding-block: 16px;
}

.py-lg {
    padding-block: 24px;
}


/* ---------------------------------------------------------
   37. OVERFLOW
   --------------------------------------------------------- */

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}


/* ---------------------------------------------------------
   38. POSITION HELPERS
   --------------------------------------------------------- */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}

.fixed {
    position: fixed;
}


/* ---------------------------------------------------------
   39. VISIBILITY HELPERS
   --------------------------------------------------------- */

.hidden {
    display: none !important;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}


/* ---------------------------------------------------------
   40. DESKTOP BREAKPOINT
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .container,
    .container-wide,
    .container-narrow,
    .section-inner,
    .section-inner-wide,
    .page-content,
    .page-title-inner {
        padding-inline: 20px;
    }

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

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

    .hero-inner {
        gap: 40px;
    }
}


/* ---------------------------------------------------------
   41. TABLET BREAKPOINT
   --------------------------------------------------------- */

@media (max-width: 992px) {

    :root {
        --layout-gutter: 20px;
        --layout-section-padding: 52px;
    }

    .content-with-sidebar,
    .sidebar-left,
    .search-layout,
    .business-layout,
    .enquiry-layout {
        grid-template-columns: 1fr;
    }

    .search-sidebar,
    .business-aside,
    .enquiry-summary {
        width: 100%;
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
        width: 100%;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        max-width: 760px;
        margin-inline: auto;
    }

    .hero-media {
        max-width: 700px;
        width: 100%;
        margin-inline: auto;
    }

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

    .four-column,
    .category-grid,
    .location-grid,
    .card-grid-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pricing-grid {
        grid-template-columns:
            1fr;
            max-width: 600px;
            margin-inline: auto;
    }

    .auth-layout {
        grid-template-columns: 1fr;
    }

    .auth-content {
        padding: 40px 20px;
    }
}


/* ---------------------------------------------------------
   42. MOBILE BREAKPOINT
   --------------------------------------------------------- */

@media (max-width: 768px) {

    :root {
        --layout-gutter: var(--layout-gutter-mobile);
        --layout-section-padding: var(--layout-section-padding-mobile);
    }

    .container,
    .container-fluid,
    .container-wide,
    .container-narrow,
    .section-inner,
    .section-inner-wide,
    .page-content,
    .page-title-inner {
        padding-inline: var(--layout-gutter-mobile);
    }

    .section-lg {
        padding-block: 64px;
    }

    .section-xl {
        padding-block: 80px;
    }

    .section-header {
        margin-bottom: 24px;
    }

    .section-header-row,
    .page-title-actions,
    .row-between {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-actions {
        width: 100%;
    }

    .two-column,
    .three-column,
    .four-column,
    .card-grid,
    .card-grid-2,
    .card-grid-4,
    .category-grid,
    .location-grid,
    .form-layout,
    .form-layout-3 {
        grid-template-columns: 1fr;
    }

    .auto-grid,
    .auto-grid-lg {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: 360px;
    }

    .hero-inner {
        padding-inline: var(--layout-gutter-mobile);
    }

    .search-hero-inner {
        padding-inline: var(--layout-gutter-mobile);
    }

    .page-title-area {
        padding-block: 28px;
    }

    .auth-content {
        padding: 32px var(--layout-gutter-mobile);
    }
}


/* ---------------------------------------------------------
   43. SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .section {
        padding-block: 32px;
    }

    .section-sm {
        padding-block: 24px;
    }

    .section-lg {
        padding-block: 48px;
    }

    .section-xl {
        padding-block: 60px;
    }

    .hero {
        min-height: 320px;
    }

    .hero-inner {
        gap: 24px;
    }

    .section-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .section-actions > * {
        width: 100%;
    }

    .auth-content {
        padding: 24px 16px;
    }
}


/* ---------------------------------------------------------
   44. REDUCED MOTION
   --------------------------------------------------------- */

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

    .page,
    .section,
    .container,
    .grid,
    .flex {
        scroll-behavior: auto;
    }
}


/* ---------------------------------------------------------
   45. PRINT LAYOUT
   --------------------------------------------------------- */

@media print {

    .container,
    .container-wide,
    .container-narrow,
    .section-inner,
    .section-inner-wide,
    .page-content,
    .page-title-inner {
        max-width: none;
        padding-inline: 0;
    }

    .section,
    .section-lg,
    .section-xl {
        padding-block: 20px;
    }

    .content-with-sidebar,
    .sidebar-left,
    .search-layout,
    .business-layout,
    .enquiry-layout {
        display: block;
    }
}