/* Article/News listing + detail pages, and the generic CMS Page.cshtml:
   hero banner, category pill nav, content grid + cards, FAQ accordion, tag
   chips. Comment thread and share-row styling are intentionally NOT
   duplicated here — ArticleDetails.cshtml also links product-details.css and
   reuses its .comment*/.comment-form*/.share-links* classes directly, since
   none of those were ever product-specific. */

.content-hero {
  position: relative;
  overflow: hidden;
}
.content-hero img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 360px;
}

.blog-page { background: var(--color-bg); }
.blog-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-xl), 8vw, 96px);
  border-block-end: 1px solid var(--color-border);
  background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--color-gold) 18%, transparent), transparent 36%), linear-gradient(135deg, var(--color-bg-raised), var(--color-surface));
}
[dir="rtl"] .blog-hero {
  background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--color-gold) 18%, transparent), transparent 36%), linear-gradient(225deg, var(--color-bg-raised), var(--color-surface));
}
.blog-hero__inner { max-width: 1280px; }
.blog-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs); margin-block-end: var(--space-lg); color: var(--color-text-muted); font-size: var(--fs-xs); }
.blog-breadcrumb a:hover { color: var(--color-gold-text); }
.blog-hero__eyebrow { margin-block-end: var(--space-xs); color: var(--color-gold-text); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.blog-hero__title { max-width: 760px; font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1.08; }
.blog-hero__description { max-width: 650px; margin-block-start: var(--space-sm); color: var(--color-text-muted); font-size: clamp(var(--fs-sm), 2vw, var(--fs-lg)); }
.blog-content { max-width: 1280px; padding-block: var(--space-lg) var(--space-xl); }

/* Category pill nav (Articles/ArticleCategories/News) */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
  margin-block-end: var(--space-md);
  overflow-x: auto;
}
.category-pill {
  flex: 0 0 auto;
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.category-pill:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-text);
}
.category-pill.active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-text-on-gold);
}

/* Content grid — same shape as .product-grid (products.css), generalized
   for article/news cards. */
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 640px) {
  .content-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .content-grid { grid-template-columns: repeat(4, 1fr); }
}
.content-grid > .pagination {
  grid-column: 1 / -1;
}
.content-grid__empty {
  grid-column: 1 / -1;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  border-radius: var(--radius-md);
}

/* Article/news card additions on top of the generic .product-card
   (product-card.css, loaded globally) */
.content-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.content-card__meta .icon {
  width: 14px;
  height: 14px;
}
.content-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content-card__more {
  align-self: flex-start;
  margin-block-start: auto;
}

/* Sidebar list layout (News.cshtml: grid + category image links) */
.content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 1024px) {
  .content-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}
.content-sidebar__title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-block-end: var(--space-sm);
}
.content-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.content-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}
.content-sidebar__item:hover {
  color: var(--color-gold-text);
}
.content-sidebar__item img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Article detail body */
.content-detail {
  max-width: 860px;
  margin-inline: auto;
  padding-block: var(--space-md) var(--space-xl);
}
.content-detail__title {
  text-align: center;
  margin-block-end: var(--space-md);
}
.content-detail__hero {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-block-end: var(--space-md);
}
.content-detail__hero img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 440px;
}
.content-detail__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-block-end: var(--space-md);
}
.content-detail__meta .icon {
  width: 16px;
  height: 16px;
}
.content-detail__body {
  line-height: var(--lh-normal);
  color: var(--color-text);
}
.content-detail__body img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

/* Tag chips */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block: var(--space-md);
}
.tag-chips__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.tag-chip {
  font-size: var(--fs-xs);
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  color: var(--color-text);
}
.tag-chip:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-text);
}

/* Share row (same shape as product-details.css's .share-links, repeated
   here only as a labeled wrapper — the pills themselves reuse .share-links) */
.share-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-block: var(--space-md);
  margin-block: var(--space-md);
  border-block: 1px solid var(--color-border);
}
.share-row__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}
.share-row .share-links {
  padding-block: 0;
  justify-content: flex-start;
}

/* FAQ accordion — native <details>/<summary>, zero JS, same pattern as
   Products.cshtml's .category-tree accordion. */
.faq-accordion {
  margin-block: var(--space-lg);
  border-block-start: 1px solid var(--color-border);
}
.faq-accordion__item {
  border-block-end: 1px solid var(--color-border);
}
.faq-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
}
.faq-accordion__item summary::-webkit-details-marker { display: none; }
.faq-accordion__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: var(--fs-lg);
  color: var(--color-gold-text);
  transition: transform var(--transition-fast);
}
.faq-accordion__item[open] summary::after {
  transform: rotate(45deg);
}
.faq-accordion__answer {
  padding-block-end: var(--space-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}