{# Base card template that other card types will extend #}
{% load static %}

<article class="card h-100 position-relative overflow-hidden {{ card_class|default:'' }}" 
         {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}>
    {# Card Image Section #}
    {% if image_url %}
    <div class="card-img-container position-relative" style="height: {{ image_height|default:'200px' }}">
        <img src="{{ image_url }}" 
             class="card-img-top h-100 w-100" 
             alt="{{ image_alt|default:'' }}"
             loading="lazy"
             width="400"
             height="300"
             data-fallback-src="{% static 'images/placeholder.jpg' %}"
             onerror="this.onerror=null; this.src='{% static 'images/placeholder.jpg' %}'">
        {% if platform %}
            <span class="platform-tag">{{ platform }}</span>
        {% endif %}
        {% block image_overlay %}{% endblock %}
    </div>
    {% endif %}
    
    {# Card Body #}
    <div class="card-body d-flex flex-column">
        {% block card_body %}{% endblock %}
    </div>
    
    {# Card Footer #}
    {% block card_footer %}{% endblock %}
    
    {# Loading Overlay #}
    <div class="card-loading-overlay position-absolute top-0 start-0 w-100 h-100 d-none" 
         style="background: rgba(255,255,255,0.8); z-index: 10;">
        <div class="position-absolute top-50 start-50 translate-middle">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
</article>

{# Common card styles #}
<style>
    .card {
        --card-border-radius: 0.75rem;
        --card-padding: 1.25rem;
        --card-transition: all 0.2s ease-in-out;
        
        transition: var(--card-transition);
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: var(--card-border-radius) !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
    }
    
    .card-img-container {
        overflow: hidden;
        background-color: #f8f9fa;
        position: relative;
    }
    
    .card-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        background-color: #f8f9fa;
    }
    
    .card:hover .card-img-container img {
        transform: scale(1.03);
    }
    
    .card-body {
        padding: var(--card-padding);
        flex: 1;
    }
    
    .card-footer {
        background-color: transparent;
        border-top: 1px solid rgba(0,0,0,0.05);
        padding: 1rem var(--card-padding);
    }
    
    /* Badge styles */
    .card .badge {
        font-weight: 500;
        letter-spacing: 0.3px;
        padding: 0.35em 0.65em;
        border-radius: 0.25rem;
    }
    
    /* Focus styles for accessibility */
    .card:focus-within {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }
    
    /* Loading state */
    .card.is-loading .card-loading-overlay {
        display: block !important;
    }
    
    /* Responsive adjustments */
    @media (max-width: 767.98px) {
        .card {
            --card-padding: 1rem;
        }
    }
    .platform-tag {
        font-size: 0.85rem;
        background: var(--bs-primary, #0d6efd);
        color: #fff;
        border-radius: 999px;
        padding: 0.25em 0.9em;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        font-weight: 600;
        letter-spacing: 0.5px;
        pointer-events: none;
        user-select: none;
        opacity: 0.97;
    }
</style>