/**
 * @file
 * Styles for session modal content and calendar events.
 */

/* Calendar past events styling */
.fc-event.fc-event-past {
  opacity: 0.5 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.fc-event.fc-event-past:hover {
  opacity: 0.7 !important;
  background-color: inherit !important;
  border-color: inherit !important;
}

.session-modal-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.session-modal-content__action {
  /* No separator here: in the calendar modal the session info moves to the
     header and the CTA moves to the footer, so the card is the only thing left
     in the body. The footer's own border-top is the single divider — a
     border-bottom here would double it up. */
  padding-bottom: 0;
}

.session-modal-content__action .card {
  margin: 0;
}

/* Hide the card link overlay since we have a button below */
.session-modal-content__action .card__cta-icon {
  display: none;
}

.session-modal-content__session {
  padding: 0 1rem;
}

.session-modal-content__actions {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.session-modal-content__actions .button {
  min-width: 200px;
  text-align: center;
}

/* SSE Card styling in modal */
.session-modal-content__action .sse-card {
  margin: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.session-modal-content__action .sse-card__image {
  width: 100%;
  max-height: 200px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.session-modal-content__action .sse-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.session-modal-content__action .sse-card__header {
  padding: 1rem 1.5rem 0.5rem;
}

.session-modal-content__action .sse-card__title {
  margin: 0 0 0.5rem 0;
  color: var(--color-fg);
  font-size: 1.25rem;
  font-weight: 600;
}

.session-modal-content__action .sse-card__title a {
  color: var(--color-link);
  text-decoration: none;
}

.session-modal-content__action .sse-card__title a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.session-modal-content__action .sse-card__subtitle {
  color: var(--color-fg-muted);
  font-size: 0.875rem;
}

.session-modal-content__action .sse-card__content {
  padding: 0 1.5rem 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .session-modal-content {
    gap: 1.5rem;
  }

  .session-modal-content__session {
    padding: 0 0.5rem;
  }

  .session-modal-content__actions .button {
    width: 100%;
    min-height: 44px; /* Touch target compliance */
    font-size: 16px; /* Prevent iOS zoom */
  }

  .session-modal-content__action .sse-card__image {
    max-height: 150px;
  }

  .session-modal-content__action .sse-card__header,
  .session-modal-content__action .sse-card__content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ========================================
   Fine-tuning: Enhanced Mobile Experience
   ======================================== */

/* Better spacing for modal content sections on all screens */
.session-modal-content__action {
  padding-bottom: 0;
}

/* Improve button area spacing */
.session-modal-content__actions {
  padding-top: 1.25rem; /* More separation from content */
}

/* Very small screens adjustments */
@media (max-width: 480px) {
  .session-modal-content {
    gap: 1.25rem; /* Slightly tighter on very small screens */
  }

  .session-modal-content__session {
    padding: 0 0.25rem;
  }

  .session-modal-content__action {
    padding-bottom: 0;
  }

  /* Ensure card content is readable */
  .session-modal-content__action .sse-card__title {
    font-size: 1rem;
    line-height: 1.3;
  }

  .session-modal-content__action .sse-card__subtitle {
    font-size: 0.8125rem;
  }

  .session-modal-content__action .sse-card__content {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}


/* Floating "Passé" badge in modal header */
.sse-modal__header {
  position: relative;
}

.sse-modal__past-badge {
  position: absolute;
  top: 0.75rem;
  right: 3.5rem; /* Space for close button */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background-color: #f97316; /* Orange 500 */
  color: white;
  font-size: 0.8125rem;
  font-weight: 700; /* Bold */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
  z-index: 10;
}

.sse-modal__past-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
  display: inline-block;
}

@media (max-width: 640px) {
  .sse-modal__past-badge {
    top: 0.5rem;
    right: 2.75rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}

/* Capacity progress bar row in the calendar session modal header (DS).
   Lifted from the session info block by fullcalendar-modal.js; spans the
   full header width below the meta/location lines. */
.sse-modal__header-row--capacity {
  display: block;
  width: 100%;
}
.sse-modal__header-row--capacity .sse-capacity-bar {
  width: 100%;
  margin-top: 2px;
}