/* ========================================
   ALBERATH WIKI - ROLE CARDS
   Shared styles for unit roles and effect types
   ======================================== */

/* ========== BASE ROLE CARD STYLES ========== */
.role-card {
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    padding-top: 50px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.role-icon-container {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.role-icon-large {
    width: 40px;
    height: 40px;
    color: white;
}

.role-badge-count {
    position: absolute;
    top: 57px;
    right: 22px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-darker-bg);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.role-title {
    margin: 0 0 var(--space-sm) 0;
    font-size: 1.5rem;
}

.role-description {
    color: var(--color-slate-light);
    line-height: 1.6;
    margin: 0;
    font-size: var(--fs-small);
}

/* ========== UNIT ROLES ========== */

/* Tank - Slate Gray */
.role-card-tank {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.15) 0%, rgba(51, 65, 85, 0.15) 100%);
    border: 2px solid rgba(100, 116, 139, 0.4);
}

.role-card-tank .role-icon-container {
    background: linear-gradient(135deg, #64748b, #334155);
}

.role-card-tank .role-badge-count {
    border-color: #64748b;
}

.role-card-tank .role-title {
    color: #94a3b8;
}

/* DPS - Red */
.role-card-dps {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(127, 29, 29, 0.15) 100%);
    border: 2px solid rgba(220, 38, 38, 0.4);
}

.role-card-dps .role-icon-container {
    background: linear-gradient(135deg, #dc2626, #7f1d1d);
}

.role-card-dps .role-badge-count {
    border-color: #dc2626;
}

.role-card-dps .role-title {
    color: #f87171;
}

/* Support - Green */
.role-card-support {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(20, 83, 45, 0.15) 100%);
    border: 2px solid rgba(22, 163, 74, 0.4);
}

.role-card-support .role-icon-container {
    background: linear-gradient(135deg, #16a34a, #14532d);
}

.role-card-support .role-badge-count {
    border-color: #16a34a;
}

.role-card-support .role-title {
    color: #4ade80;
}

/* Control - Purple */
.role-card-control {
    background: linear-gradient(135deg, rgba(139, 76, 139, 0.15) 0%, rgba(90, 47, 90, 0.15) 100%);
    border: 2px solid rgba(139, 76, 139, 0.4);
}

.role-card-control .role-icon-container {
    background: linear-gradient(135deg, #8b4c8b, #5a2f5a);
}

.role-card-control .role-badge-count {
    border-color: #8b4c8b;
}

.role-card-control .role-title {
    color: #c084c0;
}

/* Invocations - Gold */
.role-card-invocations {
    background: linear-gradient(135deg, rgba(212, 169, 79, 0.15) 0%, rgba(184, 147, 63, 0.15) 100%);
    border: 2px solid rgba(212, 169, 79, 0.4);
}

.role-card-invocations .role-icon-container {
    background: linear-gradient(135deg, #d4a94f, #b8933f);
}

.role-card-invocations .role-badge-count {
    border-color: #d4a94f;
}

.role-card-invocations .role-title {
    color: #fbbf24;
}

/* ========== EFFECT TYPES ========== */

/* Buffs - Green (same as Support) */
.role-card-buffs {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(20, 83, 45, 0.15) 100%);
    border: 2px solid rgba(22, 163, 74, 0.4);
}

.role-card-buffs .role-icon-container {
    background: linear-gradient(135deg, #16a34a, #14532d);
}

.role-card-buffs .role-badge-count {
    border-color: #16a34a;
}

.role-card-buffs .role-title {
    color: #4ade80;
}

/* Debuffs - Red (same as DPS) */
.role-card-debuffs {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(127, 29, 29, 0.15) 100%);
    border: 2px solid rgba(220, 38, 38, 0.4);
}

.role-card-debuffs .role-icon-container {
    background: linear-gradient(135deg, #dc2626, #7f1d1d);
}

.role-card-debuffs .role-badge-count {
    border-color: #dc2626;
}

.role-card-debuffs .role-title {
    color: #f87171;
}

/* Systemic - Gold (same as Invocations) */
.role-card-systemic {
    background: linear-gradient(135deg, rgba(212, 169, 79, 0.15) 0%, rgba(184, 147, 63, 0.15) 100%);
    border: 2px solid rgba(212, 169, 79, 0.4);
}

.role-card-systemic .role-icon-container {
    background: linear-gradient(135deg, #d4a94f, #b8933f);
}

.role-card-systemic .role-badge-count {
    border-color: #d4a94f;
}

.role-card-systemic .role-title {
    color: #fbbf24;
}

/* ========== PAGE HEADER STYLES ========== */
.page-header {
    margin: 0 0 var(--space-2xl) 0;
}

/* Remove extra top margin on tablet/desktop where nav is fixed */
@media (min-width: 770px) {
    .page-header {
        margin-top: 0;
    }
}

.page-title {
    margin-bottom: var(--space-md);
    font-size: 3rem;
}

.page-subtitle {
    font-size: 1.1em;
    margin: 0;
}

/* ========== SECTION STYLES ========== */
.section-title {
    margin-bottom: var(--space-lg);
}

.section-intro {
    margin-bottom: var(--space-xl);
}

.subsection-title {
    margin-bottom: var(--space-lg);
    color: var(--gold);
}

/* ========== ROLE GRID ========== */
.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    margin-top: var(--space-2xl);
}

/* ========== MODERN UNIT CARDS ========== */
.unit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #1a2e2e 0%, #0f342e 100%);
    border: 2px solid var(--color-slate-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: var(--transition-normal);
    text-decoration: none;
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.unit-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-cyan);
    box-shadow: 0 0 25px rgba(77, 217, 217, 0.4);
}

.unit-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    width: 100%;
}

.unit-card-portrait {
    width: 180px;
    height: 180px;
    object-fit: contain;
}

.unit-card-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.unit-card h3 {
    color: var(--color-primary);
    margin: 0;
    font-size: var(--fs-h3);
}

.unit-card:hover h3 {
    color: var(--color-accent-cyan);
}

/* Override for centered tags in unit cards */
.unit-card .tag-container {
    justify-content: center;
}

.unit-card-description {
    color: var(--color-slate-light);
    line-height: 1.5;
    margin: 0;
}