/* mod_kafle_ikony — niskie, podłużne kafle z ikoną (styl "call-btn") */

.kafle-ikony {
    --kik-primary: #1870c0;
    --kik-primary-dark: #0f558f;
    --kik-surface: #ffffff;
    --kik-surface-alt: #f1f6fb;
    --kik-border: #d6e6f5;
    --kik-text: #1a2e3a;

    color: var(--kik-text);
    line-height: 1.6;
}
.kafle-ikony *,
.kafle-ikony *::before,
.kafle-ikony *::after { box-sizing: border-box; }

.kafle-ikony.kik-font-poppins { font-family: Poppins, sans-serif; }

/* ===== Obudowa (biała karta z cieniem) ===== */
.kik-wrapped .kik-wrapper {
    width: 100%;
    background: var(--kik-surface);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .12);
}
.kik-wrapped .kik-content { padding: 1rem; }

/* ===== Pasek tytułowy ===== */
.kik-hero {
    background: linear-gradient(135deg, var(--kik-primary), var(--kik-primary-dark));
    padding: 1rem;
    text-align: center;
}
.kik-plain .kik-hero { border-radius: 20px; margin-bottom: 1rem; }
.kafle-ikony .kik-hero-title {
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}

/* ===== Ikona ===== */
.kik-ico {
    font-size: var(--kik-icon-size, 1.55rem);
    color: var(--kik-icon-color, var(--kik-primary));
    width: calc(var(--kik-icon-size, 25px) * 1.3);
    flex: 0 0 calc(var(--kik-icon-size, 25px) * 1.3);
    text-align: left;
    line-height: 1;
}
img.kik-ico {
    width: var(--kik-icon-size, 25px);
    height: var(--kik-icon-size, 25px);
    flex: 0 0 var(--kik-icon-size, 25px);
    object-fit: contain;
    margin-right: calc(var(--kik-icon-size, 25px) * .45);
}
.kik-align-center .kik-item .kik-ico { text-align: center; }

