/* ── BB Icon List ─────────────────────────────────────────────────────────── */

.bb-icon-list {
    --bb-il-icon-size:   24px;
    --bb-il-icon-color: var(--bb-primary, #7C3AED);
    --bb-il-cols:        3;
    --bb-il-mobile-cols: 1;
    --bb-il-gap:         24px;

    display: grid;
    grid-template-columns: repeat( var( --bb-il-cols, 3 ), 1fr );
    gap: var( --bb-il-gap, 24px );
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* ── Položka ─────────────────────────────────────────────────────────────── */
.bb-il-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ── Ikona — pozícia TOP ─────────────────────────────────────────────────── */
.bb-il--icon-top .bb-il-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.bb-il--icon-top .bb-il-item__icon {
    margin-top: 0;
}

/* ── Ikona ───────────────────────────────────────────────────────────────── */
.bb-il-item__icon {
    font-size: var( --bb-il-icon-size, 24px );
    width:     var( --bb-il-icon-size, 24px );
    height:    var( --bb-il-icon-size, 24px );
    color:     var(--bb-il-icon-color, var(--bb-primary, #7C3AED));
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.1em;
}

/* SVG inline ikony (builtin knižnica)
 *
 * 🔴🔴 NÁLEZ (Brani, 2026-08-03): „tie ikony sme už tiež riešili a zase sú
 * nejaké hrubé a rozmazané." Odmerané v prehliadači na branike.com — každá
 * cesta ikony bola ZÁROVEŇ vyplnená (`fill: rgb(124,58,237)`) AJ obtiahnutá
 * (`stroke` 2px). Ikona „Branike Forms" sa preto vykreslila ako plná fialová
 * kocka a jemné detaily sa zliali.
 *
 * Príčinou bolo `fill: currentColor` PRESNE TU. Tabler outline ikony sa
 * vykresľujú ako `fill="none" stroke="currentColor" stroke-width="2"` — lenže
 * `fill="none"` je PREZENTAČNÝ ATRIBÚT so špecificitou 0, takže ho prebije
 * ktorékoľvek CSS pravidlo. Naše ho prebíjalo na všetkých 5063 outline ikonách
 * z knižnice. [[feedback_css_rule_must_win_not_exist]]
 *
 * 🔴 `fill: none` je bezpečné pre OBA druhy ikon:
 *   · outline (5063 ks) — cesty vlastný `fill` nemajú, zdedia `none` ✅
 *   · plné (49 ks, napr. `dice-6`) — cesty majú vlastné `fill="currentColor"`,
 *     a atribút NA PRVKU prebije zdedenú hodnotu z rodiča ✅
 * Overené v prehliadači na oboch prípadoch, nie odhadnuté.
 *
 * Farba sa riadi cez `color` na `.bb-il-item__icon` — `currentColor` v `stroke`
 * si ju vezme sám.
 */
.bb-il-item__icon svg {
    width:  100%;
    height: 100%;
    display: block;
    fill: none;
}

/* ── Obsah ───────────────────────────────────────────────────────────────── */
.bb-il-item__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bb-il-item__title {
    display: block;
    font-weight: 600;
    line-height: 1.4;
}

.bb-il-item__text {
    display: block;
    line-height: 1.6;
    opacity: 0.85;
}

/* ── Link — celá položka klikateľná ─────────────────────────────────────── */
.bb-il-item--linked .bb-il-item__link {
    display: contents; /* link obaľuje všetok obsah bez zmeny layoutu */
    color: inherit;
    text-decoration: none;
}

.bb-il-item--linked:hover .bb-il-item__title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bb-il-item--linked:hover .bb-il-item__icon {
    opacity: 0.8;
}

/* ── Animácia — IO entrance ──────────────────────────────────────────────── */
.bb-il-anim-ready {
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.bb-il-anim--fade-up  { transform: translateY( 22px ); }
.bb-il-anim--fade-in  { transform: none; }

.bb-il-anim-ready.bb-il-anim-visible {
    opacity: 1 !important;
    transform: none !important;
}

@media ( prefers-reduced-motion: reduce ) {
    .bb-il-anim-ready {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
    .bb-icon-list {
        grid-template-columns: repeat( var( --bb-il-mobile-cols, 1 ), 1fr );
    }
}

/* ── Editor: vizuálny hint ───────────────────────────────────────────────── */
.bb-icon-list.is-selected > .bb-il-item,
.bb-icon-list > .bb-il-item.is-selected {
    outline: 2px dashed color-mix( in srgb, #7C3AED 40%, transparent );
    outline-offset: 4px;
    border-radius: 4px;
}

/* 🔴🔴 ŤAH VSTAVANEJ IKONY SA NESMIE ŠKÁLOVAŤ (28. 8. 2026)
   Vstavané ikony v `blocks/icon/icons/` sú kreslené v mriežke 24 jednotiek so
   `stroke-width: 1.5`. Pri veľkej ikone sa ťah natiahne — odmerané na
   `features-3col`: box 64 px → ťah 4 px, z obrysovej ikony fialová škvrna.
   `non-scaling-stroke` drží 1,5 px pri akejkoľvek veľkosti.
   🔴 Platí LEN pre tieto 24-jednotkové ikony. Blok `icon-box` kreslí aj vlastné
   SVG v mriežke 100 so ťahom 6 — tam by to isté pravidlo spravilo zo 2 px 6 px.
   Odmerané, nie odhadnuté. */
.bb-il-item__icon svg,
.bb-il-item__icon svg * {
    vector-effect: non-scaling-stroke;
}