/**
 * Elite Tactician Design System - Cards v3
 * No-border cards with surface hierarchy, ambient shadows, bottom accent hover
 *
 * Version: 3.0
 * Date: March 2026
 */

/* =========================================
   BASE CARD - No-Line Rule
   ========================================= */
.card-v2,
.card {
    background: var(--et-surface-container-lowest);
    border: none;
    border-bottom: 4px solid transparent;
    border-radius: var(--radius-2xl, 1rem);
    box-shadow: none;
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.2s ease;
}

.card-v2:hover,
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-ambient);
    border-bottom-color: var(--et-secondary);
}

.card-static:hover {
    transform: none;
    box-shadow: none;
    border-bottom-color: transparent;
}

/* =========================================
   CARD HEADER/FOOTER - Spacing, no borders
   ========================================= */
.card-header-v2,
.card-header {
    border-bottom: none;
    background: transparent;
    padding: var(--space-5, 1.25rem) var(--space-5, 1.25rem) 0;
}

.card-header-v2 .card-title,
.card-header .card-title {
    font-family: var(--font-display);
}

.card-footer-v2,
.card-footer {
    border-top: none;
    background: transparent;
    padding: 0 var(--space-5, 1.25rem) var(--space-5, 1.25rem);
}

/* =========================================
   CARD VARIANTS - Surface-based
   ========================================= */

/* Flat card - no shadow, no hover lift */
.card-flat {
    box-shadow: none;
    border: none;
}

.card-flat:hover {
    box-shadow: var(--shadow-ambient-sm);
}

/* Raised card - permanent ambient shadow */
.card-raised {
    box-shadow: var(--shadow-ambient);
}

.card-raised:hover {
    box-shadow: var(--shadow-ambient-lg);
}

/* Gradient cards - no border override */
.card-gradient-primary {
    border: none;
    border-bottom: none;
}

.card-gradient-primary:hover {
    border-bottom-color: transparent;
}

.card-gradient-arena {
    border: none;
    border-bottom: none;
}

.card-gradient-arena:hover {
    border-bottom-color: transparent;
}

/* Status outline cards - use left accent only */
.card-outline-success {
    border: none;
    border-left: 4px solid var(--et-success);
    border-bottom: none;
}

.card-outline-warning {
    border: none;
    border-left: 4px solid var(--et-warning);
    border-bottom: none;
}

.card-outline-danger {
    border: none;
    border-left: 4px solid var(--et-error);
    border-bottom: none;
}

.card-outline-info {
    border: none;
    border-left: 4px solid var(--et-info);
    border-bottom: none;
}

/* Danger zone - subtle surface shift instead of hard border */
.card-danger-zone {
    border: none;
    border-left: 4px solid var(--et-error);
    background-color: var(--et-error-container);
}

/* =========================================
   LIST CARDS - No divider borders
   ========================================= */
.card-list .list-item {
    border-bottom: none;
}

.card-list .list-item + .list-item {
    padding-top: 0;
}

/* =========================================
   PROFILE CARDS - Remove profile-stats border
   ========================================= */
.card-profile .profile-stats {
    border-top: none;
    padding-top: var(--space-4, 1rem);
}

/* =========================================
   CARD GRID LAYOUTS
   ========================================= */
.card-grid {
    display: grid;
    gap: 1.5rem;
}

.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Mobile-first: single column on small screens */
@media (max-width: 639px) {
    .card-grid-2,
    .card-grid-3,
    .card-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .card-grid-3 { grid-template-columns: 1fr; }
    .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .card-grid-4 { grid-template-columns: repeat(4, 1fr); }
}