/* Blog Specific Styles */

/* Blog Grid (Listing Page) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 20px;
}

.blog-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-color);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
}

.blog-thumbnail-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #e2e8f0;
  position: relative;
}

.blog-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-thumbnail {
  transform: scale(1.05);
}

.blog-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-title {
  font-size: 1.25em;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--text-color);
  font-family: "Inter", "Segoe UI", sans-serif;
}

.blog-excerpt {
  font-size: 0.95em;
  color: var(--text-light);
  margin-bottom: 15px;
  line-height: 1.6;
  flex: 1;
}

.blog-meta {
  font-size: 0.85em;
  color: var(--text-light);
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}

.read-more-link {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Single Blog Post Page */
/* Blog Post Container - Full Width */
.blog-post-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

/* Post Header Styles */
.post-header {
    text-align: center;
    margin-bottom: 2rem;
}

.post-title {
    color: var(--primary-color);
    font-size: 1.7em; /* Match Validator/Generator size */
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1.3;
}

.post-meta-top {
  display: none; /* Hide date/category as requested */
}

.post-featured-image {
    width: 70%;
    /* Keep width constrained for readability if desired, but user asked for full width blog, so likely full width image 
       Actually, user said "width of Blog should be full", but image might not need to be 100% of screen. 
       Let's stick to full width container but max-width image or container? 
       No, user said "width of the Blog should be full". */
    max-width: 100%; 
    height: auto;
    border-radius: var(--radius);
    margin: 0 auto 2rem;
    display: block;
    box-shadow: var(--shadow);
}

.post-content {
  font-size: 1.1em;
  line-height: 1.8;
  color: var(--text-color);
}

/* Content Typography to match Home Page (.content-box styles) */
.post-content h2 {
    color: var(--primary-color);
    margin: 20px 0 10px 0;
    font-size: 1.3em;
    font-weight: 600;
    font-family: "Inter", "Segoe UI", sans-serif;
    border-bottom: none;
    padding-bottom: 0;
}

.post-content h3 {
    color: var(--text-color);
    margin: 15px 0 6px 0;
    font-size: 1.1em;
    font-weight: 600;
    font-family: "Inter", "Segoe UI", sans-serif;
}

.post-content p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
    color: var(--text-color);
}

.post-content ul, .post-content ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
    color: var(--text-color);
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content a {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 500;
}

.post-content a:hover {
  color: var(--primary-dark);
}

.share-buttons {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 10px;
  align-items: center;
}

.share-label {
  font-weight: 600;
  margin-right: 10px;
}

.share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s;
}

.share-btn:hover {
  transform: translateY(-2px);
}

.share-twitter {
  background: #1da1f2;
}
.share-facebook {
  background: #1877f2;
}
.share-linkedin {
  background: #0077b5;
}
.share-whatsapp {
  background: #25d366;
}
.share-reddit {
    background: #ff4500;
}
.share-telegram {
    background: #0088cc;
}
.share-email {
    background: #777;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .blog-post-container {
    padding: 20px;
  }

  .post-title {
    font-size: 1.8em;
  }
}