/* DF Trending Today 2.0 — Premium Edition */
.dft-wrap { --dft-fg:#f4f7fb; --dft-muted:#9aa7bc; --dft-line:rgba(255,255,255,.09); --dft-glass:rgba(255,255,255,.045); display:block; min-width:0; max-width:100%; margin:0 0 26px; font-family:inherit; text-align:start; }
.dft-wrap *, .dft-wrap *::before, .dft-wrap *::after { box-sizing:border-box; }
.dft-wrap .dft-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Row shell ---------- */
.dft-wrap .dft { position:relative; min-width:0; max-width:100%; margin:0 0 18px; padding:22px 22px 18px; border-radius:20px; border:1px solid var(--dft-line); color:var(--dft-fg); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016) 45%, rgba(255,255,255,.032)); overflow:hidden; }
.dft-wrap .dft:last-child { margin-bottom:0; }
.dft-wrap .dft::before { content:''; position:absolute; top:-70px; left:-40px; width:520px; height:220px; background:radial-gradient(closest-side, var(--dft-acc-glow), transparent 72%); pointer-events:none; }
.dft-wrap .dft::after { content:''; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, var(--dft-acc-soft), transparent); pointer-events:none; }

/* ---------- Row header ---------- */
.dft-wrap .dft-top { position:relative; display:flex; align-items:flex-end; gap:14px; margin-bottom:16px; }
.dft-wrap .dft-head { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dft-wrap .dft-eyebrow { color:var(--dft-acc); font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; line-height:1.2; }
.dft-wrap .dft h2 { margin:0; padding:0; border:0; color:var(--dft-fg); font-size:20px; font-weight:800; line-height:1.25; letter-spacing:.012em; overflow-wrap:anywhere; }
.dft-wrap .dft-rule { flex:1 1 auto; height:1px; margin:0 2px 8px; background:linear-gradient(90deg, var(--dft-acc-soft), rgba(255,255,255,.07) 55%, transparent 92%); }
.dft-wrap .dft-controls { display:flex; gap:8px; flex-shrink:0; }
.dft-wrap .dft-controls[hidden] { display:none; }
.dft-wrap .dft-controls button { width:34px; height:34px; display:grid; place-items:center; padding:0 0 3px; border:1px solid var(--dft-line); border-radius:50%; color:var(--dft-fg); background:rgba(255,255,255,.04); font:26px/1 Arial,sans-serif; cursor:pointer; transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease; }
.dft-wrap .dft-controls button:hover { border-color:var(--dft-acc-soft); color:var(--dft-acc); background:var(--dft-acc-glow); transform:translateY(-1px); }
.dft-wrap .dft:dir(rtl) .dft-controls button { transform:scaleX(-1); }

/* ---------- Track ---------- */
.dft-wrap .dft-track { display:flex; gap:16px; list-style:none; margin:0 -4px; padding:4px 4px 12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; }
.dft-wrap .dft-track::-webkit-scrollbar { display:none; }
.dft-wrap .dft-item { display:block; flex:0 0 282px; min-width:0; margin:0; padding:0; scroll-snap-align:start; }

/* ---------- Card ---------- */
.dft-wrap a.dft-card { position:relative; display:flex; flex-direction:column; height:100%; color:var(--dft-fg); text-decoration:none; border:1px solid var(--dft-line); background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 58%, rgba(255,255,255,.028)); border-radius:16px; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease; }
.dft-wrap a.dft-card::after { content:''; position:absolute; inset:0; z-index:3; background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.085) 50%, transparent 58%); transform:translateX(-130%); pointer-events:none; transition:transform .9s ease; }
.dft-wrap a.dft-card:hover { transform:translateY(-5px); border-color:var(--dft-acc-soft); box-shadow:0 22px 44px -18px rgba(0,0,0,.72), 0 0 26px -6px var(--dft-acc-glow); }
.dft-wrap a.dft-card:hover::after { transform:translateX(130%); }

/* ---------- Artwork ---------- */
.dft-wrap .dft-art { display:block; position:relative; isolation:isolate; width:100%; aspect-ratio:16/9; overflow:hidden; background:#0d1420; }
.dft-wrap .dft-art::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(4,7,12,.6), rgba(4,7,12,0) 46%); pointer-events:none; }
.dft-wrap .dft-art img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; border:0; filter:saturate(.98); transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .6s ease; }
.dft-wrap a.dft-card:hover .dft-art img { transform:scale(1.07); filter:saturate(1.1); }

