/* =========================================================
PROJECT: Walanda platform
FILE: utilities.css
PATH: /src/styles/utilities.css
MODULE: ui / design system
SCOPE: styling (global / component / page)
PURPOSE: shared utility classes used to remove inline html styling
AUTHOR: Simasiku Nasilele
STANDARD: Walanda pro ui system
VERSION: 1.0.0
LAST UPDATED: 2026
========================================================= */

/* =========================================================
SECTION: variables
DESCRIPTION: root variables and theme tokens
========================================================= */


/* =========================================================
SECTION: reset
DESCRIPTION: base resets and normalization
========================================================= */


/* =========================================================
SECTION: layout
DESCRIPTION: global layout structure
========================================================= */

.u-max-w-700 {
    max-width: 700px;
}

.u-grid-gap-14 {
    display: grid;
    gap: 14px;
}

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

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

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

.u-flex-wrap-12 {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

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

.u-mt-14 {
    margin-top: 14px;
}

.u-mt-26 {
    margin-top: 26px;
}

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

.u-mb-10 {
    margin-bottom: 10px;
}

.u-mb-14 {
    margin-bottom: 14px;
}

.u-mb-22 {
    margin-bottom: 22px;
}


/* =========================================================
SECTION: components
DESCRIPTION: reusable ui components (cards, buttons)
========================================================= */

.u-text-15 {
    font-size: 15px;
}

.u-text-note {
    font-size: 14px;
    color: var(--muted);
}

.u-text-body-relaxed {
    font-size: 15px;
    line-height: 1.8;
}

.u-control-label {
    font-size: 13px;
    font-weight: 700;
    color: #2d3a3a;
}

.u-radius-14 {
    border-radius: 14px;
}

.u-field-area {
    border-radius: 14px;
    padding: 14px;
}

.u-ad-inline-block {
    margin: 0 0 22px;
}

.u-reset-panel {
    padding: 0;
    background: transparent;
}

.u-video-player {
    height: min(68vh, 560px);
}

.u-video-shell {
    padding: 20px;
    background: #0f1720;
}

.u-video-frame {
    position: relative;
    padding-top: 56.25%;
    border-radius: 16px;
    overflow: hidden;
}

.u-video-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =========================================================
SECTION: pages
DESCRIPTION: page-specific styles
========================================================= */


/* =========================================================
SECTION: responsive
DESCRIPTION: media queries and breakpoints
========================================================= */

@media (max-width: 768px) {
    .u-grid-3-cols,
    .u-grid-4-cols {
        grid-template-columns: 1fr;
    }

    .u-grid-2-cols {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
END OF FILE
FILE: utilities.css
PATH: /src/styles/utilities.css
MODULE: ui / design system
STATUS: stable
MAINTAINED BY: Walanda core system
COPYRIGHT: © 2026 Walanda Inc. Ltd. All rights reserved.
========================================================= */