/*
 * BLOG — Featured Journal (Tracey Beard Photographer)
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Archive Header ────────────────────────────────────── */
.featured-archive__header {
  text-align:     center;
  padding-bottom: var(--ls-space-12);
  margin-bottom:  var(--ls-space-12);
  border-bottom:  var(--ls-border-width) solid var(--ls-color-border);
}

.featured-archive__title {
  font-family:    var(--ls-font-heading);
  font-size:      clamp(var(--ls-text-2xl), 4vw, var(--ls-text-4xl));
  font-weight:    var(--ls-font-weight-light);
  letter-spacing: var(--ls-tracking-wide);
  margin:         var(--ls-space-2) 0 0;
  color:          var(--ls-color-text);
}

.featured-archive__desc {
  margin-top: var(--ls-space-4);
  color:      var(--ls-color-text-muted);
  font-size:  var(--ls-text-base);
}

/* ── Post Grid ─────────────────────────────────────────── */
.post-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--ls-space-10) var(--ls-space-8);
}

/* ── Post Card ─────────────────────────────────────────── */
.post-card {
  display: flex;
}

.post-card__link {
  display:         flex;
  flex-direction:  column;
  width:           100%;
  text-decoration: none;
  color:           inherit;
}

/* Image */
.post-card__image {
  position:      relative;
  overflow:      hidden;
  aspect-ratio:  3 / 4;
  border-radius: var(--ls-radius-sm);
  background:    var(--ls-color-neutral-100);
  margin-bottom: var(--ls-space-5);
}

.post-card__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.6s ease;
}

.post-card__link:hover .post-card__image img {
  transform: scale(1.04);
}

.post-card__placeholder {
  width:      100%;
  height:     100%;
  background: linear-gradient(135deg, var(--ls-color-neutral-100) 0%, var(--ls-color-neutral-200) 100%);
}

/* Body */
.post-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--ls-space-2);
  flex:           1;
}

.post-card__category {
  font-size:      var(--ls-text-xs);
  font-weight:    var(--ls-font-weight-medium);
  letter-spacing: var(--ls-tracking-widest);
  text-transform: uppercase;
  color:          var(--ls-color-primary-500);
  margin:         0;
}

.post-card__category a {
  color:           inherit;
  text-decoration: none;
}

.post-card__title {
  font-family:  var(--ls-font-heading);
  font-size:    clamp(var(--ls-text-lg), 1.8vw, var(--ls-text-xl));
  font-weight:  var(--ls-font-weight-light);
  line-height:  var(--ls-leading-snug);
  color:        var(--ls-color-text);
  margin:       var(--ls-space-1) 0 0;
  transition:   color var(--ls-transition-fast);
}

.post-card__link:hover .post-card__title {
  color: var(--ls-color-primary-600);
}

.post-card__cta {
  display:        inline-block;
  margin-top:     var(--ls-space-4);
  font-size:      var(--ls-text-xs);
  font-weight:    var(--ls-font-weight-medium);
  letter-spacing: var(--ls-tracking-widest);
  text-transform: uppercase;
  color:          var(--ls-color-primary-500);
  border-bottom:  1px solid var(--ls-color-primary-300);
  padding-bottom: 2px;
  transition:     color var(--ls-transition-fast), border-color var(--ls-transition-fast);
}

.post-card__link:hover .post-card__cta {
  color:        var(--ls-color-primary-700);
  border-color: var(--ls-color-primary-500);
}

/* ── Pagination ────────────────────────────────────────── */
.ls-pagination {
  display:         flex;
  justify-content: center;
  margin-top:      var(--ls-space-16);
}

.ls-pagination .nav-links {
  display:     flex;
  align-items: center;
  gap:         var(--ls-space-2);
}

.ls-pagination a,
.ls-pagination span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border:          var(--ls-border-width) solid var(--ls-color-border);
  border-radius:   var(--ls-radius-full);
  font-size:       var(--ls-text-sm);
  color:           var(--ls-color-text-muted);
  text-decoration: none;
  transition:      border-color var(--ls-transition-fast), color var(--ls-transition-fast);
}

