/* Matches the live site's warm cream / brass design tokens. */
.clips { width:100%; margin:2px 0 30px; padding-top:22px; border-top:1px solid var(--border); }
.clips [hidden] { display:none!important; }
.clips-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.clips h2 { margin:0; font-size:12px; line-height:1.5; letter-spacing:.12em; font-weight:600; text-transform:uppercase; color:var(--gold-text); }
.clips-channel { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--muted-text); font-size:12px; text-decoration:none; }
.clips-channel svg { width:18px; height:18px; fill:#FF0000; flex:none; }
.clips-tabs { display:flex; gap:4px; width:fit-content; padding:4px; margin-bottom:12px; border:1px solid var(--border); border-radius:9px; background:color-mix(in srgb,var(--surface) 65%,transparent); }
.clips-tab { appearance:none; border:0; background:transparent; border-radius:6px; padding:9px 13px; min-height:44px; color:var(--muted-text); font:500 13px var(--font-ui); cursor:pointer; transition:background 180ms ease,color 180ms ease; }
.clips-tab[aria-selected="true"] { background:var(--text); color:var(--bg); }
.clips-tab:focus-visible,.clip-card:focus-visible,.clip-close:focus-visible { outline:2px solid var(--gold-text); outline-offset:3px; }
.clips-note { margin:0 0 14px; color:var(--muted-text); font-size:12px; line-height:1.5; }
.clips-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 20px)/3); gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--border) transparent; padding:3px 2px 12px; }
.clip-card { display:block; width:100%; padding:0; text-align:left; color:var(--text); text-decoration:none; scroll-snap-align:start; border-radius:9px; }
.clip-poster { display:block; position:relative; width:100%; aspect-ratio:9/16; overflow:hidden; border:1px solid var(--border); border-radius:9px; background:var(--surface); box-shadow:0 3px 12px var(--shadow); }
.clip-poster img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 220ms var(--ease); }
.clip-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(196,162,101,.8); border-radius:50%; background:rgba(10,10,10,.8); box-shadow:0 2px 12px #0005; }
.clip-play svg { width:17px; height:17px; fill:#F2EDE7; margin-left:2px; }
.clip-duration { position:absolute; bottom:8px; right:7px; padding:2px 5px; border-radius:3px; background:rgba(10,10,10,.85); color:#F2EDE7; font:500 11px var(--font-data); }
.clip-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:9px; font-size:13px; line-height:1.45; font-weight:600; }
.clip-meta { display:block; margin-top:5px; font-size:11px; line-height:1.5; color:var(--muted-text); }
.clips-status { padding:22px 18px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface) 70%,transparent); color:var(--muted-text); font-size:14px; line-height:1.7; }
.clips-status p { margin:0; }
.clips-status a { display:inline-flex; align-items:center; min-height:44px; color:var(--gold-text); font-weight:600; text-underline-offset:4px; }
.clip-dialog { position:fixed; margin:auto; padding:16px; width:min(380px,calc(100vw - 24px)); max-width:none; max-height:calc(100dvh - 24px); overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--text); box-shadow:0 20px 80px #0005; }
.clip-dialog::backdrop { background:rgba(10,10,10,.78); backdrop-filter:blur(5px); }
.clip-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.clip-dialog-label { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-text); }
.clip-close { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--text); font-size:24px; cursor:pointer; }
.clip-player { width:100%; min-width:200px; max-width:340px; margin-inline:auto; aspect-ratio:9/16; background:#000; }
.clip-player iframe { display:block; width:100%; height:100%; border:0; }
.clip-dialog h3 { margin:14px 0 5px; font-size:15px; font-weight:600; line-height:1.5; }
.clip-original { display:inline-flex; align-items:center; min-height:44px; color:var(--gold-text); font-size:13px; text-underline-offset:4px; }
body.clip-open { overflow:hidden; }
@media(max-height:800px) { .clip-player { max-width:max(200px,calc((100dvh - 225px)*.5625)); } }
@media(max-width:440px) { .clips-track { grid-auto-columns:44%; gap:12px; } .clip-title { font-size:14px; } .clip-meta { font-size:12px; } }
@media(hover:hover) { .clip-card:hover .clip-poster img { transform:scale(1.035); } .clip-card:hover .clip-poster { border-color:var(--gold); } .clips-channel:hover { color:var(--text); } }
@media(prefers-reduced-motion:reduce) { .clips * { transition:none!important; scroll-behavior:auto!important; } }