/* ==========================================================================
   ELITEPRESSLINE COMPONENTS
   Reusable UI components: cards, buttons, badges, forms, etc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Buttons
   -------------------------------------------------------------------------- */

.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ep-space-2);
  padding: var(--ep-space-3) var(--ep-space-6);
  font-family: var(--ep-font-body);
  font-size: var(--ep-text-sm);
  font-weight: var(--ep-weight-semibold);
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--ep-radius-md);
  cursor: pointer;
  transition: all var(--ep-transition-fast);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.ep-btn:active {
  transform: scale(0.97);
}

.ep-btn--primary {
  background-color: var(--ep-accent);
  color: var(--ep-text-inverse);
  border-color: var(--ep-accent);
}

.ep-btn--primary:hover {
  background-color: var(--ep-accent-hover);
  border-color: var(--ep-accent-hover);
  color: var(--ep-text-inverse);
}

.ep-btn--secondary {
  background-color: transparent;
  color: var(--ep-text-primary);
  border-color: var(--ep-border-color);
}

.ep-btn--secondary:hover {
  background-color: var(--ep-bg-tertiary);
  border-color: var(--ep-text-secondary);
}

.ep-btn--ghost {
  background-color: transparent;
  color: var(--ep-text-secondary);
  border: none;
  padding: var(--ep-space-2) var(--ep-space-3);
}

.ep-btn--ghost:hover {
  background-color: var(--ep-bg-tertiary);
  color: var(--ep-text-primary);
}

.ep-btn--sm {
  padding: var(--ep-space-2) var(--ep-space-4);
  font-size: var(--ep-text-xs);
}

.ep-btn--lg {
  padding: var(--ep-space-4) var(--ep-space-8);
  font-size: var(--ep-text-base);
}

.ep-btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--ep-radius-full);
}

.ep-btn--icon svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   2. Card
   -------------------------------------------------------------------------- */

.ep-card {
  position: relative;
  background-color: var(--ep-bg-card);
  border-radius: var(--ep-radius-lg);
  overflow: hidden;
  box-shadow: var(--ep-shadow-card);
  transition: transform var(--ep-transition-base), box-shadow var(--ep-transition-base);
}

.ep-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ep-shadow-card-hover);
}

.ep-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.ep-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ep-transition-slow);
}

.ep-card:hover .ep-card__image img {
  transform: scale(1.04);
}

.ep-card__body {
  padding: var(--ep-space-5);
}

.ep-card__category {
  display: inline-block;
  font-size: var(--ep-text-xs);
  font-weight: var(--ep-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ep-tracking-caps);
  color: var(--ep-accent);
  margin-bottom: var(--ep-space-2);
}

.ep-card__category:hover {
  color: var(--ep-accent-hover);
}

.ep-card__title {
  font-family: var(--ep-font-heading);
  font-size: var(--ep-text-xl);
  font-weight: var(--ep-weight-bold);
  line-height: var(--ep-leading-snug);
  color: var(--ep-text-primary);
  margin-bottom: var(--ep-space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ep-card__title a {
  color: inherit;
  transition: color var(--ep-transition-fast);
}

.ep-card__title a:hover {
  color: var(--ep-accent);
}

.ep-card__excerpt {
  font-size: var(--ep-text-sm);
  color: var(--ep-text-secondary);
  line-height: var(--ep-leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--ep-space-3);
}

.ep-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ep-space-3);
  font-size: var(--ep-text-xs);
  color: var(--ep-text-tertiary);
}

.ep-card__meta-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--ep-text-tertiary);
  flex-shrink: 0;
}

/* Card variant: horizontal */
.ep-card--horizontal {
  display: flex;
  flex-direction: row;
}

.ep-card--horizontal .ep-card__image {
  width: 240px;
  min-width: 240px;
  aspect-ratio: auto;
}

.ep-card--horizontal .ep-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 640px) {
  .ep-card--horizontal {
    flex-direction: column;
  }

  .ep-card--horizontal .ep-card__image {
    width: 100%;
    min-width: unset;
    aspect-ratio: 16 / 10;
  }
}

