/* News Magazine Pro — professional Arabic magazine cards */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

.nmp-magazine,
.nmp-archive,
.nmp-single-wrap,
.nmp-archive-page {
    --nmp-text:#17202a;
    --nmp-muted:#6f7884;
    --nmp-line:#e7e9ed;
    --nmp-accent:#b51f31;
    --nmp-accent-dark:#8e1625;
    --nmp-surface:#fff;
    --nmp-soft:#f7f8fa;
    color:var(--nmp-text);
    direction:rtl;
    text-align:right;
    font-family:"Cairo","Noto Sans Arabic",Tahoma,Arial,sans-serif;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.nmp-magazine *,
.nmp-archive *,
.nmp-single-wrap *,
.nmp-archive-page * { box-sizing:border-box; }

.nmp-section,
.nmp-archive,
.nmp-single-wrap,
.nmp-related {
    max-width:1240px;
    margin:0 auto;
    padding:54px 20px;
}

/* Homepage magazine heading */
.nmp-magazine-section { padding-top:38px; padding-bottom:34px; }
.nmp-magazine-section + .nmp-magazine-section { padding-top:54px; }

.nmp-section-head.nmp-magazine-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin:0 0 24px;
    padding:0;
    border:0;
}

.nmp-section-title-wrap {
    display:flex;
    align-items:center;
    gap:13px;
    flex:0 0 auto;
}

.nmp-section-title-wrap h2 {
    margin:0;
    font-size:clamp(30px,3vw,42px);
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.035em;
}

.nmp-section-rule {
    width:5px;
    height:36px;
    border-radius:99px;
    background:linear-gradient(180deg,var(--nmp-accent),#d84a5a);
    box-shadow:0 5px 15px rgba(181,31,49,.2);
}

.nmp-category-nav {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    flex-wrap:wrap;
    min-width:0;
}

.nmp-category-nav a {
    color:#6d747d;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    line-height:1;
    padding:9px 12px;
    border-radius:999px;
    transition:color .2s ease,background .2s ease,transform .2s ease;
}

.nmp-category-nav a:hover { color:var(--nmp-accent); background:#fff2f4; transform:translateY(-1px); }
.nmp-category-nav a.is-active { color:#fff; background:var(--nmp-text); box-shadow:0 7px 18px rgba(23,32,42,.13); }
.nmp-category-nav a.is-active:hover { color:#fff; background:var(--nmp-text); }

/* Exact editorial composition: large story + two stacked stories */
.nmp-magazine-layout {
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
    gap:20px;
    align-items:stretch;
}

.nmp-articles-section .nmp-magazine-layout { grid-template-columns:minmax(280px,1fr) minmax(0,2fr); }

.nmp-side-stack {
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:20px;
    min-width:0;
}

.nmp-mag-card {
    position:relative;
    min-width:0;
    background:#fff;
    border:1px solid rgba(18,27,37,.08);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 7px 25px rgba(22,32,43,.07);
    transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease;
}

.nmp-mag-card:hover {
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(22,32,43,.14);
    border-color:rgba(181,31,49,.14);
}

.nmp-mag-media {
    position:relative;
    display:block;
    overflow:hidden;
    background:linear-gradient(135deg,#eef1f4,#dfe4e8);
    text-decoration:none;
}

.nmp-mag-card-featured { height:100%; min-height:480px; display:flex; flex-direction:column; }
.nmp-mag-card-featured .nmp-mag-media { flex:1 1 auto; min-height:330px; aspect-ratio:auto; }
.nmp-mag-card-featured .nmp-mag-content { flex:0 0 auto; padding:22px 25px 24px; }

.nmp-mag-card-side { height:100%; min-height:0; display:flex; flex-direction:column; }
.nmp-mag-card-side .nmp-mag-media { height:170px; flex:0 0 170px; }
.nmp-mag-card-side .nmp-mag-content { padding:15px 18px 17px; }

.nmp-mag-card-compact { min-height:0; display:flex; flex-direction:column; }
.nmp-mag-card-compact .nmp-mag-media { height:145px; }
.nmp-mag-card-compact .nmp-mag-content { padding:13px 15px 16px; }

.nmp-mag-media img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s ease;
}

.nmp-mag-card:hover .nmp-mag-media img { transform:scale(1.055); }
.nmp-mag-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(5,10,15,.02) 30%,rgba(5,10,15,.68) 100%); opacity:.72; transition:opacity .3s ease; }
.nmp-mag-card:hover .nmp-mag-media::after { opacity:.88; }

.nmp-media-shade { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.32) 100%); }
.nmp-no-image { width:100%; height:100%; min-height:100%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 25% 20%,#fff,#e8ebef 75%); color:#aeb5bd; }
.nmp-no-image span { font-size:44px; opacity:.7; }

.nmp-card-badge {
    position:absolute;
    top:15px;
    right:15px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    min-height:29px;
    padding:6px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    color:var(--nmp-text);
    font-size:11px;
    font-weight:800;
    box-shadow:0 7px 18px rgba(0,0,0,.12);
    backdrop-filter:blur(8px);
}

.nmp-featured-label {
    position:absolute;
    left:16px;
    top:15px;
    z-index:3;
    color:#fff;
    background:var(--nmp-accent);
    border-radius:999px;
    padding:6px 11px;
    font-size:11px;
    font-weight:800;
    box-shadow:0 7px 18px rgba(181,31,49,.3);
}

.nmp-mag-meta {
    display:flex;
    align-items:center;
    gap:8px;
    color:#8a929c;
    font-size:11px;
    font-weight:700;
    margin-bottom:7px;
}
.nmp-mag-meta > span:first-child { color:var(--nmp-accent); }
.nmp-dot { width:3px; height:3px; border-radius:50%; background:#b8bec5; }

.nmp-mag-content h3 {
    margin:0;
    font-size:18px;
    line-height:1.55;
    font-weight:800;
    letter-spacing:-.018em;
}

.nmp-mag-card-featured h3 { font-size:clamp(25px,2.55vw,38px); line-height:1.38; }
.nmp-mag-card-side h3 { font-size:17px; line-height:1.55; }
.nmp-mag-card-compact h3 { font-size:15px; line-height:1.55; }

.nmp-mag-content h3 a { color:inherit; text-decoration:none; transition:color .2s ease; }
.nmp-mag-content h3 a:hover { color:var(--nmp-accent); }

.nmp-mag-content p {
    margin:9px 0 0;
    color:#68727e;
    font-family:"Noto Naskh Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:17px;
    line-height:1.85;
}

.nmp-card-read {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:13px;
    color:var(--nmp-accent);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    transition:gap .2s ease,color .2s ease;
}
.nmp-card-read:hover { color:var(--nmp-accent-dark); gap:11px; }
.nmp-card-read span { font-size:15px; line-height:1; }

.nmp-bottom-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-top:18px;
}

.nmp-section-footer { display:flex; justify-content:flex-start; margin-top:18px; }
.nmp-more,
.nmp-read {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--nmp-accent);
    text-decoration:none;
    font-weight:800;
    font-size:13px;
}
.nmp-more:hover,.nmp-read:hover { text-decoration:none; color:var(--nmp-accent-dark); }

