/* BSSI · web-v2 · بخشِ «media» — منتقل‌شده از resources/interpretation-content/BSSI/sections (RULES §۷.۸):
   قاعده‌های بلااستفاده‌ی پیش‌نمایش حذف، فونت = var(--font-family)، keyframeها با پیشوندِ bssi- */
.bssi-media,
.bssi-media *{margin:0;padding:0;box-sizing:border-box}
.bssi-media{font-family:var(--font-family);color:#343A40;}
.bssi-media .section-main-title{margin-bottom:24px;padding-top:30px}
.bssi-media .section-main-title h2{color:#343A40;font-size:28px;font-weight:800;line-height:38px;border-radius:8px 0 0 8px;background:#E6FCF5;padding:0 5px 0 12px;position:relative;display:inline-block;margin-bottom:18px}
.bssi-media .section-main-title h2>div{position:absolute;top:-26px;right:0}
.bssi-media .section-main-title h2 div[data-title]::before{content:attr(data-title);color:#12B886;font-size:17px;font-weight:700;background-color:#E6FCF5;padding:0 6px;border-radius:8px}
.bssi-media .section-main-title p{color:#343A40;text-align:justify;font-size:18px;font-weight:400;line-height:34px}
.bssi-media .group-divider{display:flex;align-items:center;gap:14px;margin:36px 0 0}
.bssi-media .group-divider__title{font-size:22px;font-weight:900;color:#343A40;white-space:nowrap}
.bssi-media .group-divider__line{flex:1;height:1px;background:#D1D5DB}
.bssi-media .group-divider__desc{color:#343A40;text-align:justify;font-size:18px;font-weight:400;line-height:34px;margin:8px 0 0}
.bssi-media .runtime-error{display:none;margin:20px 0;padding:14px;border:1px solid #DC2626;border-radius:12px;color:#991B1B;background:#FFF;font-size:13px;font-weight:700;direction:ltr;text-align:left}
.bssi-media .md-banner{border-radius:20px;overflow:hidden;background:#F8FAFC;margin-bottom:6px}
.bssi-media .md-banner img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover}
.bssi-media .md-body{container-type:inline-size}
.bssi-media .md-intro{margin-top:14px;font-size:17px;line-height:33px;color:#343A40;text-align:justify}
.bssi-media .md-book{margin-top:18px;border-radius:24px;background:#fff;border:1px solid #E5EEF0;box-shadow:0 6px 20px rgba(15,23,42,.04);padding:22px}
.bssi-media .md-book__main{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;align-items:center}
.bssi-media .md-cover{position:relative;width:140px;height:200px;border-radius:10px 14px 14px 10px;background:linear-gradient(150deg,#12B886,#0B7A57);color:#fff;display:flex;align-items:center;justify-content:center;padding:18px 14px 18px 22px;text-align:center;font-size:17px;font-weight:900;line-height:1.6;box-shadow:0 12px 24px rgba(11,122,87,.22)}
.bssi-media .md-cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;border-radius:10px 0 0 10px;background:rgba(0,0,0,.16)}
.bssi-media .md-cover::after{content:'';position:absolute;left:18px;right:14px;bottom:18px;height:2px;background:rgba(255,255,255,.4)}
.bssi-media .md-book__t{font-size:21px;font-weight:900;color:#1E293B;line-height:1.5}
.bssi-media .md-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-top:12px}
.bssi-media .md-meta div{display:flex;gap:8px;align-items:baseline;padding-bottom:6px;border-bottom:1px dashed #E5EEF0;font-size:14px;line-height:24px}
.bssi-media .md-meta dt{font-weight:900;color:#0B7A57;white-space:nowrap}
.bssi-media .md-meta dd{color:#334155}
.bssi-media .md-meta .md-meta__ltr{flex-wrap:wrap;row-gap:0}
.bssi-media .md-meta__ltr dd{min-width:0;max-width:100%}
.bssi-media .md-ltr{direction:ltr;unicode-bidi:isolate;text-align:right}
.bssi-media .md-book__about{margin-top:18px;font-size:15px;line-height:29px;color:#0B4F3C;text-align:justify}
.bssi-media .md-book__why{margin-top:6px;font-size:15px;line-height:29px;color:#475569;text-align:justify}
.bssi-media .md-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid #F1F5F9}
.bssi-media .md-how__t{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900;color:#1E293B;line-height:1.6}
.bssi-media .md-how__n{width:26px;height:26px;border-radius:50%;background:#E6FCF5;color:#0B7A57;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bssi-media .md-how__p{margin-top:4px;font-size:14px;line-height:26px;color:#475569;text-align:justify}
.bssi-media .md-films{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.bssi-media .md-film{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;border-radius:24px;background:#fff;border:1px solid #E5EEF0;box-shadow:0 6px 20px rgba(15,23,42,.04);padding:20px 22px}
.bssi-media .md-poster{position:relative;width:96px;height:134px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#F0FBF7,#FFF8E6);box-shadow:0 8px 16px rgba(15,23,42,.1)}
.bssi-media .md-poster i{position:absolute;border-radius:50%}
.bssi-media .md-poster i:nth-child(1){width:40px;height:40px;background:#12B886;top:20px;right:12px}
.bssi-media .md-poster i:nth-child(2){width:28px;height:28px;background:#7FDDBC;top:58px;left:12px}
.bssi-media .md-poster i:nth-child(3){width:22px;height:22px;background:#FCC419;bottom:18px;right:20px}
.bssi-media .md-poster i:nth-child(4){width:15px;height:15px;background:#A9E9D2;bottom:36px;left:36px}
.bssi-media .md-poster--2 i:nth-child(4){width:24px;height:24px;background:#FFD8A8}
.bssi-media .md-film__t{font-size:19px;font-weight:900;color:#1E293B;line-height:1.5}
.bssi-media .md-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.bssi-media .md-facts div{border-radius:12px;background:#F8FAFC;border:1px solid #EEF2F6;padding:8px 12px}
.bssi-media .md-facts dt{font-size:12px;font-weight:800;color:#64748B;line-height:20px}
.bssi-media .md-facts dd{font-size:14.5px;font-weight:800;color:#1E293B;line-height:24px}
.bssi-media .md-facts .md-ltr{direction:ltr;unicode-bidi:isolate;text-align:right}
.bssi-media .md-film__s{margin-top:10px;font-size:15px;line-height:29px;color:#475569;text-align:justify}
.bssi-media .md-film__you{margin-top:12px;border-radius:16px;background:#F4FFFB;border:1px solid #D3F4E8;padding:12px 16px;font-size:15px;line-height:29px;color:#0B4F3C;text-align:justify}
.bssi-media .md-film__you b{display:block;font-size:13px;font-weight:900;color:#0B7A57;line-height:22px}
.bssi-media .md-talk{margin-top:16px;border-radius:24px;background:#F6FAF9;border:1px solid #E3EFEA;padding:18px 20px}
.bssi-media .md-talk__t{font-size:16.5px;font-weight:900;color:#1E293B;line-height:1.6}
.bssi-media .md-talk__p{margin-top:4px;font-size:15px;line-height:29px;color:#475569;text-align:justify}
.bssi-media .md-talk ol{list-style:none;counter-reset:q;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.bssi-media .md-talk li{counter-increment:q;position:relative;border-radius:16px;background:#fff;border:1px solid #E3EFEA;padding:12px 14px;font-size:14.5px;line-height:27px;color:#1E293B;font-weight:700}
.bssi-media .md-talk li::before{content:'«'}
.bssi-media .md-talk li::after{content:'»'}
.bssi-media .md-closing{margin-top:22px;border-radius:16px;background:#F4FFFB;border:1px solid #D3F4E8;padding:16px 20px;font-size:16px;line-height:31px;color:#0B4F3C;text-align:justify}
@container (max-width:680px){
.bssi-media .md-how{grid-template-columns:1fr;gap:10px}
.bssi-media .md-talk ol{grid-template-columns:1fr}
}
@container (max-width:720px){
.bssi-media .md-book__main{grid-template-columns:1fr;gap:16px;justify-items:center}
.bssi-media .md-book__main>div:last-child{justify-self:stretch}
.bssi-media .md-book__t{text-align:center}
}
@container (max-width:560px){
.bssi-media .md-book{padding:18px 16px}
.bssi-media .md-cover{width:120px;height:172px;font-size:15px}
.bssi-media .md-meta{grid-template-columns:1fr}
.bssi-media .md-meta .md-meta__ltr{flex-direction:column;align-items:stretch;gap:2px}
.bssi-media .md-film{grid-template-columns:1fr;gap:12px;padding:18px 16px}
.bssi-media .md-poster{justify-self:center}
.bssi-media .md-film__t{text-align:center}
}
@container (min-width:561px){
.bssi-media .md-film{grid-template-columns:80px minmax(0,1fr);grid-template-areas:"p t" "p f" "s s" "y y";column-gap:18px;row-gap:0}
.bssi-media .md-film>div{display:contents}
.bssi-media .md-poster{grid-area:p;align-self:center;width:80px;height:112px}
.bssi-media .md-film__t{grid-area:t;align-self:end}
.bssi-media .md-facts{grid-area:f;align-self:start}
.bssi-media .md-film__s{grid-area:s;margin-top:14px}
.bssi-media .md-film__you{grid-area:y}
}
@container (max-width:400px){
.bssi-media .md-facts{grid-template-columns:1fr;gap:6px}
.bssi-media .md-facts div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 12px}
}
@media(max-width:768px){
.bssi-media .section-main-title p,
.bssi-media .group-divider__desc{font-size:16px;line-height:30px}
.bssi-media .group-divider__title{font-size:18px}
.bssi-media .md-banner img{aspect-ratio:5/2}
}
@media(max-width:576px){
.bssi-media .section-main-title h2{font-size:22px;line-height:30px}
.bssi-media .md-banner img{aspect-ratio:2/1}
.bssi-media .md-intro{font-size:16px;line-height:30px}
.bssi-media .md-closing{font-size:15px;line-height:28px}
}