/* TCS Live Block (minimal, light theme, fully scoped) */
/* Built with love by Ezekiel & Thomas for Julian ❤️ */

/* ---- THEME TOKENS (override on .tcs-live if you like) ---- */
.tcs-live{
  --tcs-bg:          transparent;
  --tcs-fg:          #000;           /* inherit dark text from your site */
  --tcs-muted:       #555;
  --tcs-card-bg:     #fff;           /* cards on your light page */
  --tcs-card-bd:     #ddd;
  --tcs-card-bd-h:   #bbb;           /* hover border */
  --tcs-link:        #1a73e8;        /* link color */
  --tcs-outline:     #003366;        /* focus ring to match your palette */
  --tcs-shadow:      0 12px 45px 0 rgba(0,0,0,.12), 0 12px 90px 0 rgba(0,0,0,.08);
  --tcs-radius:      8px;
  --tcs-gap:         .5rem;
  --tcs-pad:         .7rem;
  --tcs-maxw:        1100px;
}

/* ---- SHELL ---- */
.tcs-live { color: var(--tcs-fg); background: var(--tcs-bg); }
.tcs-live .tcs-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 1rem;border-bottom:1px solid #eee;background:transparent;
}
.tcs-live .tcs-brand{letter-spacing:.3px}

/* container width follows your layout rhythm */
.tcs-live .tcs-shell{max-width:var(--tcs-maxw);margin:0 auto;padding:1rem}

/* ---- PLAYER ---- */
.tcs-live .tcs-title{font-size:1.05rem;margin:.75rem 0 .25rem}
.tcs-live .tcs-extern a{color:var(--tcs-link);text-decoration:none}
.tcs-live .tcs-extern a:hover{text-decoration:underline}

.tcs-live .tcs-player-frame{
  position:relative;background:#000;border:1px solid #111; /* keep black video well */
  border-radius:var(--tcs-radius);overflow:hidden;aspect-ratio:16/9;
  box-shadow: var(--tcs-shadow);
}
.tcs-live .tcs-player-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:#000
}

/* ---- CHANNEL GRID ---- */
.tcs-live .tcs-list{display:grid;gap:var(--tcs-gap);margin-top:1rem}
@media(min-width:700px){.tcs-live .tcs-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tcs-live .tcs-list{grid-template-columns:repeat(3,1fr)}}

/* card uses your site’s card/shadow vibe */
.tcs-live .tcs-card{
  display:flex;gap:.75rem;align-items:center;padding:var(--tcs-pad);
  background:var(--tcs-card-bg);border:1px solid var(--tcs-card-bd);
  border-radius:var(--tcs-radius);cursor:pointer;color:var(--tcs-fg);
  box-shadow: var(--tcs-shadow);
  transition:border-color .15s ease, transform .06s ease;
}
.tcs-live .tcs-card:hover{border-color:var(--tcs-card-bd-h); transform: translateY(-1px);}

/* keyboard focus ring, scoped */
.tcs-live .tcs-card:focus{outline:2px solid var(--tcs-outline); outline-offset:2px}

/* logo cell */
.tcs-live .tcs-logo{
  width:44px;height:44px;border-radius:6px;background:#f4f4f4;
  display:grid;place-items:center;overflow:hidden;flex:0 0 44px
}
.tcs-live .tcs-logo img{max-width:100%;max-height:100%;display:block}

/* meta text */
.tcs-live .tcs-meta{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.tcs-live .tcs-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcs-live .tcs-small{font-size:.9rem;color:var(--tcs-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* active highlight (when selected) */
.tcs-live .tcs-card[data-active="true"]{
  border-color:var(--tcs-outline);
}

/* optional dark variant if you ever embed on a dark section
   Usage: <section class="tcs-live tcs-dark"> ... </section> */
.tcs-live.tcs-dark{
  --tcs-fg:#eee; --tcs-muted:#aaa; --tcs-card-bg:#151515; --tcs-card-bd:#1f1f1f; --tcs-card-bd-h:#3a3a3a;
  --tcs-link:#79afff; --tcs-outline:#79afff;
}
/* Built with love by Ezekiel & Thomas for Julian ❤️ */