/* ==========================================================
   layout.css — কনটেইনার, গ্রিড, সেকশন, ইউটিলিটি
   ========================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- সেকশন ---------- */
.section {
  padding-block: var(--sp-5);
}

.section--soft {
  background: var(--c-bg-soft);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--sp-6);
  }
}

/* ---------- গ্রিড (মোবাইলে ১ কলাম) ---------- */
.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

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

@media (min-width: 768px) {
  .grid--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---------- মূল কনটেন্ট + সাইডবার ---------- */
.layout-with-sidebar {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .layout-with-sidebar {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-6);
  }
}

/* ---------- ইউটিলিটি ---------- */
.stack > * + * {
  margin-top: var(--sp-3);
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
}

.gap-2 {
  gap: var(--sp-2);
}

.gap-4 {
  gap: var(--sp-4);
}

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

.mt-4 {
  margin-top: var(--sp-4);
}

.mb-4 {
  margin-bottom: var(--sp-4);
}

/* মোবাইল/ডেস্কটপ ভিজিবিলিটি */
@media (max-width: 767.98px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* সাইডওয়েজ স্ক্রল (ক্যারোসেল/ওয়েব স্টোরির জন্য) */
.scroll-row {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scroll-row::-webkit-scrollbar {
  display: none;
}

.scroll-row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}