/* Base styles for calendar events on home page */
.page_category-home .calendar-events {
  display: flex;
  flex-direction: column;
  align-items: center;
}



/* Title styling */
.page_category-home .calendar-event h3 {
  text-align: center;
  margin: 0;
  padding: 8px 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-align: left;
}


/* Fix for tablet range where events are disappearing */
@media (min-width: 768px) and (max-width: 1263px) {

  /* Force display of calendar events */
  .page_category-home .calendar-events,
  .page_category-home .calendar-event,
  .page_category-home .calendar-col,
  .page_category-home .wp-block-column.calendar-col {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Ensure parent containers are visible */
  .page_category-home .wp-block-columns .wp-block-column.calendar-col {
    flex-basis: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep the content properly formatted */
  .page_category-home .calendar-event {
    width: 100%;
    margin: 0 0 2rem 0;
    padding: 0;
  }

  .page_category-home .calendar-event h3 {
    text-align: center;
  }
}


/* Mobile styles - fix calendar events without affecting page margins */
@media (max-width: 1262px) {

  /* Apply grid layout for better control */
  .page_category-home .calendar-event {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "title"
      "image"
      "date"
      "location"
      "excerpt";
    overflow-x: hidden;
  }

  /* Explicit grid positioning */
  .page_category-home .calendar-event h3 {
    grid-area: title;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
    margin: 0 0 0.75rem 0;
    text-align: center !important;
  }

  .page_category-home .calendar-event .event-featured-image-container {
    grid-area: image;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .page_category-home .calendar-event .event-featured-image {
    width: 100%;
    height: 100px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
  }

  .page_category-home .calendar-event .event-date {
    grid-area: date;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    margin: 0;
  }

  .page_category-home .calendar-event .event-location {
    grid-area: location;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
    margin: 0;
  }

  .page_category-home .calendar-event .event-excerpt {
    grid-area: excerpt;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Button styling */
  .page_category-home .calendar-event .event-excerpt a {
    display: inline-block;
    margin-top: 0.5rem;
  }

  /* Fix for potentially misconfigured column layouts */
  .page_category-home .calendar-col {
    padding: 0 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}