/* branike/icon-box — style.css
 * Načítava sa na frontende aj v editore.
 * CSS vars: --bb-ib-* nastavuje PHP render / editor.js
 */

/* ── CSS premenné (defaults) ──────────────────────────────────────────────── */
.bb-ib {
    --bb-ib-icon-size:   36px;
    --bb-ib-icon-bg-pad: 20px;
    --bb-ib-icon-color:  var(--bb-text-on-dark, #ffffff);
    --bb-ib-icon-bg:     var(--bb-primary, var(--wp--preset--color--accent, #7C3AED));
    --bb-ib-radius:      12px;
    --bb-ib-pad:         24px;
    --bb-ib-gap:         16px;
    --bb-ib-accent:      var(--bb-primary, var(--wp--preset--color--accent, #7C3AED));
}

/* ── Základný wrapper ─────────────────────────────────────────────────────── */
.bb-ib {
    display:        flex;
    gap:            var(--bb-ib-gap);
    border-radius:  var(--bb-ib-radius);
    padding:        var(--bb-ib-pad);
    box-sizing:     border-box;
    word-break:     break-word;
    position:       relative;
    transition:     transform .25s ease, box-shadow .25s ease;
}

.bb-ib[style*="--bb-ib-card-bg"] {
    background: var(--bb-ib-card-bg);
}
.bb-ib[style*="--bb-ib-color"] {
    color: var(--bb-ib-color);
}

/* ── Link mode ────────────────────────────────────────────────────────────── */
a.bb-ib,
.bb-ib--link {
    cursor:          pointer;
    text-decoration: none;
    color:           inherit;
    display:         flex; /* zachová flex aj pre <a> */
}
a.bb-ib:focus-visible {
    outline:        2px solid var(--bb-ib-accent, var(--wp--preset--color--accent, #7C3AED));
    outline-offset: 3px;
}

/* ── Tieň ─────────────────────────────────────────────────────────────────── */
.bb-ib--shadow-sm { box-shadow: var(--bb-shadow-sm); }
.bb-ib--shadow-md { box-shadow: var(--bb-shadow-md); }
.bb-ib--shadow-lg { box-shadow: var(--bb-shadow-lg); }

/* ── Hover — wrapper lift ─────────────────────────────────────────────────── */
.bb-ib:hover {
    transform: translateY(-3px);
}
.bb-ib--shadow-none:hover { box-shadow: 0 4px 16px  color-mix(in srgb, var(--bb-text,#000) 8%,  transparent); }
.bb-ib--shadow-sm:hover   { box-shadow: 0 6px 20px  color-mix(in srgb, var(--bb-text,#000) 13%, transparent); }
.bb-ib--shadow-md:hover   { box-shadow: 0 10px 32px color-mix(in srgb, var(--bb-text,#000) 17%, transparent); }
.bb-ib--shadow-lg:hover   { box-shadow: 0 18px 48px color-mix(in srgb, var(--bb-text,#000) 22%, transparent); }

/* ── Layouty ──────────────────────────────────────────────────────────────── */
.bb-ib--layout-top   { flex-direction: column; }
.bb-ib--layout-left  { flex-direction: row;         align-items: flex-start; }
.bb-ib--layout-right { flex-direction: row-reverse; align-items: flex-start; }

/* ── Zarovnanie textu ─────────────────────────────────────────────────────── */
.bb-ib--align-left   { text-align: left; }
.bb-ib--align-center { text-align: center; }
.bb-ib--align-right  { text-align: right; }

/* top layout: ikona nesmie sa naťahovať na plnú šírku */
.bb-ib--layout-top .bb-ib__icon-wrap                 { align-self: flex-start; }
.bb-ib--layout-top.bb-ib--align-center .bb-ib__icon-wrap { align-self: center; }
.bb-ib--layout-top.bb-ib--align-right  .bb-ib__icon-wrap { align-self: flex-end; }

/* ── Icon wrap ────────────────────────────────────────────────────────────── */
.bb-ib__icon-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    line-height:     1;
    transition:      transform .3s ease, background .3s ease;
}

/* Wrapper hover — scale ikony */
.bb-ib:hover .bb-ib__icon-wrap {
    transform: scale(1.08);
}

/* plain */
.bb-ib--icon-plain .bb-ib__icon-wrap {
    background: transparent;
    padding:    0;
}
/* plain — ikona dostane accent farbu pri hover */
.bb-ib--icon-plain .bb-ib__icon {
    transition: color .25s ease;
}
.bb-ib--icon-plain:hover .bb-ib__icon {
    color: var(--bb-ib-icon-color, var(--bb-ib-accent, var(--wp--preset--color--accent, #7C3AED)));
}

/* circle */
.bb-ib--icon-circle .bb-ib__icon-wrap {
    background:    var(--bb-ib-icon-bg, var(--wp--preset--color--accent, #7C3AED));
    padding:       var(--bb-ib-icon-bg-pad);
    border-radius: 50%;
}

/* square */
.bb-ib--icon-square .bb-ib__icon-wrap {
    background:    var(--bb-ib-icon-bg, var(--wp--preset--color--accent, #7C3AED));
    padding:       var(--bb-ib-icon-bg-pad);
    border-radius: calc(var(--bb-ib-radius) * 0.6);
}

/* ── Ikona (dashicon) ─────────────────────────────────────────────────────── */
.bb-ib__icon {
    font-size:   var(--bb-ib-icon-size) !important;
    width:       var(--bb-ib-icon-size) !important;
    height:      var(--bb-ib-icon-size) !important;
    color:       var(--bb-ib-icon-color, #ffffff);
    flex-shrink: 0;
    line-height: 1 !important;
}

/* ── Číslo / text variant ─────────────────────────────────────────────────── */
.bb-ib__icon--number {
    font-size:   calc( var(--bb-ib-icon-size) * 0.9 );
    font-weight: 800;
    font-style:  normal;
    line-height: 1;
    color:       var(--bb-ib-icon-color, #ffffff);
    letter-spacing: -0.02em;
    white-space:    nowrap;
    /* override dashicons !important */
    width:  unset !important;
    height: unset !important;
}

/* ── SVG inline ───────────────────────────────────────────────────────────── */
.bb-ib__icon--svg {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.bb-ib__icon--svg svg {
    width:   var(--bb-ib-icon-size);
    height:  var(--bb-ib-icon-size);
    fill:    var(--bb-ib-icon-color, currentColor);
    color:   var(--bb-ib-icon-color, currentColor);
    display: block;
}

/* 🔴 Obrysová (stroke) ikona si musí ustrážiť `fill: none`.
 *
 * Pravidlo vyššie plní KOREŇOVÝ `<svg>`. CSS deklarácia prebije prezentačný
 * atribút, takže `fill="none"` z ikony sa zahodí a z každej obrysovej ikony
 * sa stane plná silueta. Autor sa tomu nevie brániť ani inline štýlom —
 * `kses_svg()` atribút `style` nepovoľuje.
 *
 * Atribútový selektor má vyššiu špecificitu a zámer autora rešpektuje.
 * Týka sa aj dodávaného vzoru `hero-split-features`, ktorý obrysové ikony používa.
 */
.bb-ib__icon--svg svg[fill="none"] {
    fill: none;
}

/* ── SVG z média knižnice ─────────────────────────────────────────────────── */
.bb-ib__icon--img {
    display:     block;
    width:       var(--bb-ib-icon-size);
    height:      var(--bb-ib-icon-size);
    object-fit:  contain;
    flex-shrink: 0;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.bb-ib__body {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* ── Nadpis ───────────────────────────────────────────────────────────────── */
.bb-ib__title {
    margin:      0;
    font-weight: 700;
    line-height: 1.3;
    color:       inherit;
    transition:  color .25s ease;
}

/* Hover: accent farba na nadpis */
.bb-ib:hover .bb-ib__title {
    color: var(--bb-ib-accent, var(--wp--preset--color--accent, #7C3AED));
}

/* Accent animated underline — background-image gradient (bez position hack) */
.bb-ib--underline .bb-ib__title {
    background-image:    linear-gradient( var(--bb-ib-accent, #5B21B6), var(--bb-ib-accent, var(--wp--preset--color--accent, #7C3AED)) );
    background-repeat:   no-repeat;
    background-size:     0% 2px;
    background-position: left bottom 0px;
    transition:          color .25s ease, background-size .3s ease;
    padding-bottom:      2px;
}
.bb-ib--underline:hover .bb-ib__title {
    background-size: 100% 2px;
}

/* Center / right — underline z stredu / z prava */
.bb-ib--underline.bb-ib--align-center .bb-ib__title {
    background-position: center bottom 0px;
}
.bb-ib--underline.bb-ib--align-right .bb-ib__title {
    background-position: right bottom 0px;
}

/* Editor — vždy roztiahnutá (hover v editore nefunguje) */
.editor-styles-wrapper .bb-ib--underline .bb-ib__title {
    background-size: 100% 2px !important;
}

/* ── Text ─────────────────────────────────────────────────────────────────── */
.bb-ib__text {
    margin:      0;
    line-height: 1.65;
    opacity:     0.85;
    color:       inherit;
}

/* ── Icon hover animácie — CSS keyframes ─────────────────────────────────── */

/* Bounce — vertikálny skok */
@keyframes bb-ib-bounce {
    0%, 100% { transform: translateY(0) scale(1.08); }
    30%       { transform: translateY(-10px) scale(1.08); }
    60%       { transform: translateY(-4px) scale(1.08); }
    80%       { transform: translateY(-7px) scale(1.08); }
}
.bb-ib--hover-bounce:hover .bb-ib__icon-wrap {
    animation: bb-ib-bounce .6s ease forwards;
    transform: none; /* override scale hover */
}

/* Pulse — pulzujúce zväčšenie */
@keyframes bb-ib-pulse {
    0%   { transform: scale(1.08); }
    40%  { transform: scale(1.18); }
    70%  { transform: scale(1.04); }
    100% { transform: scale(1.08); }
}
.bb-ib--hover-pulse:hover .bb-ib__icon-wrap {
    animation: bb-ib-pulse .5s ease forwards;
    transform: none;
}

/* Spin — 360° rotácia */
@keyframes bb-ib-spin {
    0%   { transform: scale(1.08) rotate(0deg); }
    100% { transform: scale(1.08) rotate(360deg); }
}
.bb-ib--hover-spin:hover .bb-ib__icon-wrap {
    animation: bb-ib-spin .55s ease-in-out forwards;
    transform: none;
}

/* Shake — horizontálny trasenie */
@keyframes bb-ib-shake {
    0%, 100% { transform: translateX(0) scale(1.08); }
    20%       { transform: translateX(-6px) scale(1.08); }
    40%       { transform: translateX(6px) scale(1.08); }
    60%       { transform: translateX(-4px) scale(1.08); }
    80%       { transform: translateX(4px) scale(1.08); }
}
.bb-ib--hover-shake:hover .bb-ib__icon-wrap {
    animation: bb-ib-shake .5s ease forwards;
    transform: none;
}

/* ── Animácie vstupu (Intersection Observer) ─────────────────────────────── */
.bb-ib-anim-ready {
    opacity:    0;
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: calc(var(--bb-delay, 0) * 1ms);
}
.bb-ib-anim--fade-up    { transform: translateY(24px); }
.bb-ib-anim--fade-in    { transform: none; }
.bb-ib-anim--slide-left { transform: translateX(-32px); }
.bb-ib-anim--slide-right{ transform: translateX(32px); }

.bb-ib-anim-ready.bb-ib-anim-in {
    opacity:   1;
    transform: none;
}

/* ── Reduced motion — všetko vypnuté ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-ib,
    .bb-ib__icon-wrap,
    .bb-ib__icon,
    .bb-ib__title {
        transition:  none !important;
        animation:   none !important;
    }
    .bb-ib:hover              { transform: none !important; }
    .bb-ib-anim-ready         { opacity: 1 !important; transform: none !important; }
    .bb-ib--underline:hover .bb-ib__title { background-size: 100% 2px !important; }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .bb-ib--layout-left,
    .bb-ib--layout-right {
        flex-direction: column;
    }
}

/* ========================================================================
   EDITOR — picker / SVG sekcia / link badge
   ======================================================================== */

/* Quick picks grid */
.bb-ib-quick-picks {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap:                   4px;
    margin-bottom:         8px;
    max-width:             100%;
}

.bb-ib-picker__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border:          1px solid transparent;
    border-radius:   6px;
    background:      transparent;
    cursor:          pointer;
    padding:         0;
    transition:      background .15s, border-color .15s;
}
.bb-ib-picker__btn:hover   { background: rgba(124,58,237,.1); border-color: #7C3AED; }
.bb-ib-picker__btn.is-active { background: #7C3AED; border-color: #7C3AED; color: #fff; }
.bb-ib-picker__btn .dashicons { font-size: 18px !important; width: 18px !important; height: 18px !important; line-height: 1 !important; }

/* Slug row */
.bb-ib-slug-row {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 4px;
}
.bb-ib-slug-preview {
    font-size: 22px !important;
    width:     22px !important;
    height:    22px !important;
    flex-shrink: 0;
    color:     #7C3AED;
}
.bb-ib-slug-input { flex: 1; min-width: 0; }
.bb-ib-slug-input input { font-family: monospace; font-size: 12px; }

.bb-ib-browse-link {
    display:     block;
    margin-top:  6px;
    font-size:   12px !important;
    font-weight: 600 !important;
    color:       #7C3AED !important;
}

/* SVG sekcia */
.bb-ib-media-row  { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; flex-wrap: wrap; }
.bb-ib-media-preview { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; border: 1px solid #ddd; }

.bb-ib-or-sep {
    text-align: center;
    margin:     10px 0;
    position:   relative;
    color:      #757575;
    font-size:  11px;
}
.bb-ib-or-sep::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: #ddd;
}
.bb-ib-or-sep span { position: relative; background: #fff; padding: 0 8px; }

.bb-ib-svg-hint { font-size: 11px; color: #757575; margin: 4px 0 0; }

/* Number sekcia */
.bb-ib-number-section input { font-size: 18px; font-weight: 800; text-align: center; }

/* Labels */
.bb-ib-picker-label,
.bb-ib-label {
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:          #1e1e1e;
    margin:         12px 0 6px;
}

/* Link badge — vizuálny hint v editore */
.bb-ib-link-badge {
    position:     absolute;
    top:          8px;
    right:        8px;
    display:      flex;
    align-items:  center;
    gap:          4px;
    background:   rgba(124,58,237,.12);
    border:       1px solid rgba(124,58,237,.3);
    border-radius: 4px;
    padding:      2px 6px 2px 4px;
    font-size:    10px;
    color:        #0369a1;
    max-width:    160px;
    overflow:     hidden;
    text-overflow: ellipsis;
    white-space:  nowrap;
    pointer-events: none;
    z-index:      1;
}
.bb-ib-link-badge .dashicons {
    font-size: 12px !important;
    width:     12px !important;
    height:    12px !important;
    flex-shrink: 0;
}

/* ── Block Styles ─────────────────────────────────────────────────────────── */

/* is-style-card — karta s tieňom a pozadím */
.bb-ib.is-style-card {
    background: var( --bb-surface, #fff );
    box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.06);
    flex-direction: column;
    align-items: flex-start;
}
.bb-ib.is-style-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}

/* is-style-inline — ikona + text vedľa seba, bez pozadia, kompaktné */
.bb-ib.is-style-inline {
    flex-direction: row;
    align-items:    center;
    background:     transparent;
    padding:        12px 0;
    box-shadow:     none;
    border-radius:  0;
    gap:            14px;
}
.bb-ib.is-style-inline .bb-ib__icon-wrap {
    flex-shrink: 0;
}
.bb-ib.is-style-inline .bb-ib__title {
    margin-bottom: 2px;
}

/* is-style-pill — ikona v kruhu, rounded karta */
.bb-ib.is-style-pill {
    border-radius: 9999px;
    padding:       16px 28px;
    flex-direction: row;
    align-items:   center;
    background:    var( --bb-surface, #fff );
    box-shadow:    0 2px 12px rgba(0,0,0,.08);
    gap:           14px;
}
.bb-ib.is-style-pill .bb-ib__icon-wrap {
    border-radius: 50% !important;
    flex-shrink:   0;
}
.bb-ib.is-style-pill .bb-ib__desc {
    display: none;
}