/* ════════════════════════════════════════════════════════════
   Kaya 959 Live Show Panel — grey theme locked
   Brand: #cc0033 / grey #979191. Portrait side layout.
   ════════════════════════════════════════════════════════════ */

.kls {
	--kls-primary:#cc0033;
	--kls-bg:#979191;
	--kls-text:#ffffff;
	--kls-muted:rgba(255,255,255,.72);
	--kls-faint:rgba(255,255,255,.55);
	--kls-border:rgba(255,255,255,.20);
	--kls-card-bg:rgba(0,0,0,.18);
	--kls-card-border:rgba(255,255,255,.22);
	--kls-top:5px;

	font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
	background:var(--kls-bg);
	color:var(--kls-text);
	width:100%;
	min-height:440px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	isolation:isolate;
	box-sizing:border-box;
}
.kls *,.kls *::before,.kls *::after{ box-sizing:border-box; }
.kls::before{ content:''; display:block; height:var(--kls-top); background:var(--kls-primary); flex-shrink:0; }

.kls-body{
	flex:1;
	display:grid;
	grid-template-columns:var(--kls-col-left,0px) 1fr var(--kls-col-right,0px);
	min-height:0;
	overflow:hidden;
}
.kls.has-image   { --kls-col-left:320px; }
.kls.has-sponsor { --kls-col-right:280px; }

/* ── image (portrait side column) ── */
.kls-image{ position:relative; overflow:hidden; border-right:1px solid var(--kls-border); background:#555; }
.kls-image img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.kls-image::after{ content:''; position:absolute; top:0; right:0; bottom:0; width:80px; background:linear-gradient(to right,transparent,var(--kls-bg)); pointer-events:none; }
.kls-image-name{ position:absolute; bottom:0; left:0; right:0; padding:48px 20px 16px; background:linear-gradient(transparent,rgba(151,145,145,.92)); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; line-height:1.3; }
.kls-image-name span{ display:block; }
.kls-image-name span[data-kls-img-eyebrow]{ font-size:11px; font-weight:600; color:var(--kls-primary); letter-spacing:.12em; margin-bottom:3px; }

/* ── centre ── */
.kls-centre{ display:flex; flex-direction:column; padding:32px 44px 28px; min-width:0; overflow:hidden; }

.kls-badge{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:var(--kls-primary); padding:7px 16px 7px 13px; align-self:flex-start; margin-bottom:16px; flex-shrink:0; }
.kls-badge.is-next{ background:transparent; color:var(--kls-primary); border:1px solid var(--kls-primary); padding:6px 14px; }
.kls-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; animation:kls-pulse 1.4s ease-in-out infinite; flex-shrink:0; }
.kls-badge:not(.is-next) .kls-dot{ background:#fff; }
.kls-badge.is-next .kls-dot{ animation:none; }
@keyframes kls-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }

.kls-identity{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; flex-shrink:0; }
.kls-show-block{ min-width:0; flex-shrink:1; }
.kls-show-name{ font-family:'Bebas Neue',sans-serif; font-size:68px; letter-spacing:2px; line-height:.9; color:var(--kls-text); }
.kls-tagline{ font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:4px; color:var(--kls-primary); margin-top:9px; text-transform:uppercase; }
.kls-time-pill{ flex-shrink:0; text-align:right; }
.kls-time-main{ font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:3px; color:#fff; background:var(--kls-primary); padding:6px 16px; display:inline-block; margin-bottom:6px; white-space:nowrap; }
.kls-time-line{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--kls-muted); white-space:nowrap; display:block; line-height:1.7; }
.kls-time-line strong{ color:var(--kls-text); }

.kls-divider{ height:1px; background:var(--kls-border); margin-bottom:16px; flex-shrink:0; }
.kls-nowlabel{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--kls-faint); margin-bottom:11px; flex-shrink:0; }