/* Placeholder artwork */
.dft-wrap .dft-ph { position:absolute; inset:0; display:block; background:radial-gradient(130% 120% at 85% -10%, var(--dft-acc-soft), transparent 55%), radial-gradient(120% 110% at -10% 115%, var(--dft-acc-glow), transparent 52%), linear-gradient(160deg, #121a28, #0a0f18); }
.dft-wrap .dft-ph::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 14px); }
.dft-wrap .dft-ph-letter { position:absolute; inset:0; display:grid; place-items:center; color:var(--dft-acc); opacity:.3; font-size:66px; font-weight:800; letter-spacing:-.02em; }
.dft-wrap .dft-ph-title { position:absolute; left:18px; right:18px; bottom:14px; z-index:1; color:#fff; font-size:18px; font-weight:800; line-height:1.25; text-wrap:balance; overflow-wrap:anywhere; text-shadow:0 2px 14px rgba(0,0,0,.5); }

/* ---------- Badge / body ---------- */
.dft-wrap .dft-badge { position:absolute; top:10px; inset-inline-end:10px; z-index:2; max-width:80%; padding:5px 10px; border-radius:999px; color:#0c0f14; background:linear-gradient(135deg, var(--dft-acc), var(--dft-acc)); font-size:9.5px; line-height:1.3; font-weight:800; letter-spacing:.09em; text-transform:uppercase; box-shadow:0 6px 16px -4px var(--dft-acc-soft); overflow-wrap:anywhere; }
.dft-wrap .dft-body { display:flex; flex-direction:column; gap:5px; padding:13px 15px 15px; }
.dft-wrap .dft-title { display:block; color:var(--dft-fg); font-size:14.5px; font-weight:750; line-height:1.35; overflow-wrap:anywhere; }
.dft-wrap .dft-message { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--dft-muted); font-size:12.5px; line-height:1.55; overflow-wrap:anywhere; }

/* ---------- Focus / light theme ---------- */
.dft-wrap :focus-visible { outline:2px solid var(--dft-acc, #68bfff); outline-offset:3px; border-radius:6px; }
.dft-wrap.dft-wrap-light { --dft-fg:#142039; --dft-muted:#53617a; --dft-line:rgba(16,24,40,.12); --dft-glass:rgba(255,255,255,.66); }
.dft-wrap.dft-wrap-light .dft { background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72)); box-shadow:0 10px 30px -18px rgba(20,32,57,.25); }
.dft-wrap.dft-wrap-light a.dft-card { background:linear-gradient(165deg, #ffffff, #f4f6fb 60%); }
.dft-wrap.dft-wrap-light a.dft-card:hover { box-shadow:0 22px 44px -18px rgba(20,32,57,.35), 0 0 26px -6px var(--dft-acc-glow); }
.dft-wrap.dft-wrap-light .dft-art::after { background:linear-gradient(to top, rgba(10,14,22,.5), rgba(10,14,22,0) 46%); }
.dft-wrap.dft-wrap-light .dft-ph { background:radial-gradient(130% 120% at 85% -10%, var(--dft-acc-soft), transparent 55%), linear-gradient(160deg, #eef2f9, #dde4f0); }
.dft-wrap.dft-wrap-light .dft-controls button { background:rgba(255,255,255,.7); }

/* ---------- Responsive / motion ---------- */
@media (max-width:640px) {
    .dft-wrap { margin-bottom:20px; }
    .dft-wrap .dft { padding:16px 14px 14px; border-radius:16px; margin-bottom:14px; }
    .dft-wrap .dft-track { gap:12px; }
    .dft-wrap .dft-item { flex-basis:236px; max-width:82vw; }
    .dft-wrap .dft h2 { font-size:18px; }
    .dft-wrap .dft-eyebrow { font-size:10px; letter-spacing:.15em; }
}
@media (prefers-reduced-motion: reduce) {
    .dft-wrap a.dft-card, .dft-wrap a.dft-card::after, .dft-wrap .dft-art img, .dft-wrap .dft-controls button { transition:none; }
    .dft-wrap a.dft-card:hover { transform:none; }
    .dft-wrap a.dft-card:hover .dft-art img { transform:none; }
}