/* الصفحات الداخلية: الخبر، الأقسام، البرامج، البودكاست، الفيديو، الصور، من نحن — إذاعة صوت الأسرى */

/* التبويبات بمؤشر نابض */
.tabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; margin-block-end: 12px; padding: 4px; border-radius: 22px; background: var(--surface); }
.tab { position: relative; z-index: 1; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: transparent; color: var(--ink2); font: 700 var(--t-xs)/1 var(--f); white-space: nowrap; transition: color .3s; }
.tab:hover { color: var(--brand-tx); }
.tab[aria-selected="true"] { color: var(--on-brand); }
.tabs:not(.pilled) .tab[aria-selected="true"] { background: var(--brand); }
.tabs-pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 18px; background: var(--brand); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); pointer-events: none; transition: transform var(--spring-d) var(--spring), width var(--spring-d) var(--spring), height var(--spring-d) var(--spring); }
.tabs.still .tabs-pill { transition: none; }
.band .tabs { background: var(--bg); }

/* شبكة تتكيف مع عدد العناصر فلا يبقى صف ناقص */
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.cgrid > * { min-width: 0; }
@media (max-width: 999px) { .cgrid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* على الهاتف: البطاقات صفوف أفقية (صورة بجانب العنوان) فلا تتفاوت الارتفاعات */
@media (max-width: 599px) {
  .cgrid:not(.gal) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cgrid:not(.gal) > * { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-content: start; gap: 4px 12px; padding-block: 12px; border-block-start: 1px solid var(--line); }
  .cgrid:not(.gal) > :first-child { border-block-start: 0; padding-block-start: 0; }
  .cgrid:not(.gal) > * > .thumb, .cgrid:not(.gal) > * > .pat { grid-row: 1 / span 4; align-self: start; }
  .cgrid:not(.gal) h3 { font-size: var(--t-sm); line-height: 1.6; }
  .cgrid:not(.gal) .pat { padding: 8px; }
  .cgrid:not(.gal) .pat b { font-size: var(--t-xs); }
  .cgrid:not(.gal) .card:hover, .cgrid:not(.gal) .pcard:hover, .cgrid:not(.gal) .vcard:hover, .cgrid:not(.gal) .bcard:hover { transform: none; }
}
@media (min-width: 1000px) { .cgrid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

/* المنصات بأيقوناتها */
.plat { align-items: stretch; }
.plat li { display: flex; min-width: 0; }
.plat a { flex: 1; }
.plat small { text-wrap: balance; }
.plat a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 12px 8px; overflow: hidden; color: var(--ink); text-align: center; transition: background .25s, color .25s, border-color .25s, transform var(--spring-d) var(--spring); }
.plat .pi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 12%, var(--bg)); color: var(--pc); transition: background .25s, color .25s, transform var(--spring-d) var(--spring); }
.plat b { font-size: var(--t-sm); font-weight: 700; line-height: 1.4; }
.plat small { font-size: var(--t-xs); line-height: 1.5; color: var(--muted); transition: color .25s; }
.plat a:hover, .plat a:focus-visible { border-color: var(--pc); background: var(--pc); color: #fff; transform: translateY(-4px); }
.plat a:hover .pi, .plat a:focus-visible .pi { background: rgb(255 255 255 / .18); color: #fff; transform: scale(1.08) rotate(-6deg); }
.plat a:hover small, .plat a:focus-visible small { color: rgb(255 255 255 / .85); }
:root[data-theme="dark"] .plat a[data-k="tiktok"], :root[data-theme="dark"] .plat a[data-k="x"], :root[data-theme="dark"] .share [data-k="x"], :root[data-theme="dark"] .soc [data-k="x"], :root[data-theme="dark"] .soc [data-k="tiktok"] { --pc: #f3efe9; }
:root[data-theme="dark"] .plat a[data-k="tiktok"]:hover, :root[data-theme="dark"] .plat a[data-k="x"]:hover { color: #111; }
:root[data-theme="dark"] .plat a[data-k="tiktok"]:hover .pi, :root[data-theme="dark"] .plat a[data-k="x"]:hover .pi, :root[data-theme="dark"] .plat a[data-k="tiktok"]:hover small, :root[data-theme="dark"] .plat a[data-k="x"]:hover small { color: #111; }
.share [data-k] .si, .soc .si { color: var(--pc); transition: color .2s; }
.share [data-k]:hover { border-color: var(--pc); background: var(--pc); color: #fff; }
.share [data-k]:hover .si { color: #fff; }
.soc a { gap: 8px; }
.soc a:hover { background: var(--pc); color: #fff; }
.soc a:hover .si { color: #fff; }

/* أزرار بلا مظهر افتراضي */
button.tile { width: 100%; padding: 0; border: 0; cursor: zoom-in; font: inherit; text-align: start; }
.vlist .row { width: 100%; border: 0; border-block-start: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.vlist li:first-child > .row { border-block-start: 0; padding-block-start: 0; }
.vlist .row[aria-current="true"] .tt { color: var(--brand-tx); }
.vlist .row[aria-current="true"] .thumb { box-shadow: 0 0 0 2px var(--brand); }
.vlist .row .thumb .dur { inset-block-end: 4px; inset-inline-end: 4px; }

/* رأس الصفحة */
/* رأس مضغوط: سطر للمسار والعدد، ثم العنوان والوصف مقابل التبويبات */
.phd { padding-block: 12px 32px; }
.phd::after { inset-block-end: 8px !important; }
.phd-in { display: grid; gap: 8px; }
.phd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.phd .crumb { margin: 0; }
.phd .count { flex: none; padding: 2px 10px; border-radius: 12px; background: var(--bg); font-size: var(--t-xs); font-weight: 700; color: var(--ink2); }
.phd-main { display: grid; gap: 12px; align-items: end; }
.phd-t { display: grid; gap: 4px; min-width: 0; }
.phd h1 { font-size: var(--t-xl); line-height: 1.3; }
.phd .phd-t p { margin: 0; font-size: var(--t-sm); line-height: 1.7; color: var(--ink2); max-width: 64ch; }
.phd .tabs { justify-self: start; flex-wrap: nowrap; margin: 0; background: var(--bg); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.phd .tabs::-webkit-scrollbar { display: none; }
.phd .tab { scroll-snap-align: start; }
@media (min-width: 760px) {
  .phd-main { grid-template-columns: minmax(0, 1fr) auto; }
  .phd .tabs { justify-self: end; max-width: 100%; }
}
@media (max-width: 759px) {
  .phd { padding-block: 8px 28px; }
  .phd h1 { font-size: var(--t-lg); }
  .phd .phd-t p { font-size: var(--t-xs); line-height: 1.65; }
  .phd .tabs { justify-self: stretch; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); border-radius: 0; background: transparent; gap: 6px; }
  .phd .tab { flex: none; background: var(--bg); }
  .phd .tab[aria-selected="true"] { background: transparent; }
  .phd .tabs-pill { box-shadow: none; }
}
.vbody { padding-block-start: var(--gap); }
.vbody > .wrap > * + * { margin-block-start: var(--gap); }

/* شبكات مشتركة */
.sidecol { display: flex; flex-direction: column; gap: 16px; }
.box { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); border-start-end-radius: var(--rw); background: var(--bg); }
.box > ul, .box > ol { flex: 1; display: flex; flex-direction: column; }
.box li { flex: 1; display: grid; }
.grow { flex: 1; }
.lead.tall { aspect-ratio: auto; min-height: 360px; height: 100%; }
.stack2 { display: grid; gap: 16px; align-content: start; }
.stack2 .card .thumb { aspect-ratio: 1.618; }
.list { display: grid; }
.list .row.pic { grid-template-columns: 136px minmax(0, 1fr); padding-block: 16px; }
.list .row.pic .thumb { width: 136px; }
.list .row .x { grid-column: 2; font-size: var(--t-sm); line-height: 1.7; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pager { display: flex; justify-content: center; margin-block-start: 24px; }
.btn.line { background: transparent; color: var(--brand-tx); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn.line:hover { background: var(--brand); color: var(--on-brand); }
mark { padding: 0 2px; border-radius: 3px; background: var(--gold-t); color: inherit; }
.empty { display: grid; justify-items: center; gap: 12px; padding: 48px 16px; border: 1px dashed var(--line); border-radius: var(--r); text-align: center; color: var(--ink2); }

/* الأكثر قراءة */
.most li a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding-block: 12px; border-block-start: 1px solid var(--line); }
.most li:first-child a { border-block-start: 0; padding-block-start: 0; }
.most .num { font-size: var(--t-xl); font-weight: 800; line-height: 1; color: color-mix(in oklab, var(--brand) 55%, var(--bg)); font-variant-numeric: tabular-nums; }
.most .tt { font-size: var(--t-sm); font-weight: 600; line-height: 1.6; }
.most a:hover .tt { color: var(--brand-tx); }
.mini-air { display: grid; gap: 8px; padding: 16px; border-radius: var(--r); border-start-end-radius: var(--rw); background: var(--deep); color: var(--on-deep); }
.mini-air .k { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 700; color: var(--gold-d); }
.mini-air b { font-size: var(--t-md); }
.mini-air .meta { color: var(--on-deep-m); }
.mini-air .btn { justify-self: start; }
.wa-cta { display: grid; gap: 8px; padding: 16px; border-radius: var(--r); background: var(--gold-t); }
.wa-cta b { font-size: var(--t-md); }
.wa-cta p { font-size: var(--t-sm); color: var(--ink2); }
.wa-cta .btn { justify-self: start; }

/* صفحة الخبر */
.crumb { flex-wrap: wrap; }
.art-h { display: grid; justify-items: start; gap: 12px; }
.art-h h1 { font-size: var(--t-xl); line-height: 1.5; }
.dek { font-size: var(--t-lg); font-weight: 500; line-height: 1.75; color: var(--ink2); }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; width: 100%; padding-block: 12px; border-block: 1px solid var(--line); }
.by { display: flex; align-items: center; gap: 12px; }
.by img { width: 32px; height: 40px; }
.by b { display: block; font-size: var(--t-sm); line-height: 1.5; }
.by small { display: block; font-size: var(--t-xs); line-height: 1.6; color: var(--muted); }
.art-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fsz { display: inline-flex; padding: 2px; border-radius: 20px; background: var(--surface); }
.fsz button { min-width: 40px; height: 36px; border: 0; border-radius: 18px; background: none; color: var(--ink2); font: 700 var(--t-sm)/1 var(--f); }
.fsz button:hover { background: var(--bg); color: var(--brand-tx); }
.share { display: flex; flex-wrap: wrap; gap: 4px; }
.share a, .share button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink2); font: 700 var(--t-xs)/1 var(--f); transition: background .2s, color .2s, border-color .2s, transform var(--snap-d) var(--snap); }
.share a:hover, .share button:hover { border-color: var(--brand); background: var(--brand); color: var(--on-brand); transform: translateY(-2px); }
.art-fig { margin-block-start: 16px; }
.art-fig .thumb { margin: 0; aspect-ratio: 1.618; }
.art-fig figcaption { margin-block-start: 8px; font-size: var(--t-xs); line-height: 1.7; color: var(--muted); }
.listen { display: flex; align-items: center; gap: 12px; margin-block: 16px; padding: 12px 16px; border-radius: var(--r); border-start-end-radius: var(--rw); background: var(--brand-t); }
.listen .play { width: 44px; height: 44px; }
.listen .lk { flex: none; display: grid; }
.listen .lk b { font-size: var(--t-sm); line-height: 1.5; }
.listen .lk small { font-size: var(--t-xs); color: var(--muted); }
.listen .wf { height: 32px; }
.art-body { --fs: 1.0625rem; font-size: var(--fs); line-height: 1.95; transition: font-size .3s var(--ease); }
.art-body > * + * { margin-block-start: 16px; }
.art-body h2 { margin-block-start: 32px; font-size: var(--t-lg); line-height: 1.5; }
.art-body p:first-child::first-line { font-weight: 700; }
.fact { padding: 16px 20px; border-radius: var(--r); border-start-end-radius: var(--rw); background: var(--surface); border-inline-start: 4px solid var(--brand); font-size: .9375em; line-height: 1.9; }
.fact b { display: block; margin-block-end: 4px; font-size: var(--t-sm); color: var(--brand-tx); }
.also { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); }
.also .thumb { grid-row: span 2; }
.also small { font-size: var(--t-xs); font-weight: 700; color: var(--brand-tx); }
.also b { font-size: var(--t-sm); line-height: 1.6; }
.also:hover b { color: var(--brand-tx); }
.art-foot { display: grid; gap: 16px; margin-block-start: 24px; padding-block-start: 16px; border-block-start: 1px solid var(--line); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a { padding: 4px 12px; border-radius: 16px; background: var(--surface); font-size: var(--t-xs); font-weight: 700; color: var(--ink2); }
.tags a:hover { background: var(--brand-t); color: var(--brand-tx); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn a { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s, transform var(--spring-d) var(--spring); }
.pn a:hover { border-color: var(--brand); transform: translateY(-3px); }
.pn small { font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.pn b { font-size: var(--t-sm); line-height: 1.6; }
.pn a + a { text-align: end; }

/* البرامج */
.now-band { display: grid; gap: 16px; padding: 16px; border-radius: var(--r); border-start-end-radius: var(--rw); background: var(--deep); color: var(--on-deep); }
.now-band .k { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 700; color: var(--gold-d); }
.now-band h2 { font-size: var(--t-xl); line-height: 1.4; }
.now-band p { font-size: var(--t-sm); color: var(--on-deep-m); }
.now-band .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.now-next { display: grid; gap: 8px; align-content: start; }
.now-next li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--deep2); }
.now-next b { font-size: var(--t-xs); color: var(--gold-d); font-variant-numeric: tabular-nums; }
.now-next span { font-size: var(--t-sm); font-weight: 600; }
.tl li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 16px; border-radius: var(--r-sm); }
.tl li:nth-child(odd) { background: var(--surface); }
.tl time { font-size: var(--t-sm); font-weight: 700; color: var(--brand-tx); font-variant-numeric: tabular-nums; }
.tl b { font-size: var(--t-sm); }
.tl p { grid-column: 2; font-size: var(--t-xs); line-height: 1.7; color: var(--muted); }
.tl .st { grid-column: 3; grid-row: 1 / span 2; }
.tl li.past { opacity: .62; }
.tl li.now { background: var(--brand); color: var(--on-brand); opacity: 1; }
.tl li.now time, .tl li.now p { color: inherit; }
.tl li.now .chip { background: var(--on-brand); color: var(--brand); }
.pcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pat { position: relative; display: grid; place-items: center; aspect-ratio: 1.618; border-radius: var(--r); border-start-end-radius: 18px; overflow: hidden; background: var(--deep); color: var(--on-deep); padding: 16px; text-align: center; }
.pat::before { content: ""; position: absolute; inset: 0; background: var(--gold-d); opacity: .22; -webkit-mask: var(--wire-img) repeat 0 0 / 56px 22px; mask: var(--wire-img) repeat 0 0 / 56px 22px; }
.pat b { position: relative; font-size: var(--t-lg); line-height: 1.4; }
.pcard h3 { font-size: var(--t-md); font-weight: 700; line-height: 1.5; }
.pcard p { font-size: var(--t-xs); line-height: 1.7; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard:hover h3 { color: var(--brand-tx); }
.ph-hero { display: grid; gap: 24px; align-items: center; }
.ph-hero .thumb, .ph-hero .pat { aspect-ratio: 1.618; }
.ph-hero h1 { font-size: var(--t-xl); line-height: 1.4; }
.ph-hero p { color: var(--ink2); }
.ph-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ph-facts dt { font-size: var(--t-xs); color: var(--muted); }
.ph-facts dd { margin-block-start: 8px; font-size: var(--t-sm); font-weight: 700; }

/* البودكاست */
.show { display: grid; gap: 24px; align-items: center; }
.show-art { position: relative; width: min(100%, 240px); aspect-ratio: 1; border-radius: 16px; border-start-end-radius: 44px; overflow: hidden; box-shadow: var(--shadow); }
.show-art img { width: 100%; height: 100%; object-fit: cover; }
.show h1 { font-size: var(--t-xl); line-height: 1.4; }
.show p { color: var(--ink2); max-width: 60ch; }
.subs { display: flex; flex-wrap: wrap; gap: 8px; }
.subs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; background: var(--surface); font-size: var(--t-xs); font-weight: 700; transition: background .2s, color .2s; }
.subs a:hover { background: var(--brand); color: var(--on-brand); }
.feat-ep { display: grid; gap: 16px; padding: 20px; border-radius: var(--r); border-start-end-radius: var(--rw); background: var(--deep); color: var(--on-deep); }
.feat-ep .k { font-size: var(--t-xs); font-weight: 700; color: var(--gold-d); }
.feat-ep h2 { font-size: var(--t-lg); line-height: 1.5; }
.feat-ep p { font-size: var(--t-sm); color: var(--on-deep-m); }
.feat-ep .row2 { display: flex; align-items: center; gap: 16px; }
.feat-ep .ap-pp { background: var(--gold-d); color: var(--on-gold); flex: none; }
.feat-ep .wf i { background: rgb(255 255 255 / .2); }
.feat-ep .wf-f i { background: var(--gold-d); }
.feat-ep .chaps { display: flex; flex-wrap: wrap; gap: 8px; }
.feat-ep .chaps button { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: rgb(255 255 255 / .1); color: var(--on-deep); font: 600 var(--t-xs)/1 var(--f); }
.feat-ep .chaps button:hover { background: rgb(255 255 255 / .2); }
.feat-ep .chaps bdi { color: var(--gold-d); }
.eps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 16px 0; border-block-start: 1px solid var(--line); }
.eps li:first-child { border-block-start: 0; }
.eps .play { grid-row: span 2; }
.eps .k { font-size: var(--t-xs); font-weight: 700; color: var(--brand-tx); }
.eps b { font-size: var(--t-md); line-height: 1.5; }
.eps .du { grid-column: 3; grid-row: 1 / span 2; font-size: var(--t-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.eps .wf { grid-column: 2; height: 24px; }
.resume { grid-column: 2; height: 3px; border-radius: 2px; background: var(--line); direction: ltr; }
.resume i { display: block; height: 100%; border-radius: 2px; background: var(--brand); }

.sidecol .show { grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; }
.sidecol .show > .phd-in { display: contents; }
.sidecol .show-art { width: 52px; border-radius: 10px; border-start-end-radius: 18px; box-shadow: none; }
.sidecol .show p, .sidecol .show .subs { grid-column: 1 / -1; }
.sidecol .show .subs { gap: 4px; }
.sidecol .show .subs a { min-height: 32px; padding: 0 10px; }

/* الصوتيات */
.lib-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tracks li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding-block: 12px; border-block-start: 1px solid var(--line); }
.tracks li:first-child { border-block-start: 0; }
.tracks .tt { font-size: var(--t-sm); font-weight: 600; line-height: 1.6; }
.tracks .meta { grid-column: 2; }
.tracks .wf { display: none; }
.tracks .du { grid-column: 3; grid-row: 1 / span 2; font-size: var(--t-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.tracks .play { grid-row: span 2; }
.is-cur .tt, li:has(.is-cur) .tt { color: var(--brand-tx); }

/* الفيديو */
.vlay { display: grid; gap: 24px; }
.vinfo { display: grid; gap: 12px; margin-block-start: 16px; }
.vinfo h2 { font-size: var(--t-lg); line-height: 1.5; }
.vinfo p { color: var(--ink2); }
.vinfo .chaps { display: flex; flex-wrap: wrap; gap: 8px; }
.vinfo .chaps button { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink2); font: 600 var(--t-xs)/1 var(--f); }
.vinfo .chaps button:hover { background: var(--brand-t); color: var(--brand-tx); }
.vinfo .chaps bdi { color: var(--brand-tx); }
.plist { display: flex; flex-direction: column; min-height: 0; padding: 8px; border-radius: var(--r); border-start-end-radius: var(--rw); background: var(--surface); }
.plist-h { display: flex; justify-content: space-between; gap: 8px; padding: 8px 8px 12px; font-size: var(--t-sm); font-weight: 700; }
.plist-h span { font-size: var(--t-xs); color: var(--muted); }
.plist ol { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 4px; }
.plist button { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; text-align: start; transition: background .2s; }
.plist button:hover { background: var(--bg); }
.plist button[aria-current="true"] { background: var(--bg); box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .plist button[aria-current="true"] { box-shadow: inset -3px 0 0 var(--brand); }
.plist .thumb { aspect-ratio: 16 / 9; }
.plist b { font-size: var(--t-xs); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plist small { font-size: var(--t-xs); color: var(--muted); }
.dur { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / .78); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.vcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vcard .thumb { aspect-ratio: 16 / 9; }
.vcard h3 { font-size: var(--t-sm); font-weight: 700; line-height: 1.6; }
.vcard:hover h3 { color: var(--brand-tx); }

/* الصور */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.gal button { display: grid; gap: 8px; padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: zoom-in; }
.gal .thumb { aspect-ratio: 1.618; }
.gal b { font-size: var(--t-sm); line-height: 1.6; }
.gal small { font-size: var(--t-xs); color: var(--muted); }
.gal button:hover b { color: var(--brand-tx); }

/* كتب ومقالات */
.bcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bcard p { font-size: var(--t-xs); line-height: 1.7; color: var(--muted); }
.bcard:hover h3 { color: var(--brand-tx); }

/* من نحن */
.about-hero { display: grid; gap: 24px; align-items: center; }
.about-hero h2 { font-size: var(--t-xl); line-height: 1.5; }
.about-hero p + p { margin-block-start: 12px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.step { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r); border-start-end-radius: var(--rw); background: var(--surface); }
.step i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 800 var(--t-md)/1 var(--f); font-style: normal; }
.step b { font-size: var(--t-md); }
.step p { font-size: var(--t-sm); color: var(--ink2); }
.contact { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); border-start-end-radius: var(--rw); }
.contact .fld label { color: var(--ink2); }
.contact .fld input, .contact .fld textarea, .contact .fld select { border-color: var(--line); background: var(--bg); color: var(--ink); }
.contact .fld input:focus-visible, .contact .fld textarea:focus-visible { border-color: var(--brand); }
.contact .fld ::placeholder { color: var(--muted); }

@media (min-width: 600px) {
  .pn { grid-template-columns: 1fr 1fr; }
  .tracks li { grid-template-columns: 44px minmax(0, 1fr) minmax(0, .8fr) auto; }
  .tracks .wf { display: block; grid-column: 3; grid-row: 1 / span 2; }
  .tracks .du { grid-column: 4; }
  .show { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .now-band { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); padding: 24px; align-items: center; }
  .ph-hero, .about-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
  .vlay { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 599px) {
  .list .row.pic { grid-template-columns: 104px minmax(0, 1fr); }
  .list .row.pic .thumb { width: 104px; }
  .list .row .x { display: none; }
  .pn { grid-template-columns: 1fr; }
  .pn a + a { text-align: start; }
  .tl li { grid-template-columns: 52px minmax(0, 1fr); padding-inline: 12px; }
  .tl .st { grid-column: 2; grid-row: auto; justify-self: start; }
  .plist button { grid-template-columns: 104px minmax(0, 1fr); }
}