/* ======================================= */
/* === STYLES FOR BLOG POSTS (blog.css) === */
/* ======================================= */

/* --- TITLE AND HEADING STYLES --- */
.page-content .container h1 {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.page-content .container h2 {
  color: #ffffff;
  font-size: 2rem;
  margin-top: 2.5rem;
}

/* === (NEW) DESKTOP HEADER GRID === */
/* This is the new flex container for the side-by-side layout */
.post-header-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem; /* Space between tags and summary */
  margin-bottom: 2.5rem;
}

/* --- POST METADATA BOXES (UPDATED) --- */
.post-meta-container {
  display: flex;
  flex-direction: column; /* Stack the tags vertically in their container */
  gap: 0.75rem;
  flex-basis: 30%; /* Assign a base width */
  flex-shrink: 0; /* Prevent this column from shrinking too much */
}

.meta-item {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #e0e0e0;
}

.meta-item i {
  margin-right: 0.5rem;
  color: #8c8c9a;
}

/* --- CALLOUT SUMMARY BOX (UPDATED) --- */
.callout-summary {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 1.5rem;
  border-radius: 8px;
  flex-basis: 70%; /* Assign remaining width */
  margin-bottom: 0; /* Margin is now handled by the parent grid */
}

.callout-summary p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #d1d1d6;
}

.callout-summary i {
  margin-right: 0.75rem;
  color: #ffffff;
}

/* === RESPONSIVENESS FOR HEADER === */
/* On screens smaller than 992px, stack them */
@media (max-width: 992px) {
  .post-header-grid {
    flex-direction: column; /* Change from row to column */
    gap: 1.5rem; /* Adjust gap for vertical stacking */
  }

  .post-meta-container {
    flex-direction: row; /* Let tags go side-by-side on smaller screens */
    flex-wrap: wrap;
  }
}

/* --- IMAGE STYLING --- */
.image-container {
  text-align: center;
  margin-bottom: 3rem;
}
/* ... [Image styling remains the same] ... */
.blog-image { max-width: 700px; width: 100%; height: auto; border-radius: 8px; border: 1px solid #333; }
.image-caption { display: block; margin-top: 0.75rem; color: #999; font-style: italic; font-size: 0.9rem; }

/* --- GENERAL SPACING --- */
.page-content .container p,
.page-content .container ul {
  margin-bottom: 1.5rem;
}

/* === NEWSLETTER SIGNUP FORM STYLES (UPDATED) === */
.newsletter-signup {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 2.5rem;
  margin-top: 4rem;
  text-align: center;
}

.newsletter-signup h3 {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  display: flex; /* Use flex to align icon and text */
  align-items: center;
  justify-content: center;
}

.newsletter-signup h3 i {
  margin-right: 0.75rem; /* Space between bell and text */
  color: #b0b0b8; /* A subtle color for the icon */
}
/* ... [Rest of newsletter styling remains the same] ... */
.newsletter-signup p { color: #b0b0b8; max-width: 500px; margin: 0 auto 1.5rem auto; }
.newsletter-form-container { display: flex; justify-content: center; max-width: 500px; margin: 0 auto; gap: 0.5rem; }
.newsletter-input { width: 100%; padding: 0.8rem 1rem; background-color: #2a2a2e; border: 1px solid #444; border-radius: 6px; color: #ffffff; font-size: 1rem; }
.newsletter-button { padding: 0.8rem 1.5rem; border: none; background-color: white; color: black; font-size: 1rem; font-weight: 500; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background-color 0.2s; }
.newsletter-button:hover { background-color: #e0e0e0; } /* Cleaner hover for white button */