.ls-pagination a:hover {
  border-color: var(--ls-color-primary-500);
  color:        var(--ls-color-primary-500);
}

.ls-pagination .current {
  background:   var(--ls-color-primary-500);
  border-color: var(--ls-color-primary-500);
  color:        white;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   SINGLE POST
   ══════════════════════════════════════════════════════════ */

.post-header {
  padding:    var(--ls-space-12) 0 var(--ls-space-8);
  text-align: center;
  max-width:  800px;
  margin:     0 auto;
}

.post-title {
  font-family:  var(--ls-font-heading);
  font-size:    clamp(var(--ls-text-2xl), 5vw, var(--ls-text-4xl));
  font-weight:  var(--ls-font-weight-light);
  line-height:  var(--ls-leading-tight);
  margin:       var(--ls-space-4) 0;
}

.post-meta {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         var(--ls-space-3);
  font-size:   var(--ls-text-sm);
  color:       var(--ls-color-text-muted);
  flex-wrap:   wrap;
}

.post-meta a { color: var(--ls-color-primary-500); text-decoration: none; }
.post-meta__sep { color: var(--ls-color-neutral-300); }

.post-featured-image {
  margin:        var(--ls-space-8) 0;
  border-radius: var(--ls-radius-sm);
  overflow:      hidden;
  aspect-ratio:  16 / 7;
}

.post-featured-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Entry Content */
.entry-content {
  max-width:   680px;
  margin:      0 auto;
  font-size:   var(--ls-text-base);
  line-height: var(--ls-leading-relaxed);
  color:       var(--ls-color-text);
}

.entry-content > * + * { margin-top: var(--ls-space-5); }

.entry-content h2 {
  font-family: var(--ls-font-heading);
  font-size:   clamp(var(--ls-text-xl), 3vw, var(--ls-text-2xl));
  font-weight: var(--ls-font-weight-light);
  margin-top:  var(--ls-space-10);
}

.entry-content h3 {
  font-family: var(--ls-font-heading);
  font-size:   var(--ls-text-xl);
  font-weight: var(--ls-font-weight-light);
  margin-top:  var(--ls-space-8);
}

.entry-content a {
  color:              var(--ls-color-primary-600);
  text-decoration:    underline;
  text-underline-offset: 3px;
}

.entry-content blockquote {
  border-left: 3px solid var(--ls-color-primary-300);
  padding:     var(--ls-space-4) var(--ls-space-6);
  margin:      var(--ls-space-8) 0;
  font-family: var(--ls-font-heading);
  font-size:   var(--ls-text-xl);
  font-weight: var(--ls-font-weight-light);
  font-style:  italic;
  color:       var(--ls-color-text-muted);
}

.entry-content img {
  border-radius: var(--ls-radius-sm);
  max-width:     100%;
  height:        auto;
}

/* Post Nav */
.post-navigation {
  display:             grid;
  grid-template-columns: 1fr 1fr;
  gap:                 var(--ls-space-6);
  margin-top:          var(--ls-space-16);
  padding-top:         var(--ls-space-8);
  border-top:          var(--ls-border-width) solid var(--ls-color-border);
}

.post-navigation a {
  display:         flex;
  flex-direction:  column;
  gap:             var(--ls-space-1);
  text-decoration: none;
  color:           var(--ls-color-text);
  padding:         var(--ls-space-5);
  border:          var(--ls-border-width) solid var(--ls-color-border);
  border-radius:   var(--ls-radius-md);
  transition:      border-color var(--ls-transition-base);
}

.post-navigation a:hover { border-color: var(--ls-color-primary-400); }

.post-navigation .nav-label {
  font-size:      var(--ls-text-xs);
  letter-spacing: var(--ls-tracking-widest);
  text-transform: uppercase;
  color:          var(--ls-color-text-muted);
}

.post-navigation .nav-title {
  font-family: var(--ls-font-heading);
  font-size:   var(--ls-text-lg);
  font-weight: var(--ls-font-weight-light);
}

.post-navigation .nav-next { text-align: right; }

@media (max-width: 768px) {
  .post-navigation { grid-template-columns: 1fr; }
  .post-title { font-size: var(--ls-text-2xl); }
}