/* ============================================
   Living Lofi — Blog Styles
   ============================================ */

/* Blog listing grid */
.ll-blog-grid {
  padding: var(--ll-space-3xl) var(--ll-space-lg);
}

.ll-blog-grid__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ll-space-2xl);
  max-width: var(--ll-max-width);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .ll-blog-grid__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Blog cards */
.ll-blog-card {
  display: block;
  background: var(--ll-white);
  border-radius: var(--ll-border-radius-lg);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--ll-shadow-sm);
}

.ll-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ll-shadow-xl);
}

.ll-blog-card__image {
  overflow: hidden;
}

.ll-blog-card__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ll-lavender-mid);
  transition: transform 0.4s ease;
}

.ll-blog-card:hover .ll-blog-card__image img {
  transform: scale(1.05);
}

.ll-blog-card__body {
  padding: var(--ll-space-xl);
}

.ll-blog-card__date {
  display: block;
  font-size: var(--ll-font-size-xs);
  font-weight: 600;
  color: var(--ll-purple);
  letter-spacing: 0.05em;
  margin-bottom: var(--ll-space-sm);
}

.ll-blog-card__title {
  font-family: var(--ll-font-heading);
  font-size: var(--ll-font-size-lg);
  font-weight: 600;
  color: var(--ll-charcoal);
  margin-bottom: var(--ll-space-sm);
  line-height: 1.3;
  transition: color 0.2s;
}

.ll-blog-card:hover .ll-blog-card__title {
  color: var(--ll-purple);
}

.ll-blog-card__excerpt {
  font-size: var(--ll-font-size-sm);
  color: var(--ll-charcoal-light);
  line-height: var(--ll-line-height-relaxed);
  margin-bottom: var(--ll-space-md);
}

.ll-blog-card__read-more {
  font-size: var(--ll-font-size-sm);
  font-weight: 700;
  color: var(--ll-purple);
}

/* Page header overrides for blog */
.ll-page-header__inner {
  max-width: var(--ll-max-width-narrow);
  margin-inline: auto;
}

.ll-page-header__subtitle {
  font-size: var(--ll-font-size-sm);
  color: var(--ll-charcoal-light);
  margin-top: var(--ll-space-sm);
}

/* Back to blog link */
.ll-blog-back {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--ll-space-xl) var(--ll-space-lg) 0;
}

.ll-blog-back__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-sm);
  font-size: var(--ll-font-size-sm);
  font-weight: 600;
  color: var(--ll-purple);
  transition: color 0.2s;
}

.ll-blog-back__link:hover {
  color: var(--ll-purple-dark);
}

/* Blog post body */
.ll-blog-post {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--ll-space-2xl) var(--ll-space-lg) var(--ll-space-5xl);
}

.ll-blog-post__inner {
  font-size: var(--ll-font-size-md);
  line-height: var(--ll-line-height-relaxed);
  color: var(--ll-charcoal-light);
}

.ll-blog-post__inner h2 {
  font-size: var(--ll-font-size-xl);
  color: var(--ll-charcoal);
  margin-top: var(--ll-space-3xl);
  margin-bottom: var(--ll-space-md);
}

.ll-blog-post__inner h3 {
  font-size: var(--ll-font-size-lg);
  color: var(--ll-charcoal);
  margin-top: var(--ll-space-2xl);
  margin-bottom: var(--ll-space-sm);
}

.ll-blog-post__inner p {
  margin-bottom: var(--ll-space-lg);
}

.ll-blog-post__inner ul,
.ll-blog-post__inner ol {
  padding-left: var(--ll-space-xl);
  margin-bottom: var(--ll-space-lg);
  list-style: disc;
}

.ll-blog-post__inner li {
  margin-bottom: var(--ll-space-sm);
}

.ll-blog-post__inner a {
  color: var(--ll-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ll-blog-post__inner a:hover {
  color: var(--ll-purple-dark);
}

.ll-blog-post__inner blockquote {
  border-left: 4px solid var(--ll-purple-light);
  padding: var(--ll-space-md) var(--ll-space-xl);
  margin: var(--ll-space-xl) 0;
  background: var(--ll-lavender);
  border-radius: 0 var(--ll-border-radius-sm) var(--ll-border-radius-sm) 0;
  font-style: italic;
  color: var(--ll-charcoal);
}

/* CTA box at end of posts */
.ll-blog-cta {
  margin-top: var(--ll-space-3xl);
  padding: var(--ll-space-2xl);
  background: var(--ll-gradient-iridescent);
  background-size: 200% 200%;
  animation: ll-rainbow-shift 8s ease infinite;
  border-radius: var(--ll-border-radius-lg);
  text-align: center;
}

.ll-blog-cta h3 {
  font-family: var(--ll-font-heading);
  color: var(--ll-charcoal);
  margin-bottom: var(--ll-space-md);
}

.ll-blog-cta p {
  color: var(--ll-charcoal-light);
  margin-bottom: var(--ll-space-lg);
}