/* =========================================================
   علِّمنا R19.6 — مركز الأخبار العام
   شبكة + عرض أفقي، وصور الأخبار 1:1
========================================================= */

.public-news-shell{
    display:grid;
    gap:20px;
    padding-bottom:36px;
}

.public-news-hero{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:24px;
    border:1px solid var(--border);
    border-radius:20px;
    background:
        radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--primary-light) 82%,transparent) 0 92px,transparent 93px),
        var(--surface);
}

.public-news-hero-icon{
    width:52px;
    height:52px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:var(--primary-light);
    color:var(--primary);
}

.public-news-hero-icon svg{
    width:25px;
    height:25px;
}

.public-news-eyebrow{
    display:block;
    margin-bottom:3px;
    color:var(--primary);
    font-size:13px;
    font-weight:700;
}

.public-news-hero h1{
    margin:0;
    color:var(--content-title);
    font-size:27px;
    line-height:1.4;
}

.public-news-hero p{
    max-width:760px;
    margin:7px 0 0;
    color:var(--text-muted);
    font-size:15px;
    line-height:1.8;
}

.public-news-browser{
    padding:20px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
}

.public-news-browser-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.public-news-browser-head h2{
    margin:0;
    color:var(--content-title);
    font-size:20px;
}

.public-news-browser-head p{
    margin:3px 0 0;
    color:var(--text-muted);
    font-size:13px;
}

.public-news-layout-switcher{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:5px;
    padding:4px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-soft);
}

.public-news-layout-switcher button{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 10px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--text-muted);
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

.public-news-layout-switcher button svg{
    width:17px;
    height:17px;
}

.public-news-layout-switcher button.is-active{
    background:var(--surface);
    color:var(--primary);
    box-shadow:0 1px 3px rgba(16,36,28,.08);
}

.public-news-list{
    min-width:0;
}

.public-news-list.is-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.public-news-list.is-list{
    display:grid;
    gap:12px;
}

.public-news-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
}

.public-news-list.is-grid .public-news-card{
    display:flex;
    flex-direction:column;
}

.public-news-list.is-list .public-news-card{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    align-items:stretch;
}

.public-news-card-media{
    display:block;
    overflow:hidden;
    background:var(--surface-soft);
    color:var(--text-muted);
    text-decoration:none;
}

.public-news-list.is-grid .public-news-card-media{
    width:100%;
    aspect-ratio:1 / 1;
}

.public-news-list.is-list .public-news-card-media{
    width:190px;
    height:190px;
    align-self:center;
}

.public-news-card-media img,
.public-news-card-placeholder{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.public-news-card-placeholder{
    display:grid;
    place-items:center;
}

.public-news-card-placeholder svg{
    width:28px;
    height:28px;
}

.public-news-card-copy{
    min-width:0;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    padding:14px;
}

.public-news-card-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
}

.public-news-card-topline > span{
    overflow:hidden;
    color:var(--primary);
    font-size:13px;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.public-news-card-topline small{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--text-muted);
    font-size:13px;
}

.public-news-card-topline small svg{
    width:14px;
    height:14px;
}

.public-news-card h3{
    margin:0;
    font-size:17px;
    line-height:1.6;
}

.public-news-card h3 a{
    color:var(--content-title);
    text-decoration:none;
}

.public-news-card h3 a:hover{
    color:var(--primary);
}

.public-news-card p{
    margin:7px 0 12px;
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.85;
}

.public-news-card-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-top:auto;
    color:var(--text-muted);
    font-size:13px;
}

.public-news-card-meta span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.public-news-card-meta svg{
    width:14px;
    height:14px;
}

/* تفاصيل الخبر */
.public-news-article{
    overflow:hidden;
    padding:24px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
}

.public-news-article-header{
    max-width:820px;
    margin:0 auto 20px;
}

.public-news-article-category{
    display:inline-flex;
    margin-bottom:8px;
    padding:5px 9px;
    border-radius:999px;
    background:var(--primary-light);
    color:var(--primary);
    font-size:13px;
    font-weight:700;
}

.public-news-article h1{
    margin:0;
    color:var(--content-title);
    font-size:30px;
    line-height:1.55;
}

.public-news-article-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-top:12px;
    color:var(--text-muted);
    font-size:13px;
}

.public-news-article-meta span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.public-news-article-meta svg{
    width:15px;
    height:15px;
}

.public-news-article-cover{
    width:min(100%,720px);
    aspect-ratio:1 / 1;
    overflow:hidden;
    margin:0 auto 24px;
    border-radius:18px;
    background:var(--surface-soft);
}

.public-news-article-cover img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.public-news-article-body{
    max-width:820px;
    margin:0 auto;
    color:var(--text-primary);
    font-size:17px;
    line-height:2;
}

.public-news-empty{
    min-height:220px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:10px;
    padding:24px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface);
    color:var(--text-muted);
    text-align:center;
}

.public-news-empty svg{
    width:30px;
    height:30px;
}

.public-news-empty a{
    color:var(--primary);
    font-size:14px;
    font-weight:700;
}

@media(max-width:1050px){
    .public-news-list.is-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .public-news-hero{
        padding:18px;
    }

    .public-news-hero-icon{
        width:46px;
        height:46px;
    }

    .public-news-hero h1{
        font-size:23px;
    }

    .public-news-browser{
        padding:14px;
    }

    .public-news-browser-head{
        align-items:flex-start;
    }

    .public-news-layout-switcher button span{
        display:none;
    }

    .public-news-layout-switcher button{
        width:38px;
        padding:6px;
    }

    .public-news-list.is-grid{
        grid-template-columns:1fr;
    }

    .public-news-list.is-list .public-news-card{
        grid-template-columns:112px minmax(0,1fr);
    }

    .public-news-list.is-list .public-news-card-media{
        width:112px;
        height:112px;
    }

    .public-news-list.is-list .public-news-card-copy{
        padding:10px;
    }

    .public-news-list.is-list .public-news-card p{
        display:none;
    }

    .public-news-list.is-list .public-news-card-meta{
        gap:5px 9px;
    }

    .public-news-list.is-list .public-news-card-meta span:last-child{
        display:none;
    }

    .public-news-article{
        padding:18px;
    }

    .public-news-article h1{
        font-size:24px;
    }

    .public-news-article-body{
        font-size:16px;
        line-height:1.95;
    }
}

