/* ── Common View Elements ────────────────────────────────────── */

/* Forms */
label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--toi-text-muted); margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="url"], textarea, select {
    width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--toi-border);
    border-radius: var(--radius-md); padding: 10px var(--spacing-md); color: var(--toi-text);
    transition: all var(--transition-fast); outline: none; font-size: 0.95rem;
}

input:focus, textarea:focus, select:focus { border-color: var(--toi-accent); background: rgba(96, 200, 240, 0.04); box-shadow: 0 0 0 3px var(--toi-accent-glow2); }

/* Alerts */
.alert { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); display: flex; align-items: center; gap: var(--spacing-md); font-size: 0.9rem; font-weight: 500; }
.alert-info { background: rgba(96, 200, 240, 0.06); border: 1px solid rgba(96, 200, 240, 0.2); color: var(--toi-accent); }

/* Page Animations */
.reveal { opacity: 0; transform: translateY(24px); transition: all 0.7s var(--ease-out); will-change: transform, opacity; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Header Elements */
.page-header {
    position: relative; height: 56vh; min-height: 360px; max-height: 520px;
    display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--spacing-2xl);
    background-size: cover; background-position: center top; overflow: hidden;
}

.page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,8,11,0.2) 0%, rgba(6,8,11,0.4) 40%, rgba(6,8,11,0.85) 80%, var(--toi-bg) 100%); z-index: 1; }
.page-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 15% 30%, rgba(96, 200, 240, 0.08) 0%, transparent 60%); z-index: 1; }
.page-header .container { position: relative; z-index: 2; }

/* Timeline Elements */
.timeline-container { position: relative; max-width: 820px; margin: 0 auto; padding: 0 var(--spacing-md); }
.timeline-line { position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent 0%, var(--toi-accent) 15%, var(--toi-accent) 85%, transparent 100%); opacity: 0.2; }
.timeline-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-2xl); }
.timeline-item { position: relative; width: 100%; display: flex; align-items: center; }
.timeline-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; background: var(--toi-bg); border: 1px solid rgba(96, 200, 240, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 0 16px var(--toi-accent-glow); }
.timeline-card { width: calc(50% - 44px); position: relative; }
@media (max-width: 768px) { .timeline-line { left: 18px; transform: none; } .timeline-item { justify-content: flex-start !important; padding-left: 44px; } .timeline-dot { left: 18px; transform: translate(-50%, -50%); } .timeline-card { width: 100% !important; margin: 0 !important; } }

.media-meta-row {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.8rem;
    margin-bottom: var(--spacing-md);
    color: var(--toi-text-muted);
}

.media-meta-row strong {
    color: var(--toi-text);
}