/* ============================================================
   UTILITIES (u-)
   1rem = 10px (html { font-size: 62.5% })
   Mobile-first, Bootstrap breakpoints
============================================================ */


/* ========================
   ROOT TOKENS
======================== */

:root {
    --space-1: 0.4rem;   /* 4px */
    --space-2: 0.8rem;   /* 8px */
    --space-3: 1.2rem;   /* 12px */
    --space-4: 1.6rem;   /* 16px */
    --space-5: 2.0rem;   /* 20px */
    --space-6: 2.4rem;   /* 24px */
}


/* ========================
   DISPLAY
======================== */

.u-flex { display: flex; }
.u-block { display: block; }
.u-inline-block { display: inline-block; }
.u-hidden { display: none; }


/* ========================
   FLEX
======================== */

.u-flex-row { flex-direction: row; }
.u-flex-col { flex-direction: column; }

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

.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }


/* ========================
   GAP
======================== */

.u-gap-4 { gap: var(--space-1); }
.u-gap-8 { gap: var(--space-2); }
.u-gap-12 { gap: var(--space-3); }
.u-gap-16 { gap: var(--space-4); }
.u-gap-24 { gap: var(--space-6); }


/* ========================
   SPACING
======================== */

.u-p-8 { padding: var(--space-2); }
.u-p-12 { padding: var(--space-3); }
.u-p-16 { padding: var(--space-4); }
.u-p-20 { padding: var(--space-5); }
.u-p-24 { padding: var(--space-6); }

.u-px-12 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

.u-px-16 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.u-px-20 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.u-py-8 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.u-py-12 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.u-py-16 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.u-py-20 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.u-mt-8 { margin-top: var(--space-2); }
.u-mt-16 { margin-top: var(--space-4); }

.u-mb-8 { margin-bottom: var(--space-2); }
.u-mb-16 { margin-bottom: var(--space-4); }


/* ========================
   WIDTH / HEIGHT
======================== */

.u-w-100 { width: 100%; }
.u-h-100 { height: 100%; }
.u-w-100vw { width: 100vw; }
.u-maxw-none { max-width: none; }
.u-minw-280 { min-width: 28rem; }
.u-w-card-peek { width: min(30rem, calc(100% - 6rem)); }

@media (min-width: 1200px) {
    .u-w-card-peek {
        /* Show 5 full cards with a partial 6th card preview. */
        width: calc((100vw - 3.2rem - (var(--space-4) * 5)) / 5.5);
    }
}


/* ========================
   POSITION
======================== */

.u-relative { position: relative; }
.u-absolute { position: absolute; }


/* ========================
   OVERFLOW
======================== */

.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto { overflow: auto; }
.u-overflow-visible { overflow: visible; }


/* ========================
   BORDER / RADIUS
======================== */

.u-radius-6 { border-radius: 0.6rem; }

.u-border { border: 1px solid rgba(255,255,255,0.08); }
.u-border-soft { border: 1px solid rgba(255,255,255,0.05); }


/* ========================
   COLORS
======================== */

