/* Scrolling rows and the individual show cards
   Lines 147-226 of the original index.html. */

/* ---------------- rows ---------------- */
#rows{position:relative;z-index:3;margin-top:0;padding-top:var(--row-gap);padding-bottom:3rem}
.row{margin:var(--row-gap) 0;position:relative}
.row:first-child{margin-top:0}
.row-head{display:flex;align-items:baseline;gap:.8rem;padding:0 var(--gut);margin-bottom:.85rem}
.row-title{font-family:var(--font);font-weight:700;font-size:clamp(1.15rem,2vw,1.55rem);color:var(--accent2);letter-spacing:-.015em}
.row-title b{color:var(--accent2);font-weight:700;font-style:normal}
.row-sub{font-size:.82rem;color:var(--ink-dim);font-style:normal}
.row-count{margin-left:auto;font-family:var(--font);letter-spacing:.18em;font-size:.6rem;font-weight:600;color:var(--ink-dim);
  text-transform:uppercase;padding-right:var(--gut)}
.rail-wrap{position:relative}
.rail{display:flex;gap:.9rem;overflow-x:auto;scroll-behavior:smooth;padding:1.4rem var(--gut) 1.2rem;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-btn{position:absolute;top:0;bottom:0;width:clamp(2rem,4vw,3.4rem);z-index:6;border:0;cursor:pointer;
  background:linear-gradient(90deg,var(--bg),transparent);color:var(--accent);font-size:1.6rem;
  opacity:0;transition:.25s;display:flex;align-items:center;justify-content:center}
.rail-btn.r{right:0;transform:scaleX(-1)}
.rail-wrap:hover .rail-btn{opacity:1}
.rail-btn:hover{color:var(--accent-deep)}

/* ---------------- card ---------------- */
.card{position:relative;flex:0 0 auto;width:clamp(210px,22vw,290px);aspect-ratio:16/9;border-radius:6px;
  overflow:hidden;cursor:pointer;background:var(--bg-soft);border:1px solid rgba(50,31,18,.12);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;transform-origin:center}
.card img{width:100%;height:100%;object-fit:cover;object-position:center 50%;transition:transform .5s,filter .3s;filter:saturate(1) brightness(.92)}
.card .cscrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,22,10,.92) 4%,rgba(38,22,10,.28) 44%,rgba(38,22,10,0) 72%)}
.card .cbody{position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem .75rem}
.card .cyear{font-family:var(--font);font-style:normal;color:var(--accent-hi);font-size:.72rem;letter-spacing:.02em;margin-bottom:.14rem}
.card .cname{font-family:var(--font);font-weight:700;font-size:1rem;line-height:1.14;color:var(--light);letter-spacing:-.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .cbadge{position:absolute;top:.55rem;left:.6rem;font-family:var(--font);text-transform:uppercase;font-weight:600;
  letter-spacing:.12em;font-size:.5rem;padding:.24rem .5rem;border-radius:3px;background:rgba(38,22,10,.62);
  color:rgba(246,241,224,.85);border:1px solid rgba(246,241,224,.2)}
.card .cbadge.cout{color:var(--accent-hi);border-color:rgba(228,183,163,.5);background:rgba(135,74,84,.55)}
.card .cplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:52px;height:52px;
  border-radius:50%;background:rgba(38,22,10,.72);border:1px solid var(--accent-hi);display:flex;align-items:center;
  justify-content:center;opacity:0;transition:.28s;color:var(--accent-hi)}
.card .cdek{position:absolute;left:0;right:0;bottom:0;padding:.6rem .8rem .2rem;font-style:normal;font-size:.82rem;
  line-height:1.4;color:rgba(246,241,224,.94);opacity:0;transform:translateY(6px);transition:.28s;
  box-sizing:border-box;max-height:calc(1.4em * 3 + .6rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 97%);mask-image:linear-gradient(180deg,#000 66%,transparent 97%);
  background:linear-gradient(0deg,#2a180c 26%,rgba(42,24,12,.82) 66%,rgba(42,24,12,0))}
.card:hover{transform:scale(1.11) translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent);z-index:7}
.card:hover img{transform:scale(1.06);filter:saturate(1.05) brightness(.72)}
.card:hover .cplay{opacity:1;transform:translate(-50%,-58%) scale(1)}
.card:hover .cname,.card:hover .cyear{opacity:0}
.card:hover .cdek{opacity:1;transform:none}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* grid mode */
#grid-view{display:none;z-index:3;position:relative;padding:5rem var(--gut) 4rem}
#grid-head{margin:0 0 1.6rem}
#grid-head h2{font-family:var(--font);font-weight:800;font-size:clamp(1.7rem,4vw,2.8rem);margin:.2rem 0;letter-spacing:-.02em;color:var(--accent2)}
#grid-head h2 b{color:var(--accent2);font-style:normal}
#grid-head p{color:var(--ink-dim);font-style:normal;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
.grid .card{width:auto}
.grid .card:hover{transform:scale(1.05) translateY(-3px)}
.no-results{color:var(--muted);font-style:normal;padding:3rem 0;text-align:center}
.btn-syllabus{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;border:0;background:var(--accent);color:var(--on-accent);border-radius:6px;font-family:var(--font);letter-spacing:0;font-size:.95rem;font-weight:600;padding:.55rem 1.1rem;transition:.2s;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(135,74,84,.7)}
.btn-syllabus:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-syllabus .syl-count{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--on-accent);color:var(--accent);font-size:.7rem;font-weight:700;align-items:center;justify-content:center;line-height:1}
.btn-syllabus.has .syl-count{display:inline-flex}
@media(max-width:760px){.btn-syllabus span.syl-label{display:none}}
.card .cadd{position:absolute;top:.5rem;right:.5rem;z-index:3;width:30px;height:30px;border-radius:50%;border:1px solid rgba(246,241,224,.5);background:rgba(20,12,8,.62);color:#fff;font-size:1.15rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:.18s}
.card:hover .cadd,.card .cadd.on{opacity:1}
.card .cadd:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:scale(1.08)}
.card .cadd.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media(hover:none){.card .cadd{opacity:.88}}
.railsyl{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:none;color:var(--accent);border:1px solid var(--accent);font-family:var(--font);font-weight:700;font-size:.98rem;padding:.58rem 1rem;border-radius:5px;transition:.2s;cursor:pointer;width:100%}
.railsyl:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-1px)}
.railsyl.on{background:var(--accent);color:var(--on-accent)}
.railsyl svg{width:16px;height:16px;flex-shrink:0}
.syl-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 1.6rem}
.syl-act{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:var(--font);font-weight:600;font-size:.9rem;padding:.5rem .9rem;border-radius:6px;transition:.2s}
.syl-act:hover{border-color:var(--accent);color:var(--accent)}
.syl-act.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.syl-act.primary:hover{background:var(--accent-deep);color:var(--on-accent)}
.syl-empty{grid-column:1/-1;color:var(--muted);padding:1rem 0 3rem;text-align:left;line-height:1.7;max-width:62ch}