/* ===== tokens ================================================= */
:root{
  --accent:#6bb59f;
  --text-dark:#222;
  --text-muted:#555;
  --bg-light:#fafafa;
  --bg-section:#f1f1f1;
  --border-radius:8px;
}

html, body {
  overflow-x: hidden;
}


/* ===== reset & layout ======================================== */
html,body{height:100%;margin:0;
          font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
          background:var(--bg-light);color:var(--text-dark);}
body{
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1 0 auto;padding:68px 1rem 3rem;max-width:1050px;margin:0 auto;}
footer{flex-shrink:0;}

/* ===== header ================================================= */
header{
  position:fixed; inset:0 0 auto 0;            /* stick to top */
  height:3.5rem;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 1.5rem;
  background:rgba(255,255,255,.40);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  z-index:100;
}
header h1{margin:0; font-size:1.1rem; font-weight:600; color:#111;}
header h1 a{color:inherit; text-decoration:none;}   /* logo link */

header nav a{
  margin-left:1.5rem;
  font-weight:500;
  text-decoration:none;
  color:#333;
  position:relative;
}
header nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:2px; background:#333;
  transform:scaleX(0);
  transition:transform .25s ease;
}
header nav a:hover::after{transform:scaleX(1);}

.back-to-blog-wrapper{
  max-width:720px;
  margin:3rem 1rem 3rem 4.5rem;
  text-align:padding-left;
}

.back-to-blog{
     font-size:1.25rem;font-weight:900;text-decoration:none;color:#545352;
}

/* ===== hero banner =========================================== */
.hero{
 
 /* force it full-bleed across the viewport */
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);


  /* 2. keep your fixed-height / cover behavior */
  height: 40vh;
  min-height: 260px;
  background-size: cover;
  background-position: center;

  /* 3. bottom margin to give the article some breathing room */
  margin-bottom: 2.5rem;
 
}

/* ===== grid list (3 ➜ 2 ➜ 1 cols) ============================ */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2rem;padding-top: 2rem}

.post-card{
  background:var(--bg-section);border:1px solid #e1e1e1;border-radius:var(--border-radius);
  text-decoration:none;color:inherit;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.04);transition:transform .25s,box-shadow .25s;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 4px 14px rgba(0,0,0,.08);}
