/* ==========================================================================
   MotoTransfer – Blog (archive + single)
   ========================================================================== */

/* ================================================================
   SHARED – breadcrumb
   ================================================================ */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-text-faint);
  margin-bottom: var(--space-8);
}
.breadcrumb__link {
  color: var(--color-text-muted); text-decoration: none;
  transition: color var(--transition-fast);
}
.breadcrumb__link:hover { color: var(--color-amber); }
.breadcrumb__sep { font-size: 0.6rem; opacity: 0.5; }
.breadcrumb__current { color: var(--color-text-faint); }

.breadcrumb--light .breadcrumb__link,
.breadcrumb--light .breadcrumb__current,
.breadcrumb--light { color: rgba(255,255,255,0.7); }
.breadcrumb--light .breadcrumb__link:hover { color: #fff; }

/* ================================================================
   ARCHIVE HERO
   ================================================================ */
.archive-hero {
  position: relative;
  background: var(--color-bg-alt);
  padding: calc(var(--space-20) + 4rem) 0 var(--space-16);
  overflow: hidden;
}
.archive-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--color-border-subtle) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  opacity: 0.5;
}
.archive-hero__inner {
  position: relative; z-index: 1;
}
.archive-hero__content { max-width: 600px; }
.archive-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.archive-hero__title .text-amber { color: var(--color-amber); }
.archive-hero__desc {
  font-size: var(--fs-md); color: var(--color-text-muted);
  line-height: var(--lh-loose); max-width: 48ch;
}
.archive-hero__deco {
  position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
  font-size: clamp(8rem, 18vw, 14rem);
  color: var(--color-amber); opacity: 0.04;
  pointer-events: none; line-height: 1;
}

/* ================================================================
   ARCHIVE LAYOUT (grid + sidebar)
   ================================================================ */
.archive-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-block: var(--space-16);
}
@media (min-width: 1024px) {
  .archive-layout { grid-template-columns: 1fr 300px; }
}

/* ================================================================
   BLOG GRID
   ================================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  /* First card (featured) spans full width */
  .blog-card--featured { grid-column: 1 / -1; }
}

/* ================================================================
   BLOG CARD
   ================================================================ */
.blog-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  list-style: none;
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Featured layout */
.blog-card--featured {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .blog-card--featured { grid-template-columns: 1fr 1fr; }
}

.blog-card__img-wrap {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-bg-subtle);
  flex-shrink: 0;
}
.blog-card--featured .blog-card__img-wrap {
  aspect-ratio: auto;
  min-height: 280px;
  height: 100%;
}
.blog-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.blog-card:hover .blog-card__img { transform: scale(1.05); }

.blog-card__img-wrap--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-subtle);
  color: var(--color-amber); font-size: 3rem; opacity: 0.3;
}

.blog-card__body {
  padding: var(--space-6);
  display: flex; flex-direction: column; flex: 1;
}
.blog-card--featured .blog-card__body { padding: var(--space-8) var(--space-8); }

.blog-card__meta {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.blog-card__cat {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--color-amber);
  background: var(--color-amber-pale);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
}
.blog-card__read-time {
  font-size: var(--fs-xs); color: var(--color-text-faint);
  display: flex; align-items: center; gap: var(--space-1);
}

.blog-card__title {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--color-text); line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--space-3);
}
.blog-card--featured .blog-card__title { font-size: var(--fs-3xl); }
.blog-card__title-link {
  color: inherit; text-decoration: none;
  transition: color var(--transition-fast);
}
.blog-card__title-link:hover { color: var(--color-amber); }

.blog-card__excerpt {
  font-size: var(--fs-sm); color: var(--color-text-muted);
  line-height: var(--lh-loose); flex: 1;
  margin-bottom: var(--space-6);
}

