/* Layout primitives: container, section rhythm, grid helpers. */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.container--narrow {
    max-width: 48rem;
}

.section {
    padding-block: var(--space-9);
}

@media (max-width: 768px) {
    .section {
        padding-block: var(--space-7);
    }
}

.section--tight {
    padding-block: var(--space-7);
}

.section--panel {
    background: var(--color-ink-900);
    color: var(--color-text-inverse);
}

.section--sunken {
    background: var(--color-paper-sunken);
}

/* ---------- Section header ---------- */

.section-header {
    max-width: 42rem;
    margin-bottom: var(--space-7);
}

.section-header--left { margin-inline: 0; text-align: left; }
.section-header--center { margin-inline: auto; text-align: center; }

.section-header--dark .section-header__heading {
    color: var(--color-text-inverse);
}

.section-header__heading {
    margin-bottom: var(--space-4);
}

.section-header__lead {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

.section-header--dark .section-header__lead {
    color: var(--color-text-inverse-muted);
}

/* ---------- Grid helpers ---------- */

.grid {
    display: grid;
    gap: var(--space-6);
}

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

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

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

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

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

/* ---------- Media / placeholder box ---------- */

.media {
    width: 100%;
    height: auto;
    object-fit: cover;
    background: var(--color-paper-sunken);
}

.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    background:
        repeating-linear-gradient(45deg, var(--color-line) 0, var(--color-line) 1px, transparent 1px, transparent 12px),
        var(--color-paper-sunken);
    border: 1px dashed var(--color-line-strong);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-5);
}

.media-placeholder__mark {
    width: 3.5rem;
    height: auto;
    color: var(--color-line-strong);
}

.media-placeholder__label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    max-width: 22rem;
}

.media-placeholder__filename {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    opacity: 0.75;
    word-break: break-all;
}

.section--panel .media-placeholder {
    background:
        repeating-linear-gradient(45deg, var(--color-line-on-dark) 0, var(--color-line-on-dark) 1px, transparent 1px, transparent 12px),
        var(--color-ink-800);
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--color-text-inverse-muted);
}

.section--panel .media-placeholder__mark { color: rgba(255, 255, 255, 0.3); }
.section--panel .media-placeholder__label { color: var(--color-text-inverse-muted); }
.section--panel .media-placeholder__filename { color: var(--color-text-inverse-muted); }