/* ===================================
   1. NEW STYLES - Main Blog Content
   =================================== */
.blog-main { background-color: #fafafa;}
.intro-paragraph, .insights-topics, .latest-insights { max-width: 1000px; margin: 40px auto; padding: 0 20px; font-size: 1rem; text-align: center; line-height: 1.6; }
.insights-topics ul {max-width: 1000px; margin: 40px auto; padding: 0 20px; font-size: 1rem;  text-align: left; line-height: 1.6;}

.blog-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; margin-bottom: 20px; }
.blog-card{ background-color: #e9e9e9;  border-radius: var(--border-radius); overflow: hidden; display: flex; flex-direction: column; margin: 0 20px; text-align: center;}
.blog-card:hover { transform: translateY(-8px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.blog-card-link:hover { all: unset; display: flex; flex-direction: column; height: 100%; cursor: pointer;}
.blog-card-image { margin: 2rem auto; }
.blog-card img { display: block; width: 90%; height: auto; border-radius: var(--border-radius); }
.blog-card-content { display: flex; flex-direction: column; flex-grow: 1; margin: 40px 20px; }
.blog-title { font-size: 1.5rem; color: var(--primary-color); line-height: 1.3; margin-bottom: 20px;}
.blog-excerpt { font-size: 1rem; color: var(--primary-color); margin: auto 0 auto 0; padding: 20px 0; }
.read-more { font-weight: 600; color: var(--accent-color); margin: auto; }
#blog-article { background-color: #ffffff; margin: 20px auto 40px auto; padding: 30px 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);  align-items: center; }
#blog-article h2 { font-size: 1.4rem; text-align: center; color: var(--primary-color); line-height: 1.3; margin-top: 30px; margin-bottom: 15px; border-bottom: 2px solid var(--secondary-color); padding-bottom: 8px; }
#blog-article p { font-size: 1rem; text-align: left; line-height: 1.7; color: var(--text-color); margin-bottom: 20px; }
#blog-article p strong { color: var(--primary-color); font-weight: 600; }
#blog-article a { color: var(--accent-color); text-decoration: underline; text-decoration-thickness: 1.5px; transition: color 0.3s ease; }
#blog-article a:hover { color: var(--secondary-color); }
#blog-article ul { list-style-type: disc; margin: 0 auto 20px; padding-left: 30px; text-align: left; font-weight: 500; }
#blog-article ol {  margin-left: 22px; }
#blog-article li { font-size: 1rem; line-height: 1.7; margin-bottom: 12px; text-align: left; }
.author-signature { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e0e0e0; text-align: right;}
.author-signature p { font-style: italic; font-size: 1rem; color: #555; margin-bottom: 0; }
.insights-cta { display: block; width: 90%; max-width: 320px; margin: 40px auto 0 auto; padding: 12px 20px; background-color: var(--secondary-color); color: var(--primary-color); border-radius: var(--cta-border-radius); font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: var(--transition); cursor: pointer; border: none; font-family: var(--font); text-align: center; line-height: 1.4; box-sizing: border-box; }
.insights-cta:hover { background-color: #c09c2c; color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
.insights-cta:active { transform: translateY (1px); transition: transform 0.1s ease; }

/* ==========================
   8. Responsive Breakpoints
   ========================== */
@media (min-width: 769px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; margin: 40px; gap: 20px; }
  .blog-card { display:flex; flex-direction:column; justify-content:space-between; text-align: center; margin: 0;}
  #blog-article { max-width: 900px; margin: 40px auto 60px auto; padding: 40px; border-radius: 10px; text-align: left; }
  #blog-article h1 { font-size: 2.2rem; }
  #blog-article h2 { font-size: 1.6rem; margin-top: 40px; }
  .author-signature p { font-size: 1.1rem; } }
@media (min-width: 1025px) {
   #blog-article { max-width: 900px; margin: 40px auto 60px auto; gap: 30px 20px; border-radius: 10px; text-align: left; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; gap: 30px; }
  .blog-card { display:flex; flex-direction:column; justify-content:space-between; }
  #blog-article ul { list-style-type: disc; margin: 0 auto 20px; max-width: 1200px;}
  .author-signature p { font-size: 1.2rem; } }