/* Icon box — i2t3 component styles (faithful port of Karma ns-iconbox)
 * ONE styled box per element (the multi-box grid is the separate "featuregrid").
 * The visual style is driven by i2t3_iconbox_style; --i2t3-ib-accent carries the
 * chosen Bootstrap colour. Entrance animation uses the shared scroll-reveal.
 */

.i2t3-iconbox__box {
    position: relative;
}
.i2t3-iconbox__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.i2t3-iconbox__icon {
    font-size: 2.75rem;
    line-height: 1;
    color: var(--i2t3-ib-accent, #0d6efd);
    transition: transform .25s ease, color .25s ease;
}
.i2t3-iconbox__image { max-width: 5rem; height: auto; }
.i2t3-iconbox__subtitle {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--i2t3-ib-accent, #0d6efd);
    margin-bottom: .35rem;
}
.i2t3-iconbox__title { margin-bottom: .5rem; }
.i2t3-iconbox__text > :last-child { margin-bottom: 0; }
.i2t3-iconbox__btn { margin-top: 1rem; }

/* Decorative dividers (Karma title_divider / text_divider) */
.i2t3-iconbox__divider {
    display: block;
    width: 3rem;
    height: 3px;
    margin: .5rem 0 .85rem;
    background: var(--i2t3-ib-accent, #0d6efd);
    border-radius: 3px;
}
.i2t3-iconbox__divider--text { width: 100%; height: 1px; opacity: .25; }

/* ============ Style families ============ */

/* default — icon, title, text, centred */
.i2t3-iconbox--default .i2t3-iconbox__box { text-align: center; }
.i2t3-iconbox--default .i2t3-iconbox__media { justify-content: center; width: 100%; }

/* fbs1 — bordered top/bottom accent + button, left aligned */
.i2t3-iconbox--fbs1 .i2t3-iconbox__box { padding: 1.75rem; }
.i2t3-iconbox--border-top .i2t3-iconbox__box { border-top: 3px solid var(--i2t3-ib-accent, #0d6efd); }
.i2t3-iconbox--border-bottom .i2t3-iconbox__box { border-bottom: 3px solid var(--i2t3-ib-accent, #0d6efd); }

/* fbs2 — icon position top/left/right */
.i2t3-iconbox--ipos-left .i2t3-iconbox__box,
.i2t3-iconbox--ipos-right .i2t3-iconbox__box {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: start;
}
.i2t3-iconbox--ipos-left .i2t3-iconbox__media { margin-bottom: 0; }
.i2t3-iconbox--ipos-right .i2t3-iconbox__box { grid-template-columns: 1fr auto; }
.i2t3-iconbox--ipos-right .i2t3-iconbox__media { order: 2; margin-bottom: 0; }
.i2t3-iconbox--ipos-right .i2t3-iconbox__box { text-align: right; }

/* fbms1 — image instead of icon */
.i2t3-iconbox--fbms1 .i2t3-iconbox__image { max-width: 100%; border-radius: .5rem; }
.i2t3-iconbox--fbms1.i2t3-iconbox--rounded .i2t3-iconbox__image { border-radius: 1rem; }

/* fbms2 — image card with optional hover */
.i2t3-iconbox--fbms2 .i2t3-iconbox__box { background: var(--i2t3-surface, #fff); border-radius: .5rem; overflow: hidden; box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); }
.i2t3-iconbox--fbms2.i2t3-iconbox--rounded .i2t3-iconbox__box { border-radius: 1rem; }
.i2t3-iconbox--fbms2.i2t3-iconbox--hover .i2t3-iconbox__box { transition: transform .2s ease, box-shadow .2s ease; }
.i2t3-iconbox--fbms2.i2t3-iconbox--hover .i2t3-iconbox__box:hover { transform: translateY(-.4rem); box-shadow: 0 1rem 2rem rgba(0,0,0,.15); }

/* fbscolor — solid accent background */
.i2t3-iconbox--fbscolor .i2t3-iconbox__box { background: var(--i2t3-ib-accent, #0d6efd); color: #fff; border-radius: .5rem; padding: 1.75rem; text-align: center; }
.i2t3-iconbox--fbscolor .i2t3-iconbox__icon,
.i2t3-iconbox--fbscolor .i2t3-iconbox__subtitle { color: #fff; }

/* fbslight — light tinted background */
.i2t3-iconbox--fbslight .i2t3-iconbox__box { background: color-mix(in srgb, var(--i2t3-ib-accent, #0d6efd) 10%, transparent); border-radius: .5rem; padding: 1.75rem; text-align: center; }

/* fbsListView — horizontal list row */
.i2t3-iconbox--fbsListView .i2t3-iconbox__box { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: center; padding: 1rem 0; }
.i2t3-iconbox--fbsListView .i2t3-iconbox__media { margin-bottom: 0; }
.i2t3-iconbox--list-reverse .i2t3-iconbox__box { grid-template-columns: 1fr auto; text-align: right; }
.i2t3-iconbox--list-reverse .i2t3-iconbox__media { order: 2; }

/* hovereffect — icon scales on hover */
.i2t3-iconbox--hovereffect .i2t3-iconbox__box { text-align: center; }
.i2t3-iconbox--hovereffect .i2t3-iconbox__box:hover .i2t3-iconbox__icon { transform: scale(1.2); }

/* fullwidth — Karma "featured-box-full": solid colour box, icon on top, no button */
.i2t3-iconbox--fullwidth .i2t3-iconbox__box { background: var(--i2t3-ib-accent, #0d6efd); color: #fff; padding: 2rem; }
.i2t3-iconbox--fullwidth .i2t3-iconbox__icon { font-size: 2.5rem; }
.i2t3-iconbox--fullwidth .i2t3-iconbox__icon,
.i2t3-iconbox--fullwidth .i2t3-iconbox__subtitle { color: #fff; }
.i2t3-iconbox--fullwidth .i2t3-iconbox__btn { display: none; }
/* colour shades (Karma colorShades) — darken the band */
.i2t3-iconbox--shade-dark .i2t3-iconbox__box { background: color-mix(in srgb, var(--i2t3-ib-accent, #0d6efd) 80%, #000); }
.i2t3-iconbox--shade-mediumdark .i2t3-iconbox__box { background: color-mix(in srgb, var(--i2t3-ib-accent, #0d6efd) 65%, #000); }
.i2t3-iconbox--shade-extradark .i2t3-iconbox__box { background: color-mix(in srgb, var(--i2t3-ib-accent, #0d6efd) 45%, #000); }

/* insidecard — boxed card */
.i2t3-iconbox--insidecard .i2t3-iconbox__box { background: var(--i2t3-surface, #fff); border: 1px solid var(--i2t3-border-color, #dee2e6); border-radius: .5rem; padding: 1.75rem; text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
.i2t3-iconbox--insidecard.i2t3-iconbox--rounded .i2t3-iconbox__box { border-radius: 1rem; }
/* hovershadow style-1..6 (distinct hover feels) */
.i2t3-iconbox--hs-style-1 .i2t3-iconbox__box:hover { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12); }
.i2t3-iconbox--hs-style-2 .i2t3-iconbox__box:hover { transform: translateY(-.5rem); box-shadow: 0 1rem 2rem rgba(0,0,0,.15); }
.i2t3-iconbox--hs-style-3 .i2t3-iconbox__box:hover { box-shadow: 0 0 0 2px var(--i2t3-ib-accent, #0d6efd); }
.i2t3-iconbox--hs-style-4 .i2t3-iconbox__box:hover { transform: scale(1.03); box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.12); }
.i2t3-iconbox--hs-style-5 .i2t3-iconbox__box:hover { background: color-mix(in srgb, var(--i2t3-ib-accent, #0d6efd) 8%, #fff); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.1); }
.i2t3-iconbox--hs-style-6 .i2t3-iconbox__box:hover { box-shadow: 0 .75rem 1.75rem rgba(var(--i2t3-ib-accent-rgb, 13,110,253), .3); }

/* hovershadow style — plain card that lifts on hover */
.i2t3-iconbox--hovershadow .i2t3-iconbox__box { background: var(--i2t3-surface, #fff); border-radius: .5rem; padding: 1.75rem; text-align: center; box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
.i2t3-iconbox--hovershadow .i2t3-iconbox__box:hover { transform: translateY(-.4rem); box-shadow: 0 1rem 2rem rgba(0,0,0,.15); }

/* misaligned — Karma feature box: centred white card (shadow + rounded), icon on top
   in a tinted tile, CTA as a "read-more" text link with a chevron (not a solid button) */
.i2t3-iconbox--misaligned .i2t3-iconbox__box {
    background: var(--i2t3-surface, #fff);
    border-radius: .75rem;
    box-shadow: 0 .375rem 1.25rem rgba(0, 0, 0, .08);
    padding: 2rem 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.i2t3-iconbox--misaligned .i2t3-iconbox__media {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border-radius: .75rem;
    background: var(--i2t3-ib-accent, #0d6efd);
}
.i2t3-iconbox--misaligned .i2t3-iconbox__icon { font-size: 2rem; color: #fff; }
.i2t3-iconbox--misaligned .i2t3-iconbox__btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .75rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--i2t3-ib-accent, #0d6efd);
    font-weight: 600;
}
.i2t3-iconbox--misaligned .i2t3-iconbox__btn::after { content: "\203A"; font-size: 1.15em; line-height: 1; }
.i2t3-iconbox--misaligned .i2t3-iconbox__btn:hover { opacity: .75; }

/* fbsWitheffect — centred box that uses the icon effects below */
.i2t3-iconbox--fbsWitheffect .i2t3-iconbox__box { text-align: center; }

/* ============ Icon effects (Karma effect 1-7), on hover of the box ============ */
.i2t3-iconbox--effect-1 .i2t3-iconbox__box:hover .i2t3-iconbox__icon { transform: scale(1.2); }
.i2t3-iconbox--effect-2 .i2t3-iconbox__box:hover .i2t3-iconbox__icon { transform: rotate(360deg); }
.i2t3-iconbox--effect-3 .i2t3-iconbox__box:hover .i2t3-iconbox__icon { transform: translateY(-.4rem); }
.i2t3-iconbox--effect-4 .i2t3-iconbox__box:hover .i2t3-iconbox__icon { transform: rotateY(180deg); }
.i2t3-iconbox--effect-5 .i2t3-iconbox__box:hover .i2t3-iconbox__icon { animation: i2t3-ib-shake .5s; }
.i2t3-iconbox--effect-6 .i2t3-iconbox__box:hover .i2t3-iconbox__icon { animation: i2t3-ib-bounce .6s; }
.i2t3-iconbox--effect-7 .i2t3-iconbox__box:hover .i2t3-iconbox__icon { transform: scale(1.15) rotate(-8deg); }
@keyframes i2t3-ib-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes i2t3-ib-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.5rem); } }

/* Full height (Karma fullheight) — the section fills the equal-height (flex-stretched)
   column and the box fills the section, so all boxes in a row match the tallest. */
.i2t3-iconbox--fullheight { height: 100%; }
.i2t3-iconbox--fullheight .i2t3-iconbox__box { height: 100%; }

/* On an inverse (dark) band, icon-only boxes need a white icon */
.i2t3-inverse .i2t3-iconbox--default .i2t3-iconbox__icon { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .i2t3-iconbox__icon { transition: none; }
}