.blog-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: auto;
}
.blog-card__author {
  display: flex; align-items: center; gap: var(--space-2);
}
.blog-card__avatar {
  width: 28px !important; height: 28px !important;
  border-radius: var(--radius-pill); object-fit: cover;
}
.blog-card__author-name {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--color-text); white-space: nowrap;
}
.blog-card__date {
  font-size: var(--fs-xs); color: var(--color-text-faint);
  margin-left: var(--space-2);
}
.blog-card__link {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--color-amber); text-decoration: none;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  display: flex; align-items: center; gap: var(--space-2);
  white-space: nowrap;
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.blog-card__link:hover { gap: var(--space-3); color: var(--color-amber-dark); }

/* ================================================================
   PAGINATION
   ================================================================ */
.archive-pagination { margin-top: var(--space-12); }
.archive-pagination .page-numbers {
  display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0;
}
.archive-pagination .page-numbers li {}
.archive-pagination .page-numbers a,
.archive-pagination .page-numbers span {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-card);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.archive-pagination .page-numbers a:hover {
  border-color: var(--color-amber);
  color: var(--color-amber);
}
.archive-pagination .page-numbers .current {
  background: var(--color-amber);
  color: #fff;
  border-color: var(--color-amber);
}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.archive-empty {
  text-align: center;
  padding: var(--space-24) var(--space-8);
}
.archive-empty__icon {
  font-size: 4rem; color: var(--color-amber); opacity: 0.25;
  display: block; margin-bottom: var(--space-6);
}
.archive-empty__title {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--color-text); margin-bottom: var(--space-3);
}
.archive-empty__text {
  color: var(--color-text-muted); margin-bottom: var(--space-8);
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.archive-sidebar,
.single-sidebar {
  display: flex; flex-direction: column; gap: var(--space-6);
}

.sidebar-widget {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.sidebar-widget__title {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Search */
.sidebar-search {
  display: flex; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.sidebar-search:focus-within { border-color: var(--color-amber); }
.sidebar-search__input {
  flex: 1; padding: var(--space-3) var(--space-4);
  border: none; outline: none;
  font-family: var(--font-body); font-size: var(--fs-sm);
  background: transparent; color: var(--color-text);
}
.sidebar-search__btn {
  padding: var(--space-3) var(--space-4);
  background: var(--color-amber); color: #fff;
  border: none; cursor: pointer;
  font-size: var(--fs-sm);
  transition: background var(--transition-fast);
}
.sidebar-search__btn:hover { background: var(--color-amber-light); }

/* Categories */
.sidebar-cats { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-cats__link {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none; font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-cats__link:hover,
.sidebar-cats__link.is-active {
  background: var(--color-amber-pale);
  color: var(--color-amber-dark);
}
.sidebar-cats__count {
  font-size: var(--fs-xs); color: var(--color-text-faint);
  background: var(--color-bg-subtle);
  padding: 1px 6px; border-radius: var(--radius-pill);
}

/* Recent posts */
.sidebar-recent {
  display: flex; gap: var(--space-3); align-items: flex-start;
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  transition: opacity var(--transition-fast);
}
.sidebar-recent:last-child { border-bottom: none; }
.sidebar-recent:hover { opacity: 0.75; }
.sidebar-recent__img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--radius-md); flex-shrink: 0;
}
.sidebar-recent__img--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-subtle);
  color: var(--color-amber); font-size: 1.2rem; opacity: 0.4;
  width: 56px; height: 56px; border-radius: var(--radius-md);
}
.sidebar-recent__text { display: flex; flex-direction: column; gap: 4px; }
.sidebar-recent__title {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-text); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-recent__date { font-size: var(--fs-xs); color: var(--color-text-faint); }

/* Tags */
.sidebar-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sidebar-tag {
  font-size: var(--fs-xs); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted); text-decoration: none;
  border: 1px solid var(--color-border-subtle);
  transition: all var(--transition-fast);
}
.sidebar-tag:hover, .sidebar-tag.is-active {
  background: var(--color-amber-pale);
  border-color: var(--color-amber);
  color: var(--color-amber-dark);
}

/* CTA widget */
.sidebar-cta {
  background: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.sidebar-cta__icon {
  font-size: 2rem; color: var(--color-amber);
  display: block; margin-bottom: var(--space-4);
}
.sidebar-cta__title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: #fff; margin-bottom: var(--space-3);
}
.sidebar-cta__text {
  font-size: var(--fs-sm); color: rgba(255,255,255,0.6);
  line-height: var(--lh-loose); margin-bottom: var(--space-6);
}

/* ================================================================
   POST HERO
   ================================================================ */
.post-hero {
  position: relative;
  padding: calc(var(--space-20) + 4rem) 0 var(--space-16);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.post-hero--has-image {
  min-height: 70vh;
  display: flex; align-items: flex-end;
}
.post-hero__bg {
  position: absolute; inset: 0;
}
.post-hero__img {
  width: 100%; height: 100%; object-fit: cover;
}
.post-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,7,5,0.85) 0%, rgba(10,7,5,0.40) 55%, rgba(10,7,5,0.10) 100%),
    linear-gradient(to right, rgba(10,7,5,0.30) 0%, transparent 60%);
}
.post-hero__inner {
  position: relative; z-index: 1;
}
.post-hero__content { max-width: 760px; }
.post-hero__cat {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--color-amber);
  background: rgba(168,93,26,0.18);
  border: 1px solid rgba(168,93,26,0.35);
  padding: 3px var(--space-3); border-radius: var(--radius-pill);
  text-decoration: none;
  margin-bottom: var(--space-4);
  transition: background var(--transition-fast);
}
.post-hero:not(.post-hero--has-image) .post-hero__cat {
  background: var(--color-amber-pale); border-color: var(--color-amber);
}
.post-hero__cat:hover { background: rgba(168,93,26,0.28); }
.post-hero__title {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: #fff;
  margin-bottom: var(--space-6);
}
.post-hero:not(.post-hero--has-image) .post-hero__title { color: var(--color-text); }