/* =========================================================
   علِّمنا R19.7 — تصنيفات الأخبار + التعليقات
========================================================= */
.public-news-categories{
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    padding:2px 0 4px;
    scrollbar-width:none;
}
.public-news-categories::-webkit-scrollbar{
    display:none;
}
.public-news-categories a{
    min-height:38px;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:7px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface);
    color:var(--text-secondary);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}
.public-news-categories a:hover{
    border-color:color-mix(in srgb,var(--primary) 24%,var(--border));
    color:var(--primary);
}
.public-news-categories a.is-active{
    border-color:var(--primary);
    background:var(--primary-light);
    color:var(--primary);
}
.public-news-categories a svg{
    width:15px;
    height:15px;
}
.public-news-categories a b{
    min-width:20px;
    padding:1px 5px;
    border-radius:999px;
    background:var(--surface-soft);
    font-size:13px;
    text-align:center;
}
.public-news-card-topline > a{
    overflow:hidden;
    color:var(--primary);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.public-news-card-topline > a:hover{
    text-decoration:underline;
}
.public-news-card-meta a{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--text-muted);
    font-size:13px;
    text-decoration:none;
}
.public-news-card-meta a:hover{
    color:var(--primary);
}
.public-news-article-category{
    text-decoration:none;
}
.public-news-article-meta a{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--text-muted);
    font-size:13px;
    text-decoration:none;
}
.public-news-article-meta a:hover{
    color:var(--primary);
}
.public-news-comments{
    margin-top:0;
}

/* =========================================================
   علِّمنا R19.8 — تفاصيل الخبر داخل تخطيط الرئيسية + تحفيز النقاط
========================================================= */
.public-news-detail-layout{
    align-items:start;
}
.public-news-detail-column{
    min-width:0;
    display:grid;
    gap:18px;
}
.public-news-detail-column .public-news-article{
    margin:0;
}
.public-news-detail-column .public-news-comments{
    margin:0;
}
.public-news-comment-reward{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:14px;
    margin-bottom:12px;
    padding:12px;
    border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));
    border-radius:14px;
    background:var(--primary-light);
}
.public-news-comment-reward-icon{
    width:36px;
    height:36px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--surface);
    color:var(--primary);
}
.public-news-comment-reward-icon svg{
    width:18px;
    height:18px;
}
.public-news-comment-reward > div{
    min-width:0;
}
.public-news-comment-reward strong{
    display:block;
    color:var(--primary);
    font-size:14px;
    line-height:1.6;
}
.public-news-comment-reward p{
    margin:3px 0 0;
    color:var(--text-secondary);
    font-size:13px;
    line-height:1.75;
}
.public-news-comment-reward.is-limit-reached{
    border-color:var(--border);
    background:var(--surface-soft);
}
.public-news-comment-reward.is-limit-reached .public-news-comment-reward-icon,
.public-news-comment-reward.is-limit-reached strong{
    color:var(--text-secondary);
}
@media(max-width:760px){
    .public-news-detail-column{
        gap:14px;
    }
    .public-news-comment-reward{
        padding:11px;
    }
}


/* =========================================================
   علِّمنا R19.15.27 — مسافات صفحات الأخبار ومحاذاة تفاصيل الخبر
   - فصل مركز الأخبار بصريًا عن الهيدر.
   - محاذاة بداية الخبر مع الـRails الجانبية على الشاشات الواسعة.
========================================================= */
.public-news-hero{
    margin-top:24px;
}

@media (min-width:781px){
    .public-news-detail-layout{
        padding-top:72px;
    }
}

@media (max-width:780px){
    .public-news-hero{
        margin-top:14px;
    }
}


/* R19.17.21 — middle-column news header and two-card desktop grid. */
.public-news-shell .public-shared-content-center > .public-news-hero {
    margin:0;
    width:100%;
    box-sizing:border-box;
}
.public-news-shell .public-shared-content-center > .public-news-categories {
    margin:0;
}
.public-news-shell .public-news-list.is-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Keep the existing horizontal/list layout unchanged. */
.public-news-shell .public-news-detail-layout {
    padding-top:24px;
}
.public-news-shell .public-news-detail-layout > .public-home-right-rail,
.public-news-shell .public-news-detail-layout > .public-home-rail {
    position:static;
    top:auto;
    align-self:start;
    margin-block-start:0;
}
@media (max-width:780px) {
    .public-news-shell .public-news-detail-layout { padding-top:24px; }
}
@media (max-width:760px) {
    .public-news-shell .public-news-list.is-grid { grid-template-columns:minmax(0,1fr); }
}


/* R19.17.22 — the detail view must not override the sticky news rails. */
@media (min-width:781px) {
  .public-news-shell .public-news-detail-layout > .public-home-right-rail,
  .public-news-shell .public-news-detail-layout > .public-home-rail {
    position:sticky;
    top:88px;
    max-height:calc(100vh - 104px);
    max-height:calc(100dvh - 104px);
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
  }
}

/* R19.17.24 — restore regular hero padding after moving home link outside its card. */
.public-news-shell .public-shared-content-center > .public-news-hero {padding-block-start:24px;}