/* app/static/css/layouts/blog.css */
/* Blog Layout - Structure and specific overrides */

/* --- Layout Structure --- */

/* Default mobile: Sidebar stacks below main content */
.layout-blog .layout__main {
  width: 100%;
}

.layout-blog .layout__sidebar {
  width: 100%;
  margin-top: var(--spacing-xl); /* Space above sidebar on mobile */
}

/* --- Component Overrides Specific to Blog Layout --- */

.layout-blog.page-home .card .card__image-container {
  display: none !important; /* Hide image container on blog home page */
}

.layout-blog .card {
  border: none;
  border-bottom: var(--border-width-default) solid var(--color-border);
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0 0 var(--spacing-md) 0;
  margin-bottom: var(--spacing-lg);
}
.layout-blog .card:hover {
  box-shadow: none;
}

/* Let card content use its default padding from components/card.css */
.layout-blog .card .card__content {
  padding: var(--spacing-sm) 0 0 0; /* Remove horizontal padding, adjust top */
  gap: var(--spacing-xs);
}

/* Ensure blog descriptions aren't artificially clamped (unless desired) */
.layout-blog .card .card__description {
  -webkit-line-clamp: unset;
  overflow: visible;
  display: block;
}

/* --- Related Articles Section --- */
/* Styling for this section might be better in article.css or a dedicated component */
.layout-blog .article__related-articles {
  /* Scope to layout if structure is layout-dependent */
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: var(--border-width-default) solid var(--color-border);
}

.layout-blog .article__related-articles h2 {
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-xl);
  font-family: var(--font-family-heading);
}

/* --- Pagination --- */
.layout-blog .pagination {
  /* Scope pagination if specific to this layout */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-xl);
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.layout-blog .pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem; /* Slightly larger touch target */
  height: 2.5rem;
  padding: 0 var(--spacing-xs);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--border-radius-md); /* Use standard radius */
  text-decoration: none;
  color: var(--color-text-primary);
  background-color: var(--color-surface-1);
  font-size: var(--font-size-sm);
  transition: all var(--transition-duration-default) ease;
}

.layout-blog
  .pagination__link:hover:not(
    .pagination__link--active,
    .pagination__link--disabled
  ) {
  border-color: var(--color-primary); /* Use primary color */
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.layout-blog .pagination__link--active {
  background-color: var(--color-primary);
  color: var(--color-white); /* Assuming primary contrasts with white */
  border-color: var(--color-primary);
  cursor: default;
}

.layout-blog .pagination__link--prev,
.layout-blog .pagination__link--next {
  padding: 0 var(--spacing-sm);
}

.layout-blog .pagination__link--disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
}

.layout-blog .pagination__ellipsis {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
}

/* --- Desktop Layout (Blog uses 2 columns + sidebar) --- */
@media (min-width: 768px) {
  /* Using 768px as the breakpoint */
  .layout-blog .layout {
    /* Target the main layout container */
    display: grid;
    /* Define layout-specific variable for sidebar width, or use fractions */
    /* --layout-blog-sidebar-width: 300px; */
    /* grid-template-columns: 1fr var(--layout-blog-sidebar-width); */
    grid-template-columns: 2fr 1fr; /* Main content 2 parts, sidebar 1 part */
    gap: var(--spacing-xl); /* Wider gap on desktop */
  }

  .layout-blog .layout__main {
    grid-column: 1;
    width: auto;
  }

  /* Ensure card grid within main area remains single column */
  .layout-blog .layout__main .card-grid {
    grid-template-columns: 1fr;
  }

  .layout-blog .layout__sidebar {
    grid-column: 2;
    margin-top: 0;
    width: auto;
  }

  /* Related articles grid becomes 2 columns on desktop */
  .layout-blog .article__related-articles .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md); /* Use standard gap */
  }
}