/* ==========================================================================
   Trending Posts Block - Frontend Styles
   ========================================================================== */

.wp-block-nivalis-trending-posts {
  margin: 0;
}

/* Common elements */
.nivalis-trending__label,
.nivalis-trending__title {
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: var(--font-weight-semibold);
  margin: 0 var(--space-2) 0 0;
  line-height: 1.4;
}

.nivalis-trending__title {
  font-size: var(--step-0);
  margin-bottom: var(--space-3);
}

.nivalis-trending__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nivalis-trending__link {
  color: var(--color-primary-600);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

.nivalis-trending__link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.nivalis-trending__link:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.nivalis-trending__date {
  color: var(--color-text-muted);
  font-size: var(--step--2);
  font-weight: var(--font-weight-normal);
}

.nivalis-trending__excerpt {
  color: var(--color-text-secondary);
  font-size: var(--step--1);
  line-height: 1.4;
  margin: var(--space-1) 0 0 0;
}

/* ==========================================================================
   Inline Layout
   ========================================================================== */

.nivalis-trending-posts.layout-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
}

.nivalis-trending-posts.layout-inline .nivalis-trending__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
}

.nivalis-trending-posts.layout-inline .nivalis-trending__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.nivalis-trending-posts.layout-inline .nivalis-trending__separator {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  margin: 0 var(--space-1);
  user-select: none;
}

.nivalis-trending-posts.layout-inline .nivalis-trending__date {
  margin-left: var(--space-1);
}

/* Don't show excerpts in inline layout as they would break the flow */
.nivalis-trending-posts.layout-inline .nivalis-trending__excerpt {
  display: none;
}

/* ==========================================================================
   List Layout
   ========================================================================== */

.nivalis-trending-posts.layout-list .nivalis-trending__list {
  display: grid;
  gap: var(--space-3);
}

.nivalis-trending-posts.layout-list .nivalis-trending__item {
  display: grid;
  gap: var(--space-1);
}

.nivalis-trending-posts.layout-list .nivalis-trending__link {
  font-size: var(--step-0);
  line-height: 1.3;
}

.nivalis-trending-posts.layout-list .nivalis-trending__date {
  margin-top: var(--space-1);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 47.99rem) {
  .nivalis-trending-posts.layout-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  
  .nivalis-trending-posts.layout-inline .nivalis-trending__label {
    margin-bottom: var(--space-1);
  }
  
  .nivalis-trending-posts.layout-inline .nivalis-trending__list {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .nivalis-trending-posts.layout-inline .nivalis-trending__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  
  .nivalis-trending-posts.layout-inline .nivalis-trending__separator {
    display: none;
  }
}

/* ==========================================================================
   Dark theme support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .nivalis-trending__link {
    color: var(--color-primary-400);
  }
  
  .nivalis-trending__link:hover {
    color: var(--color-primary-300);
  }
  
  .nivalis-trending__link:focus {
    outline-color: var(--color-primary-400);
  }
}

/* ==========================================================================
   High contrast mode support
   ========================================================================== */

@media (prefers-contrast: high) {
  .nivalis-trending__link {
    text-decoration: underline;
  }
  
  .nivalis-trending__link:focus {
    outline: 3px solid;
    outline-offset: 2px;
  }
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  .nivalis-trending-posts {
    break-inside: avoid;
  }
  
  .nivalis-trending__link {
    color: inherit !important;
    text-decoration: underline !important;
  }
  
  .nivalis-trending__link:after {
    content: " (" attr(href) ")";
    font-size: smaller;
    color: var(--color-text-muted);
  }
}