/**
 * Page demo + lecteur YouTube-style
 */

.loop-demo-page-hero{padding:120px 24px 40px;background:#fff}
.loop-demo-page-body{padding:0 24px 80px;background:#fafbfc}

/* Main player (big, centered) */
.loop-demo-main-player-big{max-width:960px;margin:0 auto 40px;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(30,35,52,.18);background:#000;position:relative}

.loop-demo-now-playing{text-align:center;font-size:15px;font-weight:700;color:var(--text-dark);padding:12px 0;background:#fff;border-radius:12px;margin-bottom:32px;box-shadow:0 4px 16px rgba(30,35,52,.06)}

/* Phase sections */
.loop-demo-yt-phase{margin-bottom:48px}
.loop-demo-yt-phase__title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;color:var(--text-dark);margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid rgba(255,151,96,.3)}
.loop-demo-yt-phase__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--gradient);color:#fff;flex-shrink:0}
.loop-demo-yt-phase__count{margin-left:auto;font-size:13px;font-weight:600;color:var(--text-light)}

/* YouTube-style grid */
.loop-demo-yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.loop-demo-yt-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;overflow:hidden;cursor:pointer;font:inherit;color:inherit;text-align:left;transition:transform .2s,box-shadow .2s,border-color .2s;width:100%}
.loop-demo-yt-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(30,35,52,.12);border-color:rgba(255,151,96,.4)}
.loop-demo-yt-card__thumb{position:relative;width:100%;padding-top:56.25%;background:#1e2334;overflow:hidden}
.loop-demo-yt-card__thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.loop-demo-yt-card__thumb-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#252a40,#1e2334);color:rgba(255,255,255,.3)}
.loop-demo-yt-card__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,151,96,.9);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,transform .2s}
.loop-demo-yt-card:hover .loop-demo-yt-card__play{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.loop-demo-yt-card__duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.8);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px;font-variant-numeric:tabular-nums}
.loop-demo-yt-card__body{padding:14px 16px 18px}
.loop-demo-yt-card__title{font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:4px;line-height:1.35}
.loop-demo-yt-card__desc{font-size:13px;line-height:1.45;color:var(--text-light);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Sound banner */
.loop-demo-sound-banner{position:absolute;bottom:12px;left:12px;right:12px;display:flex;align-items:center;gap:10px;background:rgba(30,35,52,.92);backdrop-filter:blur(8px);color:#fff;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:600;z-index:10}
.loop-demo-sound-banner__btn{margin-left:auto;background:var(--primary);color:#fff;border:none;border-radius:8px;padding:6px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}

.loop-demo-empty{padding:24px;background:#fff;border-radius:12px;color:var(--text);text-align:center}

/* Plyr overrides */
.plyr{border-radius:16px}
.loop-demo-main-player-big .plyr,.home-demo__player .plyr{--plyr-color-main:#ff9760}
.plyr--fullscreen-active,.plyr--fullscreen-active video{max-height:none!important;width:100%!important;height:100%!important;border-radius:0!important}

@media(max-width:768px){.loop-demo-yt-grid{grid-template-columns:1fr}}