/* ===== Kafel / przycisk ===== */
.kafle-ikony .kik-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .8rem;
    min-height: var(--kik-minh, 0);
    padding: var(--kik-pad-y, 17px) var(--kik-pad-x, 18px);
    border-radius: var(--kik-radius, 16px);
    font-weight: var(--kik-title-weight, 700);
    font-size: var(--kik-title-size, 17px);
    line-height: 1.35;
    text-decoration: none;
    color: var(--kik-tile-color, var(--kik-text));
    background: var(--kik-tile-bg, rgba(255, 255, 255, .96));
    border: var(--kik-border-w, 2px) solid var(--kik-border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.kafle-ikony .kik-btn:focus-visible {
    outline: 3px solid var(--kik-primary);
    outline-offset: 2px;
}
.kik-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.kik-title { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.kik-subtitle {
    font-size: .82em;
    font-weight: 500;
    margin-top: .2rem;
    opacity: .8;
    line-height: 1.4;
}

.kik-align-center .kik-item { justify-content: center; text-align: center; }
.kik-align-center .kik-item .kik-text-wrap { align-items: center; }

/* Ikona nad tekstem */
.kik-iconpos-top .kik-item {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: .5rem;
}
.kik-iconpos-top .kik-item .kik-ico { width: auto; flex: 0 0 auto; text-align: center; margin-right: 0; }
.kik-iconpos-top .kik-item .kik-text-wrap { align-items: center; }

/* ===== Warianty ===== */
/* niebieski (jak .info-box / .clinic-box) */
.kik-style-blue .kik-item {
    background: var(--kik-tile-bg, var(--kik-primary));
    color: var(--kik-tile-color, #fff);
    border-color: transparent;
    box-shadow: 4px 4px 14px rgba(24, 112, 192, .25);
    font-weight: var(--kik-title-weight, 800);
}
.kik-style-blue .kik-item .kik-ico { color: var(--kik-icon-color, #fff); }

/* jasnoniebieski (jak .section-title / .info-frame) */
.kik-style-soft .kik-item {
    background: var(--kik-tile-bg, var(--kik-surface-alt));
    box-shadow: none;
}

/* sam obrys, bez cienia */
.kik-style-outline .kik-item {
    background: var(--kik-tile-bg, transparent);
    box-shadow: none;
}

/* ===== Hover ===== */
.kik-hover-lift .kik-item:hover,
.kik-hover-lift .kik-item:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(24, 112, 192, .18);
    border-color: rgba(24, 112, 192, .4);
    background: var(--kik-tile-bg, #fff);
}
.kik-hover-glow .kik-item:hover,
.kik-hover-glow .kik-item:focus-visible {
    box-shadow: 0 0 0 4px rgba(24, 112, 192, .14), 0 10px 26px rgba(24, 112, 192, .16);
    border-color: var(--kik-primary);
}
.kik-hover-fill .kik-item:hover,
.kik-hover-fill .kik-item:focus-visible {
    background: var(--kik-primary);
    border-color: var(--kik-primary);
    color: #fff;
}
.kik-hover-fill .kik-item:hover .kik-ico,
.kik-hover-fill .kik-item:focus-visible .kik-ico { color: #fff; }

.kik-style-blue.kik-hover-lift .kik-item:hover,
.kik-style-blue.kik-hover-lift .kik-item:focus-visible {
    transform: translateY(-3px);
    background: var(--kik-primary-dark);
    border-color: transparent;
    box-shadow: 8px 10px 24px rgba(24, 112, 192, .26);
}
.kik-style-blue.kik-hover-fill .kik-item:hover,
.kik-style-blue.kik-hover-fill .kik-item:focus-visible {
    background: var(--kik-primary-dark);
}
.kik-style-blue .kik-item:hover,
.kik-style-blue .kik-item:focus-visible { color: var(--kik-tile-color, #fff); }

/* ===== Własne kolory hover (z konfiguracji modułu) ===== */
.kafle-ikony.kik-h-bg .kik-item:hover,
.kafle-ikony.kik-h-bg .kik-item:focus-visible { background: var(--kik-hover-bg); }
.kafle-ikony.kik-h-color .kik-item:hover,
.kafle-ikony.kik-h-color .kik-item:focus-visible { color: var(--kik-hover-color); }
.kafle-ikony.kik-h-border .kik-item:hover,
.kafle-ikony.kik-h-border .kik-item:focus-visible { border-color: var(--kik-hover-border); }
.kafle-ikony.kik-h-icon .kik-item:hover .kik-ico,
.kafle-ikony.kik-h-icon .kik-item:focus-visible .kik-ico { color: var(--kik-hover-icon); }
.kik-item .kik-ico { transition: color .18s ease; }

/* ===== Animacja ikony ===== */
.kik-anim-always .kik-item .kik-ico { animation: kikIconFloat 2.4s ease-in-out infinite; }
.kik-anim-hover .kik-item:hover .kik-ico,
.kik-anim-always .kik-item:hover .kik-ico { animation: kikIconFloatFast 1.3s ease-in-out infinite; }

/* ===== Duży przycisk CTA (jak .call-btn--hero) ===== */
.kafle-ikony .kik-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 1.55rem 1.25rem;
    border-radius: 22px;
    margin: .2rem 0 1.05rem;
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    font-weight: 900;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--kik-primary) 0%, var(--kik-primary-dark) 60%, #0b3f6e 100%);
    box-shadow: 0 18px 48px rgba(24, 112, 192, .38), inset 0 0 0 2px rgba(255, 255, 255, .16);
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.kafle-ikony .kik-cta::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(60% 60% at 20% 30%, rgba(255, 255, 255, .22), transparent 60%),
        radial-gradient(50% 50% at 80% 70%, rgba(255, 255, 255, .14), transparent 60%);
    pointer-events: none;
    opacity: .9;
}
.kafle-ikony .kik-cta:hover,
.kafle-ikony .kik-cta:focus-visible {
    color: #fff;
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 28px 70px rgba(24, 112, 192, .46);
    filter: saturate(1.06);
}
.kafle-ikony .kik-cta > * { position: relative; }
.kafle-ikony.kik-ch-bg .kik-cta:hover,
.kafle-ikony.kik-ch-bg .kik-cta:focus-visible { background: var(--kik-cta-hover-bg); }
.kafle-ikony.kik-ch-color .kik-cta:hover,
.kafle-ikony.kik-ch-color .kik-cta:focus-visible,
.kafle-ikony.kik-ch-color .kik-cta:hover .kik-ico,
.kafle-ikony.kik-ch-color .kik-cta:focus-visible .kik-ico { color: var(--kik-cta-hover-color); }
.kafle-ikony .kik-cta .kik-ico {
    color: #fff;
    font-size: calc(var(--kik-icon-size, 25px) * 1.32);
    width: auto;
    flex: 0 0 auto;
    transform-origin: center;
}
.kafle-ikony .kik-cta img.kik-ico {
    width: calc(var(--kik-icon-size, 25px) * 1.32);
    height: calc(var(--kik-icon-size, 25px) * 1.32);
    margin-right: 0;
}
.kik-cta-anim .kik-ico { animation: kikIconFloat 2.4s ease-in-out infinite; }
.kik-cta-anim:hover .kik-ico { animation: kikIconFloatFast 1.3s ease-in-out infinite; }

@keyframes kikIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-4deg); }
}
@keyframes kikIconFloatFast {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-6deg); }
}

/* ===== Nagłówek sekcji (jak .abc-header) ===== */
.kik-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    margin: .55rem 0 .85rem;
    padding: .95rem 1rem;
    border-radius: 14px;
    background: var(--kik-surface-alt);
    border: 2px solid var(--kik-border);
}
.kik-section-header .kik-ico { width: auto; flex: 0 0 auto; text-align: center; }
.kik-section-header img.kik-ico { margin-right: 0; }
.kik-section-title {
    font-weight: 900;
    font-size: clamp(1.15rem, 2.1vw, 1.45rem);
    line-height: 1.3;
}

