/* ===== بەشی چیرۆکەکان — شێوازی یوتوب ===== */

.stories-view{
  /* ------------------------------------------------------------------
     بۆشایی سەرەوە — دەتوانیت لێرەوە بیگۆڕیت
     --st-clear : بەرزی سەردێڕی شناوی ئەپ (١٦px سەرەوە + ~٥٨px بەرزی)
     --st-gap   : بۆشایی زیادە لە نێوان سەردێڕ و ناوەڕۆک
     ------------------------------------------------------------------ */
  --st-clear:calc(74px + env(safe-area-inset-top, 0px));
  --st-gap:2cm;

  display:none;
  padding:0 0 calc(120px + env(safe-area-inset-bottom, 0px));
  min-height:100vh;
  background:var(--stone, #F4F4F0);
}
.stories-view.active{ display:block; }

/* ---------- لیست ---------- */
.st-feed{
  display:flex;
  flex-direction:column;
  gap:24px;
  /* یەکەم وێنە بە تەواوی --st-gap دوور دەبێت لە سەردێڕی ئەپ */
  padding:calc(var(--st-clear) + var(--st-gap)) 16px 0;
  max-width:620px;
  margin:0 auto;
}

/* ---------- کارت ---------- */
.st-card{
  display:block;
  cursor:pointer;
  animation:st-in .45s cubic-bezier(.32,.72,0,1) both;
}
@keyframes st-in{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

.st-thumb{
  position:relative;
  width:100%;
  /* یەدەگ بۆ Safari ی کۆنتر (iOS ١٤ و خوارتر) کە aspect-ratio پشتگیری ناکات.
     بەبێ ئەمە بەرزی دەبووە سفر و وێنەکان بە تەواوی دەرنەدەکەوتن. */
  padding-top:56.25%;            /* ١٦:٩ */
  border-radius:14px;
  overflow:hidden;
  background:#E7EAE6;
  margin-bottom:11px;
}
@supports (aspect-ratio: 16 / 9){
  .st-thumb{
    padding-top:0;
    aspect-ratio:16/9;
  }
}
.st-thumb img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.st-card:active .st-thumb{ transform:scale(.99); }
.st-thumb{ transition:transform .18s ease; }

.st-thumb-blank{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(36,64,47,.18);
}
.st-thumb-blank svg{ width:34px;height:34px;fill:currentColor; }


/* ---------- زانیاری ---------- */
.st-meta{
  display:flex;
  align-items:flex-start;
  gap:11px;
}

.st-ava{
  width:38px;height:38px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  background:#EAF1EC;
  display:grid;
  place-items:center;
  color:#3E7A55;
  font-size:16px;
  font-weight:700;
}
.st-ava img{ width:100%;height:100%;object-fit:cover; }

.st-text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.st-title{
  margin:0;
  font-size:14.5px;
  font-weight:700;
  line-height:1.6;
  color:#1E3226;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}

.st-author{
  font-size:12.5px;
  color:#8C9A91;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.st-time{
  font-size:11.5px;
  color:#A3B0A6;
}
.st-dot{ margin:0 5px; opacity:.6; }

/* ---------- دۆخەکان ---------- */
.st-loading,
.st-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  padding:56px 24px;
  text-align:center;
  color:#8C9A91;
  font-size:13px;
}
.st-spin{
  width:26px;height:26px;
  border:2.5px solid rgba(62,122,85,.18);
  border-top-color:#3E7A55;
  border-radius:50%;
  animation:st-spin .8s linear infinite;
}
.st-empty svg{ width:44px;height:44px;fill:rgba(36,64,47,.16); }
.st-empty b{
  color:#1E3226;
  font-size:14.5px;
  font-weight:700;
}
.st-retry{
  margin-top:4px;
  padding:9px 20px;
  border:0;
  border-radius:11px;
  background:#3E7A55;
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

/* ---------- شێوەی سکێلێتن ---------- */
.st-skel .st-thumb,
.st-skel .st-ava,
.st-skel .st-line{
  background:linear-gradient(100deg, #E9ECE8 30%, #F3F5F1 50%, #E9ECE8 70%);
  background-size:220% 100%;
  animation:st-shine 1.3s ease-in-out infinite;
}
@keyframes st-shine{
  from{ background-position:180% 0; }
  to  { background-position:-40% 0; }
}
.st-line{
  height:11px;
  border-radius:6px;
  margin-bottom:7px;
}
.st-line.w1{ width:92%; }
.st-line.w2{ width:56%; }
.st-line.w3{ width:38%; height:9px; }

/* ---------- خوێندنەوەی چیرۆک ---------- */
.st-reader{
  position:fixed;
  inset:0;
  z-index:120;
  background:#FCFCFA;
  transform:translateX(-100%);
  visibility:hidden;
  transition:transform .42s cubic-bezier(.32,.72,0,1), visibility .42s;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.st-reader.open{
  transform:none;
  visibility:visible;
}

.st-reader-bar{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
  background:rgba(252,252,250,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(36,64,47,.08);
}
.st-back{
  width:36px;height:36px;
  flex:none;
  display:grid;
  place-items:center;
  border:0;
  border-radius:11px;
  background:rgba(36,64,47,.06);
  color:#1E3226;
  cursor:pointer;
  padding:0;
}
.st-back svg{ width:19px;height:19px;fill:currentColor; }
.st-reader-title{
  flex:1;
  min-width:0;
  font-size:14px;
  font-weight:700;
  color:#1E3226;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.st-reader-body{
  padding:0 0 calc(40px + env(safe-area-inset-bottom, 0px));
  max-width:620px;
  margin:0 auto;
}

.st-hero-box{
  position:relative;
  width:100%;
  padding-top:56.25%;            /* ١٦:٩ — یەدەگ بۆ Safari ی کۆنتر */
  background:#E7EAE6;
  overflow:hidden;
}
@supports (aspect-ratio: 16 / 9){
  .st-hero-box{
    padding-top:0;
    aspect-ratio:16/9;
  }
}
.st-hero{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

.st-article{ padding:20px 18px 0; }

.st-article h1{
  margin:0 0 14px;
  font-size:20px;
  font-weight:700;
  line-height:1.65;
  color:#1E3226;
}

.st-byline{
  display:flex;
  align-items:center;
  gap:11px;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(36,64,47,.09);
}
.st-byline .st-ava{ width:42px;height:42px;font-size:17px; }
.st-byline-txt{
  display:flex;
  flex-direction:column;
  line-height:1.6;
  min-width:0;
}
.st-byline-name{
  font-size:13.5px;
  font-weight:700;
  color:#1E3226;
}
.st-byline-sub{
  font-size:11.5px;
  color:#8C9A91;
}

.st-lead{
  font-size:14.5px;
  line-height:2;
  color:#5B6D61;
  padding:14px 16px;
  margin-bottom:18px;
  border-radius:12px;
  background:#F1F3F0;
  border-inline-start:3px solid #3E7A55;
}

.st-body{
  font-size:15px;
  line-height:2.15;
  color:#2C4033;
}
.st-body p{ margin:0 0 16px; }

/* ---------- شاشەی گەورە ---------- */
@media (min-width:700px){
  .st-feed{ padding-inline:20px; }
  .st-title{ font-size:15.5px; }
}