/* ═══════════════════════════════════════════════════
   Event Calendar — Responsive Screens
   Breakpoints:
     Tablet          : max-width: 992px
     Tablet small    : max-width: 768px
     Mobile          : max-width: 576px
   ═══════════════════════════════════════════════════ */

/* ── Global base overrides ── */

[data-block="eventcalendar"].container {
  padding-left: 0;
  padding-right: 0;
}

.calendar_block {
  padding: 20px !important;
  margin-top: 0 !important;
}

#mainpage_calendar_block {
  margin: 0;
}

#mainpage_calendar_block .col {
  padding: 0;
}


/* ── Calendar widget mobile layout (≤ 1155px) ── */

@media (max-width: 1155px) {

  .fc table { table-layout: fixed !important; }

  .fc .fc-daygrid-body tr,
  .fc .fc-daygrid-body-natural tr { height: auto !important; }

  .fc .fc-daygrid-day { padding: 3px !important; }

  .fc .fc-daygrid-day-frame {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    padding: 4px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex: none !important;
    align-self: auto !important;
  }

  .fc .fc-day-today .fc-daygrid-day-frame {
    border-width: 2px !important;
  }

  .fc .fc-daygrid-day-top {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }

  .fc .fc-daygrid-day-number {
    color: #000 !important;
    font-family: Raleway !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    letter-spacing: 0.44px !important;
    padding: 0 !important;
  }

  .fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    position: absolute !important;
    bottom: 4px !important;
    left: 4px !important;
    width: calc(100% - 8px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }

  .fc .fc-daygrid-event-harness {
    position: static !important;
    top: auto !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .fc .fc-daygrid-event {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: unset !important;
    min-height: unset !important;
  }

  .fc .fc-daygrid-event .fc-event-main,
  .fc .fc-daygrid-event .fc-event-title {
    display: none !important;
  }

  .fc .fc-daygrid-day-bottom,
  .foc-more-btn { display: none !important; }
}


/* ── Tablet (≤ 992px) ── */

@media (max-width: 992px) {

  [data-block="eventcalendar"].container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .event_calendar_block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 40px !important;
  }

  .calendar_block {
    padding-left: 5px !important;
    padding-right: 5px !important;
    display: flex;
    flex-direction: column;
  }

  /* Reorder: filters move below the calendar */
  #mainpage_calendar_block          { order: 1; }
  #calendar_filter_block            { order: 2; }
  #calendar_event_category_filter_block { order: 3; }

  /* Pager */
  #homepage_calendar_pager {
    width: 100%;
  }

  #homepage_calendar_pager .aktial_title {
    color: #000;
    font-family: Raleway;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.04px;
  }

  #homepage_calendar_pager .calendar-pager-controls {
    gap: 40px;
    margin-top: 40px;
  }

  #homepage_calendar_pager .prev_day_btn,
  #homepage_calendar_pager .next_day_btn {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }

  #homepage_calendar_pager .aktual_time_picker_text {
    color: #000;
    font-family: Raleway;
    font-size: 26px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.44px;
    margin: 0 0.25rem !important;
    min-width: 0 !important;
  }

  /* Filter buttons: single row, compact, no gap */
  #calendar_filter_form {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  #calendar_filter_form .calendar_select_room_checkbox_btn .form-check-label {
    font-size: 0.65rem !important;
    padding: 10px 16px !important;
  }

  #calendar_filter_form .calendar_select_room_checkbox_btn {
    flex: 1;
  }

  #calendar_filter_form .calendar_select_room_checkbox_btn .form-check-label {
    width: 100%;
  }

  #calendar_filter_form .calendar_select_room_checkbox_btn .checkbox_btn > span:first-child {
    color: #fff;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    text-align: left;
  }

  /* Category filter: centered, slightly smaller */
  #calendar_event_category_filter_form {
    justify-content: center !important;
  }

  #calendar_event_category_filter_form .checkbox_btn.checkbox_event_category_btn {
    font-size: 0.9rem !important;
    padding: 0.5rem 1rem !important;
  }

  /* Square gridcell */
  .fc-daygrid-day-frame {
    aspect-ratio: 1 / 1;
    min-height: unset !important;
    overflow: hidden;
  }

  /* Events area: horizontal dot row */
  .fc-daygrid-day-events {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    align-items: flex-start;
    padding: 0 2px 2px;
    overflow: hidden;
  }

  /* Each event harness → 10×10 circle */
  .fc-daygrid-event-harness {
    position: static !important;
    top: auto !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 !important;
  }

  .fc-daygrid-event-harness .fc-event {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    min-height: unset;
    border: none;
  }

  /* Hide event text */
  .fc-daygrid-event-harness .fc-event-main,
  .fc-daygrid-event-harness .fc-event-title,
  .fc-daygrid-event-harness .fc-event-time,
  .fc-daygrid-event-harness .fc-event-title-container {
    display: none !important;
  }

  /* Hide "+N more" */
  .fc-daygrid-more-link-harness {
    display: none;
  }

  /* Day number */
  .fc-daygrid-day-top {
    display: flex;
    justify-content: center;
  }

  .fc-daygrid-day-number {
    font-family: Raleway !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 0.44px !important;
    padding: 1px 2px;
  }

  .fc-daygrid-day-frame {
    justify-content: flex-start !important;
  }

  .fc-daygrid-body-natural .fc-daygrid-day-events {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
  }
}


/* ── Tablet small (≤ 768px) ── */

@media (max-width: 768px) {

  #homepage_calendar_pager .aktial_title {
    font-size: 30px;
  }

  #homepage_calendar_pager .aktual_time_picker_text {
    font-size: 24px !important;
  }

  #calendar_filter_form .calendar_select_room_checkbox_btn .form-check-label {
    padding: 8px 12px !important;
  }

  .fc-daygrid-day-number {
    font-family: Raleway !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 0.44px !important;
  }

  .fc-daygrid-day-frame {
    justify-content: flex-start !important;
  }

  .fc-daygrid-day-events {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
  }
}


/* ── Mobile (≤ 576px) ── */

@media (max-width: 576px) {

  #homepage_calendar_pager .aktial_title {
    font-size: 26px;
  }

  #homepage_calendar_pager .aktual_time_picker_text {
    font-size: 22px !important;
  }

  #calendar_filter_form .calendar_select_room_checkbox_btn .form-check-label {
    padding: 6px 10px !important;
  }

  #calendar_filter_form .calendar_select_room_checkbox_btn .checkbox_btn > span:first-child {
    font-size: 10px;
  }

  .fc-daygrid-day-number {
    font-size: 0.65rem;
  }

  .fc .fc-daygrid-day-frame {
    height: calc(100vw / 7 - 10px) !important;
    aspect-ratio: unset !important;
  }
}