/* r13-reels: Clinic videos row (home) and treatment-page Videos strips; drawn by /assets/reels.js.
   Phones: a scroll-snap row; from 768px: a grid. The play mark is CSS (never mirrored in RTL). */
.reel-row{display:grid;gap:var(--s3);grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0;padding:0 0 var(--s1);list-style:none}
.reel-row>li{scroll-snap-align:start;min-width:0}
@media(min-width:768px){.reel-row{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible}}
.reel-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);color:var(--bone);text-decoration:none}
.reel-card:hover{border-color:var(--acc-b)}
.reel-card:focus-visible{outline:2px solid var(--acc-a);outline-offset:2px}
.reel-thumb{position:relative;display:block;aspect-ratio:3/4;background:var(--ground);overflow:hidden}
.reel-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.reel-play{position:absolute;inset-block-end:8px;inset-inline-start:8px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--scrim);border:1px solid var(--acc-b);color:var(--bone)}
.reel-play::before{content:"";width:12px;height:14px;translate:1.5px 0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.reel-cap{display:block;padding:var(--s2) var(--s2) 0;font-size:var(--fs-small);line-height:20px;unicode-bidi:plaintext;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.reel-date{display:block;padding:0 var(--s2) var(--s2);color:var(--muted);font-size:var(--fs-small);line-height:20px}
[dir="rtl"] .reel-cap{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:var(--fs-body);line-height:2}
.reel-row>li[hidden]{display:none}
.reels-more{margin:0}
.reels[data-reels="all"] .reel-row{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
@media(min-width:768px){.reels[data-reels="all"] .reel-row{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}