/* =========================================================
   Wood Friend Cards — Frontend Styles v3
   ========================================================= */

.wf-cards-wrapper {
    background: #f5f3ee;
    padding: 24px;
    border-radius: 16px;
}

.wf-cards-grid {
    display: grid;
    gap: 16px;
}
.wf-cols-1 { grid-template-columns: repeat(1, 1fr); }
.wf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wf-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .wf-cols-3, .wf-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .wf-cols-2, .wf-cols-3, .wf-cols-4 { grid-template-columns: 1fr; }
}

/* ── Card base ── */
.wf-card {
    position: relative;       /* lines anchor here */
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e8e4db;
    border-radius: 12px;
    padding: 28px 24px 24px;
    cursor: pointer;
    /* NO overflow:hidden — it clips the lines */
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* ── Injected border line elements ── */
.wf-line {
    position: absolute !important;
    z-index: 10 !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    display: block !important;
    /* transform + duration set inline by JS */
    transition-property: transform !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card content */
.wf-card-icon    { font-size: 28px; line-height: 1; }
.wf-card-title   { font-size: 15px; font-weight: 600; color: #2c2c2a; line-height: 1.4; margin: 0; }
.wf-card-body    { font-size: 13px; color: #888780; line-height: 1.65; flex: 1; margin: 0; }
.wf-card-divider { border: none; border-top: 0.5px solid #e0dcd4; margin: 2px 0; }
.wf-card-caption { font-size: 12px; color: #5bbfa3; font-style: italic; line-height: 1.55; margin: 0; }