/* ============================================================
   FLEASTS — LAYOUT SYSTEM
   File: css/core/layout.css

   Mobile-first. All base styles target small screens.
   Media queries layer on larger screens only.
============================================================ */


/* ============================================================
   1. CONTAINER
   Fluid on mobile, max-width capped on large screens.
   Horizontal padding uses safe-area insets for notched devices.
============================================================ */

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    /* Safe-area-aware horizontal padding */
    padding-left:  max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    box-sizing: border-box;
}

/* Wider cap at tablet+ */
@media (min-width: 768px) {
    .container {
        padding-left:  var(--space-6);
        padding-right: var(--space-6);
        max-width: 1400px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1500px;
        padding-left:  var(--space-7);
        padding-right: var(--space-7);
    }
}

/* Narrow container for text-heavy content */
.container-narrow {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left:  max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
}


/* ============================================================
   2. MAIN WRAPPER
============================================================ */

main {
    width: 100%;
    display: block;
    /* Prevent content from hiding under a fixed nav.
       Update this value to match your actual navbar height. */
    /* padding-top: var(--nav-height, 56px); */
}


/* ============================================================
   3. SECTION SPACING
   Mobile-first values; desktop gets more room.
============================================================ */

.section {
    padding-top:    var(--space-6);
    padding-bottom: var(--space-6);
}

.section-tight {
    padding-top:    var(--space-4);
    padding-bottom: var(--space-4);
}

.section-loose {
    padding-top:    var(--space-7);
    padding-bottom: var(--space-7);
}

@media (min-width: 768px) {
    .section       { padding-top: var(--space-7);  padding-bottom: var(--space-7); }
    .section-loose { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
}


/* ============================================================
   4. GRID HELPERS
   Mobile = single column by default.
   Multi-column layouts are opt-in via modifier classes
   or promoted at breakpoints.
============================================================ */

.grid {
    display: grid;
    gap: var(--space-4);
}

/* 2-col: stacks on mobile, 2-wide at 480px+ */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 480px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3-col: stacks ? 2-col at 480 ? 3-col at 768 */
.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 480px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 4-col: stacks ? 2 ? 4 */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Auto-fit: fills row with min 180px columns */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

/* Product grid: 2-col mobile ? 3 desktop */
.grid-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .grid-products {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

@media (min-width: 1024px) {
    .grid-products {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ============================================================
   5. FLEX HELPERS
============================================================ */

.flex          { display: flex; align-items: center; }
.flex-between  { display: flex; justify-content: space-between; align-items: center; }
.flex-center   { display: flex; justify-content: center; align-items: center; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-gap-2    { gap: var(--space-2); }
.flex-gap-4    { gap: var(--space-4); }


/* ============================================================
   6. VISIBILITY HELPERS
   mobile-only and desktop-only.
   Use sparingly — prefer responsive design over hiding.
============================================================ */

.mobile-only  { display: block; }
.desktop-only { display: none; }

@media (min-width: 768px) {
    .mobile-only  { display: none !important; }
    .desktop-only { display: block !important; }
}

/* Inline-level visibility */
.mobile-inline  { display: inline; }
.desktop-inline { display: none; }

@media (min-width: 768px) {
    .mobile-inline  { display: none !important; }
    .desktop-inline { display: inline !important; }
}