/* Copyright 2025 Renofy Ltd. All rights reserved. */
.timeline-compact {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.timeline-compact__header {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 1.25rem;
}

.timeline-compact__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timeline-compact__event {
  position: relative;
  padding-left: 1rem;
}

.timeline-compact__event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.timeline-compact__event-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.timeline-compact__event-timestamp {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.timeline-compact__event-content {
  padding-top: 0.5rem;
}

.timeline-compact__event-comment {
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-pink);
  border-radius: var(--radius-base);
  padding: 0.75rem;
}

.timeline-compact__event--review .timeline-compact__event-comment {
  border-left-color: var(--color-blue);
}

.timeline-compact__event-images {
  margin-top: 0.75rem;
}

/* Carousel sizing - full width on mobile, 50% centered on desktop */
.timeline-compact__event-images .swiper-carousel {
  width: 100%;
}

@media (min-width: 821px) {
  .timeline-compact__event-images .swiper-carousel {
    width: 50%;
    margin: 0 auto;
  }
}

.timeline-compact__footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.timeline-compact__history-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-pink);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-base);
  transition: var(--transition-fast);
}

.timeline-compact__history-link:hover {
  background: var(--color-bg-light);
}

.timeline-compact__empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

@media (max-width: 820px) {
  .timeline-compact {
    padding: 1rem;
  }

  .timeline-compact__header {
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
  }

  .timeline-compact__event {
    padding-left: 0.75rem;
  }

  .timeline-compact__event-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }

  .timeline-compact__event-title {
    font-size: var(--font-size-sm);
  }

  .timeline-compact__event-timestamp {
    font-size: var(--font-size-xs);
  }

  .timeline-compact__footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
  }

  .timeline-compact__history-link {
    font-size: var(--font-size-sm);
  }
}