/* ===== RESPONSIVE UTILITIES ===== */

/* ===== BREAKPOINT MIXINS (for reference) ===== */
/*
xs: 0px and up
sm: 576px and up
md: 768px and up
lg: 1024px and up
xl: 1200px and up
xxl: 1400px and up
*/

/* ===== CONTAINER RESPONSIVE ===== */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
}

@media screen and (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media screen and (min-width: 768px) {
    .container {
        max-width: 720px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    .container {
        max-width: var(--max-width);
    }
}

/* ===== GRID RESPONSIVE ===== */
.grid {
    display: grid;
    gap: 1.5rem;
}

/* Grid Columns */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit grids */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Responsive Grid Columns */
@media screen and (max-width: 767px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .grid-auto-fit,
    .grid-auto-fill {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== DISPLAY UTILITIES ===== */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Responsive Display */
@media screen and (max-width: 575px) {
    .d-xs-none { display: none; }
    .d-xs-block { display: block; }
    .d-xs-flex { display: flex; }
    .d-xs-grid { display: grid; }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .d-sm-none { display: none; }
    .d-sm-block { display: block; }
    .d-sm-flex { display: flex; }
    .d-sm-grid { display: grid; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .d-md-none { display: none; }
    .d-md-block { display: block; }
    .d-md-flex { display: flex; }
    .d-md-grid { display: grid; }
}

@media screen and (min-width: 1024px) {
    .d-lg-none { display: none; }
    .d-lg-block { display: block; }
    .d-lg-flex { display: flex; }
    .d-lg-grid { display: grid; }
}

/* ===== FLEXBOX UTILITIES ===== */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

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

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }
.align-baseline { align-items: baseline; }

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

/* ===== SPACING UTILITIES ===== */
/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: var(--mb-0-25); }
.m-2 { margin: var(--mb-0-5); }
.m-3 { margin: var(--mb-0-75); }
.m-4 { margin: var(--mb-1); }
.m-5 { margin: var(--mb-1-5); }
.m-6 { margin: var(--mb-2); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--mb-0-25); }
.mt-2 { margin-top: var(--mb-0-5); }
.mt-3 { margin-top: var(--mb-0-75); }
.mt-4 { margin-top: var(--mb-1); }
.mt-5 { margin-top: var(--mb-1-5); }
.mt-6 { margin-top: var(--mb-2); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--mb-0-25); }
.mb-2 { margin-bottom: var(--mb-0-5); }
.mb-3 { margin-bottom: var(--mb-0-75); }
.mb-4 { margin-bottom: var(--mb-1); }
.mb-5 { margin-bottom: var(--mb-1-5); }
.mb-6 { margin-bottom: var(--mb-2); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--mb-0-25); }
.ml-2 { margin-left: var(--mb-0-5); }
.ml-3 { margin-left: var(--mb-0-75); }
.ml-4 { margin-left: var(--mb-1); }
.ml-5 { margin-left: var(--mb-1-5); }
.ml-6 { margin-left: var(--mb-2); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--mb-0-25); }
.mr-2 { margin-right: var(--mb-0-5); }
.mr-3 { margin-right: var(--mb-0-75); }
.mr-4 { margin-right: var(--mb-1); }
.mr-5 { margin-right: var(--mb-1-5); }
.mr-6 { margin-right: var(--mb-2); }

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: var(--mb-0-25); }
.p-2 { padding: var(--mb-0-5); }
.p-3 { padding: var(--mb-0-75); }
.p-4 { padding: var(--mb-1); }
.p-5 { padding: var(--mb-1-5); }
.p-6 { padding: var(--mb-2); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--mb-0-25); }
.pt-2 { padding-top: var(--mb-0-5); }
.pt-3 { padding-top: var(--mb-0-75); }
.pt-4 { padding-top: var(--mb-1); }
.pt-5 { padding-top: var(--mb-1-5); }
.pt-6 { padding-top: var(--mb-2); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--mb-0-25); }
.pb-2 { padding-bottom: var(--mb-0-5); }
.pb-3 { padding-bottom: var(--mb-0-75); }
.pb-4 { padding-bottom: var(--mb-1); }
.pb-5 { padding-bottom: var(--mb-1-5); }
.pb-6 { padding-bottom: var(--mb-2); }

/* ===== TEXT UTILITIES ===== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semi-bold); }
.font-bold { font-weight: var(--font-bold); }

.text-xs { font-size: var(--tiny-font-size); }
.text-sm { font-size: var(--smaller-font-size); }
.text-base { font-size: var(--small-font-size); }
.text-lg { font-size: var(--normal-font-size); }
.text-xl { font-size: var(--h3-font-size); }
.text-2xl { font-size: var(--h2-font-size); }
.text-3xl { font-size: var(--h1-font-size); }

/* ===== WIDTH & HEIGHT UTILITIES ===== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }

.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 576px; }
.max-w-md { max-width: 768px; }
.max-w-lg { max-width: 1024px; }
.max-w-xl { max-width: 1200px; }
.max-w-full { max-width: 100%; }

/* ===== POSITION UTILITIES ===== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* ===== OVERFLOW UTILITIES ===== */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-visible { overflow: visible; }

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

/* ===== VISIBILITY UTILITIES ===== */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ===== RESPONSIVE BREAKPOINT SPECIFIC UTILITIES ===== */

/* Extra Small devices (phones, less than 576px) */
@media screen and (max-width: 575px) {
    .xs-text-center { text-align: center; }
    .xs-text-left { text-align: left; }
    .xs-flex-column { flex-direction: column; }
    .xs-justify-center { justify-content: center; }
    .xs-w-full { width: 100%; }
    .xs-p-2 { padding: var(--mb-0-5); }
    .xs-m-2 { margin: var(--mb-0-5); }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .sm-text-center { text-align: center; }
    .sm-text-left { text-align: left; }
    .sm-flex-row { flex-direction: row; }
    .sm-justify-between { justify-content: space-between; }
    .sm-w-auto { width: auto; }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .md-text-left { text-align: left; }
    .md-flex-row { flex-direction: row; }
    .md-justify-start { justify-content: flex-start; }
    .md-w-auto { width: auto; }
    .md-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Large devices (desktops, 1024px and up) */
@media screen and (min-width: 1024px) {
    .lg-text-left { text-align: left; }
    .lg-flex-row { flex-direction: row; }
    .lg-justify-start { justify-content: flex-start; }
    .lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .lg-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .xl-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .xl-grid-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ===== PRINT UTILITIES ===== */
@media print {
    .print-hidden { display: none !important; }
    .print-visible { display: block !important; }
}