/* Card variant: compact list */
.ep-card--compact {
  display: flex;
  align-items: center;
  gap: var(--ep-space-4);
  padding: var(--ep-space-4);
  background: var(--ep-bg-card);
  border-radius: var(--ep-radius-md);
  box-shadow: none;
  border-bottom: 1px solid var(--ep-border-light);
}

.ep-card--compact:hover {
  transform: none;
  box-shadow: none;
  background-color: var(--ep-bg-secondary);
}

.ep-card--compact:last-child {
  border-bottom: none;
}

.ep-card--compact .ep-card__image {
  width: 80px;
  min-width: 80px;
  height: 80px;
  aspect-ratio: 1;
  border-radius: var(--ep-radius-sm);
}

.ep-card--compact .ep-card__body {
  padding: 0;
  flex: 1;
}

.ep-card--compact .ep-card__title {
  font-size: var(--ep-text-base);
  -webkit-line-clamp: 2;
  margin-bottom: var(--ep-space-1);
}

/* --------------------------------------------------------------------------
   3. Badge / Tag
   -------------------------------------------------------------------------- */

.ep-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ep-space-1) var(--ep-space-3);
  font-size: var(--ep-text-xs);
  font-weight: var(--ep-weight-semibold);
  letter-spacing: var(--ep-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--ep-radius-full);
  white-space: nowrap;
}

.ep-badge--accent {
  background-color: var(--ep-accent);
  color: var(--ep-text-inverse);
}

.ep-badge--subtle {
  background-color: var(--ep-accent-light);
  color: var(--ep-accent);
}

.ep-badge--outline {
  background-color: transparent;
  color: var(--ep-text-secondary);
  border: 1px solid var(--ep-border-color);
}

/* --------------------------------------------------------------------------
   4. Input / Search
   -------------------------------------------------------------------------- */

.ep-input {
  width: 100%;
  padding: var(--ep-space-3) var(--ep-space-4);
  font-size: var(--ep-text-base);
  color: var(--ep-text-primary);
  background-color: var(--ep-bg-card);
  border: 2px solid var(--ep-border-color);
  border-radius: var(--ep-radius-md);
  transition: border-color var(--ep-transition-fast), box-shadow var(--ep-transition-fast);
  outline: none;
}

.ep-input:focus {
  border-color: var(--ep-accent);
  box-shadow: 0 0 0 3px var(--ep-accent-light);
}

.ep-input::placeholder {
  color: var(--ep-text-tertiary);
}

.ep-search-form {
  position: relative;
}

.ep-search-form__icon {
  position: absolute;
  left: var(--ep-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ep-text-tertiary);
  pointer-events: none;
}

.ep-search-form__icon svg {
  width: 18px;
  height: 18px;
}

.ep-search-form .ep-input {
  padding-left: var(--ep-space-10);
}

/* Search suggestions dropdown */
.ep-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--ep-space-2);
  background-color: var(--ep-bg-card);
  border: 1px solid var(--ep-border-color);
  border-radius: var(--ep-radius-md);
  box-shadow: var(--ep-shadow-lg);
  z-index: var(--ep-z-dropdown);
  max-height: 400px;
  overflow-y: auto;
  display: none;
}

.ep-search-suggestions.is-active {
  display: block;
}

.ep-search-suggestion {
  display: flex;
  align-items: center;
  gap: var(--ep-space-3);
  padding: var(--ep-space-3) var(--ep-space-4);
  transition: background-color var(--ep-transition-fast);
  cursor: pointer;
}

.ep-search-suggestion:hover,
.ep-search-suggestion.is-highlighted {
  background-color: var(--ep-bg-secondary);
}

.ep-search-suggestion__thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--ep-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.ep-search-suggestion__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-search-suggestion__title {
  font-size: var(--ep-text-sm);
  font-weight: var(--ep-weight-medium);
  color: var(--ep-text-primary);
}

.ep-search-suggestion__category {
  font-size: var(--ep-text-xs);
  color: var(--ep-text-tertiary);
}

/* --------------------------------------------------------------------------
   5. Author Avatar
   -------------------------------------------------------------------------- */

