/* --------------------------------------------------------------------------
   Zagros — shared primitives (page heroes, article body, forms, empty states).
   The landing/catalog identity lives in landing.css and catalog.css. The
   duplicate legacy system (old .zg-header/.zg-hero/.zg-card/.zg-footer) was
   removed in this pass: no current template emitted those class names, while
   landing.css defines the components that are actually used. cascade is now
   one-directional instead of "whichever file loads last wins".
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--zg-font-heading), var(--zg-font-fallback);
    line-height: 1.3;
    text-wrap: balance;
}
p { overflow-wrap: anywhere; }

.zg-kicker {
    margin: 0 0 .5rem;
    /* روی سطح روشن: طلاییِ تیره (۵٫۳:۱). روی هدر تیرهٔ صفحه، همان رنگ فقط
       ۲٫۳–۳٫۴:۱ می‌داد؛ آن‌جا نسخهٔ روشن طلایی (۵٫۶–۸٫۲:۱) استفاده می‌شود. */
    color: var(--zg-accent-dark);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.zg-page-hero .zg-kicker,
.zg-masthead .zg-kicker,
.zg-foot .zg-kicker { color: var(--zg-accent); }
[dir="rtl"] .zg-kicker { letter-spacing: 0; }
.zg-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.75rem; }
.zg-button {
    min-block-size: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .72rem 1.2rem;
    border: 1px solid transparent;
    border-radius: var(--zg-radius-sm);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}
