/*
* Description: Utility classes for design system
* Author: C Studio
* Version: 3.2.0
* Update: 2026-07-01
*
* Philosophy: u- is last resort only.
* Everything structural lives in _layout.css (o- objects + .modifiers).
* No more than 2-3 u- classes on one element — else write a c- component.
*
* IMPORTANT: _utility.css must load AFTER _layout.css in main.css
*
* Breakpoints (keep in sync with _layout.css):
*   --to-s    max-width: 699px
*   --from-s  min-width: 700px
*   --from-m  min-width: 1025px
*/


/*–––––––––––––––––––––––––––––––––––––––––*/
/* POSITION */

.u-relative {
    position: relative;
}

.u-abs-full {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.u-abs-center {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* HEADER OFFSET — token.css --header-offset */

.u-scroll-mt-header {
    scroll-margin-top: var(--header-offset);
}

.u-pt-header {
    padding-top: var(--header-offset);
}

.u-mt-header {
    margin-top: var(--header-offset);
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* VISIBILITY */
.u-will-change {
    will-change: transform, opacity;
}

.u-hidden {
    display: none !important;
}

.u-invisible {
    visibility: hidden;
}

.u-sr-only,
.u-labelhidden {
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (max-width: 699px) {
    .u-none--to-s {
        display: none !important;
    }
}

@media (min-width: 700px) {
    .u-none--from-s {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .u-none--from-m {
        display: none !important;
    }
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* TEXT */

.u-content {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-s);

    & ol {
        list-style-type: decimal;
        margin-inline-start: var(--gap-25);
    }
}

.u-label {
    color: var(--mode-headline-color);
    font-size: var(--label);
}

.u-headline {
    color: var(--mode-headline-color);
    font-weight: var(--weight-headline);
    font-family: var(--typeface-primary);
    line-height: var(--line-height-headline);
}

.u-text-center {
    text-align: center;
}

.u-text-end {
    text-align: end;
}

.u-text-right {
    text-align: right;
}

.u-text-left {
    text-align: left;
}

.u-strong {
    font-weight: var(--weight-strong);
}

.u-uppercase {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.u-lowercase {
    text-transform: lowercase;
}

.u-capitalize {
    text-transform: capitalize;
}

.u-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-line-clamp-2 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-clamp: 2;
    overflow: hidden;
}

.u-line-clamp-3 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    line-clamp: 3;
    overflow: hidden;
}

.u-no-wrap {
    white-space: nowrap;
}

.u-break-word {
    overflow-wrap: break-word;
    word-break: break-word;
}

.u-underline {
    text-decoration: underline;
}

.u-font-secondary {
    font-family: var(--typeface-secondary);
}

.u-font-mono,
.u-mono,
.mono {
    font-family: var(--typeface-secondary);
    text-transform: uppercase;
}

.muted {
    color: var(--mode-muted-color);
}

/*–––––––––––––––––––––––––––––––––––––––––*/
/* FULL BLEED — break out of .o-container to viewport edges */

.u-bleed {
    align-self: center;
    flex-shrink: 0;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    max-inline-size: 100vw;
    max-width: 100vw;
    width: 100vw;
}

/*–––––––––––––––––––––––––––––––––––––––––*/
/* WIDTH FRACTIONS */
/* Same tokens as o-flex__item col-* (token.css --flex-col-* → --col-N). Prefer col-* inside o-flex rows on o-track. */

.u-w-1-2 {
    width: var(--flex-col-1-2);
}

.u-w-1-3 {
    width: var(--flex-col-1-3);
}

.u-w-2-3 {
    width: var(--flex-col-2-3);
}

.u-w-1-4 {
    width: var(--flex-col-1-4);
}

.u-w-3-4 {
    width: var(--flex-col-3-4);
}

.u-w-full {
    width: 100%;
}

.u-w-max {
    width: max-content;
}

@media (max-width: 699px) {
    .u-w-1-2--to-s {
        width: var(--flex-col-1-2);
    }

    .u-w-1-3--to-s {
        width: var(--flex-col-1-3);
    }

    .u-w-2-3--to-s {
        width: var(--flex-col-2-3);
    }

    .u-w-1-4--to-s {
        width: var(--flex-col-1-4);
    }

    .u-w-3-4--to-s {
        width: var(--flex-col-3-4);
    }

    .u-w-full--to-s {
        width: 100%;
    }
}

@media (min-width: 700px) {
    .u-w-1-2--from-s {
        width: var(--flex-col-1-2);
    }

    .u-w-1-3--from-s {
        width: var(--flex-col-1-3);
    }

    .u-w-2-3--from-s {
        width: var(--flex-col-2-3);
    }

    .u-w-1-4--from-s {
        width: var(--flex-col-1-4);
    }

    .u-w-3-4--from-s {
        width: var(--flex-col-3-4);
    }

    .u-w-full--from-s {
        width: 100%;
    }
}

@media (min-width: 1025px) {
    .u-w-1-2--from-m {
        width: var(--flex-col-1-2);
    }

    .u-w-1-3--from-m {
        width: var(--flex-col-1-3);
    }

    .u-w-2-3--from-m {
        width: var(--flex-col-2-3);
    }

    .u-w-1-4--from-m {
        width: var(--flex-col-1-4);
    }

    .u-w-3-4--from-m {
        width: var(--flex-col-3-4);
    }

    .u-w-full--from-m {
        width: 100%;
    }
}

/*–––––––––––––––––––––––––––––––––––––––––*/
/* WIDTH COLUMN — 12-col grid spans (token.css --col-*) */
.u-col-1 {
    width: var(--col-1);
}

.u-col-2 {
    width: var(--col-2);
}

.u-col-3 {
    width: var(--col-3);
}

.u-col-4 {
    width: var(--col-4);
}

.u-col-5 {
    width: var(--col-5);
}

.u-col-6 {
    width: var(--col-6);
}

.u-col-7 {
    width: var(--col-7);
}

.u-col-8 {
    width: var(--col-8);
}

.u-col-9 {
    width: var(--col-9);
}

.u-col-10 {
    width: var(--col-10);
}

.u-col-11 {
    width: var(--col-11);
}

.u-col-12 {
    width: var(--col-12);
}

/* responsive — stack e.g. .u-col-10--to-s.u-col-6--from-s.u-col-4--from-m */
@media (max-width: 699px) {
    .u-col-1--to-s {
        width: var(--col-1);
        max-width: 100%;
    }

    .u-col-2--to-s {
        width: var(--col-2);
        max-width: 100%;
    }

    .u-col-3--to-s {
        width: var(--col-3);
        max-width: 100%;
    }

    .u-col-4--to-s {
        width: var(--col-4);
        max-width: 100%;
    }

    .u-col-5--to-s {
        width: var(--col-5);
        max-width: 100%;
    }

    .u-col-6--to-s {
        width: var(--col-6);
        max-width: 100%;
    }

    .u-col-7--to-s {
        width: var(--col-7);
        max-width: 100%;
    }

    .u-col-8--to-s {
        width: var(--col-8);
        max-width: 100%;
    }

    .u-col-9--to-s {
        width: var(--col-9);
        max-width: 100%;
    }

    .u-col-10--to-s {
        width: var(--col-10);
        max-width: 100%;
    }

    .u-col-12--to-s {
        width: var(--col-12);
        max-width: 100%;
    }
}

@media (min-width: 700px) {
    .u-col-1--from-s {
        width: var(--col-1);
        max-width: 100%;
    }

    .u-col-2--from-s {
        width: var(--col-2);
        max-width: 100%;
    }

    .u-col-3--from-s {
        width: var(--col-3);
        max-width: 100%;
    }

    .u-col-4--from-s {
        width: var(--col-4);
        max-width: 100%;
    }

    .u-col-5--from-s {
        width: var(--col-5);
        max-width: 100%;
    }

    .u-col-6--from-s {
        width: var(--col-6);
        max-width: 100%;
    }

    .u-col-8--from-s {
        width: var(--col-8);
        max-width: 100%;
    }

    .u-col-9--from-s {
        width: var(--col-9);
        max-width: 100%;
    }

    .u-col-10--from-s {
        width: var(--col-10);
        max-width: 100%;
    }

    .u-col-11--from-s {
        width: var(--col-10);
        max-width: 100%;
    }

    .u-col-12--from-s {
        width: var(--col-12);
        max-width: 100%;
    }
}

@media (min-width: 1025px) {
    .u-col-1--from-m {
        width: var(--col-1);
        max-width: 100%;
    }

    .u-col-2--from-m {
        width: var(--col-2);
        max-width: 100%;
    }

    .u-col-3--from-m {
        width: var(--col-3);
        max-width: 100%;
    }

    .u-col-4--from-m {
        width: var(--col-4);
        max-width: 100%;
    }

    .u-col-5--from-m {
        width: var(--col-5);
        max-width: 100%;
    }

    .u-col-6--from-m {
        width: var(--col-6);
        max-width: 100%;
    }

    .u-col-7--from-m {
        width: var(--col-7);
        max-width: 100%;
    }

    .u-col-8--from-m {
        width: var(--col-8);
        max-width: 100%;
    }

    .u-col-10--from-m {
        width: var(--col-10);
        max-width: 100%;
    }

    .u-col-11--from-m {
        width: var(--col-11);
        max-width: 100%;
    }

    .u-col-12--from-m {
        width: var(--col-12);
        max-width: 100%;
    }
}

.u-mx-auto {
    margin-inline: auto;
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* ZINDEX */
.u-z-widget {
    z-index: var(--z-widget);
}

.u-z-header {
    z-index: var(--z-header);
}

.u-z-overlay {
    z-index: var(--z-overlay);
}

.u-z-loader {
    z-index: var(--z-loader);
}

/*–––––––––––––––––––––––––––––––––––––––––*/
/* OVERFLOW */

.u-no-overflow {
    overflow: hidden;
}

.u-overflow-x {
    overflow-x: auto;
}

.u-overflow-y {
    overflow-y: auto;
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* COVER */

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

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

.u-rounded {
    clip-path: inset(0 round var(--radius-block));
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* INTERACTION */

.u-pointer {
    cursor: pointer;
}

.u-no-pointer {
    pointer-events: none;
}

.u-no-select {
    user-select: none;
}

.u-no-drag {
    -webkit-user-drag: none;
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* MISC */

.u-clearfix::after {
    clear: both;
    content: "";
    display: block;
}

[hidden][aria-hidden="false"] {
    clip: rect(0, 0, 0, 0);
    display: inherit;
    position: absolute;
}

[hidden][aria-hidden="false"]:focus {
    clip: auto;
}