/* ============================================
   Campus Hearts — Characters Page
   ============================================ */

.characters-page .page-header { padding-bottom: var(--space-2xl); }

.character-section { padding: var(--space-5xl) 0; overflow: hidden; }
.character-section:nth-child(even) { background-color: var(--color-cream); }

.character-section__inner { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-3xl); align-items: center; }
.character-section:nth-child(even) .character-section__inner { direction: rtl; }
.character-section:nth-child(even) .character-section__inner > * { direction: ltr; }

.character-section__image-wrapper {
    position: relative; border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: var(--shadow-xl); background: var(--color-cream);
    width: 380px; height: 507px;
}
.character-section__image-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.7s ease; }
.character-section:hover .character-section__image-wrapper img { transform: scale(1.03); }
.character-section__color-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }

.character-section__info { padding: var(--space-lg) 0; }
.character-section__role {
    display: inline-block; font-size: 0.6875rem; font-weight: 700; font-family: var(--font-body);
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0.35rem var(--space-md); border-radius: var(--radius-full); margin-bottom: var(--space-lg);
}
.character-section__name { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--space-md); }
.character-section__tagline { font-size: 1.0625rem; color: var(--color-gray-600); line-height: 1.7; margin-bottom: var(--space-xl); font-style: italic; font-family: var(--font-heading); }

.character-traits { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.character-trait { font-size: 0.75rem; font-weight: 600; padding: 0.3rem var(--space-md); border-radius: var(--radius-full); border: 1px solid; letter-spacing: 0.02em; }

.character-details-toggle {
    background: none; border: none; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0;
}
.character-details-toggle:hover { opacity: 0.8; }
.character-details-toggle .arrow { transition: transform var(--transition-base); font-size: 0.75rem; }
.character-details-toggle.active .arrow { transform: rotate(90deg); }

.character-details { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
.character-details.active { max-height: 500px; }
.character-details__inner { padding: var(--space-lg) 0; border-top: 1px solid var(--color-gray-200); margin-top: var(--space-md); }
.character-details__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.character-detail__label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gray-500); margin-bottom: 2px; }
.character-detail__value { font-size: 0.9375rem; color: var(--color-gray-700); }

.character-dark-arc { margin-top: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-cream); border-left: 3px solid; }
.character-dark-arc__label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-sm); }
.character-dark-arc__text { font-size: 0.9375rem; color: var(--color-gray-600); line-height: 1.6; margin-bottom: 0; }

/* Choice Matters */
.choice-matters {
    background: linear-gradient(135deg, var(--color-midnight), var(--color-charcoal));
    color: var(--color-white); padding: var(--space-5xl) 0; position: relative;
}
.choice-matters::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(196,91,110,0.06) 0%, transparent 60%);
}
.choice-matters h2 { color: var(--color-white); text-align: center; margin-bottom: var(--space-3xl); position: relative; }

.choice-matters-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); position: relative; }

.choice-matter-card {
    text-align: left; padding: var(--space-xl);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg); transition: all var(--transition-base);
}
.choice-matter-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-4px); }
.choice-matter-card:nth-child(1) h3 { color: var(--color-rose-light); }
.choice-matter-card:nth-child(2) h3 { color: var(--color-gold-light); }
.choice-matter-card:nth-child(3) h3 { color: #93C5FD; }
.choice-matter-card h3 { font-size: 1.125rem; margin-bottom: var(--space-sm); font-family: var(--font-heading); }
.choice-matter-card p { color: var(--color-gray-500); font-size: 0.875rem; }

@media (max-width: 1024px) {
    .character-section__inner { grid-template-columns: 1fr; }
    .character-section:nth-child(even) .character-section__inner { direction: ltr; }
    .character-section__image-wrapper { width: 320px; height: 427px; margin: 0 auto; }
    .character-section { padding: var(--space-3xl) 0; }
}
@media (max-width: 768px) {
    .choice-matters-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .character-details__grid { grid-template-columns: 1fr; }
    .character-section__image-wrapper { width: 280px; height: 373px; }
    .character-section__name { font-size: clamp(1.5rem, 3vw, 2rem); }
    .character-section__tagline { font-size: 0.9375rem; }
    .choice-matters { margin-top: var(--space-3xl) !important; padding: var(--space-3xl) 0; }
}