/**
 * 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-radius: var(--radius-2xl, 1rem);
    box-shadow: none;
    transition:
        transform 0.25s cubic-bezier(0.2, 0, 0, 1),
        box-shadow 0.25s ease;
}

.card-v2:hover,
.card:hover {
    box-shadow: var(--shadow-ambient);
}

.card-static:hover {
    transform: none;
    box-shadow: none;
}

/* =========================================
   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 - hero/feature callouts, dark backgrounds enforce light text */
.card-gradient-primary {
    background: var(--gradient-primary);
    border: none;
    color: var(--et-on-primary);
}

.card-gradient-arena {
    background: var(--gradient-arena);
    border: none;
    color: var(--et-on-primary);
}

.card-gradient-primary .card-title,
.card-gradient-arena .card-title {
    color: var(--et-on-primary);
}

/* Unlayered element rules (e.g. typography-v3 p) beat Tailwind's layered
   text-white utilities, so enforce readable body copy here too */
.card-gradient-primary p {
    color: rgba(255, 255, 255, 0.85);
}

.card-gradient-arena p {
    color: var(--et-on-primary-container);
}

/* Status panels - tinted surface + hairline border (v3.1) */
.card-outline-success {
    background-color: var(--et-success-container);
    border: 1px solid color-mix(in srgb, var(--et-success) 35%, transparent);
    color: var(--et-on-success-container);
}

.card-outline-warning {
    background-color: var(--et-warning-container);
    border: 1px solid color-mix(in srgb, var(--et-warning) 35%, transparent);
    color: var(--et-on-warning-container);
}

.card-outline-danger {
    background-color: var(--et-error-container);
    border: 1px solid color-mix(in srgb, var(--et-error) 35%, transparent);
    color: var(--et-on-error-container);
}

.card-outline-info {
    background-color: var(--et-info-container);
    border: 1px solid color-mix(in srgb, var(--et-info) 35%, transparent);
    color: var(--et-on-info-container);
}

/* Danger zone - tinted panel, matches card-outline-danger */
.card-danger-zone {
    background-color: var(--et-error-container);
    border: 1px solid color-mix(in srgb, var(--et-error) 35%, transparent);
}

/* Status panels are static - no hover lift */
.card-outline-success:hover,
.card-outline-warning:hover,
.card-outline-danger:hover,
.card-outline-info:hover,
.card-danger-zone:hover {
    box-shadow: none;
}

/* =========================================
   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); }
}