/* ==========================================================================
   Best For Block — best-for.css
   Child theme: shoptimizer-child
   Note: Title is handled by the Custom Tab Plugin — no header styles here.
   Browser support: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+, iOS 10.3+
   ========================================================================== */


/* Grid — fully adaptive: auto-fills columns based on card count.
   4 cards → 4 cols | 3 cards → 3 cols | 2 cards → 2 cols | 1 → 1 col.
   bf-cols-* classes available for explicit override. */
.wc-best-for__grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
    justify-content: center;
}

/* Explicit column overrides */
.wc-best-for__grid.bf-cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.wc-best-for__grid.bf-cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.wc-best-for__grid.bf-cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Card */
.wc-best-for-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    -webkit-transition: box-shadow 180ms, -webkit-transform 180ms;
            transition: box-shadow 180ms, transform 180ms;
    box-sizing: border-box;
}

.wc-best-for-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
}

/* Icon circle — warm beige background */
.wc-best-for-card__icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fdf3e7;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 1.25rem;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.wc-best-for-card__icon svg,
.wc-best-for-card__icon img {
    width: 52px;
    height: 52px;
    stroke: #c0392b;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    display: block;
}

.wc-best-for-card__icon img {
    stroke: unset;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Card title */
.wc-best-for-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0 0 .75rem;
}

/* Card description */
.wc-best-for-card__desc {
    font-size: .875rem;
    color: #5a5a5a;
    line-height: 1.65;
    margin: 0;
    max-width: 30ch;
}

/* gap fallback — Safari < 14.1 */
.wc-best-for-card > * + * {
    margin-top: .75rem;
}

@supports (gap: 1rem) {
    .wc-best-for-card > * + * {
        margin-top: 0;
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wc-best-for-card {
        -webkit-transition: none;
                transition: none;
    }
    .wc-best-for-card:hover {
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
}

/* ── Mobile: single column ───────────────────────────────────── */
@media (max-width: 767px) {
    .wc-best-for__grid,
    .wc-best-for__grid.bf-cols-2,
    .wc-best-for__grid.bf-cols-3,
    .wc-best-for__grid.bf-cols-4 {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .wc-best-for-card {
        padding: 1.25rem 1rem;
    }

    .wc-best-for-card__icon {
        width: 72px;
        height: 72px;
    }

    .wc-best-for-card__icon svg,
    .wc-best-for-card__icon img {
        width: 40px;
        height: 40px;
    }

    .wc-best-for-card__desc {
        max-width: 100%;
    }
}