/*
 * Damian Zaborowski — Layout
 * Kontenery, sekcje, grid utilities.
 * Reużywalne na wszystkich stronach.
 */

/* === Główny wrap === */
.dz-wrap {
    max-width: var(--dz-max);
    margin: 0 auto;
    padding: 0 var(--dz-gutter);
    position: relative;
}

.dz-wrap--narrow {
    max-width: var(--dz-max-narrow);
}

/* === Sekcje — element strukturalny strony === */
.dz-section {
    padding: var(--dz-space-3xl) 0;
    position: relative;
}

.dz-section--no-padding-top { padding-top: 0; }
.dz-section--no-padding-bottom { padding-bottom: 0; }

/* Tła sekcji — warianty kolorystyczne */
.dz-section--cream    { background: var(--dz-cream); }
.dz-section--paper    { background: var(--dz-paper); }
.dz-section--white    { background: var(--dz-white); }
.dz-section--navy     { background: var(--dz-navy); color: var(--dz-ink); }
.dz-section--black    { background: #000; color: var(--dz-ink); }

/* Sekcja z border-top/bottom (rytmiczne separatory) */
.dz-section--bordered {
    border-top: 1px solid var(--dz-rule-soft);
    border-bottom: 1px solid var(--dz-rule-soft);
}

/* === Grid utilities === */
.dz-grid {
    display: grid;
    gap: clamp(var(--dz-space-lg), 6vw, 96px);
    align-items: center;
}

.dz-grid--2col          { grid-template-columns: 1fr 1fr; }
.dz-grid--asym-left     { grid-template-columns: 1fr 1.3fr; }    /* mniej / więcej */
.dz-grid--asym-right    { grid-template-columns: 1.3fr 1fr; }    /* więcej / mniej */
.dz-grid--hero          { grid-template-columns: 6fr 5fr; }
.dz-grid--auto-min-260  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* === Centering helpers === */
.dz-center-text { text-align: center; }
.dz-center-block {
    margin-left: auto;
    margin-right: auto;
}

/* === Flex helpers (oszczędnie, tylko reużywalne) === */
.dz-flex {
    display: flex;
    align-items: center;
    gap: var(--dz-space-md);
}

.dz-flex--wrap { flex-wrap: wrap; }
.dz-flex--center { justify-content: center; }
.dz-flex--between { justify-content: space-between; }
.dz-flex--end { justify-content: flex-end; }

/* === Responsive — mobile breakpoint (960px) === */
@media (max-width: 960px) {
    .dz-grid--2col,
    .dz-grid--asym-left,
    .dz-grid--asym-right,
    .dz-grid--hero {
        grid-template-columns: 1fr;
        gap: var(--dz-space-xl);
    }
}