/* demo59: fan of issues, call matcher. Background: blobs in the chosen cover's colours. */
.lu-top { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px,4vw,60px); align-items:center; padding-top:clamp(24px,4vw,56px); padding-bottom:clamp(30px,4vw,50px); }
.lu-shelf { position:relative; height:clamp(340px,44vw,540px); }
.lu-cov { position:absolute; bottom:60px; left:calc(var(--i) * 16.5%); width:34%; aspect-ratio:4/5; padding:0; border:0; border-radius:var(--radius); overflow:hidden; background:none; cursor:pointer; transform:rotate(calc((var(--i) - 2) * 3deg)) translateY(calc(var(--i) * 8px)); transform-origin:bottom center; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s; box-shadow:0 14px 34px rgb(0 0 0 / .5); }
.lu-cov img { width:100%; height:100%; object-fit:cover; }
.lu-cov span { position:absolute; left:8px; top:8px; padding:2px 8px; border-radius:99px; background:rgb(0 0 0 / .55); color:#fff; font-size:12px; font-weight:700; }
.lu-cov:hover,.lu-cov.is-on { transform:translateY(-34px) scale(1.09); z-index:6; box-shadow:0 26px 50px rgb(0 0 0 / .65),0 0 0 2px var(--yellow); }
.lu-now { position:absolute; left:0; right:0; bottom:0; margin:0; display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline; }
.lu-now strong { font:600 20px var(--font-head); color:#fff; } .lu-now small { color:#d4d4d4; font-size:13px; }
.lu-match { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(14px,2vw,24px); align-items:start; scroll-margin-top:90px; }
.lu-calls { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.lu-call { display:grid; grid-template-columns:96px 1fr; gap:14px; padding:12px; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:rgb(24 23 26 / .62); backdrop-filter:blur(14px); transition:opacity .3s,border-color .3s; }
.lu-call.best { border-color:var(--yellow); }
.lu-call.off { opacity:.72; }
.lu-call img { width:96px; height:120px; object-fit:cover; border-radius:var(--radius); }
.lu-call h4 { margin:2px 0; font:600 18px var(--font-head); color:#fff; }
.lu-call small { color:#cfcfcf; font-size:13px; display:block; }
.lu-call ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:2px; }
.lu-call li { font-size:13px; }
@media (max-width:860px){ .lu-top,.lu-match { grid-template-columns:1fr; } .lu-shelf { height:96vw; max-height:520px; } .lu-cov { width:44%; left:calc(var(--i) * 14%); } }