/* kontener */
.epg-wrap{
  --left:280px; --row:72px;

  /* logo */
  --logo-w:100px; --logo-h:50px;

  /* toolbar */
  --tb-gap:8px;
  --date-w:160px; --date-fs:14px; --date-fw:600; --date-radius:10px; --date-px:10px; --date-py:8px;
  --date-bg:#fff; --date-text:#0f172a; --date-border:var(--grid, #e5e7eb);
  --btn-fs:14px; --btn-fw:600; --btn-radius:10px; --btn-px:12px; --btn-py:8px;
  --btn-bg:#0f172a; --btn-text:#ffffff; --btn-border:transparent;
  --btn-bg-hover:#1f2937; --btn-text-hover:#ffffff; --btn-border-hover:transparent;

  /* nawigacja (slider) – KOLORY PRZYCISKÓW */
  --nav-w:44px;
  --nav-bg: rgba(255,255,255,.15);
  --nav-bg-hover: rgba(255,255,255,.25);
  --nav-icon:#0f172a; --nav-icon-hover:#0f172a;

  /* oś czasu */
  --axis-h:28px;      /* wysokość belki godzin */
  --axis-gap:6px;     /* mały odstęp pod osią */

  /* NOW badge */
  --now:#ef4444;
  --now-badge-bg: var(--now);
  --now-badge-color:#fff;
  --now-badge-radius:999px;
  --now-badge-offset:8px;
  --now-badge-px:10px; --now-badge-py:4px;
  --now-badge-fs:12px; --now-badge-fw:700;
  --now-badge-shadow:0 1px 2px rgba(0,0,0,.25);

  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  padding:0px;
  overflow-x:hidden;
  overflow-y:auto;
  position:relative;
}

/* toolbar (sticky na górze) */
.epg-toolbar{
  display:flex; gap:var(--tb-gap,8px); align-items:center;
  margin-bottom:8px;
  position:sticky; top:0; z-index:7; padding-bottom:8px;
  background:linear-gradient(var(--bg, #fff), var(--bg, #fff));
  justify-content: end;
}

/* date input */
.epg-toolbar .epg-date{
  width:var(--date-w);
  font: var(--date-fw) var(--date-fs)/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--date-text);
  background: var(--date-bg);
  border:1px solid var(--date-border);
  border-radius: var(--date-radius);
  padding: var(--date-py) var(--date-px);
  outline: none;
}
.epg-toolbar .epg-date:focus{
  box-shadow: 0 0 0 3px rgba(108, 21, 104, .25);
  border-color: rgba(108, 21, 104, .7);
}
.epg-toolbar .epg-date::-webkit-calendar-picker-indicator{ cursor:pointer }

/* today button */
.epg-toolbar .epg-today{
  font: var(--btn-fw) var(--btn-fs)/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--btn-text);
  background: var(--btn-bg);
  border:1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  padding: var(--btn-py) var(--btn-px);
  cursor:pointer; user-select:none;
}
.epg-toolbar .epg-today:hover,
.epg-toolbar .epg-today:focus{
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  border-color: var(--btn-border-hover);
}

/* --- STAGE: dwukolumnowy układ (lewa szyna + scroller) --- */
.epg-stage{
  position:relative;
  display:grid;
  grid-template-columns: var(--left) 1fr;
  align-items:start;
  column-gap:0;
}