.zg-button--primary { background: var(--zg-accent); color: var(--zg-primary-dark); }
.zg-button--primary:hover { background: #E1B853; }
.zg-button--secondary { border-color: rgba(255,255,255,.72); color: #fff; background: rgba(255,255,255,.04); }
.zg-button--secondary:hover { background: rgba(255,255,255,.12); }
.zg-button--dark { background: var(--zg-primary); color: #fff; }
.zg-button--dark:hover { background: var(--zg-primary-light); }

.zg-section { padding-block: clamp(3.25rem, 7vw, 6.25rem); }
.zg-section--light { background: var(--zg-surface); }
.zg-section-heading { max-inline-size: 700px; margin-block-end: 2rem; }
.zg-section-heading h2 { margin: 0; color: var(--zg-primary); font-size: clamp(1.65rem, 4vw, 2.6rem); }
.zg-section-heading--split { max-inline-size: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.zg-text-link { color: var(--zg-accent-dark); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* تصویر کارت داخل لینک است تا کلیک روی عکس هم کار کند؛ لینک باید کل کادر را پر کند. */
.zg-empty { padding: clamp(2.5rem,7vw,5rem) 1.5rem; text-align: center; border: 1px dashed #BCC5D1; border-radius: var(--zg-radius); background: var(--zg-surface); color: var(--zg-muted); }
.zg-empty h2, .zg-empty h3 { color: var(--zg-primary); }
.zg-empty .zg-button { margin-block-start: 1rem; }

.zg-page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg,var(--zg-primary-dark),var(--zg-primary-light));
}
/* تصویر دسته به‌عنوان لایهٔ پس‌زمینهٔ هدر؛ محتوا همیشه بالای آن می‌ماند. */
.zg-page-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.zg-page-hero > .zg-container { position: relative; z-index: 1; }
.zg-page-hero .zg-container { padding-block: clamp(3.5rem,8vw,6.5rem); }
.zg-page-hero--compact .zg-container { padding-block: 3.5rem; }
.zg-page-hero h1 { margin: .3rem 0 .75rem; font-size: clamp(2rem,6vw,4rem); }
.zg-page-hero p:not(.zg-kicker) { max-inline-size: 65ch; color: #D8E2EE; }
.zg-page-hero__count { font-weight: 700; }
.zg-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-block-end: 1.5rem; color: var(--zg-muted); font-size: .85rem; }
.zg-page-hero .zg-breadcrumb { color: #D8E2EE; }
.zg-breadcrumb a { text-underline-offset: .2em; }
.zg-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-block-start: 2.5rem; }
.zg-pagination a { min-inline-size: 44px; min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .45rem .75rem; border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); background: var(--zg-surface); text-decoration: none; }
.zg-pagination a[aria-current="page"] { color: var(--zg-primary-dark); background: var(--zg-accent); border-color: var(--zg-accent); font-weight: 700; }

.zg-search-form { max-inline-size: 760px; margin-block-end: 2rem; }
.zg-search-form label { display: block; margin-block-end: .5rem; font-weight: 700; color: var(--zg-primary); }
.zg-search-form > div { display: flex; flex-wrap: wrap; gap: .6rem; }
.zg-search-form input { flex: 1 1 240px; min-block-size: 48px; min-inline-size: 0; padding: .75rem 1rem; border: 1px solid #AAB5C3; border-radius: var(--zg-radius-sm); background: var(--zg-surface); color: var(--zg-text); }
.zg-result-count { margin-block-end: 1.5rem; color: var(--zg-muted); }

.zg-article-layout { padding-block: 2rem 4rem; }
.zg-article {
    overflow: hidden;
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-lg);
    background: var(--zg-surface);
    box-shadow: var(--zg-shadow);
}
.zg-article__header { padding: clamp(1.25rem,5vw,3.5rem); padding-block-end: 0; }
.zg-article__header h1 { margin: .3rem 0 1rem; color: var(--zg-primary); font-size: clamp(2rem,6vw,3.65rem); }
.zg-article__lead { color: var(--zg-muted); font-size: 1.1rem; }
.zg-article__meta { display: flex; flex-wrap: wrap; gap: .45rem 1rem; color: var(--zg-muted); font-size: .85rem; }
.zg-article__hero { margin: 2rem 0 0; }
.zg-article__hero img { display: block; inline-size: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--zg-radius); }
.zg-article-body { padding: clamp(1.25rem,5vw,3.5rem); font-size: 1.04rem; line-height: 1.95; overflow-wrap: anywhere; }
.zg-article-body > :first-child { margin-block-start: 0; }
.zg-article-body > :last-child { margin-block-end: 0; }
.zg-article-body img { max-inline-size: 100%; block-size: auto; }
.zg-article-body pre, .zg-article-body code { max-inline-size: 100%; overflow-wrap: normal; }
.zg-article-body pre { overflow-x: auto; padding: 1rem; border-radius: var(--zg-radius-sm); background: #0C192A; color: #F5F7FA; direction: ltr; text-align: left; }
.zg-article-body blockquote { margin-inline: 0; padding: 1rem 1.25rem; border-inline-start: 4px solid var(--zg-accent); background: #FBF7EC; }
.zg-article-body table { inline-size: 100%; border-collapse: collapse; }
.zg-article-body th, .zg-article-body td { padding: .65rem; border: 1px solid var(--zg-border); text-align: start; }
.zg-article-body iframe, .zg-article-body video { max-inline-size: 100%; }
.zg-article__tags { padding: 0 clamp(1.25rem,5vw,3.5rem) 2rem; }
.zg-article__tags > div { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .65rem; }
.zg-article__tags a { padding: .3rem .65rem; border-radius: 999px; background: #EDF1F5; color: var(--zg-primary); text-decoration: none; }
.zg-related { padding-block-end: 0; }
/* Blocks inserted by ArticlePresentation are intentionally scoped. */
.iella-related-block { margin-block: 2rem; padding: 1.25rem; border: 1px solid var(--zg-border); border-radius: var(--zg-radius); background: #F7F9FB; }
.iella-related-block__title { margin-block-start: 0; color: var(--zg-primary); font-size: 1.15rem; }
.iella-related-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.iella-related-card { min-inline-size: 0; padding: 1rem; border-radius: var(--zg-radius-sm); background: var(--zg-surface); box-shadow: var(--zg-shadow-sm); }
.iella-related-card a { color: var(--zg-primary); font-weight: 700; }
.iella-sc, .iella-stakeholder-card { margin-block: 1.5rem; padding: 1.25rem; border-inline-start: 4px solid var(--zg-accent); border-radius: var(--zg-radius-sm); background: #FBF7EC; }
.iella-sc__title, .iella-stakeholder-card__title { color: var(--zg-primary); font-weight: 700; }

.zg-error-page { min-block-size: 65vh; display: grid; place-items: center; padding-block: 4rem; }
.zg-error-page__inner { max-inline-size: 680px; text-align: center; }
.zg-error-page__code { margin: 0; color: #D5DBE3; font-size: clamp(6rem,25vw,12rem); font-weight: 700; line-height: .8; }
.zg-error-page h1 { color: var(--zg-primary); font-size: clamp(2rem,6vw,3rem); }
.zg-error-page .zg-search-form { margin-inline: auto; }

@media print {
    :root { --zg-text:#000; --zg-background:#fff; --zg-surface:#fff; }
    /* چاپ: ناوبری و پوستهٔ تعاملی حذف می‌شود، خودِ مقاله می‌ماند. */
    .zg-topbar, .zg-drawer, .zg-mobilebar, .zg-foot, .zg-form, .zg-pagination,
    .zg-related, .zg-article__tags, .zg-skip-link { display: none !important; }
    body { background:#fff; color:#000; font-size: 11pt; }
    .zg-article-layout { padding: 0; }
    .zg-article { border: 0; box-shadow: none; }
    .zg-article__header, .zg-article-body { padding-inline: 0; }
    a { color:#000; text-decoration: underline; }
    .zg-article-body pre { white-space: pre-wrap; color:#000; background:#f2f2f2; }
}
/* --------------------------------------------------------------------------
   فهرست مقالات (templates/articles.php)
   پیش از این، /articles/ یک صفحهٔ HTML مستقل با <style> درون‌خطی و رنگ آبی
   ۲۵۶۳EB بود — تنها مسیر مقالات، با ظاهر بیگانه از تم. حالا از همان توکن‌ها و
   همان chrome استفاده می‌کند و فقط این چند قاعده مخصوص شبکهٔ کارت‌هاست.
   -------------------------------------------------------------------------- */
.zg-blog__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .zg-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .zg-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zg-blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-lg);
    background: var(--zg-surface);
    box-shadow: var(--zg-shadow);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.zg-blog-card:hover,
.zg-blog-card:focus-within {
    box-shadow: var(--zg-shadow-raised);
    border-color: #C5AA66;
    transform: translateY(-2px);
}
.zg-blog-card__media { display: block; overflow: hidden; background: var(--zg-surface-muted); }
.zg-blog-card__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .4s ease;
}
.zg-blog-card:hover .zg-blog-card__media img { transform: scale(1.04); }
.zg-blog-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: 1.15rem 1.25rem 1.35rem;
}
.zg-blog-card__meta { margin: 0; color: var(--zg-muted); font-size: .78rem; }
.zg-blog-card__title { margin: 0; font-size: 1.08rem; line-height: 1.45; }
.zg-blog-card__title a { color: var(--zg-primary); text-decoration: none; }
.zg-blog-card__title a:hover { color: var(--zg-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.zg-blog-card__excerpt {
    margin: 0;
    color: var(--zg-muted);
    font-size: .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zg-blog-card__body .zg-text-link { margin-block-start: auto; padding-block-start: .35rem; font-size: .88rem; }

/* --------------------------------------------------------------------------
   صفحهٔ تماس (templates/contact.php)
   پیش از این contact.php همیشه نمای pub-* را رندر می‌کرد که landing.css را
   لود نمی‌کرد؛ هدر/فوتر zagros بدون استایل می‌ماند. حالا از chrome مشترک
   استفاده می‌کند و این قواعد فقط فرم و ستون کنارش را می‌چینند.
   -------------------------------------------------------------------------- */
.zg-contact__layout {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 960px) {
    .zg-contact__layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; }
}

.zg-form { display: flex; flex-direction: column; gap: 1.15rem; }
.zg-form__row { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .zg-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.zg-field { display: flex; flex-direction: column; gap: .4rem; min-inline-size: 0; }
.zg-field > label { color: var(--zg-primary); font-weight: 700; font-size: .9rem; }
.zg-field > label span { color: var(--zg-danger); }
.zg-field input,
.zg-field textarea {
    inline-size: 100%;
    min-block-size: 48px;
    padding: .7rem .9rem;
    border: 1px solid #AAB5C3;
    border-radius: var(--zg-radius-sm);
    background: var(--zg-surface);
    color: var(--zg-text);
    font: inherit;
}
.zg-field textarea { min-block-size: 10rem; resize: vertical; line-height: 1.7; }
.zg-field input:focus-visible,
.zg-field textarea:focus-visible { border-color: var(--zg-accent); }
.zg-field.is-invalid input,
.zg-field.is-invalid textarea { border-color: var(--zg-danger); }
.zg-field__error { margin: 0; color: var(--zg-danger); font-size: .82rem; }

.zg-notice {
    margin-block-end: 1.5rem;
    padding: 1rem 1.15rem;
    border-inline-start: 4px solid var(--zg-accent);
    border-radius: var(--zg-radius-sm);
    background: var(--zg-accent-soft);
}
.zg-notice ul { margin: .5rem 0 0; padding-inline-start: 1.2rem; }
.zg-notice--ok { border-inline-start-color: var(--zg-success); background: #F1FAF4; }
.zg-notice--error { border-inline-start-color: var(--zg-danger); background: #FDF3F3; }
.zg-notice a { color: var(--zg-accent-dark); font-weight: 700; }

.zg-contact__side {
    padding: 1.5rem;
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-lg);
    background: var(--zg-surface-subtle);
}
.zg-contact__side-title { margin: 0 0 1rem; color: var(--zg-primary); font-size: 1.1rem; }
.zg-contact__channels { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.zg-contact__channels li { display: flex; flex-direction: column; gap: .15rem; }
.zg-contact__label { color: var(--zg-muted); font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
[dir="rtl"] .zg-contact__label { letter-spacing: 0; }
.zg-contact__channels a { color: var(--zg-primary); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.zg-contact__channels a:hover { color: var(--zg-accent-dark); text-decoration: underline; text-underline-offset: 3px; }