/* Blogs Section Styles */
.blogs-section {
  background-color: var(--bg-primary);
  padding-top: 120px;
  padding-bottom: var(--space-20);
}

/* View Toggle */
.blogs-view-toggle {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1000; /* Ensure buttons are above other content */
}

.view-btn {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
  -webkit-align-items: center; /* Safari */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  pointer-events: auto; /* Ensure button is always clickable */
  touch-action: manipulation; /* Optimize for mobile touch */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); /* Mobile tap feedback */
  -webkit-transition: all var(--transition-base);
  transition: all var(--transition-base);
}

.view-btn:hover,
.view-btn.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* RSS Loading State */
.rss-loading {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  min-height: 400px;
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  -webkit-justify-content: center; /* Safari justify-content prefix */
  justify-content: center;
}

.loading-spinner {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-direction: column; /* Safari flex-direction prefix */
  flex-direction: column;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-4);
}

.loading-spinner .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite; /* Safari animation prefix */
  animation: spin 1s linear infinite;
}

.loading-spinner p {
  color: var(--text-secondary);
  font-size: var(--text-base);
}

@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.rss-error {
  text-align: center;
  padding: var(--space-8);
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-direction: column; /* Safari flex-direction prefix */
  flex-direction: column;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-4);
}

.blogs-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Timeline Styles */
.blogs-timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) 0;
}

/* List View */
.blogs-table-wrapper { margin-top: var(--space-6); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blogs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  table-layout: fixed;
  min-width: 760px;
}
.blogs-table th,
.blogs-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.blogs-table .col-title { width: 28%; }
.blogs-table .col-desc { width: 40%; }
.blogs-table .col-key { width: 18%; }
.blogs-table .col-date { width: 14%; }
.tbl-pub { color: var(--text-secondary); font-size: var(--text-xs); margin-top: 4px; }
.blogs-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 1;
  font-weight: var(--font-semibold);
}
.blogs-table tbody tr:nth-child(odd) { background: var(--bg-secondary); }
.blogs-table tbody tr:nth-child(even) { background: var(--bg-tertiary); }
.blogs-table a { color: var(--primary-color); text-decoration: none; }
.blogs-table a:hover { text-decoration: underline; color: var(--accent-color); }
.blogs-table .tag-pill { display:inline-block; padding:2px 8px; border:1px solid var(--border-color); border-radius:999px; font-size: var(--text-xs); margin-right:6px; background: var(--bg-primary); }
.hide-sm { display: table-cell; }

/* Vertical Timeline Line */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
  -webkit-transform: translateX(-50%); /* Safari transform prefix */
  transform: translateX(-50%);
  z-index: 1;
}

/* Timeline Item */
.timeline-item {
  position: relative;
  margin-bottom: var(--space-12);
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  z-index: 2;
}

.timeline-item-left {
  -webkit-flex-direction: row; /* Safari flex-direction prefix */
  flex-direction: row;
}

.timeline-item-right {
  -webkit-flex-direction: row-reverse; /* Safari flex-direction prefix */
  flex-direction: row-reverse;
}

/* Timeline Marker (Circle on the line) */
.timeline-marker {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  background: var(--accent-color);
  border: 4px solid var(--bg-primary);
  border-radius: 50%;
  -webkit-transform: translateX(-50%); /* Safari transform prefix */
  transform: translateX(-50%);
  z-index: 3;
  box-shadow: 0 0 0 4px var(--primary-color), var(--shadow-md);
  -webkit-transition: all var(--transition-base); /* Safari transition prefix */
  transition: all var(--transition-base);
}

.timeline-item:hover .timeline-marker {
  -webkit-transform: translateX(-50%) scale(1.2); /* Safari transform prefix */
  transform: translateX(-50%) scale(1.2);
  box-shadow: 0 0 0 4px var(--primary-color), var(--shadow-lg);
}

/* Timeline Content */
.timeline-content {
  width: calc(50% - var(--space-8));
  padding: 0 var(--space-4);
}

.timeline-item-left .timeline-content {
  text-align: right;
  margin-right: auto;
}

.timeline-item-right .timeline-content {
  text-align: left;
  margin-left: auto;
}

/* Blog Card */
.blog-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  -webkit-transition: all var(--transition-base); /* Safari transition prefix */
  transition: all var(--transition-base);
  position: relative;
}

.blog-card:hover {
  -webkit-transform: translateY(-4px); /* Safari transform prefix */
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
}

