/* ===================================================================
   AI Models Resource Page
   =================================================================== */

.resources-container { max-width: 900px; margin: 32px auto; padding: 24px; color: var(--text-color); }
.resources-header { text-align: center; margin-bottom: 32px; }
.resources-header h1 { font-family: 'Press Start 2P', cursive; font-size: 2rem; margin-bottom: 16px; }
.resources-header p.lead { font-size: 1.1rem; max-width: 600px; margin: 0 auto; color: var(--text-color); opacity: 0.9; }

/* --- Filter Tag Bar --- */
.filter-tags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
    padding-inline: 5%;
}

.filter-tag {
    background-color: var(--text-color2);
    color: var(--text-color);
    border: 2px solid var(--text-color);
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 0.7rem;
    cursor: cell;
    transition: all 0.2s ease;
    text-transform: lowercase;
}

.filter-tag:hover {
    background-color: var(--text-color2-t);
    transform: translateY(-2px);
}

.filter-tag.active {
    background-color: var(--contrast-color);
    border-color: var(--contrast-color);
    color: var(--background-color, #fff);
}

/* --- Model Card Styling --- */
.model-card-container {
    display: grid;
    gap: 32px;
}

.model-card {
    background-color: var(--text-color2-t);
    border: 1px solid var(--text-color);
    border-radius: 8px;
    padding: 24px;
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: block;
}

.model-card.hidden {
    opacity: 0;
    transform: scale(0.95);
    display: none;
}

.model-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 16px; }
.model-header h3 { margin: 0; font-family: 'Press Start 2P', cursive; font-size: 1.3rem; line-height: 1.4; }
.model-cost { background-color: var(--text-color2); border: 1px solid var(--text-color); color: var(--text-color); padding: 8px 12px; border-radius: 5px; font-weight: bold; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.model-cost img { width: 20px; height: 20px; }
.model-tags { margin-bottom: 16px; }

.model-tag {
    display: inline-block;
    background-color: var(--text-color);
    color: var(--text-color2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-right: 6px;
    margin-bottom: 6px;
    text-transform: lowercase;
}

.model-description { line-height: 1.6; margin-bottom: 24px; }
.model-details { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--text-color); }
.model-details h4 { font-family: 'Press Start 2P', cursive; font-size: 0.9rem; margin-bottom: 12px; }
.ratings-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; font-size: 0.9rem; }
.rating-bar { width: 100%; height: 12px; background-color: var(--text-color2); border: 1px solid var(--text-color); border-radius: 5px; overflow: hidden; }
.rating-bar-inner { height: 100%; background-color: var(--contrast-color); }
.tech-info-list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.tech-info-list li { margin-bottom: 8px; }
.tech-info-list strong { color: var(--contrast-color); }
.model-examples { margin-top: 24px; }

.examples-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.example-link { display: block; border-radius: 4px; overflow: hidden; border: 1px solid transparent; transition: transform 0.2s ease, border-color 0.2s ease; }
.example-link:hover { transform: scale(1.05); border-color: var(--contrast-color); }
.example-img { width: 100%; height: 100%; display: block; border-radius: 4px; aspect-ratio: 1 / 1; object-fit: cover; image-rendering: pixelated; }

@media (min-width: 768px) { .model-details { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .examples-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .examples-grid { grid-template-columns: repeat(3, 1fr); } }