/* ==========================================================================
   MKS Home Page
   ========================================================================== */

.bs {
  background-color: var(--mks-bg-light);
  border-radius: var(--mks-banner-border-radius);
  box-shadow: var(--mks-shadow-light);
}

.bs .home-banner-image {
  display: block;
}

.home-page {
  background-color: var(--mks-bg);
}

#home-container {
  margin-bottom: var(--mks-footer-margin);
  margin-top: var(--mks-footer-margin);
}

#home-container h1,
.home-page h1,
.home-page h2,
.events-header h2,
.news-widget h2 {
  color: var(--mks-text);
  font-family: var(--mks-font);
  font-weight: var(--mks-font-weight-medium);
}

#home-container p,
.home-page p {
  color: var(--mks-text);
  font-family: var(--mks-font);
  font-weight: var(--mks-font-weight-normal);
}

.home-lead {
  font-size: var(--mks-font-size-body);
  line-height: var(--mks-line-height);
  margin-left: auto;
  margin-right: auto;
  max-width: calc(var(--mks-max-width) / 2);
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.view-all-btn {
  align-items: center;
  border-bottom: var(--mks-mobile-nav-border-width) solid var(--mks-border-text);
  box-sizing: border-box;
  display: inline-flex;
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-small);
  font-weight: var(--mks-font-weight-medium);
  justify-content: center;
  line-height: var(--mks-line-height-mobile);
  margin-top: var(--mks-mobile-menu-padding);
  padding-bottom: var(--mks-mobile-menu-gap);
  text-decoration: none;
  transition: var(--mks-transition-fast);
}

.view-all-btn {
  color: var(--mks-primary);
}

.view-all-btn:hover {
  border-bottom-color: var(--mks-primary);
  color: var(--mks-primary-hover);
  text-decoration: none;
}

.home-inline-link {
  border-bottom: var(--mks-mobile-nav-border-width) solid var(--mks-primary);
  color: var(--mks-primary);
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-small);
  font-weight: var(--mks-font-weight-medium);
  line-height: var(--mks-line-height-mobile);
  padding-bottom: var(--mks-mobile-menu-gap);
  text-decoration: none;
  transition: var(--mks-transition-fast);
}

.home-inline-link:hover {
  color: var(--mks-primary-hover);
  text-decoration: none;
}

.highlights-container,
.events-grid {
  display: grid;
  gap: var(--mks-mobile-menu-indent);
}

.highlights-container {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--mks-banner-height-mobile) + var(--mks-footer-margin)), 1fr));
  margin-bottom: var(--mks-footer-margin);
  margin-top: var(--mks-footer-margin);
}

.highlight-card,
.event-card,
.news-item {
  background-color: var(--mks-bg);
  border: var(--mks-mobile-nav-border-width) solid var(--mks-border-light);
  border-radius: var(--mks-border-radius);
  transition: var(--mks-transition-fast);
}

.highlight-card {
  border-top: var(--mks-mobile-nav-icon-stroke) solid var(--mks-primary);
  overflow: hidden;
}

.highlight-card:hover,
.event-card:hover,
.news-item:hover {
  box-shadow: var(--mks-shadow-medium);
}

.highlight-content,
.event-info,
.news-item {
  padding: var(--mks-mobile-menu-indent);
}

.highlight-content h3,
.event-info h3,
.news-content h4 {
  color: var(--mks-text);
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-h4);
  font-weight: var(--mks-font-weight-medium);
  line-height: var(--mks-line-height);
  margin-top: 0;
}

.highlight-content h3 {
  border-bottom: var(--mks-mobile-nav-border-width) solid var(--mks-border-text);
  padding-bottom: var(--mks-mobile-menu-gap);
}

.highlight-content p,
.event-info p,
.news-content p,
.event-description,
.event-slot-row,
.event-slot-more {
  color: var(--mks-text);
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-small);
  font-weight: var(--mks-font-weight-normal);
  line-height: var(--mks-line-height);
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.events-section,
.news-widget,
.home-director-info,
.home-blog-section {
  margin-bottom: var(--mks-footer-margin);
  margin-top: var(--mks-footer-margin);
}

.events-section {
  background-color: transparent;
  box-sizing: border-box;
  padding: 0;
}

.events-header {
  align-items: center;
  border-bottom: var(--mks-mobile-nav-border-width) solid var(--mks-border-text);
  display: flex;
  gap: var(--mks-mobile-menu-indent);
  justify-content: space-between;
  margin-bottom: var(--mks-mobile-menu-indent);
  padding-bottom: var(--mks-mobile-menu-padding);
}

.events-header h2,
.news-widget h2 {
  font-size: var(--mks-font-size-h2);
  margin-bottom: 0;
  margin-top: 0;
}

.events-grid {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--mks-banner-height-mobile) + var(--mks-footer-margin)), 1fr));
}

.event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.event-image {
  background-color: var(--mks-bg-medium);
  display: block;
  height: calc(var(--mks-banner-height-mobile) / 2);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.event-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: var(--mks-transition-slow);
  width: 100%;
}

.event-card:hover .event-image img {
  transform: scale(1.03);
}

.event-date {
  background-color: transparent;
  border-bottom: var(--mks-mobile-nav-border-width) solid var(--mks-border-light);
  color: var(--mks-text);
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-small);
  font-weight: var(--mks-font-weight-medium);
  padding: var(--mks-mobile-menu-padding) var(--mks-mobile-menu-indent);
  text-align: left;
}

.event-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.event-info h3 {
  font-size: var(--mks-font-size-small);
  margin-bottom: var(--mks-mobile-menu-gap);
  overflow: hidden;
}

