/*
 * Layout — containers, grid helpers, section spacing.
 */

/* ── Containers ── */
.container {
    width: 100%;
    max-width: var(--width-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}
.container--narrow  { max-width: var(--width-narrow); }
.container--content { max-width: var(--width-content); }
.container--wide    { max-width: var(--width-wide); }
.container--full    { max-width: var(--width-full); }

/* ── Section spacing ── */
.section        { padding: 80px 0; }
.section--sm    { padding: var(--space-10) 0; }
.section--lg    { padding: var(--space-24) 0; }
.section--alt   { background-color: var(--color-bg-alt); }
.section--dark  { background-color: var(--color-bg-dark); color: var(--color-text-inverse); }

/* ── Grid ── */
.grid     { display: grid; gap: 28px; }
.grid--2  { grid-template-columns: repeat(2, 1fr); }
.grid--3  { grid-template-columns: repeat(3, 1fr); }
.grid--4  { grid-template-columns: repeat(4, 1fr); }

/* ── Split layout ── */
.split            { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.split--reverse   { direction: rtl; }
.split--reverse>* { direction: ltr; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .section    { padding: 56px 0; }
    .section--lg { padding: var(--space-16) 0; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .split      { grid-template-columns: 1fr; }
    .split--reverse { direction: ltr; }
    .container  { padding-left: var(--space-4); padding-right: var(--space-4); }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .section { padding: 44px 0; }
}

/* ── Main layout with sidebar ── */
.layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-12);
    align-items: start;
}
@media (max-width: 1024px) {
    .layout-with-sidebar { grid-template-columns: 1fr; }
}