/* FILE: /v2/include/css/02-layout.css
   COSA FA:
   Layout e strutture comuni /v2.
   Include card generiche, box, titoli, contenitori e griglie comuni.
   Usa variabili template per supportare temi chiari/scuri.
*/

.cm-page{
    padding-left:12px;
    padding-right:12px;
}

.cardx{
    background:var(--cm-card);
    color:var(--cm-text);
    border-radius:var(--cm-card-radius);
    box-shadow:var(--cm-shadow-md);
    border:1px solid var(--cm-border);
}

.cm-box{
    background:var(--cm-card);
    color:var(--cm-text);
    border:1px solid var(--cm-border);
    border-radius:var(--cm-radius-xl);
    box-shadow:var(--cm-shadow-lg);
    overflow:hidden;
}

.cm-box-head{
    padding:14px 14px 8px;
    border-bottom:1px solid var(--cm-line);
    background:linear-gradient(
        135deg,
        color-mix(in srgb, var(--cm-primary) 10%, transparent),
        color-mix(in srgb, var(--cm-secondary) 6%, transparent)
    );
}

.cm-content{
    padding:14px;
}

.title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    letter-spacing:.2px;
    color:var(--cm-text);
}

.title .material-icons{
    font-size:26px;
    color:var(--cm-primary);
}

.cm-title{
    margin:10px 0 4px;
    font-size:1.35rem;
    font-weight:900;
    line-height:1.08;
    letter-spacing:-.02em;
    color:var(--cm-text);
}

.cm-title-sm{
    font-size:1.15rem;
}

.cm-subtitle{
    margin:0;
    color:var(--cm-muted);
    font-size:.92rem;
    line-height:1.4;
}

.cm-kicker{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:color-mix(in srgb, var(--cm-primary) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--cm-primary) 18%, transparent);
    color:var(--cm-primary-dark);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.cm-kicker .material-icons{
    font-size:16px;
}

.cm-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:25px;
    align-items:stretch;
}

.grid-tight{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:10px;
}

.cm-flex-gap{
    gap:10px;
}

.cm-bottom-note,
.cm-foot-note{
    text-align:center;
    margin-top:12px;
    color:var(--cm-muted);
    font-size:.84rem;
    font-weight:600;
}

.cm-bottom-note .material-icons,
.cm-foot-note .material-icons{
    font-size:16px;
    vertical-align:text-bottom;
    margin-right:4px;
    color:var(--cm-primary-dark);
}