/* ===========================
   TV ADDONS — LAYOUT FIXES
   =========================== */

/* f-section-grid ma u Ciebie items-center (centrowanie w pionie),
   więc dla addonów wymuszamy start (od góry). */
.f-addon-section {
  align-items: start; /* override dla grid items */
}

/* Gdy island stwierdzi brak ikon i brak fallback image:
   - 1 kolumna
   - ukryj pusty blok mediów
   UWAGA: NIE dodawaj margin:0, bo zabijesz mx-auto z f-section-grid */
[data-addon-section][data-has-media="0"] {
  grid-template-columns: 1fr !important;
}

[data-addon-section][data-has-media="0"] .f-addon-media {
  display: none;
}

/* ===========================
   KANAŁY / MEDIA — STYLE
   (wyniesione z island)
   =========================== */

.f-channels-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  padding: .75rem;
  border-radius: 1.25rem;
  border: 1px solid var(--f-border-color);
  background: color-mix(in oklab, var(--f-background) 92%, black 8%);
}
@media (min-width: 520px){
  .f-channels-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (min-width: 768px){
  .f-channels-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .f-channels-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

.f-channel-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.35rem;
  min-width:0;
}
.f-channel-logo{
  /* width: 86px;
  height: 86px; */
  object-fit: contain;
  /* border-radius: 1rem; */
  padding: .25rem;
  /* border: 1px solid color-mix(in oklab, var(--f-border-color) 85%, transparent 15%); */
  /* background: color-mix(in oklab, var(--f-background) 95%, black 5%); */
}
.f-channel-logo-placeholder{
  width:56px;height:56px;border-radius:1rem;
  /* border:1px dashed var(--f-border-color); */
  opacity:.6;
}
.f-channel-label{
  font-size: .78rem;
  line-height: 1.0rem;
  opacity:.85;
  max-width: 9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f-addon-fallback-image{
  width:100%;
  height: 280px;
  object-fit: cover;
  border-radius: 1.25rem;
  border: 1px solid var(--f-border-color);
}
