/* ==========================================================================
   layout.css — فئات التخطيط الهيكلية (Structural layout classes)
   شركة السرعة المطلقة | Absolute Speed Company
   تخطيط فقط — لا ألوان، لا خطوط، لا فئات مساعدة (utilities).
   كل القيم من tokens.css. التصميم موبايل أولاً 320px → 1440px.
   ملاحظة: قيم نقاط الكسر داخل @media مكتوبة صراحةً لأن المتغيرات
   لا تعمل داخل @media (راجع نقاط الكسر في tokens.css).
   ========================================================================== */

/* الحاوية (Container) — يوسّط المحتوى ويحدّد أقصى عرض */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* القسم (Section) — تباعد عمودي بين أقسام الصفحة */
.section {
  padding-block: var(--section-y);
}

/* شبكة المنتجات (Products grid) — 1 → 2 → 3 → 4 أعمدة */
.grid-products {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .grid-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (min-width: 1280px) {
  .grid-products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* شبكة بعمودين (Two-column grid) — 1 → 2 */
.grid-2 {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: 1fr;
}

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

/* شبكة بثلاثة أعمدة (Three-column grid) — 1 → 2 → 3 */
.grid-3 {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: 1fr;
}

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

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

/* شبكة العروض (Offers bento grid) — 2 → 3 أعمدة
   تستضيف بطاقات عريضة/طويلة عبر span في offer-banner-card.css */
.grid-offers {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: repeat(2, 1fr);
}

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

/* ==========================================================================
   مساعدات الأقسام (Section helpers) — أنماط متكرّرة عبر كل الصفحات.
   الجوال أولًا: حجم أصغر ثم يكبر على سطح المكتب. كل القيم من tokens.css.
   ========================================================================== */
.section-title {
  text-align: center;
  color: var(--color-dark);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-32);

  &.primary {
    color: var(--color-primary);
  }
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--fs-5xl);
    margin-bottom: var(--space-40);
  }
}

.section-label {
  display: block;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-gradient-end);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-8);
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  margin-block: calc(-1 * var(--space-24)) var(--space-40);
  max-width: 600px;
  margin-inline: auto;
}

/* شريط قسم بخلفية بديلة */
.section--alt {
  background-color: var(--color-bg-alt);
}

/* كلمة مميّزة (عنابية) داخل عنوان القسم */
.section-title-accent {
  color: var(--color-primary);
}

/* صف عنوان + رابط "عرض الكل" على الطرفين */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-40);
}

.section-title-row .section-title {
  margin-bottom: 0;
  text-align: start;
}