/*
Theme Name: Jabbar Tareen
Theme URI: https://innotechz.com
Author: Innotechz
Description: عبدالجبار ترین کی ذاتی ویب سائٹ کے لیے اردو RTL تھیم۔ ویڈیوز اور کالمز کے لیے۔
Version: 1.12
Text Domain: jabbar-tareen
*/
:root{--bg:#faf7ef;--card:#fff;--text:#1b1810;--muted:#6d6652;--gold:#c9a24b;--deep:#8a6a1f;--line:#e8dfc8}
*{box-sizing:border-box}
html{scroll-padding-top:0;max-width:100%;overflow-x:hidden}
body{margin:0;max-width:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:"Jameel Noori Nastaleeq","Noori Nastaleeq","Gulzar","Noto Nastaliq Urdu",serif;line-height:2.2;font-size:18px}
a{color:var(--deep)}
img,iframe,video,embed,table{max-width:100%}
img{height:auto}
.entry{overflow-wrap:anywhere}
.wrap{max-width:1400px;margin:0 auto;padding:0 28px}
.strip{height:12px;background:var(--gold)}
.top{background:#000;color:#fff}
.top .wrap{display:flex;justify-content:space-between;align-items:center;min-height:62px}
.date{font-size:17px;line-height:1.8}
.icons{display:flex;gap:14px;direction:ltr}
.icons a{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 28px/1 Arial,sans-serif;text-decoration:none;transition:transform .15s}
.icons a:hover{transform:translateY(-2px)}
.icons svg{display:block}
.yt{background:#e53935}.ig{background:linear-gradient(45deg,#f9a825,#d81b60,#7b1fa2)}.x{background:#4aa3e8}.fb{background:#1c3d7c}
.logo{background:#fff;border-bottom:1px solid var(--line)}
.logo .wrap{padding-top:10px;padding-bottom:10px}
.logo a{display:inline-block;color:var(--deep);text-decoration:none;font-size:62px;line-height:1.9}
nav.main{background:var(--gold)}
nav.main .wrap{display:flex;align-items:center}
nav.main ul{display:flex;gap:4px;flex-wrap:nowrap;list-style:none;margin:0;padding:0}
nav.main li{display:contents}
nav.main a{display:block;color:#111;text-decoration:none;font-size:27px;font-weight:400;padding:8px 30px;line-height:2.1}
nav.main a:hover{background:rgba(0,0,0,.12)}
nav.main .current-menu-item>a,nav.main .current_page_item>a,nav.main .cur>a{background:#111;color:var(--gold)}
.hero{background:radial-gradient(circle at 22% 65%,rgba(201,162,75,.3),transparent 42%),linear-gradient(120deg,#050505,#1a150a 60%,#050505);position:relative;overflow:hidden;border-bottom:6px solid var(--gold);color:#f1ece0}
.hero .wrap{display:flex;align-items:flex-end;justify-content:center;gap:90px;min-height:460px}
.htxt{align-self:center;padding:40px 0}
.htxt h1{margin:0;font-size:68px;line-height:1.9;color:var(--gold)}
.htxt h3{margin:0 0 4px;font-size:28px;color:#f1ece0;font-weight:400}
.htxt p{margin:0;font-size:22px;color:#cfc7b2;max-width:560px}
.btn{display:inline-block;margin-top:16px;background:var(--gold);color:#111;padding:4px 32px;border-radius:30px;text-decoration:none;font-weight:700;font-size:18px}
.hpic{position:relative;width:540px;max-width:100%;line-height:0;flex-shrink:0}
.hpic img{position:relative;z-index:1;width:100%;height:auto;display:block;-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
.pagehead{background:#0d0d0d;border-bottom:6px solid var(--gold);padding:18px 0}
.pagehead h1{margin:0;color:var(--gold);font-size:38px;line-height:2.1}
.pagehead small{color:#cfc7b2;font-size:14px}
.sec{display:flex;justify-content:space-between;align-items:center;margin:40px 0 14px}
.sec h2{color:var(--deep);border-right:6px solid var(--gold);padding-right:14px;font-size:28px;margin:0}
.sec a{font-size:16px;text-decoration:none;color:var(--deep);border:1px solid var(--gold);padding:0 16px;border-radius:20px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;color:var(--text);text-decoration:none}
.card .thumb{overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#1d1a10,#4a3c18);position:relative;display:flex;align-items:center;justify-content:center}
.card .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.card .play{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;background:var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.card .play:after{content:"";position:absolute;top:15px;left:21px;border-left:18px solid #111;border-top:12px solid transparent;border-bottom:12px solid transparent}
.card h4{margin:8px 16px 0;font-size:19px;line-height:2.1;font-weight:400}
.card span{display:block;margin:0 14px 10px;font-size:13px;color:var(--muted)}
.card.txt{padding:16px 4px;border-top:4px solid var(--gold)}
.card.txt h4{font-size:21px}
.entry{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px 32px;margin:30px 0;font-size:19px;line-height:2.5}
.entry iframe,.entry video{max-width:100%}
.entry h2,.entry h3{color:var(--deep)}
.pager{text-align:center;margin:26px 0}
.pager .page-numbers{display:inline-block;padding:0 14px;margin:2px;border:1px solid var(--gold);border-radius:20px;text-decoration:none;color:var(--deep)}
.pager .current{background:var(--gold);color:#111}
footer.site{margin-top:50px;background:#000;color:#cfc7b2;text-align:center;padding:16px 0;font-size:15px;border-top:6px solid var(--gold)}
.fl{display:flex;justify-content:center;gap:22px;margin-bottom:6px}.fl a{color:var(--gold);text-decoration:none}
.by{font-family:Georgia,serif;letter-spacing:1px;color:var(--gold);font-size:14px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){nav.main ul{flex-wrap:wrap}.hero .wrap{flex-direction:column;align-items:center;text-align:center}.htxt{padding:28px 0 0}.htxt h1{font-size:44px}.htxt h3{font-size:22px}.hpic{width:320px}.wrap{padding:0 14px}nav.main a{font-size:19px;padding:4px 14px}.logo a{font-size:40px}.icons a{width:42px;height:42px}.icons svg{width:22px;height:22px}.entry{padding:16px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

/* v1.7: کالم کارڈ (تصویر + نیچے عنوان) اور ہوور ایفیکٹ */
.card.colcard h4{margin:10px 16px 12px;font-size:21px}
.card.colcard span{display:none}
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card .thumb img{transition:transform .5s ease}
.card .play{transition:transform .25s ease}
.card h4{transition:color .2s ease}
@media (hover:hover){
.card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.18);border-color:var(--gold)}
.card:hover .thumb img{transform:scale(1.07)}
.card:hover .play{transform:scale(1.15)}
.card:hover h4{color:var(--deep)}
}
@media (prefers-reduced-motion:reduce){.card,.card .thumb img,.card .play{transition:none}.card:hover{transform:none}.card:hover .thumb img{transform:none}}

/* v1.9: بٹن (نستعلیق فونٹ کے اپنے قدرتی لائن ہائٹ کے مطابق، متن باہر نہیں نکلتا)، پلے بٹن درمیان، موبائل سپیسنگ */
.btn,.sec a,.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;line-height:normal;min-height:2.9em;white-space:nowrap;box-sizing:border-box}
.btn{padding:.35em 1.9em;font-size:20px}
.sec a{padding:.3em 1.4em;font-size:17px;border-radius:30px}
.pager .page-numbers{padding:.2em 1em;border-radius:30px}
.card .thumb img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover}
.card .play{position:absolute;top:50%;left:50%;margin:-27px 0 0 -27px}
.htxt h3,.htxt p{text-wrap:balance}
@media(max-width:820px){
.hero .wrap{gap:18px;min-height:0}
.htxt{padding:26px 0 0}
.htxt h3{font-size:20px;line-height:2.1}
.htxt p{font-size:18px}
.btn{font-size:18px}
.sec{margin:28px 0 12px}
.sec h2{font-size:24px}
.sec a{font-size:15px}
}