/* Tools Directory Page Styles */

/* Ensure main element has proper width to align with header */
main {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 0; /* Preserve top margin for fixed header */
    padding: 0 20px;
}

/* Adjust for mobile header height */
@media (max-width: 768px) {
    main {
        margin-top: 76px; /* Account for taller mobile header with touch targets */
    }
}

/* Standard JAI card grid for tools page */
.jai-container {
    
    /* Override auto-fit with fixed 3-column grid */
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    max-width: 1000px;
}

/* Responsive grid adjustments */
@media (width <= 1024px) and (width >= 769px) {
    .jai-container {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (width <= 768px) {
    .jai-container {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .jai-card {
        max-width: 400px;
    }
}

/* Back button styling */
.back-button-container {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Image container optimization */
.jai-image {
    height: 160px;
    width: 100%;
    background-color: #f5f5f5;
    background-position: center;
    background-size: cover;
    position: relative;
    contain: layout style paint;
}

/* Card dimensions */
.jai-card {
    max-width: 100%;
    width: 100%;
    min-height: 360px;
    height: 100%;
}

/* Tool-specific image styles for real mode */
html.real-mode-html .jai-card:nth-child(1) .jai-image {
    background-image: url("../../images/app-banners/log-linter-banner-new.svg");
}

html.real-mode-html .jai-card:nth-child(2) .jai-image {
    background-image: url("../../images/app-banners/prompt-clipper-banner.svg");
}

html.real-mode-html .jai-card:nth-child(3) .jai-image {
    background-image: url("../../images/app-banners/coffee-app-banner.svg");
}

html.real-mode-html .jai-card:nth-child(4) .jai-image {
    background-image: url("../../images/app-banners/tea-app-banner.svg");
}

html.real-mode-html .jai-card:nth-child(5) .jai-image {
    background-image: url("../../images/app-banners/debug-banner.svg");
}

/* Image transition effects */
.jai-image img {
    transition: opacity 0.2s ease;
    will-change: transform;
    transform: translateZ(0);
}