/* ============================================================
   FILE: 03-layout.css
   ROLE: Layout System — Grid, Flex utilities, Container, Sections
   PROJECT: BarakatHub — پلتفرم رسانه‌ای چندزبانه
   VERSION: 1.0.0
   DEPENDS ON: 01-tokens.css
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. CONTAINER
   ──────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w-content);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--wide {
  max-width: var(--max-w-wide);
}

.container--narrow {
  max-width: var(--max-w-narrow);
}

.container--article {
  max-width: var(--max-w-article);
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }
}

/* ────────────────────────────────────────────────────────────
   2. PAGE SHELL — Navbar + Content + Footer
   ──────────────────────────────────────────────────────────── */
.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-shell__main {
  flex: 1;
  padding-top: var(--navbar-height);  /* فضا برای navbar ثابت */
}

/* ────────────────────────────────────────────────────────────
   3. TWO-COLUMN LAYOUT (Sidebar + Content)
   ──────────────────────────────────────────────────────────── */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-8);
  align-items: start;
}

.layout-with-sidebar--reversed {
  grid-template-columns: 1fr var(--sidebar-width);
}

@media (max-width: 1024px) {
  .layout-with-sidebar,
  .layout-with-sidebar--reversed {
    grid-template-columns: 1fr;
  }
}

/* ────────────────────────────────────────────────────────────
   4. ARTICLE + ASIDE (محتوا + کنار)
   ──────────────────────────────────────────────────────────── */
.layout-article {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1024px) {
  .layout-article {
    grid-template-columns: 1fr;
  }
  .layout-article__aside {
    display: none;   /* در موبایل کنار پنهان می‌شود */
  }
}

/* ────────────────────────────────────────────────────────────
   5. GRID SYSTEM — مقیاس‌پذیر
   ──────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-6);
}

/* auto-fill responsive (cards) */
.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid--cards-sm {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Fixed column counts */
.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; }
}

/* Span helpers */
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-full    { grid-column: 1 / -1; }

/* ────────────────────────────────────────────────────────────
   6. FLEX UTILITIES
   ──────────────────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-start    { display: flex; align-items: flex-start; }
.flex-end      { display: flex; align-items: center; justify-content: flex-end; }

.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

.flex-1  { flex: 1; }
.flex-0  { flex: 0 0 auto; }
.grow    { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }

/* ────────────────────────────────────────────────────────────
   7. SECTION SPACING
   ──────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--space-16);
}

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

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

.section__header {
  margin-bottom: var(--space-10);
  text-align: center;
}

.section__header--start {
  text-align: start;   /* RTL-safe */
}

.section__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.section__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
}

.section__subtitle {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-inline: auto;
}

/* ────────────────────────────────────────────────────────────
   8. STICKY SIDEBAR
   ──────────────────────────────────────────────────────────── */
.sticky-sidebar {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-6));
  max-height: calc(100vh - var(--navbar-height) - var(--space-12));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ────────────────────────────────────────────────────────────
   9. MASONRY-LIKE LAYOUT (CSS columns)
   برای گالری و کارت‌های غیر یکنواخت
   ──────────────────────────────────────────────────────────── */
.masonry {
  columns: 3 300px;
  gap: var(--space-4);
}

.masonry > * {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
  .masonry { columns: 1; }
}

/* ────────────────────────────────────────────────────────────
   10. DISPLAY UTILITIES
   ──────────────────────────────────────────────────────────── */
.hidden          { display: none !important; }
.invisible       { visibility: hidden; }
.block           { display: block; }
.inline-block    { display: inline-block; }
.inline-flex     { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Responsive hide/show */
@media (max-width: 640px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 641px)  { .show-mobile  { display: none !important; } }
@media (max-width: 1024px) { .hide-tablet  { display: none !important; } }
@media (min-width: 1025px) { .show-tablet  { display: none !important; } }

/* ────────────────────────────────────────────────────────────
   11. POSITION UTILITIES
   ──────────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.inset-0  { inset: 0; }
.z-dropdown { z-index: var(--z-dropdown); }
.z-modal    { z-index: var(--z-modal); }
.z-toast    { z-index: var(--z-toast); }

/* ────────────────────────────────────────────────────────────
   12. OVERFLOW
   ──────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ────────────────────────────────────────────────────────────
   13. WIDTH & HEIGHT UTILITIES
   ──────────────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.min-w-0 { min-width: 0; }

/* ────────────────────────────────────────────────────────────
   14. ASPECT RATIO (برای تصاویر مقاله)
   ──────────────────────────────────────────────────────────── */
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-cover    { aspect-ratio: 4 / 3; }