.post-hero__meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-4);
}
.post-hero__author { display: flex; align-items: center; gap: var(--space-3); }
.post-hero__avatar {
  width: 36px !important; height: 36px !important;
  border-radius: var(--radius-pill); object-fit: cover;
  border: 2px solid rgba(255,255,255,0.3);
}
.post-hero:not(.post-hero--has-image) .post-hero__avatar { border-color: var(--color-border); }
.post-hero__author-info { display: flex; flex-direction: column; gap: 2px; }
.post-hero__author-name {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: #fff;
}
.post-hero:not(.post-hero--has-image) .post-hero__author-name { color: var(--color-text); }
.post-hero__date {
  font-size: var(--fs-xs); color: rgba(255,255,255,0.6);
}
.post-hero:not(.post-hero--has-image) .post-hero__date { color: var(--color-text-faint); }
.post-hero__stats { display: flex; gap: var(--space-4); }
.post-hero__stat {
  font-size: var(--fs-xs); color: rgba(255,255,255,0.65);
  display: flex; align-items: center; gap: var(--space-2);
}
.post-hero:not(.post-hero--has-image) .post-hero__stat { color: var(--color-text-faint); }

/* ================================================================
   SINGLE LAYOUT
   ================================================================ */
.single-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-block: var(--space-16);
  align-items: start;
}
@media (min-width: 1024px) {
  .single-layout { grid-template-columns: 1fr 280px; }
}

/* ================================================================
   POST ARTICLE CONTENT
   ================================================================ */
.post-article {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.post-content {
  padding: var(--space-10) var(--space-8);
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: var(--lh-loose);
  max-width: 72ch;
}
.post-content h2 {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  color: var(--color-text); line-height: var(--lh-snug);
  margin: var(--space-10) 0 var(--space-4);
}
.post-content h3 {
  font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  color: var(--color-text); margin: var(--space-8) 0 var(--space-3);
}
.post-content p { margin-bottom: var(--space-5); }
.post-content a { color: var(--color-amber); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--color-amber-dark); }
.post-content ul, .post-content ol {
  padding-left: var(--space-6); margin-bottom: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.post-content li::marker { color: var(--color-amber); }
.post-content img {
  width: 100%; border-radius: var(--radius-md);
  margin: var(--space-6) 0;
}
.post-content blockquote {
  border-left: 3px solid var(--color-amber);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  background: var(--color-amber-pale);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text-muted);
}
.post-content blockquote p { margin-bottom: 0; }
.post-content pre {
  background: var(--color-text); color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-6); overflow-x: auto;
  font-size: var(--fs-sm); margin: var(--space-6) 0;
}
.post-content hr {
  border: none; border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-10) 0;
}

