/* therapy-clips.css — صفحهٔ «کلیپ درمانی» (v1.162.8). فقط از متغیرهای style.css استفاده می‌کند. */
.tc-section{ padding:28px 0 56px; }
.tc-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.tc-tab{
  font:inherit; font-size:.92rem; cursor:pointer; padding:9px 16px; border-radius:999px;
  background:var(--surface); color:var(--ink-soft); border:1px solid var(--line);
  display:inline-flex; align-items:center; gap:8px; transition:background .2s,color .2s,border-color .2s;
}
.tc-tab:hover{ border-color:var(--sage); color:var(--primary); }
.tc-tab.is-active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.tc-count{ font-size:.78rem; background:rgba(0,0,0,.08); border-radius:999px; padding:1px 8px; }
.tc-tab.is-active .tc-count{ background:rgba(255,255,255,.22); }
.tc-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:34px 22px; margin-bottom:30px; }
.tc-group{ padding:0; min-width:0; }
.tc-group:has(.video-card:nth-child(2)){ grid-column:1 / -1; }
.tc-group[hidden]{ display:none; }
.tc-group-title{ font-size:1.12rem; color:var(--ink); margin-bottom:16px; padding-inline-start:12px; border-inline-start:4px solid var(--sage); line-height:1.6; }
.tc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:22px; }

.video-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.video-wrapper{
  position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#0f172a; border-radius:12px 12px 0 0;
}
@supports not (aspect-ratio: 16 / 9){
  .video-wrapper{ height:0; padding-top:56.25%; }
}
.video-wrapper iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }
.tc-facade{
  position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer; padding:0;
  background:#0f172a center/cover no-repeat;
  background-image:linear-gradient(135deg,#176B17 0%,#228B22 55%,#5FA85F 100%);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.tc-facade[style*="url("]{ background-size:cover; }
.tc-facade::before{ content:""; position:absolute; inset:0; background:rgba(8,20,8,.28); transition:background .2s; }
.tc-facade:hover::before{ background:rgba(8,20,8,.12); }
.tc-play{
  position:relative; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.95);
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.3); transition:transform .2s;
}
.tc-facade:hover .tc-play, .tc-facade:focus-visible .tc-play{ transform:scale(1.08); }
.tc-play svg{ width:28px; height:28px; fill:var(--primary-2); margin-inline-start:-3px; }
.tc-facade:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.tc-facade-cat{
  position:absolute; inset-inline:12px; bottom:10px; font-size:.78rem; line-height:1.5; text-align:start;
  opacity:.92; text-shadow:0 1px 3px rgba(0,0,0,.5);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.tc-noscript{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:#0f172a; }

.video-info{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.video-info .badge{
  align-self:flex-start; font-size:.76rem; line-height:1.6; padding:3px 10px; border-radius:999px;
  background:var(--primary-tint); color:var(--primary-2); border:1px solid var(--line);
}
.video-info h3{ font-size:1.02rem; line-height:1.8; color:var(--ink); }
.video-info p{ font-size:.92rem; line-height:2; color:var(--ink-soft); }
.tc-aparat-link{ margin-top:auto; font-size:.86rem; color:var(--primary); }
.tc-aparat-link:hover{ text-decoration:underline; }

.tc-note{ margin-top:8px; padding:16px 18px; border-radius:var(--radius-sm); background:var(--sand); color:var(--ink-soft); font-size:.9rem; line-height:2; border:1px solid var(--line); }
.tc-note strong{ color:var(--ink); }
.tc-cta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:600px){
  .tc-tab{ font-size:.85rem; padding:8px 13px; }
  .tc-play{ width:56px; height:56px; }
}
@media (prefers-reduced-motion:reduce){ .tc-play,.tc-tab{ transition:none; } }
.site-header .main-nav a.active{ color:#fff; font-weight:700; }