/* ==========================================================================
   BLOG — ARTICLE PAGE (blog.html)
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0; /* optional */
}

.header {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr minmax(280px, 540px) 1fr;
  align-items: start; gap: 16px;
  padding: 20px 24px; border-bottom: 0px solid #eee;
}

.logo img { display:block; height: 48px; }


/* Light tokens for blog article page */
:root{
  --blog-ink:#0b0d10;
  --blog-muted:#5b6777;
  --blog-line:#e8edf4;
  --blog-accent:#1f6cff;
  --blog-bg:#ffffff;
  --blog-maxw: 860px;
}

.blog-body{ font:16px/1.7 "Manrope", system-ui, -apple-system, Segoe UI, Helvetica, Arial; background:var(--blog-bg); color:var(--blog-ink); }

/* Loader (blog) */
#blog-loader{ position:fixed; inset:0; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#000; z-index:9999; }
#blog-loader .blog-pixel{ width:15px; height:15px; background:#000; margin-bottom:10px; animation: blogMovePixel 1.5s infinite alternate ease-in-out; }
@keyframes blogMovePixel{ 0%{transform:translateX(-100px)} 100%{transform:translateX(100px)} }

/* Reading progress (blog) */
#blog-read-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,#1211D7,#7aa2ff); z-index:9998; transition:width .12s ease; }
@media (prefers-reduced-motion:reduce){ #blog-read-progress{ transition:none } }

/* Layout */
.blog-wrap{ max-width:var(--blog-maxw); margin:0 auto; padding:28px 20px 60px; }
.blog-article{ display:grid; gap:14px; margin-top:8px; }
.blog-title{ font-size:clamp(28px,5vw,44px); line-height:58px; margin:0; letter-spacing:.2px; padding-top:80px; }
.blog-meta{ color:var(--blog-muted); font-size:14px; padding-top:10px; }

.blog-cover{ margin:12px 0 0; padding:12px 0; }
.blog-cover img{ width:100%; height:auto; background:#f4f6f9; border:1px solid var(--blog-line); }

.blog-article-content{ margin-top:26px; display:grid; gap:22px; }
.blog-article-content h2{ font-size:clamp(20px,3.5vw,26px); margin:12px 0 0; }
.blog-article-content p{ margin:0 0 20px; }
.blog-article-content ul{ margin:0; padding-left:18px; }
.blog-article-content blockquote{
  margin:28px; padding:8px 16px; border-left:4px solid var(--blog-accent);
  background:#ffffff; color:#1a2640; border-radius:0; font-style:italic;
}

/* Ending block */
.blog-ending{ padding-left:30px; border-left:4px solid var(--blog-accent); font-size:24px; margin:40px 40px 100px; line-height:normal; }

/* Actions */
.blog-actions{ display:flex; gap:16px; align-items:center; border-top:1px solid #eee; padding-top:14px; font-family:Manrope,system-ui }
.blog-like-btn,.blog-share-btn{
  background:transparent; border:0; color:#555; cursor:pointer;
  display:flex; gap:6px; align-items:center; font-size:1rem; transition:.2s;
}
.blog-like-btn:hover,.blog-share-btn:hover{ color:#0070f3 }
.blog-like-btn.blog-liked{ color:#1f6cff; font-weight:700 }
.blog-icon{ width:20px; height:20px; opacity:.8; transition:opacity .2s ease; }
.blog-like-btn:hover .blog-icon,.blog-share-btn:hover .blog-icon{ opacity:1 }

/* Footer */
.blog-footer{
  margin-top:16px; padding-top:34px; border-top:1px solid var(--blog-line);
  color:var(--blog-muted); font-size:14px; display:flex; justify-content:space-between; align-items:center;
}
.blog-footer a{ color:var(--blog-accent); text-decoration:none; font-weight:600 }

/* Mobile cover swap */
.blog-cover img.mobile{ display:none; }
@media (max-width:768px){
  .blog-title{ padding-top:20px; line-height:38px; }
  .blog-cover img.desktop{ display:none; }
  .blog-cover img.mobile{ display:block; }
}

/* ==========================================================================
   BLOG — LANDING (blog-index.html)
   ========================================================================== */

   
:root{
  --bloglist-ink:#0b0d10;
  --bloglist-muted:#5b6777;
  --bloglist-line:#e8edf4;
  --bloglist-accent:#1f6cff;
  --bloglist-bg:#ffffff;
  --bloglist-maxw:1100px;
  --bloglist-card:#fff;
}

.bloglist-hero {
  border: none;       /* remove any border */
  outline: none;      /* remove focus outline if any */
}

.bloglist-hero::before {
  border: none;       /* overlay also shouldn’t have border */
}

.bloglist-hero img {
  border: none;
  outline: none;
  display: block;     /* removes the inline-gap issue */
}

.bloglist-body{ font:16px/1.7 "Manrope", system-ui, -apple-system, Segoe UI, Helvetica, Arial; background:var(--bloglist-bg); color:var(--bloglist-ink) }
.bloglist-wrap{ max-width:var(--bloglist-maxw); margin:0 auto; padding:24px 20px }
.bloglist-header{ border-bottom:1px solid var(--bloglist-line); background:#fff }
.bloglist-title{ margin:8px 0 4px; font-size:clamp(28px,5vw,44px); line-height:1.12 }
.bloglist-sub{ margin:0 0 14px; color:var(--bloglist-muted) }

.bloglist-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.bloglist-search{ flex:1 1 280px; padding:12px 14px; border:1px solid var(--bloglist-line); border-radius:10px; outline:none; font:inherit }
.bloglist-tags{ display:flex; flex-wrap:wrap; gap:8px }
.bloglist-tag{
  padding:8px 10px; font-size:14px; border:1px solid var(--bloglist-line); border-radius:999px;
  background:#fff; color:#263043; cursor:pointer; user-select:none;
}
.bloglist-tag[aria-pressed="true"]{ background:#eef3ff; border-color:#cfe0ff; color:#17326b }

.bloglist-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; padding-top:18px }

/* Card */
.bloglist-card{
  grid-column:span 4;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--bloglist-line); border-radius:0px; background:var(--bloglist-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bloglist-card:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.06) }

.bloglist-thumb{ aspect-ratio:16/9; width:100%; object-fit:cover; display:block; background:#eef2f8 }
.bloglist-card-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px }
.bloglist-card-meta{ color:var(--bloglist-muted); font-size:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.bloglist-dot{ width:3px; height:3px; border-radius:50%; background:var(--bloglist-muted); display:inline-block }
.bloglist-card-title{ font-size:18px; line-height:1.35; margin:2px 0 0 }
.bloglist-card-excerpt{ color:#2a3344; font-size:14px; line-height:1.6; margin:0 }
.bloglist-card-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.bloglist-card-tag{ font-size:12px; color:#334; background:#eef2ff; border:1px solid #dde6ff; padding:4px 8px; border-radius:999px }
.bloglist-card-footer{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:10px }
.bloglist-read{ font-weight:600; color:var(--bloglist-accent); text-decoration:none }
.bloglist-read:hover{ text-decoration:underline }

.bloglist-empty{ text-align:center; color:var(--bloglist-muted); padding:40px 0 }
.bloglist-footer{ border-top:1px solid var(--bloglist-line); color:var(--bloglist-muted); font-size:14px }
.bloglist-home{ color:var(--bloglist-accent); text-decoration:none; font-weight:600 }

/* Responsive */
@media (max-width:1024px){ .bloglist-card{ grid-column:span 6 } }
@media (max-width:680px){ .bloglist-card{ grid-column:span 12 } }

/* ==========================================================================
   BLOG — Landing: Hero Header with Background
   ========================================================================== */
.bloglist-hero{
  position: relative;
  background-image: var(--hero);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: clamp(260px, 36vw, 420px);
  color: #fff;
  isolation: isolate; /* ensure overlay sits under content */
}

/* Dark gradient overlay for text readability */
.bloglist-hero::before{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.25) 100%);
  z-index: -1;
}

.bloglist-hero__inner{
  display: grid;
  align-content: end;
  min-height: inherit;
  padding-top: 40px;
  padding-bottom: clamp(28px, 5vw, 56px);
}

.bloglist-hero__title{
  margin: 0 0 6px;
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.bloglist-hero__sub{
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: clamp(14px, 2.3vw, 18px);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* Floating search+tags card that overlaps the hero bottom edge */
.bloglist-hero__card{
  margin-top: clamp(14px, 2.6vw, 22px);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.55);
  /* border-radius: 14px; */
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

@media (min-width: 860px){
  .bloglist-hero__card{
    padding: 16px 18px;
    transform: translateY(18px); /* subtle overlap into the main area */
  }
}

/* Reuse your existing controls inside the card */
.bloglist-search{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bloglist-line, #e8edf4);
  border-radius: 10px;
  outline: none;
  font: inherit;
  background: #fff;
  margin-bottom: 10px;
}

.bloglist-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bloglist-tag{
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--bloglist-line, #e8edf4);
  border-radius: 999px;
  background: #ffffff;
  color: #263043;
  cursor: pointer;
  user-select: none;
}
.bloglist-tag[aria-pressed="true"]{
  background: #eef3ff;
  border-color: #cfe0ff;
  color: #17326b;
}

/* Optional: tighten spacing between hero and grid */
.bloglist-grid{ padding-top: 28px; }


@media (max-width: 640px){
  .bloglist-hero{ background-image: url('src/bg-1.jpg'); }
}

/* ==========================================================================
   BLOG — Featured Section
   ========================================================================== */
.bloglist-featured {
  margin: clamp(28px, 4vw, 48px) auto;
  /* max-width: 1000px; */
  /* padding: 0 20px; */
}

.bloglist-featured-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  background: #fff;
  /* border-radius: 16px; */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bloglist-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

.featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-tag {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #1f6cff;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.featured-title {
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.25;
  margin: 0 0 12px;
}

.featured-excerpt {
  color: #5b6777;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

.featured-link {
  font-weight: 600;
  color: #1f6cff;
  font-size: 0.95rem;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .bloglist-featured-card {
    grid-template-columns: 1fr;
  }
}