/* lewy rail (nie przewija się horyzontalnie) */
.epg-left-rail{
  position:relative;
  padding-top: calc(var(--axis-h, 28px) + var(--axis-gap, 6px));
}
.epg-left-rail .epg-left{
  position:static;
  display:flex; align-items:center; gap:10px;
  padding:8px; min-height:var(--row);
  border-bottom:1px solid var(--grid, #e5e7eb);
  background: transparent;
  z-index:1;
  border-radius:20px;
  justify-content:center;
}
.epg-left img{ width:var(--logo-w,100px); height:var(--logo-h,50px); object-fit:contain; }
.epg-left .title{
  font:600 14px/1.2 Montserrat, system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--axis, #0f172a)
}

/* prawa kolumna – scroller osi i torów */
.epg-scroll{
  position:relative;
  overflow-x:auto; overflow-y:hidden; -ms-overflow-style:none; scrollbar-width:none;
  margin-left:var(--nav-w,44px);
  margin-right:var(--nav-w,44px);

  /* FADE po bokach */
  --fade: 56px;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,1) var(--fade),
    rgba(0,0,0,1) calc(100% - var(--fade)),
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.epg-scroll::-webkit-scrollbar{ height:0; width:0 }

/* Stany: wyłącz fade po stronie dosuniętej do końca */
.epg-scroll.is-at-start{
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
}
.epg-scroll.is-at-end{
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 var(--fade), #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 100%);
}
.epg-scroll.is-at-start.is-at-end{
  -webkit-mask-image: none;
  mask-image: none;
}

/* przyciski slidera – PŁASKIE KOLORY */
.epg-nav{
  position:absolute; top:0; bottom:0; width:var(--nav-w,44px);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; z-index:6; padding:0; margin:0;
  background: var(--nav-bg);
  transition: background-color .15s ease;
  margin-top:calc(var(--axis-h, 28px) + 6px);
  border-radius:20px;
  border:1px solid var(--grid, #e5e7eb);
}
.epg-prev{ left:var(--left); }
.epg-next{ right:0; }
.epg-nav:hover{ background: var(--nav-bg-hover); }
.epg-nav[disabled]{ opacity:1; pointer-events:none; }
.epg-nav[disabled] svg{ width:18px; height:18px; fill:var(--nav-icon); opacity:0 }
.epg-nav svg{ width:18px; height:18px; fill:var(--nav-icon); opacity:.9 }
.epg-nav:hover svg{ fill:var(--nav-icon-hover); opacity:1 }

/* grid, oś i siatka – wyłącznie w scrollerze */
.epg-grid{ position:relative; padding-top:0; }

/* odsunięcie osi i torów od przycisku prev */
.epg-axis{ 
  position:relative;
  height: var(--axis-h, 28px);
  z-index:4;
  border-bottom:1px solid var(--grid, #e5e7eb);
  background: var(--bg, #fff);
  margin-bottom: var(--axis-gap, 6px);
  padding-left: calc(var(--nav-w, 44px) + 5px);
}
.epg-rows{
  position: relative;
  padding-left: calc(var(--nav-w, 44px) + 5px);
}

.epg-axis-track{ height:100%; position:relative }
.epg-axis-track .tick{
  position:absolute; top:0; height:100%;
  border-left:1px solid var(--grid, #e5e7eb);
  font:500 11px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--axis, #0f172a);
  padding-left:10px; transform:translateX(-.5px); white-space:nowrap;
}

/* rzędy torów */
.epg-row{
  position:relative;
  min-height:var(--row);
  border-bottom:1px solid var(--grid, #e5e7eb);
}

/* tor i KAFELKI */
.epg-track{ position:relative; }
.epg-block{
  position:absolute; top:8px; height:calc(var(--row) - 16px);
  border-radius:10px; border:1px solid var(--block-border, #e5e7eb);
  background: var(--block-bg, #f8fafc);
  overflow:hidden; padding:8px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease, transform .06s ease;
}
.epg-block .name{ 
  font:600 12px/1.25 Montserrat,system-ui,-apple-system,Segoe UI,Roboto; 
  color: var(--title, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin:0;
}
.epg-block .meta{ 
  font:500 10px/1.3  Montserrat,system-ui,-apple-system,Segoe UI,Roboto; 
  color: var(--meta, #64748b); margin:0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epg-block:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.12) }

/* linia „now” + plakietka */
.epg-nowline{
  position:absolute; top:0; bottom:0; width:2px;
  background: var(--now, #ef4444);
  z-index:8;
  transition: left 600ms cubic-bezier(.2,.7,.2,1);
  will-change: left;
}
/* pierwszy „snap” bez animacji */
.epg-nowline.is-instant{ transition: none !important; }

/* szanuj preferencje użytkownika */
@media (prefers-reduced-motion: reduce){
  .epg-nowline{ transition:none !important; }
}
.epg-nowline::before{
  content: attr(data-label);
  position:absolute; left:50%;
  transform: translateX(-50%);
  top: calc(
    ((var(--axis-h, 28px)
      - (var(--now-badge-py,4px) * 2 + var(--now-badge-fs,12px) * 1.2)
    ) / 2) - 3px
  );
  background: var(--now-badge-bg, var(--now, #ef4444));
  color: var(--now-badge-color,#fff);
  font: var(--now-badge-fw,700) var(--now-badge-fs,12px)/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding: var(--now-badge-py,4px) var(--now-badge-px,10px);
  border-radius: var(--now-badge-radius,999px);
  box-shadow: var(--now-badge-shadow,0 1px 2px rgba(0,0,0,.25));
  white-space: nowrap;
  pointer-events:none;
}
.epg-nowline::after{
  content:"";
  position:absolute; left:50%; transform: translateX(-50%);
  top: calc(
    ((var(--axis-h, 28px)
      - (var(--now-badge-py,4px) * 2 + var(--now-badge-fs,12px) * 1.2)
    ) / 2)
    + (var(--now-badge-py,4px) * 2 + var(--now-badge-fs,12px) * 1.2)
    - 1px
  );
  width: 2px; height: 6px;
  background: var(--now, #ef4444);
  pointer-events: none;
}

/* ===== Hover-expand: pływający klon kafelka ===== */
.epg-fly{
  position:absolute;
  z-index:20;                /* ponad wszystkim */
  min-height:calc(var(--row) - 16px);
  max-width: 520px;          /* bezpieczny limit szerokości */
  border-radius:10px;
  border:1px solid var(--block-border, #e5e7eb);
  background: var(--block-bg, #f8fafc);
  padding:10px;
  box-sizing:border-box;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  overflow:visible;          /* pokaż całą treść */
  pointer-events:auto;       /* żeby nie znikało przy przejściu kursorem */
}
.epg-fly .name,
.epg-fly .meta{
  white-space: normal;       /* pełna treść, bez elipsy */
  overflow: visible;
  text-overflow: clip;
  margin:0;
}



/* Expanded look jak "prawdziwy" kafelek */
.epg-block.is-expanded{ overflow: visible; } /* pozwala wyjść poza własną szerokość */

.epg-block .epg-expand{
  position:absolute; top:0; left:0; height:100%;
  /* szerokość ustawiamy w JS (target px) */
  border-radius:10px; border:1px solid var(--block-border, #e5e7eb);
  background: var(--nav-bg-hover);
  border-radius:10px;
  padding:8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  pointer-events:none;               /* nie powiększa obszaru hoveru */
  z-index: 10;                       /* nad oryginalną treścią */
  box-sizing: border-box;
  display:flex; flex-direction:column; justify-content:center;
  max-width:400px;
}

.epg-block .epg-expand .name,
.epg-block .epg-expand .meta{
  white-space: normal;               /* pełna treść, bez elipsy */
  overflow: visible;
  text-overflow: clip;
  margin:0;
}


/* === Template: Cards (image timeline) === */
.epg-wrap.tpl-cards .epg-left-rail,
.epg-wrap.tpl-cards .epg-grid,
.epg-wrap.tpl-cards .epg-axis,
.epg-wrap.tpl-cards .epg-nav,
.epg-wrap.tpl-cards .epg-nowline { display: none !important; }

.epg-wrap.tpl-cards .epg-stage { padding: 0; }

.cards-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 8px 0 12px;
}

/* 1 kolumna domyślnie */
.card{
  position: relative;
  border-radius: 24px;
  background: var(--block-bg, #fbbf24); /* żółte tło jak w szkicu */
  border: 1px solid var(--block-border, rgba(0,0,0,.08));
  overflow: hidden;
  box-shadow: var(--fly-shadow, 0 10px 24px rgba(0,0,0,.12));
  flex: 1 1 100%;
}

@media (min-width: 600px){
  /* 2 kolumny */
  .card{ flex: 1 1 calc(50% - 20px); }
}
@media (min-width: 900px){
  /* 3 kolumny */
  .card{ flex: 1 1 calc(33.333% - 20px); }
}

.card-cap{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 16px 0;
  font:700 12px/1.1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#fff; text-transform:uppercase; letter-spacing:.02em;
}

.card-img{
  position:relative; aspect-ratio:16/9;
  margin:10px 16px; border-radius:20px; overflow:hidden; background:#111827;
}
.card-img>img{ width:100%; height:100%; object-fit:cover; display:block; }

/* fioletowy overlay progresu od lewej (kolor z Avady) */
.card-progress{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background: var(--awb-custom_color_4);
  mix-blend-mode:multiply; transition:width .3s linear;
}

/* logo kanału w prawym górnym rogu */
.card-logo{
  position:absolute; top:10px; right:10px;
  max-height:30px; max-width:70px; object-fit:contain;
}

.card-body{ padding:0 16px 16px; }
.card-title{
  margin:2px 0 4px;
  font:700 18px/1.25 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial !important;
  color:var(--title,#0f172a);
}
.card-desc{
  margin:0;
  font:400 14px/1.45 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--meta,#334155);
}

/* Toggle: hide top toolbar */
.epg-wrap[data-hide-toolbar="1"] .epg-toolbar{
  display: none !important;
}

.epg-wrap[data-hide-toolbar="1"] .epg-stage{ margin-top: 0; }

/* Cards: układ bez lewej kolumny i bez scroller’a siatki */
.epg-wrap.tpl-cards .epg-stage{
  padding: 0;
  display: block;            /* zamiast grid */
  grid-template-columns: none !important; /* gdyby styl był narzucony wyżej */
}

.epg-wrap.tpl-cards .epg-scroll{
  display: none !important;  /* całkiem usuń kontener siatki z layoutu */
}

/* (opcjonalnie) jeśli kiedyś zostawimy grid, to karty mają rozpiąć się na całą szerokość */
.epg-wrap.tpl-cards .cards-wrap{
  margin-left: 0;
  grid-column: 1 / -1;       /* na wypadek gdy .epg-stage zostanie gridem */
}