/*
 * Underskin — Utility layer
 * Container, section, spacing utilities. Composable.
 */

/* Client-side filter helper: card/section nascoste dal JS filter. */
.is-hidden {
    display: none !important;
}

.u-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .u-container {
        padding-inline: var(--container-padding-desktop);
    }
}

.u-section {
    padding-block: var(--section-padding-mobile);
}

@media (min-width: 1024px) {
    .u-section {
        padding-block: var(--section-padding-desktop);
    }
}

.u-bleed {
    margin-inline: calc(var(--container-padding-mobile) * -1);
}

@media (min-width: 1024px) {
    .u-bleed {
        margin-inline: calc(var(--container-padding-desktop) * -1);
    }
}

.u-fullbleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.u-grid {
    display: grid;
    gap: var(--grid-gutter-mobile);
}

@media (min-width: 1024px) {
    .u-grid { gap: var(--grid-gutter-desktop); }
}

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

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

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

.u-stack > * + * { margin-top: var(--space-sm); }
.u-stack-md > * + * { margin-top: var(--space-md); }
.u-stack-lg > * + * { margin-top: var(--space-lg); }

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