/* Tools page add-on — designed to blend with your About Us aesthetic */
:root {
    --mb-border: rgba(255,255,255,0.10);
    --mb-border-soft: rgba(255,255,255,0.08);
    --mb-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 100%);
    --mb-text: #f2f2f2;
    --mb-muted: #d6d6d6;
    --mb-accent: rgb(65,190,234);
}

/* Section wrapper */
.tools-panel {
    margin: 0 auto 1.5rem;
    max-width: 1200px;
    padding: 1.25rem;
    border: 1px solid var(--mb-border-soft);
    border-radius: 12px;
    background: var(--mb-panel-bg);
}

/* Intro line */
.tools-intro {
    color: var(--mb-muted);
    margin: .25rem 0 1rem;
    font-size: .95rem;
}

/* Table-like list */
.tools-table {
    display: grid;
    gap: .75rem;
}

/* One row: left (icon+name) | right (link) */
.tool-row {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    align-items: center;
    gap: 1rem;
    padding: .85rem .95rem;
    border: 1px solid var(--mb-border);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    transition: border-color .2s ease, transform .06s ease;
}

    .tool-row:hover {
        border-color: rgba(65,190,234,.55);
        transform: translateY(-1px);
    }

/* Left side */
.tool-left {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
    align-items: center;
}

.tool-icon {
    border: none; /* remove border */
    background: none; /* remove background */
    width: auto; /* let image size itself */
    height: auto; /* let image size itself */
    border-radius: 0; /* remove rounding unless you want rounded images */
    display: inline-block;
}

    .tool-icon img {
        display: block;
        max-width: 58px; /* still cap to keep layout consistent */
        max-height: 58px;
        object-fit: contain; /* scale to fit within max dimensions */
/*        border-radius: 12px;
*/    }


/*.tool-icon {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--mb-border);
    background: rgba(0,0,0,.35);
    display: grid;
    place-items: center;
}*/

/*    .tool-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }*/

    /*.tool-icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;*/ /* show the whole image, keep aspect ratio */
        /*background-color: #0f1218;*/ /* fallback background */
        /*padding: 4px;*/ /* optional: small padding so images don’t touch edges */
        /*border-radius: 12px;*/ /* match parent shape */
    /*}*/


.tool-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--mb-accent);
    background: radial-gradient(120% 120% at 30% 10%, rgba(65,190,234,0.25), transparent 60%);
}

.tool-name {
    color: var(--mb-text);
    font-weight: 600;
    letter-spacing: .2px;
}

/* Right side: link */
.tool-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.tool-link {
    display: inline-flex;
    align-items: center;
    padding: .55rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--mb-border);
    background: rgba(0,0,0,.35);
    color: var(--mb-text);
    text-decoration: none;
    font-weight: 600;
    word-break: break-all;
    transition: border-color .2s ease, background .2s ease, transform .06s ease;
}

    .tool-link:hover {
        border-color: rgba(65,190,234,.65);
        background: rgba(65,190,234,.12);
        transform: translateY(-1px);
    }

/* Responsive tweaks to keep it clean on small screens */
@media (max-width: 900px) {
    .tool-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .tool-right {
        padding-left: calc(58px + .9rem);
    }
}

@media (max-width: 560px) {
    .tool-right {
        padding-left: 0;
    }

    .tool-left {
        grid-template-columns: 58px 1fr;
    }
}