/* Generic archive cards remain supported */
.nmp-kicker { display:inline-block; font-size:12px; font-weight:800; color:var(--nmp-accent); line-height:1.5; }
.nmp-archive-head { margin-bottom:34px; }
.nmp-archive-head h1 { font-size:clamp(28px,4vw,44px); line-height:1.25; margin:6px 0 0; font-weight:800; }
.nmp-filter { display:flex; flex-wrap:wrap; gap:9px; margin-top:25px; }
.nmp-filter a { padding:8px 16px; border:1px solid var(--nmp-line); border-radius:999px; text-decoration:none; color:var(--nmp-text); font-size:13px; font-weight:700; transition:.2s ease; }
.nmp-filter a.is-active,.nmp-filter a:hover { background:var(--nmp-text); color:#fff; border-color:var(--nmp-text); }

.nmp-article-grid,.nmp-archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.nmp-article-card { border:1px solid var(--nmp-line); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 7px 25px rgba(22,32,43,.06); transition:transform .25s ease,box-shadow .25s ease; }
.nmp-article-card:hover { transform:translateY(-4px); box-shadow:0 16px 35px rgba(20,30,40,.11); }
.nmp-card-image { display:block; background:#e9edf1; aspect-ratio:16/9; overflow:hidden; }
.nmp-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.nmp-article-card:hover .nmp-card-image img { transform:scale(1.04); }
.nmp-card-body { padding:18px 20px 21px; }
.nmp-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; color:var(--nmp-muted); font-size:12px; margin-bottom:10px; line-height:1.6; }
.nmp-meta span { color:var(--nmp-accent); font-weight:800; }
.nmp-card h3,.nmp-article-card h2 { font-size:21px; line-height:1.5; margin:0; font-weight:800; }
.nmp-card h3 a,.nmp-article-card h2 a { color:inherit; text-decoration:none; }
.nmp-card p,.nmp-article-card p { color:var(--nmp-muted); line-height:1.9; margin:10px 0 0; font-family:"Noto Naskh Arabic","Cairo",Tahoma,Arial,sans-serif; font-size:17px; }
.nmp-empty { padding:35px; background:var(--nmp-soft); border-radius:16px; color:var(--nmp-muted); text-align:center; font-family:"Noto Naskh Arabic","Cairo",Tahoma,Arial,sans-serif; font-size:18px; }
.nmp-pagination { margin-top:38px; }
.nmp-pagination ul { display:flex; gap:7px; list-style:none; padding:0; justify-content:center; flex-wrap:wrap; }
.nmp-pagination a,.nmp-pagination span { display:block; padding:9px 13px; border:1px solid var(--nmp-line); border-radius:9px; text-decoration:none; color:var(--nmp-text); background:#fff; }
.nmp-pagination .current { background:var(--nmp-text); color:#fff; border-color:var(--nmp-text); }

/* Single article page */
.nmp-single-wrap { max-width:1100px; padding-top:58px; }
.nmp-single-inner { max-width:900px; margin:0 auto; }
.nmp-single-top { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nmp-single-category { font-size:12px; font-weight:700; padding:6px 11px; border-radius:999px; background:var(--nmp-soft); }
.nmp-single h1 { font-family:"Cairo","Noto Sans Arabic",Tahoma,Arial,sans-serif; font-size:clamp(38px,6vw,68px); line-height:1.3; letter-spacing:-.025em; margin:17px 0 20px; font-weight:800; }
.nmp-lead { font-family:"Noto Naskh Arabic","Cairo",Tahoma,Arial,sans-serif; font-size:22px; line-height:1.9; color:var(--nmp-muted); max-width:820px; }
.nmp-single-meta { display:flex; gap:18px; flex-wrap:wrap; color:var(--nmp-muted); font-size:13px; border-top:1px solid var(--nmp-line); border-bottom:1px solid var(--nmp-line); padding:14px 0; margin:25px 0 30px; }
.nmp-featured { margin:0 0 30px; }
.nmp-featured img { width:100%; height:auto; display:block; border-radius:16px; }
.nmp-video { margin:28px 0; background:#000; border-radius:16px; overflow:hidden; }
.nmp-video video { width:100%; height:auto; display:block; max-height:720px; }
.nmp-video-embed { position:relative; aspect-ratio:16/9; }
.nmp-video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.nmp-content { font-family:"Noto Naskh Arabic","Cairo",Tahoma,Arial,sans-serif; font-size:20px; line-height:2.05; color:#202830; overflow-wrap:anywhere; }
.nmp-content p { margin:0 0 1.25em; }
.nmp-content h2,.nmp-content h3,.nmp-content h4 { font-family:"Cairo","Noto Sans Arabic",Tahoma,Arial,sans-serif; color:var(--nmp-text); font-weight:800; }
.nmp-content h2 { font-size:32px; line-height:1.45; margin:45px 0 15px; }
.nmp-content h3 { font-size:25px; line-height:1.5; margin:35px 0 12px; }
.nmp-content ul,.nmp-content ol { padding-right:1.5em; padding-left:0; margin:0 0 1.4em; }
.nmp-content li { margin:.25em 0; }
.nmp-content blockquote { margin:30px 0; padding:18px 22px; border-right:4px solid var(--nmp-accent); border-left:0; background:var(--nmp-soft); font-size:21px; line-height:1.9; }
.nmp-content img { max-width:100%; height:auto; border-radius:12px; }
.nmp-content a { color:var(--nmp-accent); text-decoration:underline; text-underline-offset:3px; }
.nmp-share { margin-top:45px; padding-top:20px; border-top:1px solid var(--nmp-line); display:flex; gap:15px; align-items:center; flex-wrap:wrap; }
.nmp-copy-link { border:1px solid var(--nmp-line); background:#fff; color:var(--nmp-text); padding:9px 15px; border-radius:9px; cursor:pointer; font-family:"Cairo","Noto Sans Arabic",Tahoma,Arial,sans-serif; font-weight:700; }
.nmp-related { padding-top:10px; }

@media (max-width:980px) {
    .nmp-section,.nmp-archive,.nmp-single-wrap,.nmp-related { padding-left:18px; padding-right:18px; }
    .nmp-magazine-layout,.nmp-articles-section .nmp-magazine-layout { grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr); gap:15px; }
    .nmp-side-stack { gap:15px; }
    .nmp-mag-card-featured { min-height:420px; }
    .nmp-mag-card-featured .nmp-mag-media { min-height:285px; }
    .nmp-mag-card-side .nmp-mag-media { height:145px; flex-basis:145px; }
    .nmp-bottom-grid { gap:12px; }
}

@media (max-width:760px) {
    .nmp-section-head.nmp-magazine-head { align-items:flex-start; flex-direction:column; gap:13px; }
    .nmp-category-nav { width:100%; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; padding:2px 1px 7px; scrollbar-width:none; }
    .nmp-category-nav::-webkit-scrollbar { display:none; }
    .nmp-category-nav a { flex:0 0 auto; font-size:13px; padding:9px 11px; }
    .nmp-magazine-layout,.nmp-articles-section .nmp-magazine-layout { grid-template-columns:1fr; }
    .nmp-side-stack { grid-template-columns:1fr 1fr; grid-template-rows:none; gap:12px; }
    .nmp-mag-card-featured { min-height:0; }
    .nmp-mag-card-featured .nmp-mag-media { min-height:0; height:auto; aspect-ratio:16/10; }
    .nmp-mag-card-featured .nmp-mag-content { padding:17px 18px 19px; }
    .nmp-mag-card-featured h3 { font-size:25px; }
    .nmp-mag-card-side .nmp-mag-media { height:auto; aspect-ratio:16/10; flex-basis:auto; }
    .nmp-mag-card-side .nmp-mag-content { padding:12px 13px 14px; }
    .nmp-mag-card-side h3 { font-size:15px; }
    .nmp-bottom-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .nmp-mag-card-compact .nmp-mag-media { height:auto; aspect-ratio:16/10; }
    .nmp-mag-card-compact h3 { font-size:14px; }
    .nmp-mag-card-compact .nmp-mag-content { padding:11px 12px 13px; }
    .nmp-card-badge { top:10px; right:10px; font-size:10px; padding:5px 9px; }
    .nmp-featured-label { top:10px; left:10px; font-size:10px; padding:5px 9px; }
    .nmp-mag-meta { font-size:10px; margin-bottom:5px; gap:6px; }
    .nmp-mag-content p { font-size:15px; }
    .nmp-article-grid,.nmp-archive-grid { grid-template-columns:1fr 1fr; gap:14px; }
}

@media (max-width:520px) {
    .nmp-section,.nmp-archive,.nmp-single-wrap,.nmp-related { padding-left:12px; padding-right:12px; }
    .nmp-magazine-section { padding-top:27px; padding-bottom:25px; }
    .nmp-magazine-section + .nmp-magazine-section { padding-top:38px; }
    .nmp-section-title-wrap h2 { font-size:29px; }
    .nmp-section-rule { height:29px; width:4px; }
    .nmp-side-stack { gap:9px; }
    .nmp-mag-card-side { border-radius:14px; }
    .nmp-mag-card-side .nmp-mag-content { padding:10px 10px 12px; }
    .nmp-mag-card-side h3 { font-size:13px; line-height:1.5; }
    .nmp-mag-card-featured { border-radius:17px; }
    .nmp-mag-card-featured .nmp-mag-content { padding:14px 15px 16px; }
    .nmp-mag-card-featured h3 { font-size:21px; line-height:1.42; }
    .nmp-mag-card-featured .nmp-mag-content p { display:none; }
    .nmp-bottom-grid { gap:9px; }
    .nmp-mag-card-compact { border-radius:13px; }
    .nmp-mag-card-compact .nmp-mag-content { padding:9px 10px 11px; }
    .nmp-mag-card-compact h3 { font-size:12px; line-height:1.5; }
    .nmp-mag-card-compact .nmp-mag-meta time,.nmp-mag-card-compact .nmp-dot { display:none; }
    .nmp-section-footer { margin-top:13px; }
    .nmp-more { font-size:12px; }
    .nmp-article-grid,.nmp-archive-grid { grid-template-columns:1fr; }
    .nmp-single h1 { font-size:35px; line-height:1.4; }
    .nmp-lead { font-size:19px; }
    .nmp-content { font-size:18px; line-height:2; }
    .nmp-content h2 { font-size:27px; }
}
