/**
 * @file
 * Styling for the Upcoming Events block.
 */

/* General Block Styles */
.block-upcoming-events-block .block__content ul.upcoming-events {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  transition: opacity 0.2s ease-in-out;
}

/* Only hide if JavaScript is active to prevent the flash of old layout. */
.block-upcoming-events-block .block__content ul.upcoming-events.unprocessed {
  pointer-events: none;
  opacity: 0;
}

.block-upcoming-events-block .block__content .upcoming-events__item {
  margin-bottom: 1em;
}

.block-upcoming-events-block .block__content .upcoming-events__day-grouping {
  margin: 0;
}

.block-upcoming-events-block .block__content .upcoming-events__title {
  margin: 0;
}

/*
 * Controls the flex wrapper that is used to make the View All button be
 * positioned to the left or right of the gallery
 */
.upcoming-events-items-wrapper {
  display: flex;
  gap: 1rem;
}

/*
 * Allow left/right View All button positions to wrap on smaller devices
 */
@media (max-width: 767.98px) {
  .upcoming-events-items-wrapper {
    flex-wrap: wrap;
  }
}

/*
 * Set min-width to fit the content of the View All button
 */
.view-all-link-wrapper {
  min-width: fit-content;
}

/*
 * When positioning the View All button to the left or right, the markup always
 * has the View All button come after the gallery.
 *
 * We use order: -1 to position to the left.
 */
.view-all-position-left .upcoming-events-items-wrapper .view-all-link-wrapper {
  order: -1;
}

/*
 * To make the View All button appear under the block title and the gallery
 *  we make the block itself a flex display
 */
.block-upcoming-events-block .block-header-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .block-upcoming-events-block .block-header-wrapper {
    flex-wrap: wrap;
  }
  .block-upcoming-events-block .block-header-wrapper h2 {
    margin-bottom: 0;
  }

  .block-upcoming-events-block .upcoming-events-view-all {
    margin-bottom: 1em;
  }
}

/*
 * Forces the view all button onto its own line for top/bottom positions
 */
.block-upcoming-events-block.view-all-position-top .upcoming-events-view-all,
.block-upcoming-events-block.view-all-position-bottom .upcoming-events-view-all {
  width: max-content; /* only as wide as needed */
}

/**
 * Make sure the view all button always fits its content without soft wrapping
 */
.upcoming-events-view-all {
  width: max-content; /* only as wide as needed */
}

/*
 Make sure view all button aligns with top of gallery in left/right positions
*/
.view-all-position-left .upcoming-events-view-all,
.view-all-position-right .upcoming-events-view-all {
  margin-top: 0;
}

/*
 * When View All button is under title, remove unnecessary margins
 */
/* Calendar Card Layout */
.upcoming-events__item--calendar-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5em;
}

.upcoming-events__calendar-card {
  flex-shrink: 0; /* Prevent shrinking */
  min-width: 100px; /* Adjust as needed */
  padding: 0.5rem 1rem;
  text-align: center;
  color: white;
  border-radius: 5px;
  background: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
}

.upcoming-events__calendar-card-day-of-week {
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: bold;
}

.upcoming-events__calendar-card-month {
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: bold;
}

.upcoming-events__calendar-card-day {
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1;
}

.upcoming-events__calendar-card-time {
  margin-top: 0.5rem;
  font-size: 0.9em;
}

.upcoming-events__content {
  flex-grow: 1;
}

.upcoming-events__item--calendar-card .upcoming-events__title {
  margin-bottom: 0.2em;
  font-size: 1.2em;
}

.upcoming-events__item--calendar-card .upcoming-events__location,
.upcoming-events__item--calendar-card .upcoming-events__description {
  color: #555;
  font-size: 0.9em;
}

.upcoming-events__item .upcoming-events__location,
.upcoming-events__item--calendar-card .upcoming-events__location {
  font-style: italic;
}