/* «مدونة ويانا» — index (image14) and article (image12). Colours sampled from the client's images. */
:root{
  --bl-ink:#0c3820; --bl-orange:#d97706; --bl-green:#005420; --bl-chip:#dce4d8; --bl-chip-line:#d8d8d8;
  --bl-hero:#f8f4f0; --bl-page:#fcfcfc; --bl-active:#104024;
  --ar-h1:#084824; --ar-h2:#042c10; --ar-cta:#0c4828; --ar-cta-bg:#f0f0ec; --ar-side:#f8f8f8; --ar-chip:#e0e8dc;
}

.page-blog{background:var(--bl-page)}
.blog{padding:1.6rem 0 3.5rem}

/* ---------- banner ---------- */
.bl-hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:1.5rem;background:var(--bl-hero);border-radius:20px;padding:2.2rem 2.4rem;overflow:hidden;margin-bottom:1.8rem}
.bl-hero::after{content:"";position:absolute;inset-inline-start:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(0,84,32,.05)}
.bl-hero-title{font-size:3rem;font-weight:800;line-height:1.25;margin-bottom:.8rem}
.bl-hero-title .t1{color:var(--bl-ink)}
.bl-hero-title .t2{color:var(--bl-green)}
.bl-hero-title .t3{color:var(--bl-orange);position:relative}
.bl-hero-title .t3::after{content:"";position:absolute;inset-inline:0;bottom:-.1em;height:.12em;border-radius:99px;background:var(--bl-orange);opacity:.85}
.bl-hero-line{color:#4a5a50;font-size:1.05rem;line-height:1.9}
.bl-hero-art{position:relative;z-index:1}
.bl-hero-art img{width:100%;max-height:260px;object-fit:contain;margin-inline-start:auto}

/* ---------- featured ---------- */
.bl-featured{background:#fff;border:1px solid #ececec;border-radius:16px;padding:1.1rem;margin-bottom:1.6rem}
.bl-featured-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--bl-ink);margin-bottom:.8rem}
.bl-featured-tag i{color:#e0a500}
.bl-featured-card{display:grid;grid-template-columns:1fr 45%;gap:1.4rem;align-items:center}
.bl-featured-thumb{display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:var(--bl-chip)}
.bl-featured-thumb img{width:100%;height:100%;object-fit:cover}
.bl-featured-body h2{font-size:1.5rem;font-weight:800;line-height:1.5;margin:.5rem 0 .6rem}
.bl-featured-body h2 a{color:var(--bl-ink)}
.bl-featured-body h2 a:hover{color:var(--bl-green)}
.bl-featured-body p{color:#5b6a60;line-height:1.9;margin-bottom:1rem}
.bl-featured-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

.bl-chip{display:inline-block;padding:.2rem .7rem;border-radius:6px;background:var(--bl-chip);color:var(--bl-ink);font-size:.75rem;font-weight:700}
a.bl-chip:hover{background:var(--bl-active);color:#fff}
.bl-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.3rem;border-radius:8px;background:var(--bl-green);color:#fff;font-size:.88rem;font-weight:700;transition:.18s}
.bl-btn:hover{background:var(--bl-active);color:#fff}
.bl-time{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:#5b6270}

/* ---------- filters ---------- */
.bl-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.4rem}
.bl-filters-label{font-size:.85rem;color:#5b6270;margin-inline-end:.3rem}
.bl-fchip{display:inline-flex;align-items:center;height:32px;padding:0 .9rem;border:1px solid var(--bl-chip-line);border-radius:8px;background:#fff;color:var(--bl-ink);font-size:.82rem;font-weight:600;transition:.18s}
.bl-fchip:hover{border-color:var(--bl-active);color:var(--bl-active)}
.bl-fchip.is-on{background:var(--bl-active);border-color:var(--bl-active);color:#fff}

/* ---------- grid ---------- */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.bl-card{position:relative;background:#fff;border:1px solid #ececec;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.bl-card:hover{box-shadow:0 10px 26px rgba(12,56,32,.08);transform:translateY(-3px)}
.bl-card-thumb{display:block;aspect-ratio:16/9;background:var(--bl-chip);overflow:hidden}
.bl-card-thumb img{width:100%;height:100%;object-fit:cover}
.bl-thumb-ph{width:100%;height:100%;display:grid;place-items:center;font-size:2rem;color:var(--bl-green)}
.bl-card-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.bl-card-title{font-size:1.05rem;font-weight:700;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-card-title a{color:var(--bl-ink)}
.bl-card-title a:hover{color:var(--bl-green)}
.bl-card-excerpt{color:#5b6a60;font-size:.88rem;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.6rem;border-top:1px solid #f0f0f0}
.bl-read{display:inline-flex;align-items:center;gap:.35rem;color:var(--bl-green);font-size:.85rem;font-weight:700}
.bl-read:hover{color:var(--bl-active)}
.bl-save{position:absolute;top:.6rem;inset-inline-end:.6rem;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#5b6270;cursor:pointer;display:grid;place-items:center;font-size:1rem}
.bl-save:hover,.bl-save.is-fav{color:var(--bl-green)}

.bl-more{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.8rem;border:1px solid var(--bl-chip-line);border-radius:10px;background:#fff;color:var(--bl-ink);font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:.18s}
.bl-more:hover{border-color:var(--bl-green);color:var(--bl-green)}
.bl-empty{background:#fff;border:1px dashed var(--bl-chip-line);border-radius:14px;padding:3rem 1rem;text-align:center;color:#5b6270;display:grid;gap:.8rem;justify-items:center}
.bl-empty i{font-size:1.8rem;color:var(--bl-green)}

/* ---------- article ---------- */
.page-article{background:#fff}
.article{padding:1.4rem 0 3.5rem}
.ar-layout{display:grid;grid-template-columns:1fr 250px;gap:2rem;align-items:start;margin-top:1rem}
.ar-title{font-size:2.1rem;font-weight:800;line-height:1.5;color:var(--ar-h1);margin:.7rem 0 .6rem}
.ar-lead{color:#4a5a50;font-size:1.02rem;line-height:1.9;margin-bottom:1rem}
.ar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;padding-bottom:1rem;font-size:.85rem;color:#5b6270}
.ar-meta i{color:var(--bl-green)}
.ar-save{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border:1px solid var(--bl-chip-line);border-radius:8px;background:#fff;color:#5b6270;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.ar-save:hover,.ar-save.is-fav{border-color:var(--bl-green);color:var(--bl-green)}
.ar-cover{width:100%;border-radius:14px;margin-bottom:1.6rem}
.ar-body{color:#33403a;font-size:1rem;line-height:1.9}
.ar-body h2{font-size:1.35rem;font-weight:800;color:var(--ar-h2);margin:1.8rem 0 .7rem;scroll-margin-top:90px}
.ar-body h3{font-size:1.1rem;font-weight:700;color:var(--ar-h2);margin:1.3rem 0 .5rem;scroll-margin-top:90px}
.ar-body p{margin-bottom:1rem}
.ar-body ul{list-style:none;margin:0 0 1.1rem;padding:0}
.ar-body ul li{position:relative;padding-inline-start:2.1rem;margin-bottom:.6rem}
.ar-body ul li::before{content:"\F26E";font-family:"bootstrap-icons";position:absolute;inset-inline-start:0;top:.25em;width:20px;height:20px;border-radius:50%;background:#083c20;color:#fff;display:grid;place-items:center;font-size:.75rem;line-height:1}
.ar-body ol{padding-inline-start:1.4rem;margin-bottom:1.1rem}
.ar-body ol li{margin-bottom:.6rem}
.ar-body blockquote{margin:1.2rem 0;padding:.9rem 1.2rem;border-inline-start:4px solid var(--bl-green);background:#f6faf7;border-radius:8px;color:#33403a}
.ar-body a{color:var(--bl-green);text-decoration:underline}

.ar-cta{display:grid;grid-template-columns:1fr 240px;align-items:center;gap:1.2rem;margin-top:2.4rem;padding:1.6rem 1.8rem;background:var(--ar-cta-bg);border-radius:16px}
.ar-cta h2{font-size:1.25rem;font-weight:800;color:var(--ar-h1);margin-bottom:.4rem}
.ar-cta p{color:#4a5a50;margin-bottom:1rem}
.ar-cta img{width:100%;max-height:150px;object-fit:contain}
.ar-cta .bl-btn{background:var(--ar-cta)}

/* sidebar */
.ar-side{display:grid;gap:1.2rem;position:sticky;top:90px}
.ar-toc{background:var(--ar-side);border-radius:14px;padding:1.1rem 1.2rem}
.ar-toc h2{font-size:1rem;font-weight:800;color:var(--ar-h1);margin-bottom:.8rem}
.ar-toc ul{list-style:none;margin:0;padding:0}
.ar-toc li{position:relative;padding-inline-start:1rem;margin-bottom:.7rem}
.ar-toc li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--bl-green)}
.ar-toc a{color:#3b4a42;font-size:.86rem;line-height:1.7}
.ar-toc a:hover,.ar-toc a:focus-visible{color:var(--bl-green)}
.ar-related-more{display:inline-flex;align-items:center;gap:.35rem;color:var(--bl-green);font-size:.85rem;font-weight:700}

/* «مقالات قد تهمك» after the article */
.ar-more{margin-top:3rem;padding-top:2rem;border-top:1px solid #ececec}
.ar-more-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.ar-more-head h2{font-size:1.35rem;font-weight:800;color:var(--ar-h1)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}
  .ar-layout{grid-template-columns:1fr}
  .ar-side{position:static;grid-template-columns:1fr 1fr;display:grid;gap:1rem}
}
@media (max-width:820px){
  .bl-hero{grid-template-columns:1fr;text-align:center;padding:1.8rem 1.4rem}
  .bl-hero-art img{margin:0 auto;max-height:200px}
  .bl-featured-card{grid-template-columns:1fr}
  .ar-cta{grid-template-columns:1fr}
  .ar-cta img{max-height:120px}
}
@media (max-width:560px){
  .bl-hero-title{font-size:2.1rem}
  .bl-grid{grid-template-columns:1fr}
  .ar-title{font-size:1.6rem}
  .ar-side{grid-template-columns:1fr}
  .bl-filters-label{width:100%}
}