/* Calendar-specific layout; Vuexy supplies controls, typography and card surfaces. */
.calendar-surface {
  background: var(--bs-body-bg);
}

/* Brand-identifying icon colors; labels retain the theme's readable body color. */
.calendar-share .btn {
  color: var(--bs-body-color);
}

.calendar-share .tabler-brand-facebook {
  color: #1877f2;
}

.calendar-share .tabler-brand-telegram {
  color: #0088cc;
}

[data-bs-theme="dark"] .calendar-share .tabler-brand-facebook {
  color: #6ba5ff;
}

[data-bs-theme="dark"] .calendar-share .tabler-brand-telegram {
  color: #40b3e0;
}

.calendar-page {
  min-height: 70vh;
  padding-block: 6.5rem 3rem;
}

.calendar-heading {
  max-width: 46rem;
}

.calendar-page h1 {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.calendar-card {
  overflow: hidden;
  transition: box-shadow .18s ease;
}

.calendar-card:hover {
  box-shadow: var(--bs-box-shadow-lg);
}

.calendar-card-content,
.calendar-comment-content {
  min-width: 0;
}

.calendar-card-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Beside the text the photo fills the card height. */
@media (min-width: 768px) {
  .calendar-card-image {
    height: 100%;
    object-fit: cover;
  }
}

.calendar-event-title {
  color: var(--bs-heading-color);
  overflow-wrap: anywhere;
}

.calendar-event-title:hover {
  color: var(--bs-primary);
}

.calendar-meta,
.calendar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.calendar-meta {
  font-size: .8125rem;
}

.calendar-meta > span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.calendar-tags .badge,
.calendar-page .badge {
  white-space: normal;
  text-align: start;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Persisted topic colours remain visible on past events in either theme. */
.calendar-topic-badge {
  --calendar-topic-rgb: var(--bs-primary-rgb);
  color: var(--bs-heading-color);
  background-color: rgba(var(--calendar-topic-rgb), .16);
}

.calendar-topic-badge:hover,
.calendar-topic-badge:focus-visible {
  color: var(--bs-heading-color);
  text-decoration: underline;
}

.calendar-quick-links a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .5rem;
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
  overflow-wrap: anywhere;
  transition: background-color .18s ease, color .18s ease;
}

.calendar-quick-links a:hover,
.calendar-quick-links a:focus-visible,
.calendar-quick-links a[aria-current="page"] {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.calendar-recent-comment {
  display: block;
  color: var(--bs-body-color);
  overflow-wrap: anywhere;
}

.calendar-recent-comment + .calendar-recent-comment,
.calendar-similar-item + .calendar-similar-item {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.calendar-recent-comment:hover .calendar-recent-comment-body {
  color: var(--bs-heading-color);
}

.calendar-recent-comment-date {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
}

.calendar-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

/* Text and badge rows have the same height, so the labels stay level. */
.calendar-facts dt {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  font-weight: 500;
}

.calendar-facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 1.75rem;
  margin: 0;
  color: var(--bs-heading-color);
  overflow-wrap: anywhere;
}

.calendar-description,
.calendar-comment-body {
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.calendar-description :last-child,
.calendar-comment-body :last-child {
  margin-bottom: 0;
}

.calendar-description img {
  max-width: 100%;
  height: auto;
}

.calendar-description blockquote,
.calendar-comment-body blockquote,
.calendar-page .prose-editor .ProseMirror blockquote {
  margin-inline: 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--bs-primary);
}

/* Archive content stays readable; color and an explicit label distinguish it. */
.calendar-card-past .calendar-event-title,
.calendar-detail-past h1,
.calendar-detail-past .calendar-description :is(h2, h3, h4, a),
.calendar-preview-past h2 {
  color: var(--bs-body-color);
}

.calendar-detail-past .calendar-description {
  border-inline-start: 3px solid var(--bs-border-color);
  padding-inline-start: 1rem;
}

.calendar-month-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.calendar-month-grid {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.calendar-weekdays,
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  text-align: center;
  padding: .75rem 0;
  font-size: .8125rem;
  font-weight: 500;
  background: var(--bs-body-bg);
}

.calendar-day {
  min-height: 9rem;
  padding: .5rem;
  border-top: 1px solid var(--bs-border-color);
  border-inline-end: 1px solid var(--bs-border-color);
}

.calendar-day:last-child {
  border-inline-end: 0;
}

.calendar-day-muted {
  background: var(--bs-body-bg);
}

.calendar-day-today {
  box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.calendar-day-number {
  display: block;
  text-align: end;
  margin-bottom: .5rem;
  font-size: .8125rem;
}

.calendar-day-today .calendar-day-number {
  color: var(--bs-primary);
  font-weight: 700;
}

.calendar-event-chip {
  display: block;
  padding: .375rem .5rem;
  margin-block: .375rem;
  border-radius: var(--bs-border-radius-sm);
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-size: .8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.calendar-event-chip:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}

.calendar-event-chip-past {
  background: var(--bs-secondary-bg-subtle);
  color: var(--bs-body-color);
}

.calendar-event-chip-past:hover {
  color: var(--bs-heading-color);
}

.calendar-mobile-agenda {
  display: none;
}

.calendar-preview-dialog {
  max-width: min(32rem, calc(100vw - 2rem));
  width: 100%;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  border: 0;
  border-radius: var(--bs-border-radius-lg);
  padding: 1.5rem;
  color: var(--bs-body-color);
  background: var(--bs-paper-bg);
  box-shadow: var(--bs-box-shadow-lg);
}

.calendar-preview-dialog::backdrop {
  background: rgb(0 0 0 / 55%);
}

.calendar-dialog-close {
  float: inline-end;
  margin-inline-start: .5rem;
  margin-bottom: .5rem;
}

.calendar-comment {
  padding-block: 1.25rem;
  border-top: 1px solid var(--bs-border-color);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: background-color .2s ease, outline-color .2s ease;
}

#calendar-comments,
#community-message-composer,
.calendar-comment {
  scroll-margin-top: 7rem;
}

.calendar-comment-reply {
  margin-inline-start: 1.5rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--bs-border-color);
}

/* Fade the brief target feedback; reduced-motion users get the same static cue. */
.calendar-comment-reply-target {
  background-color: var(--bs-primary-bg-subtle);
  outline-color: var(--bs-primary);
}

.calendar-comment-unread-target {
  background-color: var(--bs-success-bg-subtle);
  outline-color: var(--bs-success);
}

.calendar-unread-nav {
  position: fixed;
  inset-inline-end: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1020;
  padding: .5rem;
  border-radius: var(--bs-border-radius);
  background: var(--bs-paper-bg);
  color: var(--bs-body-color);
}

@media (max-width: 991.98px) {
  .calendar-unread-nav {
    top: auto;
    bottom: 1rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-comment {
    transition: none;
  }
}

/* The HTMX wrapper stays addressable while names occupy the full action-row width. */
.calendar-comment-support {
  display: contents;
}

.calendar-report-button {
  opacity: 0;
}

.calendar-comment:hover .calendar-report-button,
.calendar-comment:focus-within .calendar-report-button {
  opacity: 1;
}

.calendar-attendees {
  display: flex;
  align-items: center;
}

.calendar-submission textarea {
  min-height: 8rem;
}

.calendar-page .prose-editor {
  max-width: 100%;
  --prose-editor-background: var(--bs-paper-bg);
  --prose-editor-foreground: var(--bs-body-color);
  --prose-editor-border-color: var(--bs-border-color);
  --prose-editor-active-color: var(--bs-primary-bg-subtle);
  --prose-editor-disabled-color: var(--bs-body-bg);
}

/* The editor wraps the textarea, so Bootstrap cannot show its error by itself. */
.prose-editor:has(.is-invalid) ~ .invalid-feedback {
  display: block;
}

.calendar-page .prose-editor .prose-menubar {
  padding: .5rem;
  border: 1px solid var(--prose-editor-border-color);
  border-bottom: 0;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.calendar-page .prose-editor .ProseMirror {
  padding: 1rem;
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.prose-editor:has(.is-invalid) :is(.prose-menubar, .ProseMirror) {
  border-color: var(--bs-form-invalid-border-color);
}

.calendar-page .prose-editor .prose-menubar__button:hover,
.calendar-page .prose-editor .prose-menubar__button.active {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

#calendar-comment-form .ProseMirror,
#community-message-form .ProseMirror {
  min-height: 12rem;
}

.calendar-submission .ProseMirror {
  min-height: 20rem;
}

/* Form fields have their own focus border. */
.calendar-page :is(a, button, input, select, textarea, [contenteditable]):not(.form-control, .form-select, .form-check-input):focus-visible,
.calendar-preview-dialog a:focus-visible,
.calendar-preview-dialog button:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 3px;
}

@media (hover: none) {
  .calendar-report-button { opacity: 1; }
}

@media (max-width: 767.98px) {
  .calendar-month-grid { display: none; }
  .calendar-mobile-agenda { display: block; }
  .calendar-month-nav { gap: .5rem; }
  .calendar-comment-reply { margin-inline-start: .5rem; padding-inline-start: .5rem; }
  /* Small buttons keep their size; the rest get a full touch target. */
  .calendar-page .btn:not(.btn-sm), .calendar-preview-dialog .btn:not(.btn-sm) { min-height: 2.75rem; }
  .calendar-page .btn-icon, .calendar-preview-dialog .btn-icon { min-width: 2.75rem; }
  .calendar-page .nav-link, .calendar-mobile-agenda .calendar-event-chip { min-height: 2.75rem; }
}

/* In the narrow sidebar the labels go above the values. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .calendar-facts { grid-template-columns: 1fr; gap: .375rem; }
  .calendar-facts dd + dt { margin-top: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-page *, .calendar-page *::before, .calendar-page *::after,
  .calendar-preview-dialog * { transition: none !important; scroll-behavior: auto !important; }
}

/* Native scrolling remains available until Swiper enhances the cards. */
.community-discovery {
  container-type: inline-size;
  min-width: 0;
}
.community-discovery-title {
  min-width: 0;
}
.community-discovery-carousel:not(.swiper-initialized) {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.community-discovery-carousel:not(.swiper-initialized) .swiper-wrapper {
  gap: 1rem;
}
.community-discovery-carousel .swiper-slide {
  height: auto;
  scroll-snap-align: start;
}
.community-discovery-controls[hidden] {
  display: none !important;
}
@container (min-width: 576px) {
  .community-discovery-carousel:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 1rem) / 2);
  }
}