.blog-header {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-justify-content: space-between; /* Safari justify-content prefix */
  justify-content: space-between;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.blog-date {
  font-weight: var(--font-medium);
  color: var(--primary-color);
}

.blog-read-time {
  opacity: 0.8;
}

.blog-title {
  font-size: calc(var(--text-xl) * 1.1);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
}

.blog-publication-badge {
  display: -webkit-inline-flex; /* Safari inline-flex prefix */
  display: inline-flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
}

.blog-publication-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.blog-excerpt {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.blog-tags {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari flex-wrap prefix */
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.blog-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  -webkit-transition: all var(--transition-base); /* Safari transition prefix */
  transition: all var(--transition-base);
}

.blog-tag:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.blog-links {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  gap: var(--space-4);
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  -webkit-flex-wrap: wrap; /* Safari flex-wrap prefix */
  flex-wrap: wrap;
}

.blog-read-btn {
  display: -webkit-inline-flex; /* Safari inline-flex prefix */
  display: inline-flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
}

.blog-external-link {
  display: -webkit-inline-flex; /* Safari inline-flex prefix */
  display: inline-flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  -webkit-transition: color var(--transition-base); /* Safari transition prefix */
  transition: color var(--transition-base);
}

.blog-external-link:hover {
  color: var(--primary-color);
}

/* Article Highlights */
.article-highlights {
  display: -webkit-grid; /* Safari grid prefix */
  display: grid;
  -webkit-grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Safari grid-template-columns prefix */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-base);
}

.highlight-section {
  padding: var(--space-4);
  background: var(--bg-primary);
  border-radius: var(--radius-base);
  border: 1px solid var(--border-color);
  -webkit-transition: all var(--transition-base); /* Safari transition prefix */
  transition: all var(--transition-base);
}

.highlight-section:hover {
  border-color: var(--primary-color);
  -webkit-transform: translateY(-2px); /* Safari transform prefix */
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.highlight-section h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--primary-color);
  margin-bottom: var(--space-3);
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-2);
}

.highlight-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.highlight-section li {
  padding: var(--space-2) 0;
  padding-left: var(--space-4);
  position: relative;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.highlight-section li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: bold;
}

/* Responsive Design - Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .timeline-content {
    width: calc(50% - var(--space-6));
    padding: 0 var(--space-3);
  }
  
  .blog-card {
    padding: var(--space-5);
  }
}

/* Responsive Design - Mobile */
@media (max-width: 768px) {
  .blogs-view-toggle {
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
  }
  .hide-sm { display: none; }
  .blogs-table .col-title { width: 40%; }
  .blogs-table .col-desc { width: 48%; font-size: 0.9em; }
  .blogs-table .col-key { display: none; }
  .blogs-table .col-date { width: 20%; min-width: 140px; white-space: nowrap; font-size: 1.1em; text-align: left; }
  .table-responsive { padding-bottom: var(--space-2); }
  .blogs-table { min-width: 760px; }
  .timeline-line {
    left: var(--space-6);
  }
  
  .timeline-item {
    -webkit-flex-direction: row !important; /* Safari flex-direction prefix */
    flex-direction: row !important;
    padding-left: var(--space-12);
  }
  
  .timeline-marker {
    left: var(--space-6);
    -webkit-transform: translateX(-50%); /* Safari transform prefix */
    transform: translateX(-50%);
  }
  
  .timeline-item:hover .timeline-marker {
    -webkit-transform: translateX(-50%) scale(1.2); /* Safari transform prefix */
    transform: translateX(-50%) scale(1.2);
  }
  
  .timeline-content {
    width: 100%;
    text-align: left !important;
    padding: 0;
    margin: 0 !important;
  }
  
  .blog-header {
    -webkit-flex-direction: column; /* Safari flex-direction prefix */
    flex-direction: column;
    -webkit-align-items: flex-start; /* Safari align-items prefix */
    align-items: flex-start;
    gap: var(--space-2);
  }
  
  .article-highlights {
    -webkit-grid-template-columns: 1fr; /* Safari grid-template-columns prefix */
    grid-template-columns: 1fr;
  }
  
  .blog-links {
    -webkit-flex-direction: column; /* Safari flex-direction prefix */
    flex-direction: column;
    -webkit-align-items: flex-start; /* Safari align-items prefix */
    align-items: flex-start;
  }
  
  .blog-read-btn {
    width: 100%;
    -webkit-justify-content: center; /* Safari justify-content prefix */
    justify-content: center;
  }
}

/* Responsive Design - Small Mobile */
@media (max-width: 480px) {
  .blogs-timeline {
    padding: var(--space-6) var(--space-4);
  }
  
  .timeline-line {
    left: var(--space-4);
  }
  
  .timeline-marker {
    left: var(--space-4);
    width: 16px;
    height: 16px;
  }
  
  .timeline-item {
    padding-left: var(--space-8);
    margin-bottom: var(--space-8);
  }
  
  .blog-card {
    padding: var(--space-4);
  }
  
  .blog-title {
    font-size: calc(var(--text-lg) * 1.1);
  }
  
  .blog-excerpt {
    font-size: var(--text-sm);
  }
  
  .article-highlights {
    padding: var(--space-4);
    gap: var(--space-3);
  }
  
  .highlight-section {
    padding: var(--space-3);
  }
}

/* Animation for timeline items appearing */
.timeline-item {
  opacity: 0;
  -webkit-animation: fadeInUp 0.6s ease-out forwards; /* Safari animation prefix */
  animation: fadeInUp 0.6s ease-out forwards;
}

.timeline-item:nth-child(2) {
  -webkit-animation-delay: 0.1s; /* Safari animation delay prefix */
  animation-delay: 0.1s;
}

.timeline-item:nth-child(3) {
  -webkit-animation-delay: 0.2s; /* Safari animation delay prefix */
  animation-delay: 0.2s;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px); /* Safari transform prefix */
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0); /* Safari transform prefix */
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px); /* Safari transform prefix */
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0); /* Safari transform prefix */
    transform: translateY(0);
  }
}