/*
 * VLASTNÉ CSS PRE OPRAVU ALLVIDEOS A LITE-YOUTUBE.JS
 * Zabezpečuje, že placeholder (.yt-lite) sa správne umiestni namiesto videa.
 */

/* ------------------------------------------- */
/* --- Základné štýly lite placeholderu --- */
/* ------------------------------------------- */
.yt-lite {
  background: #000; /* Pozadie, ak sa thumbnail nenačíta */
  overflow: hidden;
  cursor: pointer;
  display: block !important; 
  /* Tieto sú kľúčové pre veľkosť: */
  width: 100% !important; 
  height: 100% !important;
  /* MUSÍ BYŤ ABSOLÚTNY pre správne vyplnenie rodiča! */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Obrázok vnútri placeholderu */
.yt-lite > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; 
  opacity: 1 !important; 
  visibility: visible !important;
  /* DÔLEŽITÉ: z-index 1 zabezpečí, že je pod tlačidlom (5), ale nad kontajnerom */
  z-index: 1 !important; 
}

/* Tlačidlo Prehrať */
.yt-lite .yt-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 68px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 5 !important; /* Nad všetkým */
  cursor: pointer;
}

.yt-lite .yt-play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 14px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}


/* ------------------------------------------- */
/* --- ALLVIDEOS INTEGRÁCIA (KLÚČOVÁ ČASŤ) --- */
/* ------------------------------------------- */

/* 1. Hlavný kontajner: Vynúti 16:9 pomer a resetuje padding */
.avPlayerContainer {
    position: relative !important; 
    padding-top: 0 !important; 
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

/* 2. Vnútorný kontajner (.avPlayerBlock) musí vyplniť 100% priestoru */
.avPlayerContainer .avPlayerBlock {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    z-index: 2; /* Musí byť nad kontajnerom (ak má defaultne nižší z-index) */
}

/* 3. Pre prípad iframe (po kliknutí), aby vyplnil priestor */
.avPlayerContainer iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}


/* ------------------------------------------- */
/* --- FINÁLNA OPRAVA PRE AUDIO (.avAudio) --- */
/* ------------------------------------------- */

/* 1. Hlavný kontajner: Vynulovanie video štýlov (16:9) */
.avAudio .avPlayerContainer {
    /* VYNULOVANIE ASPECT RATIO/PADDING */
    aspect-ratio: initial !important; 
    padding-top: 0 !important; 
    padding-bottom: 0 !important; 
    height: 60px !important; /* Pevná výška pre celú oblasť audio playera */
    
    /* Zabezpečenie správneho box modelu */
    display: block !important;
}

/* 2. Vnútorný kontajner: Vyplní rodiča */
.avAudio .avPlayerBlock {
    position: static !important; /* Zruší absolútne pozicionovanie */
    height: 60px !important;     /* Pevná výška */
    min-height: 60px !important;
    width: 100% !important;
}

/* 3. Samotný AUDIO element: Pevná výška a reset pre kompatibilitu so Safari */
.avAudio .avPlayerBlock audio {
    height: 60px !important; 
    min-height: 60px !important;
    width: 100% !important; 
    
    /* Dôležité: Reset marginov/paddingov, ktoré môžu robiť problémy v Safari */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Zabezpečí, že sa správa ako blok a nerobí zvislé medzery */
    display: block !important; 
}

/* default: skryť na desktopoch */
@media (min-width: 768px) {
  .off-canvas-toggle { display: none !important; }
}

/* zobraziť len na mobile/tablete (<= 767) */
@media (max-width: 767.98px) {
  .off-canvas-toggle { display: inline-flex !important; align-items: center; }
}

/* --- 2 stĺpce od md (>=768px) pre listingy s .items-row.row.row-flex --- */
@media (min-width: 768px) {
  .items-row.row.row-flex > .col-md-3 {
    /* Bootstrap 4/5 flex grid */
    flex: 0 0 50% !important;
    max-width: 50% !important;

    /* Bootstrap 3 fallback (ak sa ešte používajú floaty) */
    width: 50% !important;
    float: left !important;
  }
}

/* ak by šablóna ešte niekde robila fixnú šírku cez všeobecné selektory,
   pre istotu prebijeme aj všetky "col-*" v rámci tohto riadku */
@media (min-width: 768px) {
  .items-row.row.row-flex > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* voliteľne menšie medzery medzi kartami */
.items-row .item { margin-bottom: 1.25rem; }