/* ============================================================
   Z NATION TRANSPORT — BLOGS ARCHIVE (blogs.css)
   ============================================================ */

/* Search form in hero */
.znt-blogs__search { margin-top: var(--space-7); }

.znt-search-form {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
}

.znt-search-form__inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.znt-search-form__inner:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.znt-search-form__inner i { color: var(--text-muted); flex-shrink: 0; }

.znt-search-form__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  padding-block: 0.75rem;
}
.znt-search-form__input::placeholder { color: var(--text-muted); }

/* Category filters */
.znt-blogs-cats { padding-block: var(--space-5); border-block: 1px solid var(--border-subtle); }

.znt-blogs-cats__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.znt-blogs-cats__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.znt-blogs-cats__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.znt-tag__count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-left: 4px;
}

/* Featured article */
.znt-blog-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--inner-top-light);
  transition: box-shadow var(--dur-base);
}
.znt-blog-featured:hover { box-shadow: var(--shadow-xl), var(--inner-top-light); }

.znt-blog-featured__media {
  position: relative;
  min-height: 400px;
  background: var(--surface-1);
  overflow: hidden;
}
.znt-blog-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.znt-blog-featured:hover .znt-blog-featured__media img { transform: scale(1.03); }

.znt-blog-featured__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.znt-blog-featured__cat-badge {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
}

.znt-blog-featured__body {
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.znt-blog-featured__body .znt-eyebrow { margin-bottom: var(--space-4); }

.znt-blog-featured__title {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-4);
}
.znt-blog-featured__title a { color: var(--text-primary); transition: color var(--dur-fast) var(--ease-standard); }
.znt-blog-featured__title a:hover { color: var(--text-accent); }

.znt-blog-featured__excerpt {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 48ch;
}

.znt-blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Blog card grid */
.znt-blog-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm), var(--inner-top-light);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.znt-blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md), var(--inner-top-light);
}

.znt-blog-card__media {
  display: block;
  height: 200px;
  background: var(--surface-1);
  overflow: hidden;
  position: relative;
}
.znt-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.znt-blog-card:hover .znt-blog-card__media img { transform: scale(1.04); }

.znt-blog-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.znt-blog-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.znt-blog-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.znt-blog-card__title a { color: var(--text-primary); transition: color var(--dur-fast) var(--ease-standard); }
.znt-blog-card__title a:hover { color: var(--text-accent); }

.znt-blog-card__excerpt {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-base);
  flex: 1;
}

.znt-blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

/* Pagination */
.znt-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}
.znt-pagination ul {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.znt-pagination li { display: flex; }
.znt-pagination a,
.znt-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  transition: var(--t-colors);
}
.znt-pagination a:hover { background: var(--state-hover); color: var(--text-primary); border-color: var(--border-strong); }
.znt-pagination .current span,
.znt-pagination span.current {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
}

/* Responsive */
@media (max-width: 900px) {
  .znt-blog-featured { grid-template-columns: 1fr; }
  .znt-blog-featured__media { min-height: 260px; }
}
@media (max-width: 640px) {
  .znt-search-form { flex-direction: column; }
  .znt-search-form .znt-btn { width: 100%; }
}