/* ==================== المدونة — سلام المتطورة لبرك السباحة ==================== */

/* ---- Blog index hero ---- */
.blog-hero{position:relative;overflow:clip;border-bottom:1px solid var(--sand);min-height:380px;display:flex;align-items:flex-end}
.blog-hero .bg{position:absolute;inset:0}
.blog-hero .bg img{width:100%;height:100%;object-fit:cover}
.blog-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,35,54,.92) 8%,rgba(16,35,54,.55) 45%,rgba(16,35,54,.25) 100%)}
.blog-hero .container{position:relative;z-index:2;padding:5.5rem 0 2.8rem;color:#fff}
.blog-hero .crumbs{color:var(--blue-sky)}
.blog-hero .crumbs a{color:#fff}
.blog-hero h1{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;line-height:1.35;margin:.7rem 0 .8rem;max-width:760px}
.blog-hero .lead{color:#DCE9F2;max-width:640px}
.blog-hero .hero-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.blog-hero .hero-tags span{background:rgba(22,48,74,.55);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:.32rem .95rem;font-size:.8rem;font-weight:600}

/* ---- Topic quick nav ---- */
.topic-jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem}
.topic-jump a{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1.5px solid var(--sand);border-radius:999px;padding:.55rem 1.2rem;font-size:.88rem;font-weight:700;color:var(--ink);transition:border-color .2s,box-shadow .2s,transform .2s}
.topic-jump a:hover{border-color:var(--blue-mid);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.topic-jump a .n{width:22px;height:22px;border-radius:50%;background:var(--blue-mist);color:var(--blue);font-size:.72rem;font-weight:800;display:grid;place-items:center}

/* ---- Topic sections ---- */
.topic-sec{position:relative;padding:3.4rem 0 1.2rem}
.topic-sec + .topic-sec{border-top:1px dashed var(--line)}
.topic-head{display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:2rem;max-width:860px}
.topic-head .t-num{flex-shrink:0;width:58px;height:58px;border-radius:16px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.45rem;font-weight:800;font-family:var(--font-lat);box-shadow:var(--shadow-1)}
.topic-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;line-height:1.4}
.topic-head p{color:var(--ink-soft);font-size:.97rem;margin-top:.35rem;max-width:64ch}

/* ---- Post cards ---- */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.post-card{background:#fff;border:1px solid var(--sand);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:var(--blue-sky)}
.post-card .thumb{position:relative;aspect-ratio:16/9.4;overflow:hidden;background:var(--blue-mist)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.post-card:hover .thumb img{transform:scale(1.045)}
.post-card .chip{position:absolute;top:.9rem;inset-inline-start:.9rem;background:rgba(22,48,74,.88);color:#fff;border-radius:999px;padding:.28rem .9rem;font-size:.74rem;font-weight:700}
.post-card .body{padding:1.35rem 1.45rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.post-card h3{font-size:1.14rem;font-weight:800;line-height:1.55}
.post-card h3 a{color:var(--ink)}
.post-card h3 a:hover{color:var(--blue)}
.post-card .ex{color:var(--ink-soft);font-size:.9rem;line-height:1.75;flex:1}
.post-card .meta{display:flex;align-items:center;gap:1rem;padding-top:.85rem;border-top:1px dashed var(--line);font-size:.76rem;color:var(--ink-soft)}
.post-card .meta .rd{margin-inline-start:auto;color:var(--blue);font-weight:800;font-size:.82rem;display:inline-flex;align-items:center;gap:.35rem}
.post-card .meta .rd svg{width:15px;height:15px}
[dir="ltr"] .post-card .meta .rd svg{transform:scaleX(-1)}

/* ---- Blog CTA strip ---- */
.blog-cta{position:relative;margin:3.2rem 0 0;background:var(--blue);border-radius:var(--radius-lg);padding:2.6rem 2.4rem;color:#fff;overflow:hidden;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.blog-cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--bp-line) 1px,transparent 1px);background-size:26px 26px;opacity:.5}
.blog-cta > *{position:relative}
.blog-cta h2{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;line-height:1.5;max-width:560px}
.blog-cta p{color:var(--blue-sky);font-size:.95rem;margin-top:.4rem;max-width:560px}
.blog-cta .acts{display:flex;gap:.8rem;flex-wrap:wrap;margin-inline-start:auto}

/* ==================== صفحة المقال ==================== */
.art-hero{position:relative;overflow:clip;display:flex;align-items:flex-end;min-height:400px;border-bottom:1px solid var(--sand)}
.art-hero .bg{position:absolute;inset:0}
.art-hero .bg img{width:100%;height:100%;object-fit:cover}
.art-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,35,54,.94) 10%,rgba(16,35,54,.5) 55%,rgba(16,35,54,.22) 100%)}
.art-hero .container{position:relative;z-index:2;padding:5rem 0 2.4rem;color:#fff}
.art-hero .crumbs{color:var(--blue-sky)}
.art-hero .crumbs a{color:#fff}
.art-hero .chip{display:inline-block;background:var(--orange);color:#fff;border-radius:999px;padding:.3rem 1rem;font-size:.76rem;font-weight:800;margin-bottom:.8rem}
.art-hero h1{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:800;line-height:1.45;max-width:820px}
.art-hero .meta{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1rem;font-size:.82rem;color:#C9DCEA}
.art-hero .meta b{color:#fff;font-weight:700}

.art-wrap{display:grid;grid-template-columns:1fr 300px;gap:3rem;padding:3rem 0}
.art-body{min-width:0}
.art-body > p{font-size:1.02rem;line-height:2.05;color:var(--ink-soft);margin-bottom:1.3rem}
.art-body > p.lead-in{font-size:1.12rem;color:var(--ink);font-weight:500}
.art-body h2{font-size:1.42rem;font-weight:800;margin:2.4rem 0 .9rem;display:flex;align-items:center;gap:.75rem;line-height:1.5}
.art-body h2 .h-num{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--blue-mist);color:var(--blue);display:grid;place-items:center;font-size:1rem;font-weight:800;font-family:var(--font-lat)}
.art-body h3{font-size:1.1rem;font-weight:800;margin:1.6rem 0 .5rem;color:var(--blue)}
.art-body ul{margin:0 0 1.3rem;padding-inline-start:1.2rem;display:flex;flex-direction:column;gap:.45rem}
.art-body li{font-size:.98rem;line-height:1.85;color:var(--ink-soft)}
.art-body li::marker{color:var(--orange)}
.art-body strong{color:var(--ink)}

.art-tip{background:#fff;border:1px solid var(--sand);border-inline-start:4px solid var(--orange);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.6rem 0;box-shadow:var(--shadow-1)}
.art-tip .t-t{font-weight:800;font-size:.92rem;color:var(--orange-deep);display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.art-tip .t-t svg{width:17px;height:17px}
.art-tip p{font-size:.93rem;line-height:1.8;color:var(--ink-soft);margin:0}

.art-fig{margin:2rem 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--sand);box-shadow:var(--shadow-1)}
.art-fig img{width:100%;display:block}
.art-fig figcaption{background:#fff;padding:.7rem 1.1rem;font-size:.8rem;color:var(--ink-soft)}

.art-kw{margin-top:2.2rem;padding-top:1.4rem;border-top:1px dashed var(--line)}
.art-kw .k-t{font-size:.8rem;font-weight:800;color:var(--ink);margin-bottom:.6rem}
.art-kw .k-list{display:flex;flex-wrap:wrap;gap:.45rem}
.art-kw .k-list span{background:var(--blue-mist);color:var(--blue);border-radius:999px;padding:.25rem .8rem;font-size:.74rem;font-weight:600}

/* sidebar */
.art-side{display:flex;flex-direction:column;gap:1.4rem;align-self:start;position:sticky;top:96px}
.side-box{background:#fff;border:1px solid var(--sand);border-radius:var(--radius-lg);padding:1.4rem 1.35rem;box-shadow:var(--shadow-1)}
.side-box h3{font-size:1rem;font-weight:800;margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem}
.side-box h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)}
.side-toc a{display:block;padding:.45rem .2rem;font-size:.86rem;color:var(--ink-soft);border-bottom:1px dashed var(--stone);line-height:1.5}
.side-toc a:last-child{border-bottom:none}
.side-toc a:hover{color:var(--blue)}
.side-cta{background:var(--blue);border-color:var(--blue);color:#fff}
.side-cta h3{color:#fff}
.side-cta p{font-size:.85rem;color:var(--blue-sky);line-height:1.7;margin-bottom:1rem}
.side-cta .btn{width:100%;justify-content:center}

/* related */
.rel-sec{padding:1.5rem 0 3.5rem}
.rel-sec h2{font-size:1.4rem;font-weight:800;margin-bottom:1.5rem;display:flex;align-items:center;gap:.7rem}
.rel-sec h2::before{content:"";width:34px;height:3px;background:var(--orange);border-radius:2px}

/* mid-article CTA */
.art-inline-cta{background:linear-gradient(135deg,var(--blue),#163A5C);border-radius:var(--radius-lg);padding:1.7rem 1.8rem;margin:2.2rem 0;color:#fff;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;position:relative;overflow:hidden}
.art-inline-cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:22px 22px;opacity:.6}
.art-inline-cta > *{position:relative}
.art-inline-cta p{font-size:1.02rem;font-weight:700;line-height:1.6;flex:1;min-width:220px;margin:0}
.art-inline-cta .btn{flex-shrink:0}

/* ---- home teaser: 3 columns ---- */
.post-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.post-grid.three{grid-template-columns:repeat(2,1fr)}}

/* ---- responsive ---- */
@media (max-width:1024px){
  .art-wrap{grid-template-columns:1fr}
  .art-side{position:static;flex-direction:row;flex-wrap:wrap}
  .side-box{flex:1;min-width:260px}
}
@media (max-width:760px){
  .post-grid,.post-grid.three{grid-template-columns:1fr}
  .topic-head{gap:.9rem}
  .topic-head .t-num{width:46px;height:46px;font-size:1.15rem;border-radius:13px}
  .blog-cta{padding:2rem 1.5rem}
  .blog-cta .acts{margin-inline-start:0}
  .art-hero{min-height:340px}
  .art-body > p{font-size:.97rem;line-height:1.95}
}

/* ---- EN/LTR long button labels: allow wrap on small screens ---- */
.art-side{min-width:0}
@media (max-width:760px){
  .art-inline-cta .btn{white-space:normal;text-align:center}
}