/* ==============================================
   WS Info Card — ws-info-card.css v1.0.1
   Three presets: border-accent | outlined | centred
   ============================================== */

/* ── Base card ── */
.wsic-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    --wsic-accent: #42AADF;
    --wsic-border-w: 2px;
    box-sizing: border-box;
}

/* Hover lift */
.wsic-card.wsic-card--hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Clickable card cursor */
.wsic-card[data-card-link] {
    cursor: pointer;
}

/* ── PRESET 1: Border Accent ── */
/* Subtle border all the way round, strong accent on one side */
.wsic-card--border-accent {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.wsic-card--border-accent.wsic-card--accent-top {
    border-top: var(--wsic-border-w) solid var(--wsic-accent);
    /* Remove top from the 1px border so the accent replaces it cleanly */
    border-top-width: var(--wsic-border-w);
}

.wsic-card--border-accent.wsic-card--accent-left {
    border-left: var(--wsic-border-w) solid var(--wsic-accent);
    padding-left: calc(24px + 8px);
}

/* ── PRESET 2: Outlined (full border — matches HTML cards) ── */
.wsic-card--outlined {
    border: 2px solid var(--wsic-accent);
    box-shadow: none;
    border-radius: 16px;
}

.wsic-card--outlined:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}

/* ── PRESET 3: Centred Simple ── */
.wsic-card--centred {
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.wsic-card--centred .wsic-link {
    align-self: center;
}

/* ── Icon wrapper ── */
.wsic-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.wsic-icon {
    font-size: 48px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.wsic-icon img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.wsic-icon i,
.wsic-icon svg {
    font-size: 48px;
    width: 48px;
}

/* ── Title ── */
.wsic-title {
    font-family: 'Lexend', var(--bsl-font-heading, sans-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--bsl-color-text, #2B2B2B);
    line-height: 1.3;
    margin: 0 0 10px;
    padding: 0;
}

/* ── Description ── */
.wsic-desc {
    font-family: 'Open Sans', var(--bsl-font-body, sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--bsl-color-text-soft, #555555);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* ── Link ── */
.wsic-link {
    font-family: 'Lexend', var(--bsl-font-heading, sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--wsic-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    transition: color 0.2s ease, gap 0.2s ease;
}

.wsic-link:hover {
    color: var(--bsl-color-primary, #1E5B8F);
    gap: 8px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .wsic-card {
        padding: 22px 20px;
    }

    .wsic-icon {
        font-size: 38px;
    }

    .wsic-title {
        font-size: 15px;
    }

    .wsic-desc {
        font-size: 13px;
    }
}