/* ═══════════════════════════════════════════════════════════════════════
   Classic Theme (mood 0) — Traditional Newspaper Layout
   Restrained typography, muted palette, sober journalism feel.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --m0-bg: #fafaf7;
    --m0-surface: #ffffff;
    --m0-paper: #f5f0e1;
    --m0-ink: #1a1a1a;
    --m0-ink-2: #4a4a4a;
    --m0-ink-3: #767676;
    --m0-line: #e5e3d8;
    --m0-rule: #c9c5b6;
    --m0-accent: #8a1818;
    --m0-accent-2: #c0392b;
    --m0-gold: #b8964c;

    --m0-fs-base: clamp(14px, 2.4vw, 16px);
    --m0-fs-h: clamp(22px, 4vw, 32px);
    --m0-max: 1200px;

    --m0-font-serif: 'Amiri', 'Playfair Display', Georgia, serif;
    --m0-font-sans:  'Tajawal', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.m0 {
    font-family: var(--m0-font-sans);
    background: var(--m0-bg);
    color: var(--m0-ink);
    font-size: var(--m0-fs-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--m0-accent); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ═══ UTILITY BAR ═══ */
.m0-util {
    background: var(--m0-ink);
    color: #d1d5db;
    font-size: 12px;
}
.m0-util-inner {
    max-width: var(--m0-max); margin: 0 auto;
    padding: 8px 18px;
    display: flex; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
}
.m0-util-edition { color: #9ca3af; font-style: italic; }

/* ═══ MASTHEAD ═══ */
.m0-mast {
    background: var(--m0-paper);
    border-block-end: 1px solid var(--m0-rule);
}
.m0-mast-inner {
    max-width: var(--m0-max); margin: 0 auto;
    padding: 22px 18px 18px;
    text-align: center;
}
.m0-mast-brand {
    display: inline-flex; align-items: center; gap: 14px;
    color: var(--m0-ink); text-decoration: none;
}
.m0-mast-mark {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--m0-accent), var(--m0-accent-2));
    color: #fff;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--m0-font-serif);
    font-size: 26px; font-weight: 900;
    box-shadow: 0 4px 10px rgba(138,24,24,0.25);
    flex-shrink: 0;
}
.m0-mast-text { text-align: center; }
.m0-mast-title {
    font-family: var(--m0-font-serif);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 900;
    margin: 0;
    color: var(--m0-ink);
    letter-spacing: -0.5px;
}
.m0-mast-tag {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--m0-ink-3);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-style: italic;
}
.m0-mast-rule {
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--m0-rule) 20%, var(--m0-rule) 80%, transparent);
}

