/**
 * ECOIA — سیستم Layout
 * Container + Grid + Section + Responsive
 * وابسته به: variables.css
 */

/* ─── Container ──────────────────────────────────────────────────────────── */
.container {
    width:   100%;
    max-width: var(--container-max);
    margin:  0 auto;
    padding: 0 var(--container-pad);
}

.container-sm {
    max-width: 860px;
}

.container-lg {
    max-width: 1440px;
}

/* Container تمام‌عرض (برای بنرها) */
.container-full {
    width:   100%;
    padding: 0 var(--container-pad);
}

/* ─── Section ────────────────────────────────────────────────────────────── */
.section {
    padding:          var(--section-pad-y) 0;
    position:         relative;
    overflow:         hidden;
}

/* پس‌زمینه‌های متناوب برای تفکیک بصری بخش‌ها */
.section--primary   { background-color: var(--bg-primary);   }
.section--secondary { background-color: var(--bg-secondary); }
.section--card      { background-color: var(--bg-card);      }

/* Section با overlay طلایی خیلی ظریف */
.section--gold-tint {
    background-color: var(--bg-secondary);
    position: relative;
}

.section--gold-tint::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%,
                rgba(212, 175, 55, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.section--hero {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    overflow:        hidden;
    padding-top:     var(--header-height);
}

/* ─── Inner Page Hero ────────────────────────────────────────────────────── */
.page-hero {
    padding:        calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
    background:     var(--bg-secondary);
    border-bottom:  1px solid var(--border-subtle);
    position:       relative;
    overflow:       hidden;
}

.page-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 60% 100% at 50% 100%,
                rgba(212, 175, 55, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.page-hero__title {
    font-size:      clamp(1.75rem, 4vw, 2.75rem);
    font-weight:    700;
    color:          var(--text-primary);
    margin-bottom:  var(--space-3);
}

.page-hero__title span {
    color: var(--gold-main);
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    list-style:  none;
    padding:     0;
    margin:      0;
    font-size:   var(--text-sm);
    color:       var(--text-muted);
    direction:   rtl;
}

.breadcrumb li::after {
    content: '›';
    margin-right: var(--space-2);
    color:   var(--border-default);
}

.breadcrumb li:last-child::after { display: none; }

.breadcrumb a {
    color: var(--text-muted);
}

.breadcrumb a:hover {
    color: var(--gold-main);
}

.breadcrumb li:last-child {
    color: var(--gold-main);
}

/* ─── Grid سیستم ─────────────────────────────────────────────────────────── */

/* Grid اصلی — شبکه ۱۲ ستونی */
.grid {
    display: grid;
    gap:     var(--space-6);
}

.grid-2  { grid-template-columns: repeat(2,  1fr); }
.grid-3  { grid-template-columns: repeat(3,  1fr); }
.grid-4  { grid-template-columns: repeat(4,  1fr); }
.grid-6  { grid-template-columns: repeat(6,  1fr); }

/* Grid با gap متفاوت */
.grid--gap-sm  { gap: var(--space-4);  }
.grid--gap-lg  { gap: var(--space-8);  }
.grid--gap-xl  { gap: var(--space-12); }

/* ─── Flex کمکی ──────────────────────────────────────────────────────────── */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.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-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.gap-2          { gap: var(--space-2); }
.gap-4          { gap: var(--space-4); }
.gap-6          { gap: var(--space-6); }
.gap-8          { gap: var(--space-8); }

/* ─── Spacing Section ────────────────────────────────────────────────────── */
.section-header {
    text-align:    center;
    margin-bottom: var(--space-12);
}

.section-header .section-title {
    display:       block;
    margin-bottom: var(--space-4);
}

.section-header p {
    max-width: 600px;
    margin:    0 auto;
    color:     var(--text-secondary);
}

/* ─── Responsive — Breakpoints ───────────────────────────────────────────── */
/* Desktop Large:  > 1280px — grid 4 col */
/* Desktop:        > 1024px — grid 3-4 col */
/* Tablet:         768–1024px — grid 2 col */
/* Mobile Large:   480–768px — grid 1-2 col */
/* Mobile:         < 480px  — grid 1 col */

/* Tablet (768px–1024px) */
@media (max-width: 1024px) {
    :root {
        --section-pad-y: clamp(2.5rem, 6vw, 4rem);
    }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet کوچک (768px) */
@media (max-width: 768px) {
    :root {
        --container-pad: 1rem;
        --section-pad-y: clamp(2rem, 6vw, 3.5rem);
    }

    .grid-3  { grid-template-columns: repeat(2, 1fr); }
    .grid-4  { grid-template-columns: repeat(2, 1fr); }
    .grid-6  { grid-template-columns: repeat(2, 1fr); }

    .section-header {
        margin-bottom: var(--space-8);
    }

    /* پنهان کردن روی تبلت */
    .hide-tablet { display: none !important; }
}

/* موبایل (480px) */
@media (max-width: 480px) {
    :root {
        --container-pad: 0.875rem;
        --section-pad-y: 2rem;
    }

    .grid-2, .grid-3, .grid-4, .grid-6 {
        grid-template-columns: 1fr;
    }

    /* پنهان کردن روی موبایل */
    .hide-mobile { display: none !important; }

    /* نمایش فقط روی موبایل */
    .show-mobile { display: block !important; }
}

/* دسکتاپ */
@media (min-width: 1025px) {
    /* نمایش فقط روی دسکتاپ */
    .show-desktop { display: block !important; }
    .hide-desktop { display: none !important; }
}