.stat-pill {
box-shadow:var(--shadow)
}

.view-btn:hover,body {
background:var(--background)
}

.timeline-year,.view-btn {
cursor:pointer;
background:0 0
}

:root {
--primary:#0386fe;
--primary-light:#5db2ff;
--text:#2d3748;
--text-light:#8d9aa5;
--border:#c7cbd6;
--background:#eef2f5;
--card:#fff;
--shadow:0 3px 10px #00000014;
--shadow-hover:0 14px 30px #00000029;
--radius:16px
}

.stats-bar {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:30px
}

.stat-pill {
display:inline-flex;
align-items:center;
gap:7px;
background:#fff;
border:1px solid var(--border);
border-radius:999px;
padding:8px 16px;
font-size:14px;
color:var(--text)
}

.stat-icon {
font-size:15px;
line-height:1
}

.stat-value {
font-weight:700;
color:var(--primary)
}

.timeline-year,.view-btn,.year-divider {
color:var(--text-light)
}

.toolbar {
display:flex;
gap:20px;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
flex-wrap:wrap
}

.search-box {
flex:1;
min-width:200px
}

.search-box input {
width:100%;
padding:14px 18px;
border:1px solid var(--border);
border-radius:10px;
font-size:15px;
outline:0;
transition:.25s
}

.search-box input:focus {
border-color:var(--primary)
}

.filter-box select {
min-width:170px;
padding:14px;
border-radius:10px;
border:1px solid var(--border);
background:#fff
}

.view-switcher {
display:inline-flex;
background:#fff;
border:1px solid var(--border);
border-radius:10px;
padding:4px;
gap:4px
}

.view-btn {
border:none;
width:38px;
height:38px;
border-radius:7px;
font-size:16px;
transition:.2s;
display:flex;
align-items:center;
justify-content:center
}

.view-btn:hover {
color:var(--primary)
}

.buttons a,.view-btn.active {
color:#fff;
background:var(--primary)
}

.content-layout {
display:grid;
grid-template-columns:1fr 130px;
gap:28px;
align-items:start
}

.timeline-sidebar {
position:sticky;
top:24px;
align-self:start;
max-height:calc(100vh - 48px);
overflow-y:auto;
background:0 0;
box-shadow:none;
border:none;
padding:0;
scrollbar-width:thin
}

.timeline {
position:relative;
padding-left:16px
}

.timeline::before {
content:"";
position:absolute;
left:4px;
top:4px;
bottom:4px;
width:1px;
background:var(--border)
}

.timeline-year {
position:relative;
display:block;
width:100%;
text-align:left;
border:none;
font:inherit;
padding:6px 0;
font-size:13px;
font-weight:500;
transition:color .2s
}

.timeline-year::before {
content:"";
position:absolute;
left:-16px;
top:50%;
transform:translateY(-50%);
width:8px;
height:8px;
border-radius:50%;
background:var(--background);
border:2px solid var(--border);
transition:.2s
}

.timeline-year:hover {
color:var(--primary)
}

.timeline-year.active {
color:var(--primary);
font-weight:700;
font-size:14px
}

.timeline-year.active::before {
background:var(--primary);
border-color:var(--primary);
box-shadow:0 0 0 3px #0386fe26
}

@media(max-width:900px) {
.content-layout {
grid-template-columns:1fr
}

.events-grid {
order:2
}

.timeline-sidebar {
order:1;
position:static;
max-height:none;
overflow-x:auto;
overflow-y:visible;
margin-bottom:10px
}

.timeline {
display:flex;
gap:22px;
padding-left:0
}

.timeline::before {
left:0;
right:0;
top:50%;
bottom:auto;
height:1px;
width:auto;
transform:translateY(-50%)
}

.timeline-year {
width:auto;
white-space:nowrap;
padding:16px 4px 6px
}

.timeline-year::before {
left:50%;
top:2px;
transform:translateX(-50%)
}
}

.year-divider {
grid-column:1/-1;
display:flex;
align-items:center;
gap:14px;
font-size:14px;
font-weight:700;
margin-top:8px
}

.year-divider:first-child {
margin-top:0
}

.year-divider::after {
content:"";
flex:1;
height:1px;
background:var(--border)
}

.events-grid {
display:grid;
gap:24px
}

.event-card,.card-image {
display:flex;
position:relative;
overflow:hidden
}

.event-card {
flex-direction:column;
background:#fff;
border-radius:var(--radius);
border-left:4px solid var(--primary);
box-shadow:var(--shadow);
transition:transform .25s cubic-bezier(.22,.9,.35,1),box-shadow .25s;
cursor:pointer
}

.event-card:hover {
transform:translateY(-6px);
box-shadow:var(--shadow-hover)
}

.event-card:hover .event-image {
transform:scale(1.05)
}

.event-card:focus-visible {
outline:3px solid var(--primary-light);
outline-offset:2px
}

.card-image {
background:#f3f6f9;
justify-content:center;
align-items:center;
height:170px
}

.event-image {
width:100%;
height:100%;
object-fit:cover;
display:none;
transition:transform .35s
}

.image-placeholder {
width:48px;
height:48px;
color:#b8c3ce
}

.youtube-indicator {
display:none;
position:absolute;
top:10px;
right:10px;
width:30px;
height:30px;
border-radius:50%;
background:#141a21a6;
color:#fff;
font-size:12px;
align-items:center;
justify-content:center;
padding-left:2px
}

.event-card.has-youtube .youtube-indicator {
display:flex
}

.card-content {
padding:22px;
display:flex;
flex-direction:column;
flex:1
}

.date-badge {
padding:4px 11px;
border-radius:999px
}

.card-meta {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-bottom:12px
}

.date-badge {
background:#0386fe1a;
color:var(--primary);
font-weight:700;
font-size:13px
}

.event-title {
font-size:21px;
margin-bottom:10px;
line-height:1.3;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden
}

.event-description {
color:#4d5661;
font-size:14.5px;
flex:1;
margin-bottom:0;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
overflow:hidden
}

.view-cards {
grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
}

.view-compact {
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:18px
}

.view-compact .card-image {
height:110px
}

.view-compact .card-content {
padding:16px
}

.view-compact .event-title {
font-size:16px;
margin-bottom:6px
}

.view-compact .event-description {
font-size:13px;
margin-bottom:0;
-webkit-line-clamp:2
}

.view-list {
grid-template-columns:1fr;
gap:12px
}

.view-list .event-card {
flex-direction:row;
align-items:center;
flex-wrap:wrap
}

.view-list .card-image {
width:84px;
height:84px;
flex:none
}

.view-list .card-content {
padding:14px 20px;
flex-direction:row;
align-items:center;
gap:18px;
flex-wrap:wrap
}

.view-list .card-meta {
margin-bottom:0;
flex-direction:column;
align-items:flex-start;
gap:6px
}

.view-list .event-title {
font-size:16px;
margin-bottom:0;
flex:1;
min-width:180px;
-webkit-line-clamp:1;
background-color: white !important;
color: gray !important;
padding: 0 !important;
}

.view-list .event-description {
display:none
}

@media(max-width:992px) {
.hero h1 {
font-size:34px
}
}

@media(max-width:768px) {
.hero {
padding:45px 20px
}

.hero h1 {
font-size:28px
}

.toolbar,.view-list .event-card {
flex-direction:column;
align-items:stretch
}

.filter-box select {
width:100%
}

.view-switcher {
align-self:flex-start
}

.view-list .card-image {
width:100%;
height:140px
}
}

.today-widget {
background:linear-gradient(135deg,#0386fe0f,#5db2ff1a);
border:1px solid #0386fe2e;
border-radius:var(--radius);
padding:22px 26px;
margin-bottom:30px
}

.today-widget-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-bottom:14px
}

.today-widget-title {
font-size:17px;
font-weight:700;
color:var(--primary)
}

.today-widget-nav {
display:flex;
align-items:center;
gap:6px
}

.today-nav-btn {
width:30px;
height:30px;
border-radius:50%;
border:1px solid #0386fe40;
background:#fff;
color:var(--primary);
font-size:16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s
}

.today-nav-btn:hover {
background:var(--primary);
color:#fff
}

.today-today-btn {
border:1px solid #0386fe40;
background:#fff;
color:var(--primary);
font-size:12px;
font-weight:700;
padding:6px 12px;
border-radius:999px;
cursor:pointer;
transition:.2s
}

.today-today-btn:hover {
background:var(--primary);
color:#fff
}

.today-today-btn.is-hidden {
visibility:hidden
}

.today-widget-body {
display:flex;
flex-direction:column;
gap:8px
}

.today-widget-empty {
color:var(--text-light);
font-size:14px
}

.today-widget-item {
display:flex;
align-items:baseline;
gap:10px;
text-align:left;
background:0 0;
border:none;
padding:8px 10px;
border-radius:8px;
cursor:pointer;
font:inherit;
color:var(--text);
transition:background .2s
}

.today-widget-item:hover {
background:#0386fe14
}

.today-widget-year {
flex:none;
font-weight:700;
color:var(--primary);
font-size:13px;
background:#fff;
border:1px solid #0386fe40;
border-radius:999px;
padding:2px 10px
}

.today-widget-item-title {
font-size:14.5px;
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden
}

.modal-overlay {
display:none;
position:fixed;
inset:0;
background:#141a2199;
z-index:1000;
align-items:center;
justify-content:center;
padding:24px
}

.modal-overlay.is-open {
display:flex
}

.modal {
position:relative;
background:var(--card);
border-radius:var(--radius);
box-shadow:var(--shadow-hover);
width:100%;
max-width:960px;
max-height:90vh;
overflow-y:auto;
animation:modal-pop .2s ease;
display: block;
}

@keyframes modal-pop {
from {
opacity:0;
transform:translateY(10px) scale(.98)
}

to {
opacity:1;
transform:translateY(0) scale(1)
}
}

.modal-close {
position:absolute;
top:16px;
right:16px;
width:38px;
height:38px;
border:none;
border-radius:50%;
background:var(--background);
color:var(--text);
font-size:16px;
cursor:pointer;
z-index:2;
transition:.2s
}

.modal-close:hover {
background:var(--primary);
color:#fff
}

.modal-body {
padding:36px
}

.modal-meta-row {
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px
}

.modal-date {
display:inline-block;
background:#0386fe1a;
color:var(--primary);
font-weight:700;
font-size:13px;
padding:4px 11px;
border-radius:999px
}

.modal-source-icon {
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:50%;
background:var(--background);
color:var(--text);
text-decoration:none;
font-size:14px;
transition:.2s
}

.modal-source-icon:hover {
background:var(--primary);
color:#fff
}

.modal-title {
font-size:18px;
line-height:1.35;
margin-bottom:24px
}

.modal-gallery {
margin-bottom:24px
}

.modal-gallery-main {
position:relative;
background:var(--background);
border-radius:12px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
min-height:200px;
max-height:460px
}

.modal-gallery-main img {
width:100%;
max-height:460px;
object-fit:contain;
display:block
}

.gallery-nav {
position:absolute;
top:50%;
transform:translateY(-50%);
width:38px;
height:38px;
border-radius:50%;
border:none;
background:#ffffffe6;
color:var(--text);
font-size:20px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:var(--shadow);
transition:.2s
}

.gallery-nav:hover {
background:var(--primary);
color:#fff
}

.gallery-prev {
left:12px
}

.gallery-next {
right:12px
}

.modal-gallery-thumbs {
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:12px
}

.modal-gallery-thumbs img {
width:64px;
height:64px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
border:2px solid transparent;
transition:.2s;
opacity:.75
}

.modal-gallery-thumbs img:hover {
opacity:1
}

.modal-gallery-thumbs img.active {
border-color:var(--primary);
opacity:1
}

.modal-youtube {
margin-bottom:24px
}

.modal-youtube .youtube-frame-wrapper {
position:relative;
width:100%;
padding-top:56.25%;
border-radius:12px;
overflow:hidden;
background:#000
}

.modal-youtube iframe {
position:absolute;
inset:0;
width:100%;
height:100%;
border:none
}

.modal-description {
color:#3a424c;
font-size:15.5px;
line-height:1.8;
white-space:pre-wrap;
margin-bottom:4px
}

@media(max-width:768px) {
.modal-overlay {
padding:0
}

.modal {
max-width:100%;
max-height:100%;
height:100%;
border-radius:0;
display: block;
}

.modal-body {
padding:24px 18px 32px
}

.modal-title {
font-size:21px
}

.modal-gallery-main {
max-height:280px
}

.modal-gallery-main img {
max-height:280px
}
}