/* =========================================================================
   zn-podcasts — پادکست‌های آموزشی (zbn-zn-podcasts) · طرح: 17-podcasts.dc.html
   وابسته به: zn-base.css
   ========================================================================= */

.znpd{position:relative;overflow:hidden;padding:clamp(56px,7vw,104px) 0;background:radial-gradient(940px 540px at 14% -6%,var(--zn-wash2),transparent 62%),var(--zn-bg1);border-top:1px solid rgba(var(--zn-line),.08);}
.znpd-wrap{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(18px,5vw,64px);}
.znpd-head{margin-bottom:clamp(26px,3.5vw,44px);}
.znpd-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,59,92,.1);border:1px solid rgba(255,59,92,.3);color:var(--zn-soft);border-radius:999px;padding:7px 15px;font-size:12px;font-weight:800;}
.znpd-title{margin:16px 0 6px;font-size:clamp(26px,3.4vw,42px);font-weight:900;line-height:1.5;background:linear-gradient(110deg,var(--zn-t1) 40%,var(--zn-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.znpd-lead{margin:0;max-width:52ch;font-size:14px;line-height:2;color:var(--zn-t5);}

.znpd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.znpd-card{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px;background:var(--zn-card);border:1px solid rgba(var(--zn-line),.14);border-radius:20px;box-shadow:var(--zn-cardsh);transition:transform .25s,box-shadow .25s,border-color .25s;}
.znpd-card:hover{transform:translateY(-4px);border-color:rgba(255,59,92,.34);}
.znpd-cover{position:relative;height:110px;border-radius:15px;overflow:hidden;background:var(--zn-img);}
.znpd-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.znpd-cover .zn-img-ph{width:100%;height:100%;}
.znpd-cover .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,10,24,.55),transparent);pointer-events:none;}
.znpd-body{display:flex;flex-direction:column;justify-content:center;}
.zn-scope .znpd-name{margin:0 0 6px;font-size:14.5px;font-weight:800;line-height:1.6;color:var(--zn-t1);}
.zn-scope .znpd-name a{color:inherit;}
.znpd-meta{font-size:11.5px;color:var(--zn-t6);}
.znpd-player{display:flex;align-items:center;gap:10px;margin-top:12px;}
/* ---------- دکمهٔ پخش (دقیقاً مطابق طرح مرجع) ----------
   هر دو آیکون در یک سلولِ گرید روی هم قرار می‌گیرند تا جابه‌جایی‌شان
   هیچ پرشی در چیدمان ایجاد نکند و دکمه همیشه دقیقاً گرد بماند. */
.zn-scope .znpd-play{width:var(--pd-btn,38px);height:var(--pd-btn,38px);padding:0;border:0;border-radius:50%;
  background:linear-gradient(135deg,var(--zn-crim),var(--zn-rose));color:#fff;cursor:pointer;
  display:grid;place-items:center;flex-shrink:0;line-height:0;
  box-shadow:0 0 18px var(--pd-glow,rgba(255,59,92,.4));transition:transform .15s,box-shadow .2s;}
.zn-scope .znpd-play:hover{transform:scale(1.06);}
/* بدون فایل صوتی: دکمه دیده می‌شود ولی غیرفعال است */
.zn-scope .znpd-play.is-empty{opacity:.55;cursor:default;}
.zn-scope .znpd-play.is-empty:hover{transform:none;}
.znpd-play svg{grid-area:1/1;width:var(--pd-ic,14px);height:var(--pd-ic,14px);display:block;fill:currentColor;transition:opacity .18s;}
.znpd-play .ic-pause{opacity:0;}
.znpd-play.is-playing .ic-play{opacity:0;}
.znpd-play.is-playing .ic-pause{opacity:1;}

/* ---------- نوار پیشرفت ----------
   بدون dir دستی: در چیدمان راست‌به‌چپ، پرشدن از سمت راست شروع می‌شود
   (همان رفتاری که در طرح مرجع و اسکرین‌شات دیده می‌شود). */
.znpd-bar{flex:1;height:var(--pd-bar,4px);border-radius:99px;background:var(--pd-bartrack,rgba(var(--zn-line),.18));overflow:hidden;cursor:pointer;}
.znpd-bar .fill{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--zn-rose),var(--zn-gold));transition:width .2s linear;}