@import url("../general.css");
/* CSS for views/blog/index.ejs */

.blog-section {
  position: relative;
  background-color: var(--page-bg);
  overflow: hidden;
}

.blog-container {
  position: relative;
  max-width: 80rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem; /* py-16 */
  padding-bottom: 4rem;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .blog-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .blog-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem;
  }
}

.blog-header {
  text-align: center;
}

.blog-category-label {
  font-size: 1rem; /* text-base */
  font-weight: 600; /* font-semibold */
  color: var(--color-purple-500); /* text-purple-600 */
  letter-spacing: 0.025em; /* tracking-wide */
  text-transform: uppercase;
}

/* Dark mode handled by variable or explicit override if semantic var missing */
/* Since purple-500 is a primitive, and used in dark mode too effectively (maybe lighter 400), 
   we can stick to it or map a variable. 
   Let's check general.css... I didn't add a 'blog-category-color'. 
   I will use the primitive for now, or --highlight-color?
   Original: text-purple-600 (light), text-purple-400 (dark).
   I'll use --color-purple-500 which is #a855f7 (closer to 500). 
   To strictly follow the pattern, I should probably use a variable, but for now 
   I will leave the color explicit if no variable fits, OR use highlight-color if appropriate.
   Highlight is indigo. Purple is distinct.
   I'll use a media query for the specific color shift if I don't want to pollute general.css
   OR I just use purple-500 for both if acceptable, or use var(--color-purple-500) and maybe a custom one for dark.
   Actually, general.css has primitives. 
   Let's just use the primitive variable `var(--color-purple-500)` and maybe generic `highlight` if user permits.
   But user wants strict JSON colors... 
   User JSON didn't specify purple. 
   I will map it to `var(--highlight-color)` to be safe and consistent with the "blue/indigo" theme, 
   OR keep it purple if it's a specific design choice. 
   The prompt said "update css ... follows to router one by one" and "make all color are css varibles".
   I will try to use `var(--highlight-color)` as it seems to be the "accent".
   Wait, blog categories are often distinct. 
   I'll map it to `--highlight-color` (Indigo/Blue) for consistency.
*/
.blog-category-label {
  color: var(--highlight-color);
}

.blog-main-title {
  margin-top: 0.25rem; /* mt-1 */
  font-size: 2.25rem; /* text-4xl */
  font-weight: 800; /* font-extrabold */
  color: var(--title-color);
}

@media (min-width: 640px) {
  .blog-main-title {
    font-size: 3rem; /* sm:text-5xl */
    letter-spacing: -0.025em; /* sm:tracking-tight */
  }
}

@media (min-width: 1024px) {
  .blog-main-title {
    font-size: 3.75rem; /* lg:text-6xl */
  }
}

.blog-description {
  max-width: 36rem; /* max-w-xl */
  margin-top: 1.25rem; /* mt-5 */
  margin-left: auto;
  margin-right: auto;
  font-size: 1.25rem; /* text-xl */
  color: var(--subtitle-color);
}

.blog-grid {
  margin-top: 3rem; /* mt-12 */
  display: grid;
  gap: 2.5rem; /* gap-10 */
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
    max-width: none; /* lg:max-w-none */
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background-color: var(--card-bg);
  transition: box-shadow 0.3s;
}

.blog-card:hover {
  box-shadow: var(--shadow-xl);
}

.blog-card-image-wrapper {
  flex-shrink: 0;
}

.blog-card-placeholder {
  height: 12rem; /* h-48 */
  width: 100%;
  background-color: var(
    --secondary-color
  ); /* Was purple-100 / gray-700. Using secondary common bg. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--highlight-color);
}

.blog-card-content {
  flex: 1;
  background-color: var(--card-bg); /* Explicitly set to card-bg */
  padding: 1.5rem; /* p-6 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-card-inner {
  flex: 1;
}

.blog-card-category {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: var(--highlight-color);
}

.blog-card-link-wrapper {
  display: block;
  margin-top: 0.5rem; /* mt-2 */
}

.blog-card-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: var(--title-color);
  text-decoration: none;
}

.blog-card-title:hover {
  text-decoration: underline;
}

.blog-card-excerpt {
  margin-top: 0.75rem; /* mt-3 */
  font-size: 1rem; /* text-base */
  color: var(--desc-color);
}

.blog-author-container {
  margin-top: 1.5rem; /* mt-6 */
  display: flex;
  align-items: center;
}

.blog-author-avatar-wrapper {
  flex-shrink: 0;
}

.blog-author-avatar {
  height: 2.5rem; /* h-10 */
  width: 2.5rem; /* w-10 */
  border-radius: 9999px; /* rounded-full */
  background-color: var(--secondary-color);
  padding: 0.25rem; /* p-1 */
  object-fit: cover;
}

.blog-author-info {
  margin-left: 0.75rem; /* ml-3 */
}

.blog-author-name {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: var(--title-color); /* Was gray-900 / white */
}

.blog-meta-info {
  display: flex;
  gap: 0.25rem; /* space-x-1 */
  font-size: 0.875rem; /* text-sm */
  color: var(--subtitle-color);
}