/* ============================================================
   RIADOK S IKONOU

   Farby a velkosti sa nastavuju PREMENNYMI:
   pre cely zoznam v Raw CSS obalu, pre jeden riadok
   v Raw CSS tej instancie (je blizsie, takze prebije obal).

   .cb-component-cmp_e8agzdoo7rapcynmwkrp {
     --ikonriadok-farba-ikony: var(--c-terracotta);
     --ikonriadok-ikona: 20px;
     --ikonriadok-farba: var(--c-slate);
     --ikonriadok-farba-hover: var(--c-delft);
     --ikonriadok-text: 17px;
     --ikonriadok-rez: 400;
     --ikonriadok-medzera: 10px;
     --ikonriadok-cara-farba: var(--c-hairline);
     --ikonriadok-cara-odstup: 12px;
   }

   Oddelovacia ciara sa zapina v poli Oddelovacia ciara
   priamo na riadku. Prvy riadok v zozname ju nikdy nema.

   Dolu su zakomentovane varianty — odkomentuj, co potrebujes.
   ============================================================ */

.ikonriadok {
  display: flex;
  align-items: center;
  gap: var(--ikonriadok-medzera, 10px);

  font-family: var(--c-font);
  font-size: var(--ikonriadok-text, 17px);
  font-weight: var(--ikonriadok-rez, 400);
  line-height: 1.4;
  color: var(--ikonriadok-farba, var(--c-slate));
  text-decoration: none;

  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

a.ikonriadok:hover {
  color: var(--ikonriadok-farba-hover, var(--c-delft));
}

.ikonriadok__ikona {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--ikonriadok-ikona, 20px);
  height: var(--ikonriadok-ikona, 20px);
  color: var(--ikonriadok-farba-ikony, var(--c-delft));
}

.ikonriadok__ikona svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ikonriadok__text {
  display: inline-block;
}


/* ---- Oddelovacia ciara (pole Oddelovacia ciara) ---- */

.ikonriadok--plna,
.ikonriadok--ciarkovana,
.ikonriadok--bodkovana,
.ikonriadok--dvojita {
  border-top-width: var(--ikonriadok-cara-hrubka, 1px);
  border-top-color: var(--ikonriadok-cara-farba, var(--c-hairline));
  padding-top: var(--ikonriadok-cara-odstup, 12px);
}

.ikonriadok--plna        { border-top-style: solid; }
.ikonriadok--ciarkovana  { border-top-style: dashed; }
.ikonriadok--bodkovana   { border-top-style: dotted; }
.ikonriadok--dvojita     { border-top-style: double; }

.ikonriadok--hrubka1 { --ikonriadok-cara-hrubka: 1px; }
.ikonriadok--hrubka2 { --ikonriadok-cara-hrubka: 2px; }
.ikonriadok--hrubka3 { --ikonriadok-cara-hrubka: 3px; }

/* Kazda instancia komponentu ma vlastny obal, preto sa prvy
   riadok chyta cez jeho obal — a nutne ako priamy potomok,
   inak by pravidlo chytilo aj nadradene .cb-el a vypadli by
   ciary vsade. */
.cb-el:first-child > .ikonriadok {
  border-top-width: 0;
  padding-top: 0;
}


/* ------------------------------------------------------------
   VOLITELNE — odkomentuj, co chces pouzit
   ------------------------------------------------------------ */

/* 1) Ikona v kruhovej podlozke (ako Elementor "framed").
.ikonriadok__ikona {
  box-sizing: content-box;
  padding: 9px;
  border-radius: 50%;
  background-color: var(--ikonriadok-podklad, rgba(46,94,168,.10));
}
*/

/* 2) Ikona v stvorci so zaoblenim.
.ikonriadok__ikona {
  box-sizing: content-box;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--c-hairline);
}
*/

/* 3) Text podciarknuty az pri hoveri.
a.ikonriadok:hover .ikonriadok__text {
  text-decoration: underline;
  text-underline-offset: 3px;
}
*/

/* 4) Cely riadok sa pri hoveri jemne posunie doprava.
a.ikonriadok:hover {
  transform: translateX(3px);
}
*/

/* 5) Ikona sa pri hoveri prefarbi zvlast.
a.ikonriadok:hover .ikonriadok__ikona {
  color: var(--ikonriadok-ikona-hover, var(--c-terracotta));
}
*/

/* 6) Riadok ako lista s pozadim (hover vyplni plochu).
.ikonriadok {
  padding: 10px 14px;
  border-radius: var(--c-radius-mala);
}
a.ikonriadok:hover {
  background-color: var(--ikonriadok-podklad-hover, rgba(46,94,168,.07));
}
*/

/* 7) Ikona zarovnana k prvemu riadku pri viacriadkovom texte.
.ikonriadok {
  align-items: flex-start;
}
.ikonriadok__ikona {
  margin-top: .15em;
}
*/

/* 8) Text vpravo, ikona vlavo na plnu sirku.
.ikonriadok {
  justify-content: space-between;
  width: 100%;
}
*/

/* 9) Mensie pismo a ikona na mobile.
@media (max-width: 767px) {
  .ikonriadok {
    --ikonriadok-text: 15px;
    --ikonriadok-ikona: 18px;
  }
}
*/