/* ======================================================
   Schedule
   ====================================================== */
.schedule-container {
   background-color: var(--base-01);
}

.schedule__header {
   padding-top: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: .75rem;
   gap: 8px;
}

.schedule__title {
   font-weight: 500;
   font-size: var(--text-4xl);
   color: var(--base-emphasis);
}

.schedule__view-all-link {
   flex-shrink: 0;
   text-decoration: none;
   color: var(--base-emphasis);
   border: 1px solid var(--base-content);
   padding: .125rem .75rem;
   border-radius: 1.5rem;
   background-color: transparent;
   font-size: var(--text-sm);
}

.schedule__view-all-link:hover,
.schedule__view-all-link:focus {
   color: var(--secondary-focus);
}

.schedule__month {
   font-weight: 500;
   font-size: var(--text-xl);
   color: var(--base-emphasis);
   padding-top: 1.0rem;
   padding-bottom: .75rem;
}

.event-card {
   background-color: var(--base-04);
   border: .5px solid #bec5c8;
   box-shadow: 0 4px 8px -2px rgb(18 32 51 / 10%);
   overflow: hidden;
   width: 100%;
   position: relative;
   margin-bottom: .75rem;
   display: flex;
   flex-wrap: wrap;
   border-radius: 8px;
}

.schedule__month-group .event-card:last-of-type {
   margin-bottom: 0;
}

.event-card__date {
   width: 50%;
   border-bottom: 1px solid #bec5c8;
   background-color: var(--base-01);
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--base-emphasis);
   flex-direction: column;
   font-size: var(--text-5xl);
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: -3px;
}

.event-card__date span {
   display: block;
   font-size: var(--text-xl);
   font-weight: 400;
   letter-spacing: 0px;
   color: var(--base-content);
}

.event-card__image {
   width: 50%;
}

.event-card__content {
   padding: .75rem;
}

.event-card__title {
   color: var(--base-emphasis);
   font-size: var(--text-lg);
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   margin-bottom: .5rem;
}

.event-card__description {
   line-height: 1.3;
   margin-bottom: .75rem;
}

.event-card__meta {
   font-size: var(--text-sm);
   color: var(--base-emphasis);
   margin-bottom: .75rem;
}

.event-card__meta span {
   display: block;
}

.event-card__meta i {
   margin-right: 8px;
}

.event-card__actions {
   display: flex;
   gap: 8px;
}

.event-card__actions>* {
   font-size: var(--text-base);
   border-radius: 4px;
   display: flex;
   border: none;
   height: 40px;
   padding: 0 20px;
   justify-content: center;
   align-items: center;
   width: calc(50% - 4px);
   text-decoration: none;
   font-weight: 500;
   line-height: 1;
}

.event-card__button {
   background-color: var(--dark-01);
   color: var(--dark-content);
}

.event-card__button:hover,
.event-card__button:focus {
   background-color: var(--dark-focus);
}

.event-card__calendar-button {
   color: var(--dark-01);
   border: 1px solid var(--dark-01);
}

.event-card__calendar-button:hover,
.event-card__calendar-button:focus {
   background-color: var(--base-05);
}

.schedule__footer {
   padding-top: .75rem;
   padding-bottom: .75rem;
}

.schedule__view-all-btn {
   font-size: var(--text-lg);
   border-radius: 4px;
   display: flex;
   border: none;
   height: 48px;
   padding: 0 20px;
   justify-content: center;
   align-items: center;
   width: 100%;
   text-decoration: none;
   font-weight: 500;
   line-height: 1;
   background-color: var(--dark-01);
   color: var(--dark-content);
}

.event-card__button:hover,
.event-card__button:focus {
   background-color: var(--dark-focus);
}

@media only screen and (min-width: 360px) {}

@media only screen and (min-width: 500px) {
   /* ======================================================
   Schedule
   ====================================================== */
}

@media only screen and (min-width: 640px) {

   /* ======================================================
   Schedule
   ====================================================== */

   .schedule__month {
      padding: 2.5rem 0 1.25rem 0;
   }

   .event-card {
      flex-direction: column;
      height: 256px
   }

   .event-card__date,
   .event-card__image {
      width: 200px;
   }

   .event-card__date {
      border-bottom: none;
      border-right: 1px solid #bec5c8;
      flex-direction: row;
      gap: 10px;
      font-size: var(--text-4xl);
      height: 54px;
   }

   .event-card__date span {
      position: relative;
      font-size: var(--text-2xl);
      top: 2px;
   }

   .event-card__content {
      width: calc(100% - 200px);
      height: 256px;
      padding: 1.25rem;
      flex-direction: column;
      display: flex;
   }


   .event-card__description {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
   }

   .event-card__actions {
      margin-top: auto;
   }
}

@media only screen and (min-width: 768px) {
   /* ======================================================
   Schedule
   ====================================================== */

   .schedule__header {
      padding-top: 1.5rem;
   }

   .event-card__meta span {
      display: inline-block;
   }

   .event-card__meta span:first-of-type::after {
      content: ' /';
      margin: 0 12px;
   }

   .schedule__footer {
      padding-top: 1.25rem;
      padding-bottom: 1.25rem;
   }

   .schedule__view-all-btn {
      width: fit-content;
      margin: 0 auto;
   }
}

@media only screen and (min-width: 1024px) {

   /* ======================================================
   Schedule
   ====================================================== */
   .schedule__header {
      padding-top: 2rem;
   }

   .event-card {
      flex-direction: row;
      height: unset;
      flex-wrap: nowrap;
      height: 160px;
      margin-bottom: 0;
      border-top: none;
      border-radius: 0;
   }

   .schedule__month-group .event-card:first-of-type {
      border-top: 1px solid #ccc !important;
      border-radius: 8px 8px 0 0 !important;
   }

   .schedule__month-group .event-card:last-of-type {
      border-radius: 0 0 8px 8px !important;
   }



   .event-card__date,
   .event-card__image {
      width: 160px;
      flex-shrink: 0;
   }

   .event-card__date {
      height: 100%;
      flex-direction: column;
      gap: 0;
      border-right: 0;
      background-color: transparent;
   }

   .event-card__content {
      flex-direction: row;
      height: unset;
      gap: 1rem;
      padding: .75rem 1.25rem;
   }

   .event-card__details {
      width: 100%;
   }

   .event-card__title {
      font-size: var(--text-lg);
      line-height: 1.25;
   }

   .event-card__description {
      font-size: var(--text-sm);
   }

   .event-card__meta {
      font-size: var(--text-xs);
   }

   .event-card__actions {
      margin-top: 0;
      flex-direction: column;
      width: 148px;
   }

   .event-card__actions>* {
      width: 148px;
      font-size: var(--text-sm);
   }
}

@media only screen and (min-width: 1280px) {

   .schedule__title {
      font-size: var(--text-5xl);
   }

   .schedule__month {
      padding: 3rem 0 1.0rem 0;
   }
}

@media only screen and (min-width: 1536px) {

   /* ======================================================
   Schedule
   ====================================================== */

   .event-card__title {
      font-size: var(--text-xl);
   }

   .event-card__content {
      gap: 2rem;
   }

   .event-card__description {
      font-size: var(--text-base);
      line-height: 1.5;
   }

}

@media only screen and (min-width: 1920px) {}