frontend/src/style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body { margin:0; font-family:'Inter',system-ui,sans-serif; color:#1b2126; background:#f2f4f8; overflow-x:hidden; -webkit-font-smoothing:antialiased; }

.app-root { position:relative; min-height:100%; padding-top:150px; }

/* Layered subtle geometric background */
.bg-layers { position:fixed; inset:0; pointer-events:none; z-index:0; background:
  linear-gradient(145deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 65%),
  radial-gradient(circle at 78% 24%, rgba(96,165,250,0.18), transparent 60%),
  radial-gradient(circle at 15% 70%, rgba(167,139,250,0.15), transparent 62%),
  radial-gradient(circle at 50% 85%, rgba(125,168,255,0.12), transparent 58%),
  repeating-linear-gradient(115deg, rgba(0,0,0,0.025) 0 14px, rgba(0,0,0,0) 14px 28px),
  linear-gradient(180deg,#f3f5f9,#eef1f6);
  mask: linear-gradient(#fff,rgba(255,255,255,0.35)); }

/* Elevated header */
.top-bar.improved { position:fixed; top:0; left:0; right:0; display:flex; justify-content:center; padding:30px 32px 18px; z-index:10; -webkit-backdrop-filter:blur(20px) saturate(210%); backdrop-filter:blur(20px) saturate(210%); background:rgba(255,255,255,0.75); /* separator removed by default */ }
.top-bar.improved.with-sep { border-bottom:1px solid rgba(0,0,0,0.05); box-shadow:0 14px 48px -24px rgba(0,0,0,0.35), 0 4px 14px -8px rgba(0,0,0,0.1); }
.bar-inner { width:80%; max-width:1180px; display:flex; flex-direction:column; gap:18px; }
.title-row { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.app-title { margin:0; font-size:1.55rem; letter-spacing:-0.5px; font-weight:640; display:flex; align-items:center; gap:6px; background:linear-gradient(90deg,#1b2735,#3b5168); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pulse-dot { width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#60a5fa,#818cf8); position:relative; box-shadow:0 0 0 0 rgba(96,165,250,0.55); animation:pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(96,165,250,0.55);} 55%{box-shadow:0 0 0 10px rgba(96,165,250,0);} 100%{box-shadow:0 0 0 0 rgba(96,165,250,0);} }
.tagline { font-size:.78rem; font-weight:500; color:#5d6670; letter-spacing:.55px; }

/* Grid Loading */
.grid-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  margin: 2rem auto;
  text-align: center;
}

.grid-loading p {
  color: #6366f1;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
}

.match-badge {
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  font-size:0.65rem;
  padding:4px 8px;
  border-radius: 999px;
  font-weight:600;
  letter-spacing:.5px;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
}

/* Input form */
.input-form { display:flex; width:100%; gap:14px; align-items:stretch; }
.input-form.fancy .input-shell { position:relative; flex:1; display:flex; align-items:stretch; }
.input-shell .accent-bar { position:absolute; left:12px; top:12px; bottom:12px; width:4px; border-radius:3px; background:linear-gradient(180deg,#60a5fa,#818cf8); opacity:.35; transition:opacity .35s, filter .35s; }
.input-shell:focus-within .accent-bar { opacity:1; filter:saturate(150%); }
.big-input { flex:1; min-height:70px; padding:20px 30px 20px 30px; font-size:1.02rem; line-height:1.35; border-radius:18px; border:1px solid #cdd3d9; background:linear-gradient(180deg,#ffffff,#f8fafc); color:#192027; outline:none; box-shadow:0 1px 3px rgba(0,0,0,0.05); transition:border-color .25s, box-shadow .35s, background .35s; }
.big-input::placeholder { color:#9da4ad; }
.big-input:focus { border-color:#7da8ff; box-shadow:0 0 0 3px rgba(125,168,255,0.26), 0 6px 22px -10px rgba(125,168,255,0.45); background:#ffffff; }

.submit-btn { padding:0 34px; font-size:0.92rem; font-weight:600; border:1px solid #b9c2cc; border-radius:18px; background:linear-gradient(135deg,#6da8ff,#818cf8); color:#fff; cursor:pointer; letter-spacing:.45px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px -10px rgba(109,168,255,0.65),0 3px 10px -6px rgba(0,0,0,0.25); transition:transform .3s, box-shadow .35s, filter .35s, background-position .5s; min-width:132px; background-size:200% 200%; background-position:15% 35%; }
.submit-btn:disabled { opacity:.5; cursor:not-allowed; filter:grayscale(.35); }
.submit-btn:not(:disabled):hover { transform:translateY(-3px); background-position:55% 65%; box-shadow:0 14px 40px -16px rgba(109,168,255,0.7),0 6px 16px -10px rgba(0,0,0,0.22); }
.submit-btn:not(:disabled):active { transform:translateY(1px); box-shadow:0 6px 18px -10px rgba(109,168,255,0.6); }

/* Response area */
/* Response / output */
.response-area { position:relative; z-index:1; display:flex; flex-direction:column; gap:26px; align-items:center; padding:10px 34px 90px; margin-top:16px; }

.card { width:80%; max-width:1180px; background:linear-gradient(170deg,#ffffff,#f5f7fa); border:1px solid #d5dbe1; -webkit-backdrop-filter:blur(12px) saturate(170%); backdrop-filter:blur(12px) saturate(170%); border-radius:22px; padding:34px 42px 40px; color:#20262b; box-shadow:0 18px 46px -26px rgba(0,0,0,0.28), 0 8px 20px -14px rgba(0,0,0,0.15); display:flex; flex-direction:column; gap:14px; animation:fadeIn .6s ease; position:relative; overflow:hidden; }
.card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(129,140,248,0.14), transparent 60%), radial-gradient(circle at 12% 82%, rgba(96,165,250,0.14), transparent 55%); pointer-events:none; }
.card-label { font-size:.64rem; letter-spacing:1.3px; text-transform:uppercase; opacity:.55; font-weight:600; color:#5c6670; }
.card-content { font-size:1.05rem; line-height:1.58; white-space:pre-wrap; word-break:break-word; }
.card-result { border-left:6px solid #91b6ff; margin-top: 10px;}
.card-error { border-left:6px solid #ef7d7d; background:linear-gradient(165deg,#fff5f5,#ffecec); }
.placeholder-hint { width:80%; max-width:1180px; font-size:.8rem; color:#69727b; text-align:left; padding:4px 6px 0; font-style:italic; }

@media (max-width: 1100px) { .bar-inner, .card, .placeholder-hint { width:86%; } .big-input { min-height:64px; } }
@media (max-width: 900px) { .bar-inner, .card, .placeholder-hint { width:90%; } .app-root{padding-top:140px;} .big-input{min-height:60px; padding:18px 24px;} .submit-btn{min-width:116px;} .card{padding:30px 34px 34px;} }

@media (max-width: 640px) { .input-form{flex-direction:column;} .submit-btn{width:100%; height:60px;} .big-input{border-radius:18px; min-height:62px;} .bar-inner,.card,.placeholder-hint{width:94%;} .app-root{padding-top:152px;} }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

/* Scrollbar subtle styling */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
::-webkit-scrollbar-thumb { background: linear-gradient(#334155,#1e293b); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#475569,#334155); }

/* New Homepage Layout Styles */
/* Layout base spacing adjusted for larger header */
.homepage-layout { padding-top: 0; }

/* New Enlarged Header */
.site-header { position:sticky; top:0; z-index:120; background:linear-gradient(125deg,#ffffffcc 0%,#f8fafccc 65%,#eef2ffcc 100%); backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%); border-bottom:1px solid rgba(99,102,241,0.1); box-shadow:0 4px 24px -10px rgba(99,102,241,0.25), 0 2px 8px -4px rgba(0,0,0,0.08); }
.site-header:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 6% 90%, rgba(129,140,248,0.20), transparent 60%), radial-gradient(circle at 95% 15%, rgba(96,165,250,0.25), transparent 55%); mix-blend-mode:overlay; opacity:.6; }
.header-inner { max-width:1320px; margin:0 auto; padding:34px clamp(2rem,7vw,7rem) 30px; display:flex; gap:40px; align-items:flex-end; flex-wrap:wrap; justify-content:space-between; position:relative; }
.brand-block { display:flex; flex-direction:column; gap:10px; min-width:260px; }
.site-title { margin:0; font-size:clamp(2rem,3.2vw,3.05rem); font-weight:700; letter-spacing:-1px; line-height:1; background:linear-gradient(90deg,#1e293b,#334155 40%,#4c1d95 80%); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-flex; align-items:center; gap:10px; }
.site-title .pulse-dot { width:14px; height:14px; background:linear-gradient(135deg,#6366f1,#8b5cf6); box-shadow:0 0 0 0 rgba(99,102,241,0.55); animation:pulse 3s ease-in-out infinite; }
.site-tagline { margin:0; font-size:0.9rem; font-weight:500; letter-spacing:0.4px; color:#475569; max-width:520px; line-height:1.4; }
.header-controls { display:flex; gap:18px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.search-wrapper, .category-wrapper { position:relative; }
.header-search { width:300px; background:linear-gradient(180deg,#ffffff,#f1f5f9); border:1.5px solid #cbd5e1; padding:14px 18px 14px 48px; border-radius:18px; font-size:0.95rem; transition:all .35s; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.header-search:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 4px rgba(99,102,241,0.18), 0 6px 22px -8px rgba(99,102,241,0.35); background:#ffffff; }
.header-search + .search-icon { position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:1rem; color:#64748b; }
.header-category { background:linear-gradient(180deg,#ffffff,#f1f5f9); border:1.5px solid #cbd5e1; padding:14px 46px 14px 18px; border-radius:18px; min-width:190px; font-size:0.9rem; cursor:pointer; transition:all .35s; appearance:none; }
.header-category:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 4px rgba(99,102,241,0.18), 0 6px 22px -8px rgba(99,102,241,0.35); background:#ffffff; }
.category-wrapper .dropdown-arrow { position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:0.75rem; color:#64748b; pointer-events:none; }

@media (max-width:1000px){
  .header-inner { padding:26px clamp(1.75rem,5vw,4rem) 24px; }
  .site-title { font-size:clamp(1.9rem,5vw,2.6rem); }
  .header-search { width:240px; }
}
@media (max-width:780px){
  .header-inner { align-items:flex-start; }
  .header-controls { width:100%; order:3; justify-content:flex-start; }
  .header-search { width:100%; }
  .brand-block { width:100%; }
}
@media (max-width:520px){
  .site-title { font-size:2.1rem; }
  .site-tagline { font-size:0.8rem; }
  .header-category { width:100%; }
}

/* Remove old main-header styles */
.main-header {
  display: none;
}

/* Removed old content-controls & latest-posts label (merged into site-header) */

.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  padding: 12px 16px 12px 44px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  width: 280px;
  background: white;
  transition: all 0.3s ease;
  outline: none;
}

.search-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1rem;
  pointer-events: none;
}

.category-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.category-select {
  padding: 12px 40px 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  background: white;
  cursor: pointer;
  outline: none;
  appearance: none;
  min-width: 180px;
  transition: all 0.3s ease;
}

.category-select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.dropdown-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.8rem;
  pointer-events: none;
}

/* Main Content Area */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

/* Blog Content Section */
.blog-content-section {
  margin: 20px 0;
  /* Debug: Ensure changes are applied */
  background: transparent;
}

.blog-container {
  width: 100%;
}

/* Blog Grid Compact */
.blog-grid-new { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px; margin-bottom:54px; }

/* Card aesthetic refresh: compact & elevated */
.blog-card-new { background:#ffffff; border-radius:18px; overflow:hidden; box-shadow:0 10px 28px -14px rgba(0,0,0,0.25), 0 4px 14px -6px rgba(0,0,0,0.12); transition:all .4s cubic-bezier(.4,.2,.2,1); cursor:pointer; border:1px solid #e2e8f0; position:relative; isolation:isolate; display:flex; flex-direction:column; }
.blog-card-new:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(99,102,241,0.07),rgba(56,189,248,0.05) 35%,rgba(255,255,255,0) 75%); opacity:0; transition:opacity .5s; pointer-events:none; }
.blog-card-new:hover:before { opacity:1; }

.blog-card-new:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 30px 60px -24px rgba(30,41,59,0.38), 0 18px 28px -12px rgba(30,41,59,0.22); border-color:#c7d2fe; }

/* Media ratio refined */
.blog-card-image-new { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#f8fafc,#e2e8f0); }

.blog-card-image-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card-new:hover .blog-card-image-new img {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blog-card-new:hover .image-overlay {
  opacity: 1;
}

.blog-card-content-new { padding:20px 20px 22px; background:#ffffff; flex:1; display:flex; flex-direction:column; }

.blog-card-tags-new { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }

.blog-card-tag-new { background:linear-gradient(135deg,#eef2ff,#e0e7ff); color:#4338ca; font-size:0.63rem; font-weight:600; padding:5px 10px; border-radius:14px; letter-spacing:.6px; text-transform:uppercase; }

.blog-card-title-new { font-size:1.05rem; font-weight:650; color:#1e293b; margin:0 0 8px 0; line-height:1.35; letter-spacing:-0.3px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.blog-card-excerpt-new { font-size:0.8rem; color:#475569; line-height:1.5; margin:0 0 14px 0; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.blog-card-meta-new { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:12px; border-top:1px solid #f1f5f9; gap:10px; }

.blog-card-author-new { font-size:0.65rem; font-weight:600; color:#334155; letter-spacing:.5px; text-transform:uppercase; }

.blog-card-date-new { font-size:0.6rem; color:#64748b; letter-spacing:.5px; }

.blog-card-stats-new {
  display: flex;
  align-items: center;
  gap: 16px;
}

.blog-card-stat-new {
  font-size: 0.75rem;
  color: #64748b;
  background: #f8fafc;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Pagination */
.pagination-new {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
}

.pagination-btn-new {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination-btn-new:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.pagination-btn-new:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #e2e8f0;
  color: #94a3b8;
}

.page-indicators {
  display: flex;
  gap: 8px;
}

.page-indicator {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  background: white;
  color: #64748b;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-indicator:hover {
  border-color: #667eea;
  color: #667eea;
}

.page-indicator.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: transparent;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .blog-grid-new {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .controls-group {
    justify-content: center;
  }
  
  .search-input {
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 768px) {
  .homepage-layout {
    padding-top: 70px;
  }
  
  .compact-header .header-content {
    padding: 12px 20px;
  }
  
  .brand-section {
    flex-direction: column;
    gap: 4px;
  }
  
  .homepage-layout .app-title {
    font-size: 1.4rem;
  }
  
  .homepage-layout .tagline {
    font-size: 0.8rem;
  }
  
  .controls-inner, .main-content {
    padding: 0 20px;
  }
  
  .controls-group {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .search-input, .category-select {
    width: 100%;
    max-width: none;
  }
  
  .pagination-new {
    flex-direction: column;
    gap: 16px;
  }
  
  .page-indicators {
    order: -1;
  }
  
  .blog-card-content-new {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .homepage-layout .app-title { font-size:1.2rem; }
  .blog-card-content-new { padding:16px; }
}

.blog-section-header {
  text-align: center;
  margin-bottom: 32px;
}

.blog-section-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1b2735;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.blog-section-subtitle {
  font-size: 1rem;
  color: #64748b;
  margin: 0;
  font-weight: 400;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}

.blog-card {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: #cbd5e1;
}

.blog-card-image {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.blog-card-content {
  padding: 20px;
}

.blog-card-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.blog-card-tag {
  background: linear-gradient(135deg, #ddd6fe, #e0e7ff);
  color: #6366f1;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.blog-card-excerpt {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.blog-card-author {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.blog-card-date {
  font-size: 0.75rem;
  color: #94a3b8;
}

.blog-card-stats {
  display: flex;
  gap: 12px;
}

.blog-card-stat {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
}

/* Blog View Styles */
.app-root.blog-view { padding-top:0; }
.blog-view .bg-layers { display:none; }
.blog-view .top-bar.improved { position:relative; }

/* Unified non-sticky blog header (single source of truth) */
/* .blog-header { position:relative; background:linear-gradient(135deg,#f8fafc 0%, #e2e8f0 100%); border-bottom:0px solid #cbd5e1; padding:40px 0 50px; margin:0; } */
.blog-header { position:relative; background-color:#f2f5f6; padding:40px 0 10px; margin:0; } 
.blog-header.smart-header.collapsed .blog-title { font-size:1.25rem; margin:0; }
.blog-header.smart-header.expanded .blog-title { font-size:1.6rem; margin:0 0 12px; }
.blog-header.smart-header.collapsed .back-button { padding:4px 12px; font-size:0.7rem; margin-bottom:6px; }
.blog-header.smart-header.expanded .back-button { padding:8px 16px; font-size:0.8rem; margin-bottom:16px; }

.blog-header-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 32px;
}

.back-button {
  background: #6366f1;
  border: none;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 16px;
  margin-bottom: 16px;
  border-radius: 20px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.back-button:hover {
  background: #4f46e5;
  transform: translateY(-1px);
}

.blog-title-section {
  text-align: left;
}

.blog-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px 0;
  line-height: 1.3;
  letter-spacing: -0.4px;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.blog-author, .blog-date {
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* (Removed unused header tag styles previously) */

.blog-author {
  font-size: 0.9rem;
  font-weight: 600;
  color: #475569;
}

.blog-date {
  font-size: 0.9rem;
  color: #64748b;
}

/* (Obsolete .blog-tags removed) */

/* (Removed earlier gradient tag style) */

/* (Removed early full-bleed variants) */

.featured-image {
  margin: 0 0 32px 0;
  text-align: center;
}

.featured-image img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.featured-image figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #64748b;
  font-style: italic;
}

/* (Removed earlier temporary blog-body reset; consolidated version appears later) */

.blog-image {
  margin: 32px 0;
  text-align: center;
}

.blog-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-image figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #64748b;
  font-style: italic;
}

/* Blog View Layout - Wider and Scrollable */
.blog-view { overflow-y:auto; height:100vh; background:#f8fafc; }

.blog-content-area { max-width:900px; margin:0 auto; padding:20px 20px; width:100%; background:#f8fafc; }

.blog-article {
  background: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 5px 5px 5px 5px;
  box-shadow: none;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* Removed duplicate sticky blog-header block - using the earlier static positioned header design */

/* (Removed duplicate .blog-header-inner definition) */

/* (Removed duplicate .blog-title-section) */

/* (Removed earlier oversized .blog-title) */

/* (Removed intermediate .blog-meta variant) */

/* (Removed duplicate blog-author/blog-date) */

/* (Removed second header tags block) */

/* Blog Content Styling */
/* (Removed duplicate featured-image block) */

.featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.featured-image figcaption {
  padding: 1rem 0;
  background: transparent;
  color: #94a3b8;
  font-style: italic;
  text-align: center;
  font-size: 0.875rem;
}

/* (Removed duplicate blog-body variant) */

/* (Removed earlier heading block) */

.blog-body h1:first-child,
.blog-body h2:first-child,
.blog-body h3:first-child {
  margin-top: 1.5rem;
}

.blog-body h2 {
  font-size: 1.875rem;
  border-bottom: none;
  padding-bottom: 0;
}

.blog-body h3 {
  font-size: 1.5rem;
}

.blog-body h4 {
  font-size: 1.25rem;
}

.blog-body p { margin-bottom:1.25rem; text-align:left; color:#1e293b; font-family:'Inter',system-ui,sans-serif; font-weight:400; font-size:1.05rem; line-height:1.7; letter-spacing:0.15px; }

.blog-body p:last-child {
  margin-bottom: 0;
  color: #374151 !important;
}

/* Apply professional fonts */
/* (Removed standalone font-family override) */

/* (Removed duplicate heading font stack) */

.blog-body li,
.blog-body blockquote,
.blog-body span { font-family:'Inter',system-ui,sans-serif; }

.blog-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2.5rem 0;
  box-shadow: none;
  border: none;
}

/* Storytelling blockquote */
.blog-body blockquote { border-left:4px solid #6366f1; margin:2rem 0; font-style:italic; color:#24303a !important; background:linear-gradient(90deg,rgba(99,102,241,0.06),rgba(99,102,241,0)); padding:1rem 1.5rem 1rem 1.25rem; border-radius:4px; }

/* Inline code refined */
.blog-body code { background:rgba(31,41,55,0.08); padding:0.25rem 0.55rem; border-radius:4px; font-family:'SF Mono','Monaco','Inconsolata','Roboto Mono','Courier New',monospace; font-size:0.85em; color:#111827 !important; }

.blog-body pre {
  background: rgba(15, 23, 42, 0.9);
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid rgba(71, 85, 105, 0.5);
}

.blog-body pre code {
  background: none;
  padding: 0;
  color: #000000 !important;
  opacity: 1 !important;
}

.blog-body ul, .blog-body ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.blog-body li {
  margin-bottom: 0.5rem;
  color: #000000 !important;
  opacity: 1 !important;
}

/* Narrative link styling */
.blog-body a { color:#1d4ed8; text-decoration:none; position:relative; font-weight:500; transition:color .3s ease; }
.blog-body a:after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%; background:linear-gradient(90deg,#1d4ed8,#6366f1); opacity:.65; transform:scaleX(.35); transform-origin:left; transition:transform .35s ease,opacity .35s ease; }
.blog-body a:hover { color:#1e3a8a; }
.blog-body a:hover:after { transform:scaleX(1); opacity:1; }

/* Blog Meta and Tags Styles */
.blog-meta {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
  font-size: 0.95rem;
  color: #6b7280;
}
/* Removed earlier meta duplications and obsolete .blog-tags */

/* New tag styling */
.blog-tag { background:#f1f5f9; color:#334155; padding:6px 14px; border-radius:999px; font-size:0.7rem; font-weight:600; letter-spacing:0.5px; border:1px solid #e2e8f0; transition:background .25s,color .25s,border-color .25s; }
.blog-tag:hover { background:#e2e8f0; }

/* Minimal tags separator section */
.blog-tags-section { margin:3rem 0 2.5rem 0; padding:0; border-top:1px solid #e2e8f0; }
.blog-tags-title { font-family:'Inter',system-ui,sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:1.4px; color:#64748b; margin:1.75rem 0 1rem 0; text-transform:uppercase; padding:0 24px; text-align:left; }
.blog-tags-container { display:flex; flex-wrap:wrap; gap:8px; padding:0 24px; }

/* Minimal Pagination Styles */
.pagination-minimal {
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pagination-track {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.pagination-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.pagination-progress.page-1 { width: 25%; }
.pagination-progress.page-2 { width: 50%; }
.pagination-progress.page-3 { width: 75%; }
.pagination-progress.page-4 { width: 100%; }

.pagination-handle {
  position: absolute;
  top: -6px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  transition: left 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pagination-handle.page-1 { left: 20%; }
.pagination-handle.page-2 { left: 45%; }
.pagination-handle.page-3 { left: 70%; }
.pagination-handle.page-4 { left: 95%; }

.pagination-handle:hover {
  transform: scale(1.2);
}

.pagination-handle.dragging {
  transform: scale(1.3);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5);
}

.page-indicator {
  font-size: 0.7rem;
  font-weight: bold;
  color: white;
}

.pagination-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pagination-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  font-weight: 500;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-meta {
  text-align: center;
  color: #9ca3af;
  font-size: 0.85rem;
}

/* Remove old pagination slider styles */
.pagination-slider,
.slider-container,
.slider-nav,
.slider-track,
.slider-dates,
.date-indicator,
.blog-sidebar,
/* .blog-tags-section removed so it can display */
.tags-title,
.blog-content-layout {
  display: none;
}
/* Removed legacy hidden pagination/slider/sidebar selectors */

/* Enhanced Blog Card Meta */
.blog-card-meta {
  display: flex;
  gap: 1rem;
  margin: 1rem 0 0.5rem 0;
  font-size: 0.85rem;
  color: #9ca3af;
  align-items: center;
}

.blog-card-author, .blog-card-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width:1100px){ .blog-section{width:86%;} .blog-content-area{padding:20px 40px; max-width:900px;} .blog-header-inner{padding:0 40px;} }

@media (max-width: 900px) { 
  .blog-section { width: 90%; }
  .blog-grid { gap: 20px; }
  .blog-content-area { padding:20px 30px; max-width:900px; }
  .blog-header-inner { padding:0 30px; }
}

@media (max-width: 640px) { 
  .blog-section { width: 94%; }
  .blog-grid { 
    grid-template-columns: 1fr;
    gap: 16px; 
  }
  .blog-card-content { padding: 16px; }
  .blog-content-area { padding:20px 20px; max-width:900px; }
  .blog-header-inner { padding:0 20px; }
  
  .pagination-controls {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .pagination-btn {
    width: 100%;
  }
}

/* Removed sticky override block (header already non-sticky) */

/* Unified blog typography & layout (storytelling enhanced) */
.blog-content-area { max-width:900px; margin:0 auto; padding:0 20px 40px; width:100%; background:#f8fafc; }
.blog-article { background:#ffffff; border:none; border-radius:12px; padding:36px 48px 36px; box-shadow:0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); width:100%; margin:12px auto 0; }
.blog-body { font-size:1.06rem; line-height:1.72; color:#1f2933; max-width:65ch; margin:0 auto; font-family:'Lora','Merriweather',Georgia,serif; font-weight:400; font-variant-ligatures:common-ligatures; font-kerning:normal; hyphens:auto; }
.blog-body.story-mode { font-size:1.12rem; max-width:60ch; }
.blog-body h1, .blog-body h2, .blog-body h3, .blog-body h4, .blog-body h5, .blog-body h6 { font-family:'Lora','Merriweather',Georgia,serif; font-weight:600; line-height:1.25; letter-spacing:-0.3px; margin:2.2rem 0 1.15rem; color:#14202b; }
.blog-body h1:first-child, .blog-body h2:first-child, .blog-body h3:first-child { margin-top:1rem; }
.blog-body p { margin:0 0 1.3rem; font-weight:400; font-size:inherit; letter-spacing:0.15px; color:#1f2933; }
.blog-body p:last-child { margin-bottom:0; }
.blog-paragraph { margin:0 0 1.3rem; }


/* Mobile overrides: minimize any outer padding/margin for full blog content */
@media (max-width: 640px) {
  /* reduce side padding so content uses most of the viewport */
  .blog-content-area { padding: 0 8px !important; }

  /* make the article padding compact on small screens */
  .blog-article { padding: 12px 12px !important; border-radius:8px; }

  /* tighten header inner spacing */
  .blog-header-inner { padding: 0 8px !important; }

  /* featured image spacing reduction */
  .featured-image { margin: 0 0 18px 0; }
}

@media (max-width: 420px) {
  .blog-content-area { padding: 0 6px !important; }
  .blog-article { padding: 10px 8px !important; }
  .blog-body { font-size: 1rem; }
}