/* v2 layout primitives */
.v2-container {
    max-width: var(--v2-max);
    margin: 0 auto;
    padding: 0 var(--v2-pad);
    width: 100%;
}

.v2-section {
    padding: 100px var(--v2-pad);
    border-bottom: 1px solid var(--v2-border);
    background: var(--v2-bg);
}
.v2-section--compact { padding: 70px var(--v2-pad); }
.v2-section--tight   { padding: 50px var(--v2-pad); }

/* "Grid bleed" trick: the grid's own background shows through the 1px gaps between children. */
.v2-grid-bleed {
    display: grid;
    gap: var(--v2-gap);
    background: var(--v2-border);
    border: 1px solid var(--v2-border);
}
.v2-grid-bleed > * { background: var(--v2-bg-card); }

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

.v2-split-12 { display: grid; grid-template-columns: 1fr 2.4fr; gap: 50px; }
.v2-split-21 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; }
.v2-split-11 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.v2-split-15 { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; }

@media (max-width: 900px) {
    .v2-section { padding: 60px 20px; }
    .v2-container { padding: 0 20px; }
    .v2-grid-2, .v2-grid-3, .v2-grid-4 { grid-template-columns: 1fr; }
    .v2-split-12, .v2-split-21, .v2-split-11, .v2-split-15 { grid-template-columns: 1fr; gap: 24px; }
}