/* ═══ TOP NAV (categories) ═══ */
.m0-topnav {
    background: var(--m0-surface);
    border-block-end: 1px solid var(--m0-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.m0-topnav-inner {
    max-width: var(--m0-max); margin: 0 auto;
    padding: 10px 18px;
    display: flex; gap: 4px;
    white-space: nowrap;
}
.m0-topnav-link {
    padding: 8px 14px;
    color: var(--m0-ink-2);
    font-size: 13px;
    font-weight: 700;
    border-radius: 5px;
    transition: all 0.15s;
}
.m0-topnav-link:hover { background: var(--m0-paper); color: var(--m0-accent); }
.m0-tn-home { background: var(--m0-accent); color: #fff; }
.m0-tn-home:hover { background: var(--m0-accent-2); color: #fff; }

/* ═══ MAIN PAGE ═══ */
.m0-page {
    max-width: var(--m0-max); margin: 0 auto;
    padding: 24px 18px 50px;
}

.m0-empty {
    text-align: center;
    padding: 80px 18px;
    color: var(--m0-ink-3);
}
.m0-empty h2 { margin: 0 0 8px; font-family: var(--m0-font-serif); }

/* ═══ HERO + SIDEBAR ROW ═══ */
.m0-hero-row {
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr;
    margin-bottom: 30px;
}
@media (min-width: 900px) {
    .m0-hero-row { grid-template-columns: 2.4fr 1fr; }
}

.m0-hero {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .m0-hero { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
    .m0-hero-main { grid-column: 1 / -1; }
}

.m0-hero-card {
    background: var(--m0-surface);
    border: 1px solid var(--m0-line);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s;
}
.m0-hero-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-2px); }
.m0-hero-link { display: block; color: inherit; }
.m0-hero-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--m0-paper);
}
.m0-hero-main .m0-hero-img { aspect-ratio: 16 / 8; }
.m0-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.m0-hero-body { padding: 14px 16px 16px; }
.m0-hero-cat {
    display: inline-block;
    font-size: 10.5px; font-weight: 800;
    color: var(--m0-accent);
    background: rgba(138, 24, 24, 0.08);
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.m0-hero-title {
    font-family: var(--m0-font-serif);
    margin: 6px 0 8px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--m0-ink);
}
.m0-hero-main .m0-hero-title { font-size: clamp(20px, 3.4vw, 28px); }
.m0-hero-sub  .m0-hero-title { font-size: clamp(16px, 2.4vw, 18px); }
.m0-hero-card:hover .m0-hero-title { color: var(--m0-accent); }
.m0-hero-excerpt {
    margin: 6px 0;
    color: var(--m0-ink-2);
    font-size: 14px;
    line-height: 1.6;
}
.m0-hero-date {
    font-size: 11px; color: var(--m0-ink-3); font-style: italic;
}

/* Sidebar */
.m0-sidebar {
    background: var(--m0-surface);
    border: 1px solid var(--m0-line);
    border-radius: 6px;
    padding: 14px 16px;
}
.m0-sb-head {
    margin: 0 0 12px;
    font-family: var(--m0-font-serif);
    font-size: 18px; font-weight: 900;
    color: var(--m0-ink);
    padding-block-end: 8px;
    border-block-end: 2px solid var(--m0-accent);
    display: inline-block;
}
.m0-sb-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-block-end: 1px dashed var(--m0-line);
    color: inherit;
}
.m0-sb-item:last-child { border-block-end: 0; }
.m0-sb-thumb {
    flex-shrink: 0;
    width: 70px; height: 70px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--m0-paper);
}
.m0-sb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m0-sb-text { flex: 1; min-width: 0; }
.m0-sb-text h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--m0-ink);
}
.m0-sb-item:hover .m0-sb-text h4 { color: var(--m0-accent); }
.m0-sb-text span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--m0-ink-3);
    font-style: italic;
}

/* ═══ MID GRID ═══ */
.m0-mid {
    margin-bottom: 30px;
    background: var(--m0-surface);
    border: 1px solid var(--m0-line);
    border-radius: 6px;
    padding: 22px 18px;
}
.m0-mid-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .m0-mid-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
    .m0-mid-grid { grid-template-columns: 1fr 1fr 1.2fr; }
}
.m0-col-head {
    margin: 0 0 14px;
    font-family: var(--m0-font-serif);
    font-size: 17px; font-weight: 900;
    padding-block-end: 8px;
    border-block-end: 2px solid var(--m0-accent);
    color: var(--m0-ink);
}
.m0-col-head span { display: inline-flex; align-items: center; gap: 6px; }

/* Briefs */
.m0-brief {
    padding: 10px 0;
    border-block-end: 1px dashed var(--m0-line);
}
.m0-brief:last-child { border-block-end: 0; }
.m0-brief a { color: inherit; }
.m0-brief h4 {
    margin: 0;
    font-size: 14.5px; font-weight: 700;
    line-height: 1.4;
    color: var(--m0-ink);
}
.m0-brief:hover h4 { color: var(--m0-accent); }
.m0-brief p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--m0-ink-2);
    line-height: 1.55;
}

