/* ==========================================================================
   FPNNEWS24 PRIME — category.css
   Category/archive page styles: header, hero, grid, article list,
   trending, pagination.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Category Header
   -------------------------------------------------------------------------- */
.fpn-category-header {
  background-color: var(--fpn-surface-container-low);
  padding: var(--fpn-stack-lg) 0;
  border-bottom: 1px solid var(--fpn-outline-variant);
}

.fpn-category-header__inner {
  max-width: var(--fpn-container-max);
  margin: 0 auto;
  padding: 0 var(--fpn-gutter);
}

.fpn-category-header__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fpn-stack-xs);
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-category-header__breadcrumb-link {
  color: var(--fpn-on-surface-variant);
  transition: color var(--fpn-transition-fast);
}

.fpn-category-header__breadcrumb-link:hover {
  color: var(--fpn-primary);
}

.fpn-category-header__breadcrumb-sep {
  color: var(--fpn-outline);
}

.fpn-category-header__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-xl-mobile);
  font-weight: var(--fpn-fw-bold);
  line-height: var(--fpn-lh-headline-xl);
  color: var(--fpn-on-surface);
  margin-bottom: var(--fpn-stack-xs);
}

.fpn-category-header__description {
  font-size: var(--fpn-text-body-md);
  color: var(--fpn-on-surface-variant);
  line-height: var(--fpn-lh-body-md);
  max-width: 720px;
}

.fpn-category-header__meta {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-md);
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
  margin-top: var(--fpn-stack-sm);
}

.fpn-category-header__count {
  font-weight: var(--fpn-fw-medium);
  color: var(--fpn-primary);
}

/* --------------------------------------------------------------------------
   2. Category Hero (First Post Highlight)
   -------------------------------------------------------------------------- */
.fpn-category-hero {
  margin-bottom: var(--fpn-stack-lg);
}

.fpn-category-hero__card {
  position: relative;
  border-radius: var(--fpn-radius-xl);
  overflow: hidden;
  background-color: var(--fpn-surface-container);
}

.fpn-category-hero__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

.fpn-category-hero__card:hover .fpn-category-hero__thumb img {
  transform: scale(1.03);
}

.fpn-category-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}

.fpn-category-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--fpn-stack-lg);
  z-index: 1;
}

.fpn-category-hero__category {
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-category-hero__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-lg);
  font-weight: var(--fpn-fw-bold);
  line-height: var(--fpn-lh-headline-lg);
  color: #ffffff;
  margin-bottom: var(--fpn-stack-sm);
  max-width: 680px;
}

.fpn-category-hero__title a {
  color: inherit;
  transition: color var(--fpn-transition-fast);
}

.fpn-category-hero__title a:hover {
  color: var(--fpn-inverse-primary);
}

.fpn-category-hero__excerpt {
  font-size: var(--fpn-text-body-md);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 600px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-category-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-sm);
  font-size: var(--fpn-text-metadata);
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   3. Category Grid (12-col, 8+4 with sidebar)
   -------------------------------------------------------------------------- */
.fpn-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fpn-stack-lg);
  max-width: var(--fpn-container-max);
  margin: 0 auto;
  padding: var(--fpn-stack-lg) var(--fpn-gutter);
}

.fpn-category-grid__main {
  min-width: 0;
}

.fpn-category-grid__sidebar {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   4. Article List (Thumbnail + Text Side-by-Side)
   -------------------------------------------------------------------------- */
.fpn-article-list {
  display: flex;
  flex-direction: column;
  gap: var(--fpn-stack-md);
}

.fpn-article-list__item {
  display: flex;
  gap: var(--fpn-stack-md);
  padding-bottom: var(--fpn-stack-md);
  border-bottom: 1px solid var(--fpn-outline-variant);
}

.fpn-article-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fpn-article-list__thumb {
  width: 160px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--fpn-radius-lg);
  background-color: var(--fpn-surface-container);
}

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

.fpn-article-list__item:hover .fpn-article-list__thumb img {
  transform: scale(1.05);
}

.fpn-article-list__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

.fpn-article-list__category {
  margin-bottom: var(--fpn-stack-xs);
}

.fpn-article-list__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-body-lg);
  font-weight: var(--fpn-fw-semi);
  line-height: 1.3;
  color: var(--fpn-on-surface);
  margin-bottom: var(--fpn-stack-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fpn-article-list__title a {
  color: inherit;
  transition: color var(--fpn-transition-fast);
}

.fpn-article-list__title a:hover {
  color: var(--fpn-primary);
}

.fpn-article-list__excerpt {
  font-size: var(--fpn-text-body-sm);
  color: var(--fpn-on-surface-variant);
  line-height: var(--fpn-lh-body-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--fpn-stack-xs);
}

.fpn-article-list__meta {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-sm);
  font-size: var(--fpn-text-metadata);
  color: var(--fpn-on-surface-variant);
}

.fpn-article-list__meta-author {
  font-weight: var(--fpn-fw-medium);
  color: var(--fpn-on-surface);
}