/* Tags */
.post-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
}
.post-tags__label {
  font-size: var(--fs-xs); color: var(--color-text-faint);
  display: flex; align-items: center; gap: var(--space-2);
  margin-right: var(--space-2);
}
.post-tag {
  font-size: var(--fs-xs); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted); text-decoration: none;
  border: 1px solid var(--color-border-subtle);
  transition: all var(--transition-fast);
}
.post-tag:hover { background: var(--color-amber-pale); border-color: var(--color-amber); color: var(--color-amber-dark); }

/* Author box */
.post-author-box {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border-subtle);
}
.post-author-box__avatar {
  width: 72px !important; height: 72px !important;
  border-radius: var(--radius-pill); object-fit: cover;
  flex-shrink: 0;
}
.post-author-box__label {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--ls-wider); color: var(--color-text-faint);
  display: block; margin-bottom: 2px;
}
.post-author-box__name {
  font-size: var(--fs-md); color: var(--color-text);
  display: block; margin-bottom: var(--space-2);
}
.post-author-box__bio {
  font-size: var(--fs-sm); color: var(--color-text-muted);
  line-height: var(--lh-loose); margin: 0;
}

/* Post nav */
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border-subtle);
}
.post-nav__item {
  padding: var(--space-6) var(--space-8);
  text-decoration: none;
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: background var(--transition-fast);
}
.post-nav__item:hover { background: var(--color-bg-warm); }
.post-nav__item--next { text-align: right; border-left: 1px solid var(--color-border-subtle); }
.post-nav__dir {
  font-size: var(--fs-xs); color: var(--color-amber);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  display: flex; align-items: center; gap: var(--space-2);
}
.post-nav__item--next .post-nav__dir { justify-content: flex-end; }
.post-nav__title {
  font-size: var(--fs-sm); color: var(--color-text-muted);
  line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Comments */
.post-comments {
  margin-top: var(--space-8);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}
.post-comments .comment-form input,
.post-comments .comment-form textarea {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}
.post-comments .comment-form input:focus,
.post-comments .comment-form textarea:focus {
  outline: none; border-color: var(--color-amber);
}
.post-comments .submit {
  background: var(--color-amber); color: #fff;
  border: none; border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.post-comments .submit:hover { background: var(--color-amber-light); }

/* ================================================================
   TOC (Table of Contents)
   ================================================================ */
.sidebar-toc { position: sticky; top: calc(var(--space-20) + var(--space-4)); }
.toc-nav { display: flex; flex-direction: column; gap: 2px; }
.toc-nav a {
  font-size: var(--fs-xs); color: var(--color-text-muted);
  text-decoration: none; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
  line-height: var(--lh-snug);
}
.toc-nav a:hover { color: var(--color-amber); background: var(--color-amber-pale); border-left-color: var(--color-amber); }
.toc-nav a.is-active { color: var(--color-amber); border-left-color: var(--color-amber); }
.toc-nav .toc-h3 { padding-left: var(--space-6); }
.sidebar-toc.is-empty { display: none; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 767px) {
  .post-content { padding: var(--space-6) var(--space-5); }
  .post-author-box { flex-direction: column; padding: var(--space-5); }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__item--next { border-left: none; border-top: 1px solid var(--color-border-subtle); text-align: left; }
  .post-nav__item--next .post-nav__dir { justify-content: flex-start; }
  .post-tags, .post-nav__item { padding: var(--space-5); }
  .blog-card--featured { grid-template-columns: 1fr; }
  .blog-card--featured .blog-card__img-wrap { min-height: 220px; }
}