.kls-segment{ flex:1; min-height:0; background:var(--kls-seg-bg,var(--kls-card-bg)); border:1px solid var(--kls-card-border); display:flex; flex-direction:column; justify-content:center; padding:24px 28px; gap:13px; }
.kls-seg-desc{ font-size:14px; line-height:1.6; color:var(--kls-muted); max-width:640px; }
.kls-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.kls-chip{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--kls-text); border:1px solid var(--kls-card-border); padding:6px 12px; text-decoration:none; transition:all .15s; display:inline-block; }
a.kls-chip:hover{ background:var(--kls-primary); border-color:var(--kls-primary); color:#fff; }
.kls-chip.accent{ background:var(--kls-primary); border-color:var(--kls-primary); color:#fff; }

.kls-footer{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; padding-top:13px; border-top:1px solid var(--kls-border); }
.kls-copy{ font-size:14px; color:var(--kls-muted); line-height:1.5; }
.kls-copy strong{ color:var(--kls-text); }
.kls-btn{ background:var(--kls-primary); color:#fff; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:13px 26px; border:none; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:9px; transition:opacity .2s; flex-shrink:0; line-height:1; }
.kls-btn:hover{ opacity:.82; }
.kls-btn .kls-dot{ width:8px; height:8px; background:#fff; }

/* ── sponsor (per-sponsor bg + auto-contrast via CSS vars) ── */
.kls-sponsor{ display:flex; flex-direction:column; border-left:1px solid var(--kls-border); overflow:hidden; flex-shrink:0; background:var(--kls-sp-bg,var(--kls-bg)); }
.kls-sponsor-inner{ flex:1; padding:30px 22px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:15px; text-align:center; transition:opacity .45s ease; }
.kls-powered{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--kls-sp-faint,var(--kls-faint)); }
.kls-sponsor-logo{ display:inline-flex; align-items:center; justify-content:center; }
.kls-sponsor-logo-txt{ font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:2px; color:var(--kls-sp-logo,#fff); line-height:1; }
.kls-sponsor-img{ max-width:180px; max-height:90px; width:auto; height:auto; object-fit:contain; display:block; }
.kls-sponsor-tagline{ font-size:13px; color:var(--kls-sp-muted,var(--kls-muted)); line-height:1.5; max-width:200px; }
.kls-sponsor-strip{ background:var(--kls-primary); padding:12px 16px; text-align:center; flex-shrink:0; }
.kls-sponsor-cta{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.92); text-decoration:none; }
.kls-sponsor-cta:hover{ color:#fff; }

/* ── empty/fallback ── */
.kls-empty .kls-centre{ padding:48px; justify-content:center; align-items:flex-start; }

/* ── accessibility: visible focus ── */
.kls a:focus-visible, .kls .kls-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce){
	.kls-dot{ animation:none; }
	.kls-sponsor-inner{ transition:none; }
}

/* ════════════════ responsive ════════════════ */
@media (max-width:1200px){
	.kls{ min-height:420px; }
	.kls.has-image{ --kls-col-left:260px; }
	.kls.has-sponsor{ --kls-col-right:230px; }
	.kls-centre{ padding:30px 36px 26px; }
	.kls-show-name{ font-size:58px; }
	.kls-tagline{ font-size:16px; }
	.kls-sponsor-img{ max-width:150px; max-height:75px; }
	.kls-sponsor-logo-txt{ font-size:28px; }
}
@media (max-width:980px){
	.kls{ min-height:380px; }
	.kls.has-image{ --kls-col-left:200px; }
	.kls.has-sponsor{ --kls-col-right:190px; }
	.kls-centre{ padding:24px 26px 20px; }
	.kls-show-name{ font-size:46px; letter-spacing:1px; }
	.kls-tagline{ font-size:14px; letter-spacing:3px; }
	.kls-time-main{ font-size:16px; padding:5px 12px; }
	.kls-time-line{ font-size:10px; }
	.kls-segment{ padding:18px 20px; gap:11px; }
	.kls-seg-desc{ font-size:13px; }
	.kls-badge{ font-size:11px; }
	.kls-copy{ font-size:12px; }
	.kls-btn{ font-size:11px; padding:11px 18px; }
	.kls-sponsor-inner{ padding:20px 14px; gap:11px; }
	.kls-sponsor-img{ max-width:120px; max-height:60px; }
	.kls-sponsor-logo-txt{ font-size:23px; }
	.kls-sponsor-tagline{ font-size:11px; max-width:160px; }
	.kls-image-name{ font-size:12px; padding:36px 14px 12px; }
}
@media (max-width:700px){
	.kls{ min-height:unset; }
	.kls-body{ display:flex !important; flex-direction:column; grid-template-columns:unset !important; }
	.kls.has-image .kls-image{ width:100% !important; height:170px !important; border-right:none !important; border-bottom:1px solid var(--kls-border); }
	.kls.has-image .kls-image::after{ top:auto; right:0; bottom:0; width:100% !important; height:60px !important; background:linear-gradient(transparent,var(--kls-bg)) !important; }
	.kls-centre{ padding:18px 18px 14px; }
	.kls-identity{ flex-direction:column; align-items:flex-start; gap:8px; }
	.kls-time-pill{ text-align:left; }
	.kls-show-name{ font-size:38px; }
	.kls-tagline{ font-size:12px; margin-top:6px; }
	.kls-segment{ padding:16px 18px; }
	.kls-sponsor{ flex-direction:row !important; border-left:none !important; border-top:1px solid var(--kls-border); }
	.kls-sponsor-inner{ flex-direction:row !important; padding:14px 18px; gap:14px; text-align:left; align-items:center; flex:1; }
	.kls-sponsor-tagline{ display:none; }
	.kls-sponsor-img{ max-width:90px; max-height:44px; }
	.kls-sponsor-logo-txt{ font-size:18px; }
	.kls-sponsor-strip{ display:flex; align-items:center; justify-content:center; padding:0 16px; min-width:70px; border-left:1px solid rgba(255,255,255,.15); }
	.kls-footer{ flex-direction:column; align-items:flex-start; gap:10px; }
	.kls-btn{ width:100%; justify-content:center; padding:13px; }
}