/* ===== Siatka ===== */
.kik-grid {
    display: grid;
    grid-template-columns: repeat(var(--kik-cols, 3), minmax(0, 1fr));
    gap: var(--kik-gap, 14px);
}
.kik-item.is-hidden { display: none !important; }

@media (max-width: 900px) {
    .kik-grid { grid-template-columns: repeat(var(--kik-cols-t, 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .kik-grid { grid-template-columns: repeat(var(--kik-cols-m, 1), minmax(0, 1fr)); }
    .kafle-ikony .kik-cta { padding: 1.2rem 1rem; }
    .kafle-ikony .kik-item { padding-left: min(var(--kik-pad-x, 18px), 14px); padding-right: min(var(--kik-pad-x, 18px), 14px); gap: .65rem; }
    .kik-wrapped .kik-content { padding: .75rem; }
}

/* ===== Filtry ===== */
.kik-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .9rem;
}
.kik-filter-btn {
    appearance: none;
    padding: .45rem 1rem;
    border: 2px solid var(--kik-border);
    border-radius: 999px;
    background: var(--kik-surface, #fff);
    color: var(--kik-text);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.kik-filter-btn:hover,
.kik-filter-btn:focus-visible { border-color: var(--kik-primary); color: var(--kik-primary); }
.kik-filter-btn.is-active {
    background: var(--kik-primary);
    border-color: var(--kik-primary);
    color: #fff;
}

/* ===== Pokaż więcej ===== */
.kik-loadmore { text-align: center; margin-top: 1.1rem; }
.kik-loadmore.is-hidden { display: none; }
.kik-loadmore-btn {
    appearance: none;
    padding: .75rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--kik-primary);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(24, 112, 192, .28);
    transition: transform .18s ease, background .18s ease;
}
.kik-loadmore-btn:hover,
.kik-loadmore-btn:focus-visible { background: var(--kik-primary-dark); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .kafle-ikony *,
    .kafle-ikony *::before { animation: none !important; transition: none !important; }
    .kafle-ikony .kik-btn:hover { transform: none !important; }
}