/* =============================================
   SkillBeings – Tools Grid Widget  v3.1.0
   ============================================= */

/* ── Section wrapper ── */
.sbg-section {
    position: relative;
    background-color: #0a0f1a;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 20px;
}

/* ── Overlays (sit between BG image and content) ── */
.sbg-overlay,
.sbg-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.sbg-overlay  { background-color: rgba(6,10,20,0.72); opacity: 0.72; }
.sbg-gradient { background: linear-gradient(180deg, rgba(27,94,66,0.35) 0%, transparent 100%); }

/* ── Inner content sits above overlays ── */
.sbg-inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* ── Header ── */
.sbg-header {
    text-align: center;
    margin-bottom: 32px;
}

/* Badge */
.sbg-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #6fcf97;
    background: rgba(96,190,150,0.10);
    border: 1px solid rgba(96,190,150,0.25);
    border-radius: 100px;
    padding: 5px 14px 5px 10px;
    margin-bottom: 16px;
}
.sbg-bdot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #6fcf97;
    animation: sbg-pulse 2s ease infinite;
    flex-shrink: 0;
}
@keyframes sbg-pulse {
    0%,100%{ opacity:1; transform:scale(1); }
    50%     { opacity:.3; transform:scale(1.7); }
}

/* Heading */
.sbg-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #f0f6ff;
    margin: 0 0 10px;
}
.sbg-heading em { font-style: italic; color: #6fcf97; }

.sbg-sub {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(200,220,240,0.55);
    max-width: 440px;
    margin: 0 auto;
}

/* ══════════════════════════════
   DESKTOP GRID
══════════════════════════════ */
.sbg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ── Card ── */
.sbg-card {
    position: relative;
    border-radius: 14px !important;
    padding: 2px;
    cursor: default;
    transition: transform .3s cubic-bezier(.22,.68,0,1.3);
}
/* static idle border ring */
.sbg-card::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 14px !important;
    border: 1.5px solid rgba(96,190,150,0.12);
    pointer-events: none;
    transition: opacity .2s;
}
.sbg-card:hover::after  { opacity: 0; }
.sbg-card:hover { transform: translateY(-4px) scale(1.02); }

