/* ==========================================================================
   drpreetha.com — "Watch & learn" clinic reel (2026-09-27)
   page-designer: analyze -> archive_drawer (theme 0.82); inspire -> case-sheet-reel
   (film-strip rule), waiting-room-tv (bezel card), otoscope-play (ring button).
   Combined + adapted to the live paper/ink theme. Scoped to .theme-clinic-reel.
   ========================================================================== */
.theme-clinic-reel { --reel-bezel: #13302f; --reel-led: #5cc3cc; }
.theme-clinic-reel .vr-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 .35rem; }
.theme-clinic-reel .vr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1.5rem; }
.theme-clinic-reel .vr-head h2 { margin: 0; }
.theme-clinic-reel .vr-all { font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.theme-clinic-reel .vr-all:hover { text-decoration: underline; }
.theme-clinic-reel .vr-lead { color: var(--color-text-secondary); max-width: 640px; margin: .6rem 0 0; }
/* film-strip rule: sprocket holes above and below a thin ink line */
.theme-clinic-reel .vr-strip { height: 14px; margin: 1.1rem 0 1.5rem; opacity: .55;
  background:
    repeating-linear-gradient(to right, var(--ink) 0 6px, transparent 6px 14px) top / 100% 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--ink) 0 6px, transparent 6px 14px) bottom / 100% 3px no-repeat; }
.theme-clinic-reel .vr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 272px)); justify-content: space-evenly; gap: 2rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.theme-clinic-reel .vr-card { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
/* waiting-room TV bezel */
.theme-clinic-reel .vr-tv { position: relative; background: var(--reel-bezel); border-radius: 18px; padding: 10px 10px 22px; box-shadow: 0 24px 44px -26px rgba(19, 48, 47, .55); }
.theme-clinic-reel .vr-tv::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--reel-led); opacity: .45; transition: opacity .2s, box-shadow .2s; }
.theme-clinic-reel .vr-card.is-playing .vr-tv::after { opacity: 1; box-shadow: 0 0 8px var(--reel-led); }
.theme-clinic-reel .vr-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #0c1d1c; }
.theme-clinic-reel .vr-screen img, .theme-clinic-reel .vr-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-clinic-reel .vr-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: linear-gradient(180deg, rgba(12, 29, 28, 0) 55%, rgba(12, 29, 28, .55)); cursor: pointer; display: grid; place-items: center; color: #fffcf6; }
/* otoscope speculum ring: outer ring, inner lens ring, play wedge */
.theme-clinic-reel .vr-ring { position: relative; width: 68px; height: 68px; border-radius: 50%; border: 3px solid #fffcf6; background: rgba(23, 112, 122, .78); box-shadow: 0 0 0 6px rgba(255, 252, 246, .22), 0 8px 18px rgba(0, 0, 0, .35); display: grid; place-items: center; transition: transform .2s, box-shadow .2s; }
.theme-clinic-reel .vr-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 1.5px dashed rgba(255, 252, 246, .6); }
.theme-clinic-reel .vr-ring::after { content: ''; width: 20px; height: 22px; margin-left: 5px; background: #fffcf6; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.theme-clinic-reel .vr-play:hover .vr-ring, .theme-clinic-reel .vr-play:focus-visible .vr-ring { transform: scale(1.07); box-shadow: 0 0 0 9px rgba(255, 252, 246, .28), 0 10px 22px rgba(0, 0, 0, .4); }
.theme-clinic-reel .vr-play:focus-visible { outline: 3px solid var(--reel-led); outline-offset: -3px; }
.theme-clinic-reel .vr-dur { position: absolute; right: 10px; top: 10px; font-family: var(--mono); font-size: .72rem; background: rgba(12, 29, 28, .78); color: #fffcf6; padding: 2px 7px; border-radius: 5px; }
/* case-sheet tag + copy */
.theme-clinic-reel .vr-tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.theme-clinic-reel .vr-tag b { color: var(--brick); font-weight: 700; }
.theme-clinic-reel .vr-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0; color: var(--color-text); }
.theme-clinic-reel .vr-card p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--color-text-secondary); }
.theme-clinic-reel .vr-card .vr-ml { font-size: .9rem; color: var(--ink-2); }
.theme-clinic-reel .vr-src { font-size: .82rem; }
.theme-clinic-reel .vr-src a { color: var(--color-primary); }
.theme-clinic-reel .vr-note { margin: 1.4rem 0 0; font-size: .85rem; color: var(--color-text-secondary); border-top: 1px dashed var(--color-border); padding-top: .9rem; }
/* phones: one-hand swipe reel instead of three tall stacked screens */
@media (max-width: 760px) {
  .theme-clinic-reel .vr-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: .6rem; margin-right: -1.1rem; padding-right: 1.1rem; overscroll-behavior-x: contain; }
  .theme-clinic-reel .vr-card { scroll-snap-align: start; }
  .theme-clinic-reel .vr-swipe { display: block; }
}
.theme-clinic-reel .vr-swipe { display: none; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: .4rem 0 0; }
@media (min-width: 761px) and (max-width: 1100px) { .theme-clinic-reel .vr-grid { gap: 1.5rem 1rem; } }
.dp-home #videos { background: var(--color-surface); border: 1px solid var(--color-card-border); border-radius: 20px; box-shadow: var(--v3-shadow); padding: 2.25rem 2.25rem 1.75rem; }
@media (max-width: 600px) { .dp-home #videos { padding: 1.5rem 1.1rem 1.25rem; border-radius: 16px; } }
@media (prefers-color-scheme: dark) { .theme-clinic-reel { --reel-bezel: #070b0a; } .theme-clinic-reel .vr-strip { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .theme-clinic-reel .vr-ring, .theme-clinic-reel .vr-tv::after { transition: none; } .theme-clinic-reel .vr-play:hover .vr-ring { transform: none; } }