:root {
    --text-color-soft: rgba(60, 56, 51, 0.8);
    --text-color-link: #0c7d88;
    --text-color-link-hover: #b300e6;

    --line-strong: 2px;
    --line-emphasis: 3px;

    --button-shadow-soft: 0 0.25rem 0.625rem var(--shadow-soft);
    --nav-menu-top: 4.5rem;
    --logo-size: 6rem;
    --logo-size-mobile: 4.2rem;
    --link-underline-thickness: 2px;
    --tag-padding-y: 0.2rem;
    --tag-padding-x: 0.55rem;
    --badge-gap: 0.45rem;
    --transition-fast: 0.15s ease;

    --radius-pill: 999px;
   
    --body-size-small: 0.9rem;
}

.cv-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cv-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0.75rem;
    border-radius: var(--radius-pill);
    border: var(--line) solid var(--border-color);
    background: rgba(245, 240, 232, 0.45);
    color: var(--text-color-0);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.cv-filter-toggle:hover {
    border-color: var(--accent-color);
    box-shadow: var(--button-shadow-soft);
    transform: translateY(-1px);
}

.cv-filter-toggle.active {
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0.5rem rgba(245, 240, 232, 0.8);
}

.cv-category-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.cv-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.cv-event-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.cv-event-row[hidden] {
    display: none;
}

.cv-event-logo {
    flex: 0 0 var(--logo-size);
    display: flex;
    justify-content: center;
    padding-top: var(--space-1);
}

.cv-event-logo-ring {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: var(--line-strong) solid currentColor;
    background: color-mix(in srgb, currentColor 14%, var(--glass-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10%;
}

.cv-event-logo-ring-empty {
    border-style: dashed;
    opacity: 0.55;
}

.cv-event-logo-ring img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cv-event-card {
    flex: 1;
    padding: 0.9rem 1rem;
    border-left: var(--line-emphasis) solid var(--cv-category-color, var(--border-color));
}

.cv-event-card.content-card:hover {
    border-color: var(--cv-category-color, var(--border-color));
}

.cv-event-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.cv-event-org,
.cv-event-date {
    color: var(--text-color-soft);
}

.cv-event-card a {
    color: var(--text-color-link);
    text-decoration: underline;
    text-decoration-thickness: var(--link-underline-thickness);
    text-underline-offset: 2px;
    font-weight: 700;
}

.cv-event-card a:hover,
.cv-event-card a:focus-visible {
    color: var(--text-color-link-hover);
}

.cv-event-highlights {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--badge-gap);
}

.cv-event-badge {
    padding: var(--tag-padding-y) var(--tag-padding-x);
    border-radius: var(--radius-pill);
    border: var(--line) solid var(--border-color);
    background: var(--glass-bg-soft);
    font-size: var(--body-size-small);
}

@media (max-width: 700px) {
    .cv-event-row {
        flex-direction: column;
    }

    .cv-event-logo {
        width: 100%;
        flex: 0 0 auto;
        justify-content: flex-start;
        padding-top: 0;
    }

    .cv-event-logo-ring {
        width: var(--logo-size-mobile);
        height: var(--logo-size-mobile);
        padding: 0.65rem;
    }
}