.u-bg-gradient {
    background: linear-gradient(180deg, #1e1e1e, rgb(0 0 0 / 0%) 100%), #121212;
}

.u-bg-dark { background: #1c1c1c; }
.u-bg-primary { background: var(--primary); }

.u-text-white { color: #ffffff; }
.u-text-muted { color: #a0a0a0; }
.u-text-primary { color: var(--primary); }


/* ========================
   IMAGE HELPERS
======================== */

.u-objectfit {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================
   TYPOGRAPHY
======================== */

/* Font size */
.u-text-9 { font-size: 0.9rem; }
.u-text-10 { font-size: 1.0rem; }
.u-text-11 { font-size: 1.1rem; }
.u-text-12 { font-size: 1.2rem; }
.u-text-14 { font-size: 1.4rem; }
.u-text-16 { font-size: 1.6rem; }
.u-text-18 { font-size: 1.8rem; }
.u-text-20 { font-size: 2.0rem; }

/* Font weight */
.u-fw-regular { font-weight: 400; }
.u-fw-medium { font-weight: 500; }
.u-fw-semibold { font-weight: 600; }
.u-fw-bold { font-weight: 700; }


/* ========================
   HORIZONTAL SCROLL
======================== */

.u-scroll-x {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-4);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.u-scroll-x::-webkit-scrollbar {
    display: none;
}

.u-scroll-item {
    flex: 0 0 auto;
}

.u-scroll-wrap {
    width: 100%;
    overflow: hidden;
}

.u-scroll-snap-x {
    scroll-snap-type: x mandatory;
}

.u-scroll-snap-start {
    scroll-snap-align: start;
}

.u-scroll-snap-stop {
    scroll-snap-stop: always;
}

.u-scroll-align-container {
    scroll-padding-left: 1.6rem;
    padding-left: 1.6rem;
}

@media (min-width: 768px) {
    .u-scroll-align-container {
        padding-left: calc((100% - 72rem) / 2 + 1.6rem);
        scroll-padding-left: calc((100% - 72rem) / 2 + 1.6rem);
    }
}

@media (min-width: 992px) {
    .u-scroll-align-container {
        padding-left: calc((100% - 96rem) / 2 + 1.6rem);
        scroll-padding-left: calc((100% - 96rem) / 2 + 1.6rem);
    }
}

@media (min-width: 1200px) {
    .u-scroll-align-container {
        padding-left: calc((100% - 114rem) / 2 + 1.6rem);
        scroll-padding-left: calc((100% - 114rem) / 2 + 1.6rem);
    }
}

@media (min-width: 1400px) {
    .u-scroll-align-container {
        padding-left: calc((100% - 132rem) / 2 + 1.6rem);
        scroll-padding-left: calc((100% - 132rem) / 2 + 1.6rem);
    }
}

.u-child-col-reset > [class*="col-"] {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.u-m-0 { margin: 0; }


/* ========================
   CONTAINER
======================== */

.u-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
}


/* ========================
   CONTAINER WIDTHS
======================== */

@media (min-width: 421px) {
    .u-container {
        max-width: 100%;
    }
}

@media (min-width: 480px) {
    .u-container {
        max-width: 44rem;
    }
}

@media (min-width: 575px) {
    .u-container {
        max-width: 54rem;
    }
}

@media (min-width: 768px) {
    .u-container {
        max-width: 72rem;
    }
}

@media (min-width: 992px) {
    .u-container {
        max-width: 96rem;
    }
}

@media (min-width: 1200px) {
    .u-container {
        max-width: 114rem;
    }
}

@media (min-width: 1400px) {
    .u-container {
        max-width: 132rem;
    }
}


/* ========================
   RESPONSIVE TYPOGRAPHY
   (MAX-WIDTH)
======================== */

/* XXXS (<=420px) */
@media (max-width: 420px) {
    .u-xxxs\:text-9 { font-size: 0.9rem; }
    .u-xxxs\:text-10 { font-size: 1.0rem; }
    .u-xxxs\:text-11 { font-size: 1.1rem; }
    .u-xxxs\:text-12 { font-size: 1.2rem; }

    .u-xxxs\:fw-regular { font-weight: 400; }
    .u-xxxs\:fw-medium { font-weight: 500; }
    .u-xxxs\:fw-semibold { font-weight: 600; }
    .u-xxxs\:fw-bold { font-weight: 700; }
}

/* XXS (<=479px) */
@media (max-width: 479px) {
    .u-xxs\:text-9 { font-size: 0.9rem; }
    .u-xxs\:text-10 { font-size: 1.0rem; }
    .u-xxs\:text-11 { font-size: 1.1rem; }
    .u-xxs\:text-12 { font-size: 1.2rem; }
    .u-xxs\:text-14 { font-size: 1.4rem; }

    .u-xxs\:fw-regular { font-weight: 400; }
    .u-xxs\:fw-medium { font-weight: 500; }
    .u-xxs\:fw-semibold { font-weight: 600; }
    .u-xxs\:fw-bold { font-weight: 700; }
}

/* XS (<=574px) */
@media (max-width: 574px) {
    .u-xs\:text-10 { font-size: 1.0rem; }
    .u-xs\:text-11 { font-size: 1.1rem; }
    .u-xs\:text-12 { font-size: 1.2rem; }
    .u-xs\:text-14 { font-size: 1.4rem; }
    .u-xs\:text-16 { font-size: 1.6rem; }

    .u-xs\:fw-regular { font-weight: 400; }
    .u-xs\:fw-medium { font-weight: 500; }
    .u-xs\:fw-semibold { font-weight: 600; }
    .u-xs\:fw-bold { font-weight: 700; }
}

/* SM (<=767px) */
@media (max-width: 767px) {
    .u-sm\:text-11 { font-size: 1.1rem; }
    .u-sm\:text-12 { font-size: 1.2rem; }
    .u-sm\:text-14 { font-size: 1.4rem; }
    .u-sm\:text-16 { font-size: 1.6rem; }

    .u-sm\:fw-regular { font-weight: 400; }
    .u-sm\:fw-medium { font-weight: 500; }
    .u-sm\:fw-semibold { font-weight: 600; }
    .u-sm\:fw-bold { font-weight: 700; }
}


/* ============================================================
   RESPONSIVE (BOOTSTRAP BREAKPOINTS)
============================================================ */


/* ========================
   SM (≥576px)
======================== */

@media (min-width: 576px) {

    .u-sm\:flex { display: flex; }
    .u-sm\:flex-row { flex-direction: row; }

}


/* ========================
   MD (≥768px)
======================== */

@media (min-width: 768px) {

    .u-md\:flex { display: flex; }
    .u-md\:flex-row { flex-direction: row; }
    .u-md\:flex-col { flex-direction: column; }

    .u-md\:w-50 { width: 50%; }
    .u-md\:w-100 { width: 100%; }

    .u-md\:gap-16 { gap: var(--space-4); }
    .u-md\:gap-24 { gap: var(--space-6); }

    .u-md\:block { display: block; }

}


/* ========================
   LG (≥992px)
======================== */

@media (min-width: 992px) {

    .u-lg\:flex-row { flex-direction: row; }
    .u-lg\:w-50 { width: 50%; }

}


/* ========================
   XL (≥1200px)
======================== */

@media (min-width: 1200px) {

    .u-xl\:flex-row { flex-direction: row; }

}