/* ═══════════════════════════════════════════════════════════════
   Blueprint.gg — Blog Listing Page Styles
   ═══════════════════════════════════════════════════════════════ */

/* Dark hero base styles → shared.css (.hero--dark) */
/* Shared listing components (filters, cards, grid) → components.css (.listing-*) */

/* ── Featured Post ── */
.blog-featured {
  background-color: var(--color-white);
  padding-bottom: var(--space-8);
}

.blog-featured__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.blog-featured__card:hover {
  border-color: var(--color-teal);
  box-shadow: 0 var(--space-2) var(--space-8) var(--color-overlay-black-8);
}

.blog-featured__image {
  display: flex;
  align-items: stretch;
}

.blog-featured__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  padding-left: 0;
}

.blog-featured__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-slate-900);
}

.blog-featured__excerpt {
  font-size: var(--text-base);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-slate-500);
}

.blog-featured__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--color-slate-700);
}

.blog-featured__date,
.blog-featured__read {
  position: relative;
  padding-left: var(--space-4);
}

.blog-featured__date::before,
.blog-featured__read::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-slate-400);
}

@media (max-width: 767px) {
  .blog-featured__card {
    grid-template-columns: 1fr;
  }

  .blog-featured__content {
    padding: var(--space-6);
  }

  .blog-featured__title {
    font-size: var(--text-2xl);
  }
}

/* ── Blog Avatars ── */
/* Base avatar structure → components.css (.blog-avatar shares .avatar base) */

.blog-avatar {
  background: var(--color-teal-light);
  color: var(--color-teal-dark);
}

.blog-avatar--sm {
  width: var(--space-8);
  height: var(--space-8);
  font-size: var(--text-xs);
}

.blog-avatar--xs {
  width: var(--space-6);
  height: var(--space-6);
  font-size: var(--text-xs);
}

/* ── CSS Thumbnail Placeholders ── */
.blog-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-slate-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 12rem; /* mockup-specific — thumbnail placeholder height */
  width: 100%;
  position: relative;
  overflow: hidden;
}

.blog-thumb--featured {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  min-height: 100%;
  background: linear-gradient(135deg, var(--color-slate-100) 0%, var(--color-slate-50) 100%);
}

.blog-thumb__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-top: var(--space-3);
}

/* Bar chart thumbnail */
.blog-thumb__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: var(--space-20);
  width: 100%;
  max-width: 10rem; /* mockup-specific */
}

.blog-thumb__bars--sm {
  height: var(--space-16);
  max-width: var(--space-32);
}

.blog-thumb__bar {
  flex: 1;
  background: var(--color-slate-200);
  border-radius: var(--space-1) var(--space-1) 0 0;
  transition: height var(--duration-base) var(--ease-default);
  height: var(--bar-h, 50%);
}

.blog-thumb__bar--accent {
  background: var(--color-teal);
}

/* Dot indicators */
.blog-thumb__dots {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.blog-thumb__dot {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-full);
}

.blog-thumb__dot--teal { background: var(--color-teal); }
.blog-thumb__dot--warning { background: var(--color-warning); }
.blog-thumb__dot--success { background: var(--color-success); }

/* Line indicators */
.blog-thumb__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--space-32);
}

.blog-thumb__line {
  height: var(--space-2);
  background: var(--color-slate-200);
  border-radius: var(--radius-full);
  width: var(--bar-w, 100%);
}

.blog-thumb__line--short {
  background: var(--color-teal-light);
}

/* Step indicators */
.blog-thumb__steps {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.blog-thumb__step {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.blog-thumb__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-teal);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.blog-thumb__step-line {
  width: var(--space-8);
  height: 2px;
  background: var(--color-teal-light);
}

/* Chart thumbnail */
.blog-thumb__chart {
  width: 100%;
  max-width: 10rem; /* mockup-specific */
}

.blog-thumb__chart svg {
  width: 100%;
  height: auto;
}

/* Table thumbnail */
.blog-thumb__table {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--space-32);
}

.blog-thumb__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.blog-thumb__row span:first-child {
  flex: 1;
  height: var(--space-2);
  background: var(--color-slate-200);
  border-radius: var(--radius-full);
}

.blog-thumb__cell--check {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-success);
  flex-shrink: 0;
}

.blog-thumb__cell--cross {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-error);
  flex-shrink: 0;
}

/* Avatar stack thumbnail */
.blog-thumb__avatars {
  display: flex;
  justify-content: center;
}

.blog-thumb__avatar-stack {
  display: flex;
}

/* Base avatar structure + color variants → components.css */
.blog-thumb__mini-avatar {
  width: var(--space-10);
  height: var(--space-10);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  margin-left: calc(-1 * var(--space-2));
}

.blog-thumb__mini-avatar:first-child {
  margin-left: 0;
}

/* Post card grid, card styles, and filter bar → components.css (.listing-*) */

/* ── Pagination ── */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.blog-pagination__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-slate-600);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.blog-pagination__btn:hover {
  color: var(--color-teal);
  background: var(--color-teal-light);
}

.blog-pagination__btn--disabled {
  color: var(--color-slate-500);
  cursor: not-allowed;
}

.blog-pagination__btn--disabled:hover {
  color: var(--color-slate-500);
  background: none;
}

.blog-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.blog-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-slate-600);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
}

.blog-pagination__page:hover {
  background: var(--color-slate-100);
  color: var(--color-slate-900);
}

.blog-pagination__page--active {
  background: var(--color-teal);
  color: var(--color-white);
}

/* ── Newsletter CTA ── */
.blog-newsletter {
  background-color: var(--color-slate-50);
}

.blog-newsletter__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
}

.blog-newsletter__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog-newsletter__icon {
  color: var(--color-teal);
}

.blog-newsletter__content h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-slate-900);
}

.blog-newsletter__content p {
  font-size: var(--text-base);
  color: var(--color-slate-600);
  line-height: var(--leading-relaxed);
}

.blog-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.blog-newsletter__input-group {
  display: flex;
  gap: var(--space-3);
}

.blog-newsletter__input {
  flex: 1;
}

.blog-newsletter__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.blog-newsletter__disclaimer a {
  color: var(--color-teal);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .blog-newsletter__box {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
  }

  .blog-newsletter__content h2 {
    font-size: var(--text-2xl);
  }

  .blog-newsletter__input-group {
    flex-direction: column;
  }
}

/* CTA styles → shared.css */