/* Blog shared styles - applies to both list and single post views */

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  min-height: calc(100vh - 12rem);
}

/* Tags styling */
.tag,
.tag-small {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--accent);
  color: var(--darker);
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: lowercase;
  transition: background-color 0.2s ease;
}

.tag:hover,
.tag-small:hover {
  background: var(--dark-accent);
}

.tag-small {
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
}

/* Post meta information */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  color: var(--light-gray);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.post-date,
.post-preview-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dark);
}

.post-tags,
.post-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Navigation between posts */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--light);
  align-items: center;
}

.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-nav-prev {
  text-align: left;
}

.post-nav-next {
  text-align: right;
  grid-column: 3;
}

.post-nav-all {
  text-align: center;
  grid-column: 2;
}

.post-nav-label {
  font-size: 0.85rem;
  color: var(--light-gray);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.post-nav-title {
  color: var(--dark);
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.post-nav-title:hover {
  color: var(--dark-accent);
}

.post-nav-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--darker);
  text-decoration: none;
  border-radius: 25px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.post-nav-all-link:hover {
  background: var(--dark-accent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  main {
    padding: 2rem 1rem;
  }

  .post-navigation {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .post-nav-prev,
  .post-nav-next,
  .post-nav-all {
    text-align: center;
    grid-column: 1;
  }

  .post-nav-all {
    order: 3;
  }
}