/* Layout Fixes for Tech Blog Homepage */

/* Ensure proper blog layout with sidebar */
.blog-layout {
  display: grid !important;
  grid-template-columns: 1fr minmax(340px, 380px) !important;
  gap: 3rem !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  align-items: start !important;
}

/* Main content area constraints */
.main-content-area {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Author sidebar styling */
.author-sidebar {
  position: sticky !important;
  top: 5rem !important;
  height: fit-content !important;
  display: block !important;
  width: 100% !important;
  max-width: 380px !important;
  z-index: 10 !important;
}

/* Author card visibility */
.author-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: var(--card-bg) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 20px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Posts grid optimization */
.blog-layout .posts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Post cards in constrained layout */
.blog-layout .post-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Content padding adjustment */
.content {
  padding: 4rem 0 2rem 0 !important;
  width: 100% !important;
}

/* Container constraints within blog layout */
.blog-layout .container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Author info styling */
.author-info {
  text-align: center !important;
  margin: 1rem 0 !important;
}

.author-name {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.25rem !important;
  color: var(--heading-color) !important;
}

.author-title {
  font-size: 0.95rem !important;
  color: var(--text-secondary) !important;
  margin-bottom: 0.25rem !important;
}

.author-company {
  font-size: 0.9rem !important;
  color: var(--text-tertiary) !important;
  margin-bottom: 0.75rem !important;
}

.author-bio {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--text-secondary) !important;
  margin-top: 1rem !important;
}

/* Author avatar */
.author-avatar {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

.avatar-img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid var(--border-color) !important;
  display: inline-block !important;
}

/* Author stats */
.author-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  margin: 1.5rem 0 !important;
  padding: 1rem 0 !important;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.stat-item {
  text-align: center !important;
}

.stat-number {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  display: block !important;
}

.stat-label {
  font-size: 0.75rem !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-top: 0.25rem !important;
}

/* Author social links */
.author-social {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
  margin-top: 1rem !important;
}

.social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  font-size: 0.85rem !important;
  color: var(--text-primary) !important;
}

.social-link:hover {
  background: var(--link-color) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.social-icon {
  margin-right: 0.25rem !important;
  font-size: 1rem !important;
}

.social-text {
  font-size: 0.85rem !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .blog-layout {
    grid-template-columns: 1fr minmax(320px, 360px) !important;
    gap: 2rem !important;
    padding: 1.5rem !important;
  }
}

@media (max-width: 900px) {
  .blog-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .author-sidebar {
    position: static !important;
    order: 2 !important;
    max-width: 100% !important;
    margin-top: 2rem !important;
  }
  
  .main-content-area {
    order: 1 !important;
  }
  
  .posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .blog-layout {
    padding: 1rem !important;
  }
  
  .posts-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .author-social {
    grid-template-columns: 1fr !important;
  }
  
  .author-card {
    padding: 1rem !important;
  }
}

/* Fix for hero section if present */
.hero-section {
  margin-bottom: 2rem !important;
}

/* Newsletter section adjustments */
.newsletter-section {
  margin-top: 3rem !important;
  padding: 3rem 0 !important;
}

.newsletter-card {
  max-width: 100% !important;
}

/* Pagination fix */
.pagination-nav {
  margin-top: 3rem !important;
  margin-bottom: 2rem !important;
}

/* Theme toggle button positioning */
.theme-toggle {
  z-index: 9999 !important;
}