/* Inner surface */
.sbg-card-inner {
    background: #0f1e2e;
    border-radius: 12px !important;
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: background .2s;
    box-sizing: border-box;
}
.sbg-card-inner::before {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(ellipse at 40% 0%, rgba(255,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.sbg-card:hover .sbg-card-inner { background: #132030; }

/* ── Logo box ── */
.sbg-logo-box {
    width: auto; min-width: 58px; max-width: 120px; height: 58px;
    border-radius: 12px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative; z-index: 1;
    transition: transform .28s cubic-bezier(.22,.68,0,1.3), box-shadow .22s;
}
.sbg-logo-box img {
    width: auto; max-width: 120px; height: 58px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    flex-shrink: 0;
}
.sbg-logo-box svg {
    width: 58px; height: 58px;
    display: block;
    border-radius: 12px;
    flex-shrink: 0;
}
.sbg-abbr {
    font-size: 15px;
    font-weight: 800;
    font-family: 'DM Sans', system-ui, sans-serif;
    letter-spacing: -.02em;
}
.sbg-card:hover .sbg-logo-box {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* ── Tool name ── */
.sbg-tool-name {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(220,235,255,0.85);
    text-align: center;
    line-height: 1.25;
    position: relative; z-index: 1;
    transition: color .2s;
}
.sbg-card:hover .sbg-tool-name { color: #9ee8c0; }

/* ── Category tag ── */
.sbg-tool-tag {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(96,190,150,0.55);
    background: rgba(96,190,150,0.08);
    border: 1px solid rgba(96,190,150,0.15);
    border-radius: 100px;
    padding: 2px 7px;
    position: relative; z-index: 1;
    transition: background .2s, color .2s, border-color .2s;
}
.sbg-card:hover .sbg-tool-tag {
    background: rgba(96,190,150,0.14);
    color: #6fcf97;
    border-color: rgba(96,190,150,0.28);
}

/* ══════════════════════════════
   STATS STRIP
══════════════════════════════ */
.sbg-strip {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(96,190,150,0.12);
    border-radius: 10px;
    overflow: hidden;
}
.sbg-sc {
    padding: 14px 16px;
    border-right: 1px solid rgba(96,190,150,0.10);
    position: relative;
    transition: background .2s;
}
.sbg-sc:last-child { border-right: none; }
.sbg-sc::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #e8692a, #6fcf97, transparent);
    opacity: 0; transition: opacity .2s;
}
.sbg-sc:hover { background: rgba(96,190,150,0.05); }
.sbg-sc:hover::before { opacity: 1; }
.sbg-sv {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #6fcf97;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -.02em;
}
.sbg-sl {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(176,202,228,0.5);
    line-height: 1.5;
}

/* ══════════════════════════════
   MOBILE SCROLL (hidden by default)
══════════════════════════════ */
.sbg-mobile-wrap { display: none; }

/* ══════════════════════════════
   TABLET  (≤ 860px)
══════════════════════════════ */
@media (max-width: 860px) {
    .sbg-grid  { grid-template-columns: repeat(3,1fr); }
    .sbg-strip { grid-template-columns: repeat(2,1fr); }
    .sbg-sc:nth-child(2) { border-right: none; }
    .sbg-sc:nth-child(3),
    .sbg-sc:nth-child(4) { border-top: 1px solid rgba(96,190,150,0.10); }
}

/* ══════════════════════════════
   MOBILE  (≤ 600px)
══════════════════════════════ */
@media (max-width: 600px) {
    .sbg-inner  { padding: 32px 14px; }
    .sbg-header { margin-bottom: 22px; }
    .sbg-heading { font-size: 1.6rem; }
    .sbg-grid { display: none; }
    .sbg-mobile-wrap { display: block; }

    .sbg-swipe-hint {
        display: flex; align-items: center; justify-content: center;
        gap: 5px; font-size: 10px; font-weight: 500; letter-spacing: .05em;
        color: rgba(96,190,150,0.4); margin-bottom: 10px;
        animation: sbg-hint-fade 2.5s 1.8s ease forwards;
    }
    @keyframes sbg-hint-fade { to { opacity:0; pointer-events:none; } }

    .sbg-scroll-block { margin-bottom: 6px; }
    .sbg-row-label {
        font-size: 9px; font-weight: 700; letter-spacing: .12em;
        text-transform: uppercase; color: rgba(96,190,150,0.4);
        margin-bottom: 9px; padding-left: 2px;
        display: flex; align-items: center; gap: 6px;
    }
    .sbg-row-label::after {
        content:''; flex:1; height:1px;
        background: linear-gradient(to right, rgba(96,190,150,0.15), transparent);
    }
    .sbg-scroll-row {
        display: flex; gap: 11px;
        overflow-x: auto; overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 4px 4px 12px;
        scrollbar-width: none; cursor: grab;
    }
    .sbg-scroll-row:active { cursor: grabbing; }
    .sbg-scroll-row::-webkit-scrollbar { display: none; }
    .sbg-scroll-row .sbg-card {
        flex: 0 0 148px; min-width: 148px;
        scroll-snap-align: start;
        opacity: 1 !important; transform: none !important;
    }
    .sbg-scroll-row .sbg-card-inner { padding: 12px 10px 10px; }
    .sbg-scroll-row .sbg-logo-box   { width: auto; max-width: 110px; height: 50px; border-radius: 10px; }
    .sbg-scroll-row .sbg-logo-box img { width: auto; max-width: 110px; height: 50px; object-fit: contain; border-radius: 8px; }
    .sbg-scroll-row .sbg-logo-box svg { width: 50px; height: 50px; border-radius: 10px; }
    .sbg-scroll-row .sbg-tool-name  { font-size: 11px; }

    .sbg-row-dots {
        display: flex; justify-content: center; align-items: center;
        gap: 5px; margin-top: 2px; margin-bottom: 14px;
    }
    .sbg-rdot {
        width: 5px; height: 5px; border-radius: 50%;
        background: rgba(96,190,150,0.2);
        transition: all .25s ease; cursor: pointer; flex-shrink: 0;
    }
    .sbg-rdot.on { background: #6fcf97; width: 18px; border-radius: 3px; }

    .sbg-strip { grid-template-columns: repeat(2,1fr); border-radius: 10px; margin-top: 12px; }
    .sbg-sc { padding: 12px 14px; }
    .sbg-sc:nth-child(2) { border-right: none; }
    .sbg-sc:nth-child(3) { border-top: 1px solid rgba(96,190,150,0.10); }
    .sbg-sc:nth-child(4) { border-right: none; border-top: 1px solid rgba(96,190,150,0.10); }
    .sbg-sv { font-size: 1.4rem; }
}