/* Opinions */
.m0-opinion {
    padding: 14px 0;
    border-block-end: 1px dashed var(--m0-line);
}
.m0-opinion:last-child { border-block-end: 0; }
.m0-opinion a { color: inherit; }
.m0-opinion h4 {
    margin: 0;
    font-family: var(--m0-font-serif);
    font-size: 16px; font-weight: 700;
    font-style: italic;
    line-height: 1.4;
}
.m0-opinion:hover h4 { color: var(--m0-accent); }
.m0-op-cat {
    display: inline-block;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--m0-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Reports */
.m0-report {
    padding: 12px 0;
    border-block-end: 1px solid var(--m0-line);
}
.m0-report:last-child { border-block-end: 0; }
.m0-report a { color: inherit; display: block; }
.m0-report-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 8px;
    background: var(--m0-paper);
}
.m0-report-img img { width: 100%; height: 100%; object-fit: cover; }
.m0-report h4 {
    margin: 6px 0 4px;
    font-family: var(--m0-font-serif);
    font-size: 16px; font-weight: 800;
    line-height: 1.4;
    color: var(--m0-ink);
}
.m0-report:hover h4 { color: var(--m0-accent); }
.m0-report p {
    margin: 0;
    font-size: 13px;
    color: var(--m0-ink-2);
    line-height: 1.55;
}

/* ═══ TODAY'S NEWS ═══ */
.m0-today {
    background: var(--m0-surface);
    border: 1px solid var(--m0-line);
    border-radius: 6px;
    padding: 22px 18px;
}
.m0-today-head {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 18px;
    font-family: var(--m0-font-serif);
}
.m0-today-head .ttl {
    font-size: 20px; font-weight: 900;
    color: var(--m0-ink);
    background: var(--m0-paper);
    padding: 4px 14px;
    border-radius: 4px;
}
.m0-today-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--m0-accent), transparent);
}
.m0-today-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 540px) { .m0-today-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .m0-today-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.m0-today-card {
    background: var(--m0-bg);
    border: 1px solid var(--m0-line);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.2s;
}
.m0-today-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-2px); }
.m0-today-card a { display: block; color: inherit; }
.m0-today-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--m0-paper);
}
.m0-today-img img { width: 100%; height: 100%; object-fit: cover; }
.m0-today-body { padding: 12px 14px 14px; }
.m0-today-cat {
    display: inline-block;
    font-size: 10px;
    color: var(--m0-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 4px;
}
.m0-today-card h4 {
    margin: 4px 0 6px;
    font-size: 14px; font-weight: 700;
    line-height: 1.4;
    color: var(--m0-ink);
}
.m0-today-card:hover h4 { color: var(--m0-accent); }
.m0-today-date {
    display: block;
    font-size: 11px;
    color: var(--m0-ink-3);
    font-style: italic;
}

/* ═══ FOOTER ═══ */
.m0-foot {
    background: var(--m0-ink);
    color: #d1d5db;
    margin-top: 30px;
}
.m0-foot-inner {
    max-width: var(--m0-max); margin: 0 auto;
    padding: 30px 18px 22px;
    text-align: center;
}
.m0-foot-brand {
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.m0-foot-mark {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--m0-accent), var(--m0-accent-2));
    color: #fff;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--m0-font-serif);
    font-size: 18px; font-weight: 900;
}
.m0-foot-brand h3 {
    margin: 0; font-size: 18px; color: #fff;
    font-family: var(--m0-font-serif);
}
.m0-foot-brand p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #9ca3af;
    max-width: 540px;
    line-height: 1.55;
}
.m0-foot-links {
    display: flex; gap: 20px;
    justify-content: center;
    margin: 14px 0;
    flex-wrap: wrap;
}
.m0-foot-links a {
    color: #d1d5db;
    font-size: 13px;
    font-weight: 600;
}
.m0-foot-links a:hover { color: #fff; }
.m0-foot-bottom {
    border-top: 1px solid #2a2a2a;
    padding-top: 14px;
    color: #6b7280;
    font-size: 11.5px;
}