.post-card figure{margin:0;height:0;padding-top:66%;position:relative;background:#ddd;}
.post-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.post-content{padding:1.1rem 1.25rem 1.5rem;}
.post-card h3{margin:.15rem 0 .45rem;font-size:1.25rem;color:#464d4c;}
.post-meta{font-size:.8rem;letter-spacing:.35px;color:var(--text-muted);margin-bottom:.6rem;text-transform:uppercase;}
.post-excerpt{font-size:.95rem;line-height:1.5;color:var(--text-dark);}

/* ===== article body ========================================== */
article{max-width:720px;margin:0 auto 4rem;line-height:1.65;font-size:1.05rem;}
article img{max-width:100%;border-radius:var(--border-radius);box-shadow:0 2px 6px rgba(0,0,0,.08);margin:1rem 0;}
pre{background:#272822;color:#f8f8f2;padding:1rem 1.25rem;border-radius:var(--border-radius);overflow:auto;font-family:Menlo,Consolas,monospace;font-size:.85rem;}

/* ===== footer ================================================= */
footer{background:#333;color:#eee;padding:2.5rem 0;font-size:.95rem;}
.footer-wrap{max-width:1000px;margin:0 auto;padding:0 1.5rem;display:flex;flex-wrap:wrap;gap:3rem;justify-content:space-between;}
footer h3{margin-top:0;font-size:1.1rem;}
footer a{color:#9be2d0;text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* ===== markdown link ========================================== */
main a{
  color:#789aa1;          
  text-decoration:none;   /* kill the always-on underline */
  font-weight:500;        /* optional – makes text bolder */
  position:relative;
}

/* —— animated underline on hover / focus —— */
main a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px;
  background:currentColor;      /* matches the text colour */
  transform:scaleX(0);
  transition:transform .25s ease;
}
main a:hover::after,
main a:focus-visible::after{
  transform:scaleX(1);
}

/* —— visited-state tint (optional) —— */
main a:visited{
  color:#3f5573;         
}

/* ===== TABLET BREAKPOINT (1024px and below) ================== */
@media (max-width: 1024px) {
  .post-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem;}
  
  header{padding:1rem 1.5rem;}
  header h1{font-size:1.1rem;}
  nav a{margin-left:1rem;}
}

/* ===== MOBILE BREAKPOINT (768px and below) =================== */
@media (max-width: 768px) {
  /* Layout adjustments */
  main{
    max-width: 100%;
    padding: 60px 0 2rem;
  }

  /* Header improvements */
  header{
    padding:0.75rem 1rem;
    flex-wrap:wrap;
    gap:0.5rem;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(8px);
  }
  
  header h1{
    font-size:1rem;
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  
  nav{
    display:flex;
    gap:1rem;
  }
  
  nav a{
    margin-left:0;
    font-size:0.9rem;
    padding:0.25rem 0;
  }

  /* Grid becomes single column */
  .post-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
    padding-top:1rem;
  }

  /* Enhanced post cards for mobile */
  .post-card{
    border-radius:12px;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
  }
  
  .post-card:hover{
    transform:none; /* Disable transform on mobile for better performance */
    box-shadow:0 2px 8px rgba(0,0,0,.1);
  }
  
  .post-content{
    padding:1rem 1.25rem 1.25rem;
  }
  
  .post-card h3{
    font-size:1.1rem;
    line-height:1.3;
  }
  
  .post-excerpt{
    font-size:0.9rem;
    line-height:1.4;
  }

  /* Hero adjustments */
  .hero{
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    margin: 1rem 0;            /* vertical spacing */
    border-radius: var(--border-radius);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }

  /* Article improvements */
  article{
    padding:0 1.5rem;
    font-size:1rem;
    line-height:1.6;
    max-width:100%;
  }
  
  article h1{
    font-size:1.6rem;
    line-height:1.25;
    margin:0.5rem 0 1rem;
    padding:0;
  }
  
  article h2{
    font-size:1.3rem;
    margin:1.5rem 0 0.75rem;
  }
  
  article h3{
    font-size:1.15rem;
    margin:1.25rem 0 0.5rem;
  }
  
  article p{
    margin:0 0 1rem;
  }
  
  article img{
    position: relative;
    width: 100vw;               /* span the viewport */
    left: 54.25%;                  /* start at center of viewport */
    transform: translateX(-50%);/* pull back by half its width */
    height: auto;               /* keep aspect ratio */
    margin: 1rem 0;             /* vertical spacing only */
    border-radius: var(--border-radius);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }

  /* Back to blog link */
  .back-to-blog-wrapper{
    margin:2rem 1.5rem 1.5rem;
    text-align:left;
  }
  
  .back-to-blog{
    font-size:0.95rem;
    display:inline-flex;
    align-items:center;
    padding:0.5rem 0;
    background:transparent;
    border:none;
    color:#666;
    font-weight:600;
    transition:color 0.25s;
  }
  
  .back-to-blog:hover{
    color:#333;
  }

  /* Code blocks */
  pre{
    font-size:0.8rem;
    padding:0.75rem 1rem;
    overflow-x:auto;
    border-radius:8px;
  }

  /* Footer stack */
  footer{
    padding:2rem 0;
  }
  

}

/* ===== SMALL MOBILE (480px and below) ======================== */
@media (max-width: 480px) {
  /* Even more compact header */
  header{
    padding:0.5rem 1rem;
  }
  
  header h1{
    font-size:0.95rem;
  }
  
  nav a{
    font-size:0.85rem;
  }

  /* Tighter spacing */
  main{
    padding:55px 0 1.5rem;
  }
  
  .post-grid{
    gap:1.25rem;
    padding-top:0.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  
  .post-content{
    padding:0.875rem 1rem 1rem;
  }
  
  .post-card h3{
    font-size:1.05rem;
  }
  
  .post-excerpt{
    font-size:0.85rem;
  }

  /* Article adjustments */
  article{
    padding:0 1rem;
    font-size:1rem;
  }
  
  article h1{
    font-size:1.6rem;
    margin:1rem 0 1.5rem;
  }
  
  article img{
    width:calc(100% + 2rem);
    margin-left:-1rem;
    margin-right:-1rem;
  }

  /* Hero */
  .hero{
    height:22vh;
    min-height:160px;
    max-height:180px;
  }

  /* Back to blog */
  .back-to-blog-wrapper{
    margin:1.5rem 1rem 1rem;
  }

  /* Footer */
  footer{
    font-size:0.9rem;
    padding:1.5rem 0;
  }
  
}