.ep-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ep-radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.ep-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ep-avatar--sm {
  width: 28px;
  height: 28px;
}

.ep-avatar--lg {
  width: 56px;
  height: 56px;
}

.ep-avatar--xl {
  width: 80px;
  height: 80px;
}

/* --------------------------------------------------------------------------
   6. Separator / Divider
   -------------------------------------------------------------------------- */

.ep-divider {
  border: none;
  border-top: 1px solid var(--ep-divider);
  margin-block: var(--ep-space-6);
}

.ep-divider--thick {
  border-top-width: 3px;
  border-color: var(--ep-accent);
  width: 48px;
}

/* --------------------------------------------------------------------------
   7. Loading / Skeleton
   -------------------------------------------------------------------------- */

.ep-skeleton {
  background: linear-gradient(90deg, var(--ep-bg-tertiary) 25%, var(--ep-bg-secondary) 50%, var(--ep-bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: ep-shimmer 1.5s ease infinite;
  border-radius: var(--ep-radius-sm);
}

@keyframes ep-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --------------------------------------------------------------------------
   8. Back to Top
   -------------------------------------------------------------------------- */

.ep-back-to-top {
  position: fixed;
  bottom: var(--ep-space-6);
  right: var(--ep-space-6);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ep-bg-card);
  color: var(--ep-text-primary);
  border: 1px solid var(--ep-border-color);
  border-radius: var(--ep-radius-full);
  box-shadow: var(--ep-shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all var(--ep-transition-base);
  z-index: var(--ep-z-sticky);
}

.ep-back-to-top svg {
  width: 20px;
  height: 20px;
}

.ep-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ep-back-to-top:hover {
  background-color: var(--ep-accent);
  color: var(--ep-text-inverse);
  border-color: var(--ep-accent);
}

/* --------------------------------------------------------------------------
   9. Bookmark Button
   -------------------------------------------------------------------------- */

.ep-bookmark {
  cursor: pointer;
  color: var(--ep-text-tertiary);
  transition: color var(--ep-transition-fast), transform var(--ep-transition-spring);
}

.ep-bookmark:hover {
  color: var(--ep-accent);
}

.ep-bookmark.is-saved {
  color: var(--ep-accent);
}

.ep-bookmark.is-saved .ep-bookmark__icon--outline {
  display: none;
}

.ep-bookmark.is-saved .ep-bookmark__icon--filled {
  display: block;
}

.ep-bookmark__icon--filled {
  display: none;
}

.ep-bookmark:active {
  transform: scale(1.2);
}

/* --------------------------------------------------------------------------
   10. Pagination
   -------------------------------------------------------------------------- */

.ep-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ep-space-2);
  padding-block: var(--ep-space-8);
}

.ep-pagination a,
.ep-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--ep-space-3);
  border-radius: var(--ep-radius-md);
  font-size: var(--ep-text-sm);
  font-weight: var(--ep-weight-medium);
  transition: all var(--ep-transition-fast);
}

.ep-pagination a {
  color: var(--ep-text-secondary);
  background-color: var(--ep-bg-card);
  border: 1px solid var(--ep-border-color);
}

.ep-pagination a:hover {
  background-color: var(--ep-accent);
  color: var(--ep-text-inverse);
  border-color: var(--ep-accent);
}

.ep-pagination .current {
  background-color: var(--ep-accent);
  color: var(--ep-text-inverse);
  border: 1px solid var(--ep-accent);
}

/* --------------------------------------------------------------------------
   11. Numbered list indicator (Trending)
   -------------------------------------------------------------------------- */

.ep-numbered-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ep-space-4);
}

.ep-numbered-item__rank {
  font-family: var(--ep-font-heading);
  font-size: var(--ep-text-4xl);
  font-weight: var(--ep-weight-extrabold);
  color: var(--ep-bg-tertiary);
  line-height: 1;
  min-width: 48px;
  flex-shrink: 0;
}

.ep-numbered-item:hover .ep-numbered-item__rank {
  color: var(--ep-accent-light);
}