/* Image fallback system for missing tool logos */

.tool-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Specific tool logo fallbacks with brand colors */
img[alt="HubSpot"].tool-logo {
    background: linear-gradient(135deg, #ff7a59 0%, #ff5722 100%);
}

img[alt="Salesforce"].tool-logo {
    background: linear-gradient(135deg, #00a1e0 0%, #0070d2 100%);
}

img[alt="Jasper AI"].tool-logo,
img[alt="Jasper"].tool-logo {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

img[alt="ChatGPT"].tool-logo {
    background: linear-gradient(135deg, #10a37f 0%, #08885a 100%);
}

img[alt="Mailchimp"].tool-logo {
    background: linear-gradient(135deg, #ffe01b 0%, #ffc107 100%);
    color: #333;
}

img[alt="SEMrush"].tool-logo,
img[alt="Semrush"].tool-logo {
    background: linear-gradient(135deg, #ff642d 0%, #e55527 100%);
}

img[alt="Notion"].tool-logo {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
}

img[alt="Slack"].tool-logo {
    background: linear-gradient(135deg, #4a154b 0%, #350d36 100%);
}

img[alt="Canva"].tool-logo {
    background: linear-gradient(135deg, #00c4cc 0%, #7b68ee 100%);
}

img[alt="Zoom"].tool-logo {
    background: linear-gradient(135deg, #2d8cff 0%, #1e6ba8 100%);
}

img[alt="Google Analytics"].tool-logo {
    background: linear-gradient(135deg, #f4b400 0%, #e37400 100%);
}

/* Fallback content using pseudo-elements */
.tool-logo::before {
    content: attr(alt);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hide broken image icon */
.tool-logo {
    color: transparent;
}

.tool-logo::before {
    color: white;
}

/* Specific tool abbreviations */
img[alt="HubSpot"].tool-logo::before { content: "HS"; }
img[alt="Salesforce"].tool-logo::before { content: "SF"; }
img[alt="Jasper AI"].tool-logo::before,
img[alt="Jasper"].tool-logo::before { content: "JAI"; }
img[alt="ChatGPT"].tool-logo::before { content: "GPT"; }
img[alt="Mailchimp"].tool-logo::before { content: "MC"; color: #333; }
img[alt="SEMrush"].tool-logo::before,
img[alt="Semrush"].tool-logo::before { content: "SEM"; }
img[alt="Notion"].tool-logo::before { content: "N"; }
img[alt="Slack"].tool-logo::before { content: "S"; }
img[alt="Canva"].tool-logo::before { content: "C"; }
img[alt="Zoom"].tool-logo::before { content: "Z"; }
img[alt="Google Analytics"].tool-logo::before { content: "GA"; }

/* Hover effects */
.tool-logo:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}