/* Service Card Grid — frontend styles.
 * Loaded automatically when the block is present (block.json "style").
 *
 * 4-up grid with responsive fallback to 2-up then 1-up. Each card has a
 * circular accent-colored icon, heading, body, and a primary CTA. Cards
 * have a subtle hover lift and shadow growth — matches the .b-card visual
 * vocabulary defined in widget-frame.css.
 */

.b-service-grid {
    display: grid;
    gap: 18px;
    margin: 24px 0;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
}

.b-service-grid--cols-2 { --cols: 2; }
.b-service-grid--cols-3 { --cols: 3; }
.b-service-grid--cols-4 { --cols: 4; }

@media (max-width: 992px) {
    .b-service-grid--cols-3,
    .b-service-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .b-service-grid { grid-template-columns: 1fr; }
}

.b-service-card {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e4ded2);
    border-radius: var(--radius, 14px);
    padding: 28px 22px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 8px rgba(60, 48, 30, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.b-service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow, 0 18px 40px -24px rgba(60, 48, 30, 0.4));
    border-color: color-mix(in srgb, var(--accent, #9c3a52) 30%, var(--line, #e4ded2));
}

.b-service-card__ico {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent, #9c3a52);
    color: var(--on-accent, #fff);
    display: grid;
    place-items: center;
    margin: 0 0 18px;
    flex: 0 0 auto;
}

.b-service-card__ico i {
    color: var(--on-accent, #fff) !important;
    font-size: 26px;
    line-height: 1;
}

.b-service-card__t {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink, #2c2820);
}

.b-service-card__b {
    margin: 0 0 20px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft, #564e42);
    flex: 1 1 auto;
}

.b-service-card__cta {
    margin-top: auto;
}

/* Editor: smaller padding to give breathing room for inspector controls. */
.kabdalis-service-card-grid-editor .b-service-card {
    text-align: left;
    align-items: stretch;
    padding: 18px;
}
.kabdalis-service-card-grid-editor .b-service-card__ico {
    margin: 0 0 12px;
}