/* OPYNARI / AEP Design System — Layout primitives */

.opy-page {
    width: 100%;
}

.opy-container {
    width: min(calc(100% - (2 * var(--opy-page-gutter))), var(--opy-content-max));
    margin-inline: auto;
}

.opy-container--reading {
    max-width: var(--opy-reading-max);
}

.opy-section {
    margin-block: var(--opy-section-space);
}

.opy-section--compact {
    margin-block: var(--opy-section-space-compact);
}

.opy-stack {
    display: flex;
    flex-direction: column;
    gap: var(--opy-space-6);
}

.opy-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--opy-space-4);
}

.opy-grid {
    display: grid;
    gap: var(--opy-card-gap);
}

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

@media (max-width: 980px) {
    .opy-grid--4,
    .opy-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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