/* ==========================================================================
   calendar_guide.css — «دليل التقاويم»: الصفحة الرئيسية (/calendars) وصفحة كل تقويم.
   مستقلّة بذاتها (عبر {% block extra_css %})، كل الألوان من متغيّرات التصميم العامة
   فتتبع الوضعين الفاتح والداكن، وكل المحدِّدات مُوسَّمة بـ .cg- تحت .cg-wrap.
   ========================================================================== */

.cg-wrap {
    max-width: 1100px;
    margin: 34px auto 40px auto;
    color: var(--text-main);
    line-height: 1.95;
}

/* ===== العنوان والمقدّمة والفهرس ===== */
.cg-hero {
    text-align: center;
    padding: 0.4em 0 1.4em 0;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
    margin-bottom: 1.6em;
}
.cg-hero h1 {
    color: var(--primary);
    font-size: clamp(1.8em, 4vw, 2.5em);
    font-weight: 800;
    margin: 0 0 0.4em 0;
    display: flex; align-items: center; justify-content: center; gap: 0.4em;
}
.cg-lead {
    font-size: clamp(1.02em, 2.2vw, 1.2em);
    max-width: 860px;
    margin: 0 auto;
}
.cg-toc {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin: 1.3em auto 0 auto; max-width: 980px;
}
.cg-toc a {
    padding: 0.35em 0.9em;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    text-decoration: none; font-size: 0.9em; font-weight: 700;
    transition: background var(--transition-main), color var(--transition-main);
}
.cg-toc a:hover { background: var(--primary); color: var(--text-light); }

/* ===== الأقسام ===== */
.cg-section { margin: 2.4em 0; scroll-margin-top: 90px; }
.cg-section > h2 {
    color: var(--primary);
    font-size: 1.45em; font-weight: 800;
    margin: 0 0 0.6em 0; padding-bottom: 0.35em;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    display: flex; align-items: center; gap: 0.5em;
}
.cg-section h3 { color: var(--accent); font-size: 1.12em; font-weight: 700; margin: 1.3em 0 0.4em 0; }
.cg-section p { margin: 0.55em 0; }
.cg-section ul, .cg-section ol { margin: 0.4em 0; padding-inline-start: 1.4em; }
.cg-section li + li { margin-top: 0.3em; }
.cg-zh { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; }

/* ===== بطاقة الحقائق السريعة ===== */
.cg-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px;
}
.cg-fact {
    background: var(--main-bg-glass);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    border-radius: 12px; padding: 10px 14px; line-height: 1.7;
}
.cg-fact b { display: block; color: var(--primary); font-size: 0.85em; }

/* ===== الجداول ===== */
.cg-table-wrap { overflow-x: auto; margin: 0.6em 0 0.4em 0; }
.cg-table { width: 100%; border-collapse: collapse; font-size: 0.93em; line-height: 1.6; }
.cg-table th, .cg-table td {
    padding: 7px 9px; text-align: center;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}
.cg-table thead th { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.cg-table .cg-zq { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 700; }
.cg-table td.cg-start { text-align: start; }

/* ===== الخط الزمني ===== */
.cg-timeline { list-style: none; margin: 0.6em 0; padding: 0; position: relative; }
.cg-timeline::before {
    content: ''; position: absolute; inset-inline-start: 9.2em; top: 0.4em; bottom: 0.4em;
    border-inline-start: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.cg-timeline li { display: grid; grid-template-columns: 8.6em 1fr; gap: 1.4em; margin: 0 0 1em 0; position: relative; }
.cg-timeline li::before {
    content: ''; position: absolute; inset-inline-start: 8.95em; top: 0.75em;
    width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--accent);
}
.cg-when { font-weight: 800; color: var(--primary); text-align: start; white-space: nowrap; }
.cg-what h3 { margin: 0 0 0.2em 0; }
.cg-what p { margin: 0.25em 0; }

/* ===== ملاحظة وتنبيه ===== */
.cg-note {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border-inline-start: 3px solid var(--accent);
    border-radius: 8px; padding: 0.6em 1em; margin: 0.8em 0;
}

/* ===== بطاقات التقاويم في الصفحة الرئيسية ===== */
.cg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cg-card {
    display: block; text-decoration: none; color: var(--text-main);
    background: var(--main-bg-glass);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    border-radius: 14px; padding: 14px 16px;
    transition: border-color var(--transition-main), transform var(--transition-main);
}
.cg-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.cg-card h3 { margin: 0 0 0.3em 0; color: var(--primary); display: flex; gap: 0.4em; align-items: center; }
.cg-card p { margin: 0; font-size: 0.93em; }
.cg-card .cg-tags { margin-top: 0.5em; font-size: 0.82em; opacity: 0.85; }

/* ===== المراجع ===== */
.cg-sources ol { font-size: 0.9em; line-height: 1.8; }
.cg-sources a { color: var(--primary); word-break: break-word; }

@media (max-width: 700px) {
    .cg-wrap { margin-top: 18px; }
    .cg-timeline::before { inset-inline-start: 0.3em; }
    .cg-timeline li { grid-template-columns: 1fr; gap: 0.1em; padding-inline-start: 1.4em; }
    .cg-timeline li::before { inset-inline-start: 0.05em; }
    .cg-when { text-align: start; }
}