/**
 * چیدمان: container ها و کلاس‌های کمکی grid/flex
 * توجه: همه‌جا از gap و min-width:0 استفاده شده تا هیچ عنصری
 * روی عنصر دیگر نیفتد (رفع باگ‌های روی‌هم‌افتادگی نسخه‌ی قبلی).
 */

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

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

.section {
    position: relative;
    padding-block: clamp(64px, 10vw, 128px);
}

.section-tight { padding-block: clamp(40px, 6vw, 72px); }

/* grid کمکی — با minmax(0,1fr) تا فرزندان هیچ‌وقت سرریز نکنند */
.g {
    display: grid;
    gap: var(--sp-6);
}
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-tight { gap: var(--sp-4); }
.g-loose { gap: var(--sp-10); }

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

.flex { display: flex; min-width: 0; }
.flex-col { display: flex; flex-direction: column; min-width: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); }

.text-center { text-align: center; }

/* عنصر بلوک‌ساز که همیشه هر چیزِ داخلش را می‌شکند (ضدِ سرریز افقی) */
.no-overflow { min-width: 0; overflow-wrap: break-word; }

.relative { position: relative; }
.z-content { position: relative; z-index: var(--z-content); }