/**
=================================
======== WDS GRID SYSTEM ========
=================================
*/
:root {
    --gap: 1rem;
    --container-max: 1440px;
}
.container {
    width: min(var(--container-max), 100% - 2rem);
    margin-inline: auto;
}
.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
}
.col { grid-column: span var(--span, 12); }
.col.subgrid { display: grid; }
@supports (grid-template-columns: subgrid) {
    .col.subgrid { grid-template-columns: subgrid; row-gap: var(--gap, 1rem); }
}
/* Fallback: se subgrid non c'è, usa una 12-col locale (non perfettamente allineata, ma ok) */
@supports not (grid-template-columns: subgrid) {
    .col.subgrid{ grid-template-columns: repeat(12, minmax(0,1fr)); }
}
/** 
    ====== BREAKPOINTS ======
    - Small, SM (>=576px)
    - Medium, MD (>=768px)
    - Large, LG (>=992px)
    - Extra Large, XL (>=1200px)
*/
.span-11 { --span: 11; }
.span-10 { --span: 10; }
.span-9 { --span: 9; }
.span-8 { --span: 8; }
.span-7 { --span: 7; }
.span-6 { --span: 6; }
.span-5 { --span: 5; }
.span-4 { --span: 4; }
.span-3 { --span: 3; }
.span-2 { --span: 2; }
.span-1 { --span: 1; }
@media (min-width: 576px) {
    .sm-span-11 { --span: 11; }
    .sm-span-10 { --span: 10; }
    .sm-span-9 { --span: 9; }
    .sm-span-8 { --span: 8; }
    .sm-span-7 { --span: 7; }
    .sm-span-6 { --span: 6; }
    .sm-span-5 { --span: 5; }
    .sm-span-4 { --span: 4; }
    .sm-span-3 { --span: 3; }
    .sm-span-2 { --span: 2; }
    .sm-span-1 { --span: 1; }
}
@media (min-width: 768px) {
    .md-span-11 { --span: 11; }
    .md-span-10 { --span: 10; }
    .md-span-9 { --span: 9; }
    .md-span-8 { --span: 8; }
    .md-span-7 { --span: 7; }
    .md-span-6 { --span: 6; }
    .md-span-5 { --span: 5; }
    .md-span-4 { --span: 4; }
    .md-span-3 { --span: 3; }
    .md-span-2 { --span: 2; }
    .md-span-1 { --span: 1; }
}
@media (min-width: 992px) {
    .lg-span-11 { --span: 11; }
    .lg-span-10 { --span: 10; }
    .lg-span-9 { --span: 9; }
    .lg-span-8 { --span: 8; }
    .lg-span-7 { --span: 7; }
    .lg-span-6 { --span: 6; }
    .lg-span-5 { --span: 5; }
    .lg-span-4 { --span: 4; }
    .lg-span-3 { --span: 3; }
    .lg-span-2 { --span: 2; }
    .lg-span-1 { --span: 1; }
}
@media (min-width: 1200px) {
    .xl-span-11 { --span: 11; }
    .xl-span-10 { --span: 10; }
    .xl-span-9 { --span: 9; }
    .xl-span-8 { --span: 8; }
    .xl-span-7 { --span: 7; }
    .xl-span-6 { --span: 6; }
    .xl-span-5 { --span: 5; }
    .xl-span-4 { --span: 4; }
    .xl-span-3 { --span: 3; }
    .xl-span-2 { --span: 2; }
    .xl-span-1 { --span: 1; }
}
/* Auto grid */
.auto-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Utility */
.hide-sm { display: none; }
@media (min-width: 576px) { .hide-sm { display: initial; } }
.hide-md { display: none; }
@media (min-width: 768px) { .hide-md { display: initial; } }
.hide-lg { display: none; }
@media (min-width: 992px) { .hide-lg { display: initial; } }
.hide-xl { display: none; }
@media (min-width: 1200px) { .hide-xl { display: initial; } }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }