.holiday-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); align-items:stretch; gap:24px}
.holiday-card {display:flex; flex-direction:column; height:100%; background:white; border-radius:20px; border:1px solid #f1f5f9; overflow:hidden; text-decoration:none; color:inherit; outline:none; transform:translateY(0) scale(1); box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1); transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change:transform}
.holiday-card:hover {transform:translateY(-8px); box-shadow:0 20px 30px rgba(0, 0, 0, 0.15)}
.image-container {width:100%; aspect-ratio:16 / 9; position:relative; overflow:hidden; background-color:#f1f5f9}
.image-container img {width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition:transform 0.5s ease}
.holiday-card:hover img {transform:scale(1.05)}
.date-badge {position:absolute; bottom:15px; left:15px; background:rgba(0, 0, 0, 0.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:8px 14px; border-radius:12px; border:1px solid rgba(255, 255, 255, 0.15); display:flex; flex-direction:column; align-items:flex-start; z-index:10; transition:all 0.4s ease}
.date-day-name {font-size:0.75rem; font-weight:800; color:#ffd700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px}
.date-full {font-size:1.1rem; font-weight:700; color:#ffffff; font-variant-numeric:tabular-nums; line-height:1}
.holiday-card:hover .date-badge {background:rgba(0, 0, 0, 0.8); transform:translateY(-5px)}
.holiday-card:hover .date-day-name {color:#00d2ff}
.card-content {padding:24px; flex-grow:1; display:flex; flex-direction:column}
.card-text {color:#64748b; font-size:0.9rem; margin-bottom:20px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card-footer {margin-top:auto; padding-top:15px; padding:16px 24px; border-top:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center; background-color:#ffffff; transition:background-color 0.3s ease}
.page-header {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-end; margin-bottom:40px; gap:20px; flex-wrap:wrap}
.month-nav {background:#f1f5f9; padding:6px; border-radius:16px; display:inline-flex; overflow:hidden; flex-grow:1}
.month-item {text-decoration:none; color:#64748b; font-size:0.85rem; font-weight:700; padding:10px 18px; border-radius:12px; transition:all 0.3s ease; white-space:nowrap}
.month-item.active {background:#ffffff; color:#3b82f6; box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}
.month-item:hover:not(.active) {background:rgba(255, 255, 255, 0.5); color:#1e293b}
@media (max-width: 768px) {
.page-header {flex-direction:column; align-items:flex-start}
.month-nav {width:100%}
.month-scroll {width:100%}}
.month-navigation-wrapper {display:flex; align-items:center; gap:10px; background:#f1f5f9; padding:5px; border-radius:20px; position:relative; max-width:100%; margin-top:40px; margin-bottom:60px}
.month-scroll {display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; -webkit-overflow-scrolling:touch}
.month-scroll::-webkit-scrollbar {display:none}
.nav-btn {all:unset; background:white; border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,0.1); color:#3b82f6; font-weight:bold; z-index:5; transition:transform 0.2s}
.nav-btn:active {transform:scale(0.9)}
@media (max-width: 600px) {
.nav-btn {display:none;}
.month-navigation-wrapper {padding:5px 10px}}
.filter-controls {display:flex; gap:15px; margin-bottom:30px; flex-wrap:wrap}
.search-box {flex-grow:2; min-width:250px}
.date-input {border:none; background:transparent; padding:12px 15px; font-family:inherit; font-size:0.9rem; color:#1e293b; outline:none; width:100%}
@keyframes fadeIn {
from {opacity:0; transform:scale(0.8)}
to {opacity:1; transform:scale(1)}}
.footer-info {font-size:0.8rem; font-weight:600; color:#94a3b8; text-transform:uppercase; letter-spacing:0.025em; display:flex; align-items:center; gap:6px}
.status-dot {width:6px; height:6px; background-color:#e2e8f0; border-radius:50%; display:inline-block}
.btn-fake {font-size:0.85rem; font-weight:700; color:#3b82f6; transition:transform 0.3s ease, color 0.3s ease}
.holiday-card:hover .card-footer {background-color:#f8fafc}
.holiday-card:hover .btn-fake {transform: translateX(5px); color:#2563eb}
.holiday-card:hover .status-dot {background-color:#3b82f6}
#search-input {width:100%; padding:10px; border:2px solid #5a3e2b; border-radius:5px}
#search-results {background:white; border:1px solid #ccc; margin-top:5px; max-height:300px; overflow-y:auto; display:none}
.result-item {padding:12px; border-bottom:1px solid #eee; cursor:pointer; display:flex; align-items:baseline; border-bottom:1px solid #eee; text-decoration:none; color:inherit; transition:background 0.2s}
.no-results {padding:10px; color:#888}
.result-item:hover {background-color:#f5faff; cursor:pointer}
.res-date {color:#b08d57; font-weight:bold; min-width:80px; margin-right:15px}
h2 {text-align:center}
.today-badge {position:absolute; top:15px; right:15px; background:rgba(37, 99, 235, 0.8); backdrop-filter:blur(4px); color:white; padding:6px 12px; border-radius:50px; font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; display:flex; align-items:center; gap:6px; box-shadow:0 4px 12px rgba(0, 0, 0, 0.2); z-index:20; border:1px solid rgba(255, 255, 255, 0.2)}
.pulse-dot {width:6px; height:6px; background-color:#4ade80; border-radius:50%; position:relative}
.pulse-dot::after {content:''; position:absolute; inset:0; border-radius:50%; background-color:#4ade80; animation:pulse-ring 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite}
@keyframes pulse-ring {
0% {transform:scale(0.7); opacity:1}
100% {transform:scale(2.5); opacity:0}}
.holiday-card.is-today {border:2px solid #3b82f6}