/* 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) 50% 0/cover no-repeat;overflow:hidden}
.reel-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.reel-thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:18%;min-height:52px;background:linear-gradient(to top,rgba(20,16,12,.88) 0,rgba(20,16,12,.88) 55%,rgba(20,16,12,0));pointer-events:none}
/* G5-D r3: the same spot and look as the home feed's play mark: bottom inline-start, 12px in, 28px, fixed colours */
.reel-play{position:absolute;z-index:1;inset-block-end:12px;inset-inline-start:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1b1712;border:1.5px solid #f4efe6;color:#f4efe6}
.reel-play::before{content:"";width:10px;height:12px;translate:1.5px 0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
/* three-line clamp (G5 merge4: no ellipsis on the 375 px titles): the clip edge is the padding box, so padding on the clamped box let a third-line fragment paint in the bottom padding;
   the box is now exactly 3 lines (60px) with its air from a margin-free border-box height, and overflow:clip + zero bottom padding hides line 4 */
.reel-cap{display:block;padding:var(--s2) var(--s2) 0;margin-block-end:var(--s2);box-sizing:content-box;max-height:60px;font-size:var(--fs-small);line-height:20px;unicode-bidi:plaintext;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* P1-A: .reel-date is gone with the post dates off the video cards (build_pages/reels.js); its bottom padding
   moved into .reel-cap above so the caption keeps its air without the date line */
[dir="rtl"] .reel-cap{display:block;-webkit-line-clamp:unset;overflow:visible;max-height:none;padding-block-end:0;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))}}
/* G5 merge5 (judged services 3): the Nastaliq first letter overhangs its line box on the right, leaving ~2px of ink to the card border (EN 8px): extra start padding in RTL */
[dir="rtl"] .reel-cap{padding-inline:calc(var(--s2) + 4px) var(--s2)}
/* G5 merge8 (judged videos 3): the /videos/ grid ends with room for the fixed chat launcher (48 px + 18 px inset + 16 px), so it never sits on the last card */
.reels[data-reels="all"] .reel-row{padding-block-end:82px}