@import "./breakpoints.css";

/* ============================================================
   LAYOUT — Container & Grid Utilities
   Honda Ô Tô Sài Gòn Q2

   All breakpoints via @custom-media (defined in breakpoints.css,
   injected globally by PostCSS).
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */

/**
 * .hn-container — responsive max-width container với auto padding.
 * Tương đương Bootstrap .container-xxl nhưng dùng design tokens.
 */
.hn-container {
    width: 100%;
    max-width: var(--container-max);   /* 1280px */
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
}

/* Fluid — no max-width, chỉ padding */
.hn-container-fluid {
    width: 100%;
    padding-inline: var(--container-padding-x);
}

/* Narrow variant — cho prose/article content */
.hn-container-prose {
    width: 100%;
    max-width: var(--container-prose);  /* 720px */
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
}

/* ── Section wrapper ──────────────────────────────────────── */

.hn-section {
    padding-block: var(--section-padding-y);
}

.hn-section-sm {
    padding-block: clamp(var(--space-8), 4vw, var(--space-16));
}

/* ── Grid system ──────────────────────────────────────────── */

/**
 * .hn-grid — 12-column CSS Grid với auto-fill responsive.
 * Dùng kết hợp với .hn-col-{n} utility.
 */
.hn-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
}

/* Auto-fill grid — tự responsive, không cần col class */
.hn-grid-auto-sm  { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.hn-grid-auto-md  { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.hn-grid-auto-lg  { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-6); }

/* Fixed column counts */
.hn-cols-1  { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
.hn-cols-2  { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
.hn-cols-3  { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
.hn-cols-4  { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
.hn-cols-5  { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
.hn-cols-6  { grid-template-columns: repeat(6,  minmax(0, 1fr)); }

/* Column spans cho hn-grid */
.hn-col-1   { grid-column: span 1; }
.hn-col-2   { grid-column: span 2; }
.hn-col-3   { grid-column: span 3; }
.hn-col-4   { grid-column: span 4; }
.hn-col-5   { grid-column: span 5; }
.hn-col-6   { grid-column: span 6; }
.hn-col-7   { grid-column: span 7; }
.hn-col-8   { grid-column: span 8; }
.hn-col-9   { grid-column: span 9; }
.hn-col-10  { grid-column: span 10; }
.hn-col-11  { grid-column: span 11; }
.hn-col-12  { grid-column: span 12; }

/* ── Sidebar layout ──────────────────────────────────────── */

/**
 * .hn-layout — sidebar (fixed) + main (fluid) layout.
 * Dùng cho trang danh mục có filter panel bên trái.
 */
.hn-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (--bp-lt-lg) {
    .hn-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Responsive overrides ─────────────────────────────────── */

/* < xl: tighten grid gap */
@media (--bp-lt-xl) {
    .hn-grid { gap: var(--space-4); }
}

/* < lg: collapse multi-col grids to 2 */
@media (--bp-lt-lg) {
    .hn-cols-3,
    .hn-cols-4,
    .hn-cols-5,
    .hn-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hn-col-3,
    .hn-col-4,
    .hn-col-5,
    .hn-col-6,
    .hn-col-7,
    .hn-col-8,
    .hn-col-9 {
        grid-column: span 6;
    }
}

/* < md: single column everything */
@media (--bp-lt-md) {
    .hn-cols-2,
    .hn-cols-3,
    .hn-cols-4,
    .hn-cols-5,
    .hn-cols-6 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .hn-col-2,
    .hn-col-3,
    .hn-col-4,
    .hn-col-5,
    .hn-col-6,
    .hn-col-7,
    .hn-col-8,
    .hn-col-9,
    .hn-col-10,
    .hn-col-11 {
        grid-column: span 12;
    }
    .hn-grid { gap: var(--space-4); }
}

/* < sm: min padding cho container */
@media (--bp-lt-sm) {
    .hn-container,
    .hn-container-fluid,
    .hn-container-prose {
        padding-inline: var(--space-4);
    }
}

/* ── Utility: hide/show at breakpoints ───────────────────── */

.hn-hide-sm   { display: none !important; }
.hn-hide-md   { display: none !important; }

@media (--bp-sm) {
    .hn-hide-sm   { display: revert !important; }
    .hn-show-lt-sm { display: none !important; }
}
@media (--bp-md) {
    .hn-hide-md   { display: revert !important; }
    .hn-show-lt-md { display: none !important; }
}
@media (--bp-lt-lg) {
    .hn-hide-lt-lg { display: none !important; }
}
@media (--bp-lg) {
    .hn-show-lt-lg { display: none !important; }
}