/* ===== BASE STYLES ===== */
   .events-portfolio {
       padding: 4rem 0;
       background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
   }

   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1.5rem;
   }

   .section-header {
       margin-bottom: 2.5rem;
   }

   .section-title {
       font-size: 2rem;
       font-weight: 700;
       color: #0d3786;
       margin-bottom: 0.5rem;
   }

   .section-subtitle {
       font-size: 1rem;
       color: #64748b;
       max-width: 600px;
       margin: 0 auto;
   }

   /* ===== COUNTDOWN BANNER ===== */
   .countdown-banner {
       background: linear-gradient(135deg, #0d3786 0%, #1e4bb6 100%);
       color: white;
       padding: 1.5rem;
       border-radius: 12px;
       margin-bottom: 2.5rem;
       box-shadow: 0 4px 20px rgba(13, 55, 134, 0.15);
   }

   .countdown-banner__inner {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1.5rem;
   }

   .countdown-banner__info {
       flex: 1;
       min-width: 250px;
   }

   .countdown-banner__next {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 0.5rem;
   }

   .countdown-banner__next i {
       font-size: 1.25rem;
       color: #ffd166;
   }

   .countdown-banner__title {
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 0.25rem;
       opacity: 0.9;
   }

   .countdown-banner__event-name {
       font-size: 1.25rem;
       font-weight: 700;
       margin: 0;
       color: white;
       line-height: 1.3;
   }

   .countdown-banner__timer {
       flex: 2;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 1.25rem;
   }

   .countdown-banner__unit {
       text-align: center;
       min-width: 60px;
   }

   .countdown-banner__number {
       display: block;
       font-size: 2rem;
       font-weight: 700;
       line-height: 1;
       color: white;
       text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
       margin-bottom: 0.25rem;
       font-family: 'Courier New', monospace;
   }

   .countdown-banner__label {
       font-size: 0.75rem;
       color: #c7d2fe;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       font-weight: 600;
   }

   .countdown-banner__separator {
       color: #c7d2fe;
       font-size: 1.5rem;
       font-weight: 300;
       margin-top: -0.5rem;
   }

   .countdown-banner__live {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.5rem 1rem;
       background: rgba(255, 255, 255, 0.15);
       border-radius: 6px;
       border: 1px solid #ffd166;
   }

   .countdown-banner__live i {
       font-size: 1.25rem;
       color: #ffd166;
       animation: pulse 2s infinite;
   }

   .countdown-banner__live-text {
       font-size: 1rem;
       font-weight: 600;
       color: white;
   }

   /* No Events Banner */
   .no-events-banner {
       background: linear-gradient(135deg, #64748b 0%, #475569 100%);
       color: white;
       padding: 2rem;
       border-radius: 12px;
       margin-bottom: 2.5rem;
       text-align: center;
   }

   .no-events-banner i {
       font-size: 2rem;
       color: #cbd5e1;
       margin-bottom: 0.75rem;
   }

   .no-events-banner h3 {
       font-size: 1.25rem;
       margin-bottom: 0.75rem;
       color: white;
   }

   .no-events-banner p {
       color: #e2e8f0;
       margin-bottom: 1.25rem;
       max-width: 500px;
       margin-left: auto;
       margin-right: auto;
       font-size: 0.875rem;
   }

   /* ===== CLEAN EVENTS GRID ===== */
   .events-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 25px;
       margin-bottom: 2rem;
   }

   /* ===== CLEAN EVENT CARD DESIGN ===== */
   .event-card {
       background: white;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex;
       flex-direction: column;
       height: 100%;
       border: 1px solid #e2e8f0;
       position: relative;
   }

   .event-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
       border-color: #cbd5e1;
   }

   /* Event Image */
   .event-card__image {
       position: relative;
       height: 180px;
       overflow: hidden;
   }

   .event-card__image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .event-card:hover .event-card__image img {
       transform: scale(1.08);
   }

   .event-card__date-badge {
       position: absolute;
       top: 1rem;
       right: 1rem;
       background: rgba(13, 55, 134, 0.95);
       color: white;
       padding: 0.5rem 0.75rem;
       border-radius: 8px;
       text-align: center;
       min-width: 55px;
       z-index: 2;
       backdrop-filter: blur(4px);
   }

   .date-day {
       display: block;
       font-size: 1.5rem;
       font-weight: 700;
       line-height: 1;
   }

   .date-month {
       display: block;
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       margin-top: 2px;
       opacity: 0.9;
   }

   /* Status Overlay */
   .event-card__status-overlay {
       position: absolute;
       top: 1rem;
       left: 1rem;
       z-index: 2;
   }

   .status-badge {
       padding: 0.35rem 0.75rem;
       border-radius: 20px;
       font-size: 0.7rem;
       font-weight: 700;
       color: white;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }

   .status-past {
       background: linear-gradient(135deg, #64748b 0%, #475569 100%);
   }

   .status-ongoing {
       background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
       animation: pulse 2s infinite;
   }

   .status-today {
       background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
   }

   .status-upcoming {
       background: linear-gradient(135deg, #10b981 0%, #059669 100%);
   }

   /* Event Content */
   .event-card__content {
       padding: 1.5rem;
       flex: 1;
       display: flex;
       flex-direction: column;
       position: relative;
   }

   /* Category Tag */
   .event-card__category {
       position: absolute;
       top: -1rem;
       left: 1.5rem;
   }

   .category-tag {
       display: inline-block;
       padding: 0.4rem 0.9rem;
       border-radius: 20px;
       font-size: 0.7rem;
       font-weight: 700;
       background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
       color: #0369a1;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       box-shadow: 0 2px 8px rgba(3, 105, 161, 0.15);
       border: 1px solid #bae6fd;
   }

   /* Event Title */
   .event-card__title {
       margin: 1.25rem 0 1rem;
       flex: 1;
   }

   .event-card__title h3 {
       font-size: 1.25rem;
       font-weight: 700;
       color: #1e293b;
       line-height: 1.4;
       margin: 0;
   }

   .event-card__title a {
       color: inherit;
       text-decoration: none;
       transition: color 0.2s ease;
       display: block;
   }

   .event-card__title a:hover {
       color: #0d3786;
   }

   /* Event Details */
   .event-card__details {
       margin-bottom: 1.5rem;
   }

   .detail-row {
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
       margin-bottom: 0.75rem;
   }

   .detail-row:last-child {
       margin-bottom: 0;
   }

   .detail-row i {
       color: #0d3786;
       font-size: 1rem;
       margin-top: 0.125rem;
       min-width: 16px;
   }

   .detail-row span {
       color: #475569;
       font-size: 0.9rem;
       line-height: 1.5;
       flex: 1;
   }

   /* Card Footer */
   .event-card__footer {
       padding-top: 1.25rem;
       border-top: 1px solid #e2e8f0;
       margin-top: auto;
   }

   /* Buttons */
   .btn {
       display: inline-block;
       padding: 0.75rem 1.5rem;
       border-radius: 8px;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.3s ease;
       border: 2px solid transparent;
       cursor: pointer;
       font-size: 0.875rem;
       text-align: center;
       width: 100%;
   }

   .btn-primary {
       background: linear-gradient(135deg, #0d3786 0%, #1e4bb6 100%);
       color: white;
       position: relative;
       overflow: hidden;
   }

   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 15px rgba(13, 55, 134, 0.3);
   }

   .btn-primary:active {
       transform: translateY(0);
   }

   .btn-primary::after {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.5s;
   }

   .btn-primary:hover::after {
       left: 100%;
   }

   /* ===== LOADING & ERROR STATES ===== */
   .loading-spinner {
       grid-column: 1 / -1;
       text-align: center;
       padding: 3rem;
   }

   .spinner {
       border: 3px solid rgba(0, 0, 0, 0.1);
       border-radius: 50%;
       border-top: 3px solid #0d3786;
       width: 40px;
       height: 40px;
       animation: spin 1s linear infinite;
       margin: 0 auto 1rem;
   }

   @keyframes spin {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(360deg);
       }
   }

   @keyframes pulse {
       0% {
           opacity: 1;
       }

       50% {
           opacity: 0.7;
       }

       100% {
           opacity: 1;
       }
   }

   .error-message {
       text-align: center;
       padding: 3rem;
       grid-column: 1 / -1;
       background: white;
       border-radius: 12px;
       box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
   }

   .error-message i {
       color: #ef4444;
       font-size: 2rem;
       margin-bottom: 1rem;
   }

   .error-message p {
       margin-bottom: 1.5rem;
       color: #475569;
   }

   /* Event Image Placeholder */
   .event-image-placeholder {
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
   }

   .event-image-placeholder i {
       font-size: 3rem;
       opacity: 0.8;
   }

   .countdown-banner-top {
       padding-top: 103px;
   }



   /* ===== RESPONSIVE DESIGN ===== */
   @media (max-width: 1024px) {
       .countdown-banner__inner {
           flex-direction: column;
           text-align: center;
       }

       .countdown-banner__info {
           min-width: auto;
       }

       .countdown-banner__timer {
           width: 100%;
       }

       .events-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 768px) {
       .events-portfolio {
           padding: 3rem 0;
       }

       .countdown-banner-top {
           padding-top: 0px;
       }

       .events-grid {
           grid-template-columns: 1fr;
           gap: 1.5rem;
           max-width: 400px;
           margin-left: auto;
           margin-right: auto;
       }

       .section-title {
           font-size: 1.75rem;
       }

       .countdown-banner__timer {
           gap: 0.75rem;
       }

       .countdown-banner__unit {
           min-width: 50px;
       }

       .countdown-banner__number {
           font-size: 1.75rem;
       }

       .countdown-banner__separator {
           display: none;
       }

       .countdown-banner__live {
           flex-direction: column;
           text-align: center;
           padding: 0.75rem;
       }

       .event-card__image {
           height: 160px;
       }
   }

   @media (max-width: 480px) {
       .countdown-banner__unit {
           min-width: 45px;
       }

       .countdown-banner__number {
           font-size: 1.5rem;
       }

       .countdown-banner__event-name {
           font-size: 1.125rem;
       }

       .event-card__content {
           padding: 1.25rem;
       }

       .event-card__title h3 {
           font-size: 1.125rem;
       }

       .btn {
           padding: 0.625rem 1.25rem;
       }
   }