/* Numbered variant for category page */
.fpn-article-list--numbered {
  counter-reset: article-list;
}

.fpn-article-list--numbered .fpn-article-list__item {
  counter-increment: article-list;
}

.fpn-article-list--numbered .fpn-article-list__number {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-md);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-primary);
  line-height: 1;
  min-width: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--fpn-stack-xs);
}

.fpn-article-list--numbered .fpn-article-list__number::before {
  content: counter(article-list);
}

/* Compact variant for sidebar */
.fpn-article-list--compact .fpn-article-list__thumb {
  width: 80px;
}

.fpn-article-list--compact .fpn-article-list__title {
  font-size: var(--fpn-text-body-md);
  -webkit-line-clamp: 2;
}

.fpn-article-list--compact .fpn-article-list__excerpt {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Category Trending
   -------------------------------------------------------------------------- */
.fpn-category-trending {
  background-color: var(--fpn-surface-container-lowest);
  border-radius: var(--fpn-radius-xl);
  padding: var(--fpn-stack-lg);
}

.fpn-category-trending__header {
  display: flex;
  align-items: center;
  gap: var(--fpn-stack-sm);
  padding-left: var(--fpn-stack-md);
  border-left: 4px solid var(--fpn-primary);
  margin-bottom: var(--fpn-stack-md);
}

.fpn-category-trending__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-sm);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-on-surface);
}

.fpn-category-trending__list {
  counter-reset: trending;
}

.fpn-category-trending__item {
  counter-increment: trending;
  display: flex;
  gap: var(--fpn-stack-md);
  padding: var(--fpn-stack-sm) 0;
  border-bottom: 1px solid var(--fpn-outline-variant);
  align-items: flex-start;
}

.fpn-category-trending__item:last-child {
  border-bottom: none;
}

.fpn-category-trending__number {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-md);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-primary);
  line-height: 1;
  min-width: 1.5rem;
}

.fpn-category-trending__number::before {
  content: counter(trending);
}

.fpn-category-trending__item-title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-body-sm);
  font-weight: var(--fpn-fw-semi);
  line-height: 1.3;
  color: var(--fpn-on-surface);
}

.fpn-category-trending__item-title a:hover {
  color: var(--fpn-primary);
}

/* --------------------------------------------------------------------------
   6. Category Pagination
   -------------------------------------------------------------------------- */
.fpn-category-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fpn-stack-xs);
  padding: var(--fpn-stack-lg) 0;
}

.fpn-category-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--fpn-stack-sm);
  border-radius: var(--fpn-radius-lg);
  font-size: var(--fpn-text-body-sm);
  font-weight: var(--fpn-fw-medium);
  color: var(--fpn-on-surface);
  transition: background-color var(--fpn-transition-fast), color var(--fpn-transition-fast);
}

.fpn-category-pagination__item:hover {
  background-color: var(--fpn-surface-variant);
}

.fpn-category-pagination__item--active {
  background-color: var(--fpn-primary);
  color: var(--fpn-on-primary);
}

.fpn-category-pagination__item--disabled {
  opacity: 0.38;
  pointer-events: none;
}

.fpn-category-pagination__item a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   7. Category Filter / Sub-category pills
   -------------------------------------------------------------------------- */
.fpn-category-filters {
  display: flex;
  gap: var(--fpn-stack-sm);
  overflow-x: auto;
  padding: var(--fpn-stack-sm) 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fpn-category-filters::-webkit-scrollbar {
  display: none;
}

.fpn-category-filters__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--fpn-stack-xs) var(--fpn-stack-md);
  border-radius: var(--fpn-radius-lg);
  font-size: var(--fpn-text-body-sm);
  font-weight: var(--fpn-fw-medium);
  white-space: nowrap;
  flex-shrink: 0;
  background-color: var(--fpn-surface-container-high);
  color: var(--fpn-on-surface);
  transition: background-color var(--fpn-transition-fast), color var(--fpn-transition-fast);
  cursor: pointer;
  border: none;
}

.fpn-category-filters__pill:hover {
  background-color: var(--fpn-surface-variant);
}

.fpn-category-filters__pill--active {
  background-color: var(--fpn-on-surface);
  color: var(--fpn-surface);
}

/* --------------------------------------------------------------------------
   8. Category Empty State
   -------------------------------------------------------------------------- */
.fpn-category-empty {
  text-align: center;
  padding: var(--fpn-stack-lg) 0;
}

.fpn-category-empty__icon {
  font-size: 64px;
  color: var(--fpn-outline);
  margin-bottom: var(--fpn-stack-md);
}

.fpn-category-empty__title {
  font-family: var(--fpn-font-heading);
  font-size: var(--fpn-text-headline-md);
  font-weight: var(--fpn-fw-bold);
  color: var(--fpn-on-surface);
  margin-bottom: var(--fpn-stack-sm);
}

.fpn-category-empty__desc {
  font-size: var(--fpn-text-body-md);
  color: var(--fpn-on-surface-variant);
}