/* =====================================================
   Stylish Product Grid v2 – Image-Box Card Styles
   ===================================================== */

/* ── Grid wrapper ───────────────────────────────── */
.spg-grid {
    display: grid;
    grid-template-columns: repeat( var(--spg-columns, 3), 1fr );
    gap: var(--spg-gap, 28px);
    align-items: stretch;
}

/* ── Card shell ─────────────────────────────────── */
.spg-card {
    display: flex;
    flex-direction: column;
    height: 100%;           /* equal-height via grid stretch */
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition:
        transform  0.38s cubic-bezier(.22,.68,0,1.2),
        box-shadow 0.38s ease;
    box-shadow: 0 4px 24px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.06);
}

/* ── Hover effects ──────────────────────────────── */
.spg-hover-lift  .spg-card:hover { transform: translateY(-8px); box-shadow: 0 18px 48px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08); }
.spg-hover-glow  .spg-card:hover { box-shadow: 0 0 0 3px rgba(15,76,129,.45), 0 16px 48px rgba(15,76,129,.18); }
.spg-hover-scale .spg-card:hover { transform: scale(1.03); box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.spg-hover-none  .spg-card:hover { transform: none; }

/* =====================================================
   IMAGE BOX
   ===================================================== */
.spg-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: var(--spg-ratio, 4/3);
    overflow: hidden;
    flex-shrink: 0;
    background: #d1d5db;  /* fallback if no image */
}

/* Actual image */
.spg-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(.22,.68,0,1.15);
}
.spg--img-scale .spg-card__img-wrap:hover .spg-card__img {
    transform: scale(1.08);
}

/* Placeholder when no image */
.spg-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8eaf0 0%, #c9cdd8 100%);
}

/* ── Gradient overlay with product name at bottom ─ */
.spg-card__img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 20px 20px 20px;

    /* Gradient: top transparent → bottom dark */
    background: linear-gradient(
        to bottom,
        var(--spg-ov-start, rgba(0,0,0,0))    0%,
        rgba(0,0,0,.15)                        55%,
        var(--spg-ov-end,   rgba(0,0,0,.72)) 100%
    );

    /* Smooth appearance */
    transition: background 0.3s ease;
}

/* Product Name */
.spg-card__name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    letter-spacing: -0.01em;

    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Product Type tag ────────────────────────────── */
.spg-card__type {
    position: absolute;
    z-index: 3;
    top: 14px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #fff;
    background: #0f4c81;
    padding: 5px 14px;
    border-radius: 100px;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
    white-space: nowrap;

    /* Subtle entrance */
    transition: opacity 0.2s ease;
}
.spg-card__type.spg-type--top-left  { left: 14px; }
.spg-card__type.spg-type--top-right { right: 14px; }

/* =====================================================
   CONTENT BODY
   ===================================================== */
.spg-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;            /* stretches to fill remaining card height */
    padding: 22px;
    gap: 14px;
    background: #fff;
}

/* ── Description ─────────────────────────────────── */
.spg-card__desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #5a6272;
}

/* ── Divider ─────────────────────────────────────── */
.spg-card__divider {
    border: none;
    border-top: 1.5px solid #e8eaf0;
    margin: 0;
}

/* ── Features list ───────────────────────────────── */
.spg-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spg-card__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

/* Icon bubble */
.spg-card__feature-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #eef3fb;
    color: #0f4c81;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Feature text */
.spg-card__feature-text {
    font-size: 13px;
    color: #1e2235;
    font-weight: 500;
}

/* =====================================================
   Responsive – Elementor responsive controls inject
   --spg-columns via inline style per breakpoint.
   The rules below are safety fallbacks only.
   ===================================================== */
@media (max-width: 1024px) {
    .spg-grid:not([style*="--spg-columns"]) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .spg-grid:not([style*="--spg-columns"]) {
        grid-template-columns: 1fr;
    }
    .spg-card__name {
        font-size: 16px;
    }
}

/* =====================================================
   Accessibility – reduce motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .spg-card,
    .spg-card__img {
        transition: none !important;
        transform: none !important;
    }
}