.event-time,
.event-slot-row {
  font-weight: var(--mks-font-weight-medium);
}

.event-venue {
  border-top: var(--mks-mobile-nav-border-width) solid var(--mks-border-light);
  margin-top: auto;
  padding-top: var(--mks-mobile-menu-padding);
}

.event-description {
  margin-bottom: var(--mks-mobile-menu-padding);
  margin-top: var(--mks-mobile-menu-padding);
}

.event-slot-list {
  display: flex;
  flex-direction: column;
  gap: var(--mks-mobile-menu-gap);
  margin-bottom: var(--mks-mobile-menu-gap);
  margin-top: var(--mks-mobile-menu-gap);
}

.event-slot-more {
  color: var(--mks-gray-dark);
}

.event-link {
  margin-top: var(--mks-mobile-menu-padding);
  text-align: right;
}

.event-link a {
  color: var(--mks-primary);
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-small);
  font-weight: var(--mks-font-weight-medium);
  text-decoration: none;
}

.event-link a:hover {
  color: var(--mks-primary-hover);
  text-decoration: underline;
}

.news-widget h2 {
  border-bottom: var(--mks-mobile-nav-border-width) solid var(--mks-border-text);
  display: inline-block;
  padding-bottom: var(--mks-mobile-menu-gap);
}

.news-items {
  display: flex;
  flex-direction: column;
  gap: var(--mks-mobile-menu-padding);
  margin-top: var(--mks-mobile-menu-indent);
}

.news-item {
  align-items: center;
  border-left: var(--mks-mobile-nav-icon-stroke) solid transparent;
  display: grid;
  gap: var(--mks-mobile-menu-padding);
  grid-template-columns: var(--mks-nav-height-mobile) 1fr;
}

.news-item:hover {
  background-color: var(--mks-bg-light);
  border-left-color: var(--mks-primary);
}

.news-icon {
  align-items: center;
  background-color: var(--mks-bg-light);
  border: var(--mks-mobile-nav-border-width) solid var(--mks-border-light);
  border-radius: var(--mks-border-radius);
  color: var(--mks-primary);
  display: flex;
  height: var(--mks-nav-height-mobile);
  justify-content: center;
  width: var(--mks-nav-height-mobile);
}

.news-icon i {
  color: var(--mks-primary);
  font-size: var(--mks-font-size-h4);
}

.news-content h4 {
  font-size: var(--mks-font-size-small);
  margin-bottom: var(--mks-mobile-menu-gap);
}

.alert-overlay {
  align-items: center;
  background-color: var(--mks-overlay-dark);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--mks-z-navbar-fixed);
}

.alert-content {
  background-color: var(--mks-bg);
  border-radius: var(--mks-border-radius-large);
  box-shadow: var(--mks-shadow-large);
  margin-left: var(--mks-mobile-menu-padding);
  margin-right: var(--mks-mobile-menu-padding);
  max-width: calc(var(--mks-max-width) / 3);
  padding: var(--mks-footer-margin);
  position: relative;
  text-align: center;
}

.alert-content h2 {
  color: var(--mks-text);
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-h1);
  font-weight: var(--mks-font-weight-medium);
  margin-bottom: var(--mks-mobile-menu-padding);
  margin-top: 0;
}

.alert-content p {
  color: var(--mks-text);
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-body);
  line-height: var(--mks-line-height);
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.close-btn {
  align-items: center;
  appearance: none;
  background-color: var(--mks-bg-light);
  border: var(--mks-mobile-nav-border-width) solid var(--mks-border-light);
  border-radius: var(--mks-border-radius);
  color: var(--mks-text);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-h4);
  font-weight: var(--mks-font-weight-medium);
  height: var(--mks-nav-height-mobile-compact);
  justify-content: center;
  position: absolute;
  right: var(--mks-mobile-menu-padding);
  top: var(--mks-mobile-menu-padding);
  transition: var(--mks-transition-fast);
  width: var(--mks-nav-height-mobile-compact);
}

.close-btn:hover,
.close-btn:focus-visible {
  border-color: var(--mks-primary);
  color: var(--mks-primary);
  outline: none;
}

@media only screen and (max-width: 820px), only screen and (max-height: 375px) {
  .bs {
    margin-top: var(--mks-nav-height-mobile) !important;
  }
}

@media only screen and (max-width: 771px) {
  .bs {
    border-radius: 0;
    height: var(--mks-banner-height-mobile-fluid);
  }

  .bs #mbimg {
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    width: 100% !important;
  }

  #home-container,
  .events-section,
  .news-widget,
  .home-director-info,
  .home-blog-section {
    margin-bottom: var(--mks-footer-margin);
    margin-top: var(--mks-footer-margin);
  }

  .home-lead {
    font-size: var(--mks-font-size-body-mobile);
    line-height: var(--mks-line-height-mobile);
  }

  .highlights-container,
  .events-grid,
  .news-item {
    grid-template-columns: 1fr;
  }

  .events-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .events-section {
    padding: 0;
  }

  .alert-content {
    padding: var(--mks-footer-margin) var(--mks-mobile-menu-indent) var(--mks-mobile-menu-indent);
  }

  .alert-content h2 {
    font-size: var(--mks-font-size-h4);
  }

  .alert-content p {
    font-size: var(--mks-font-size-small);
  }
}

@media only screen and (max-width: 390px), only screen and (max-width: 820px) and (max-height: 640px) {
  .bs {
    margin-top: var(--mks-nav-height-mobile-compact) !important;
  }
}