/* =========================
   CONTAINER & LAYOUT
========================= */
.post-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2rem 1rem;
}

/* Själva inlägget */
.blog-post{
  max-width:800px;
  width:100%;
  padding:2rem;
  background:rgba(30,30,35,0.7);  /* glass */
  backdrop-filter:blur(10px);
  border-radius:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  line-height:1.6;
  color:#e0e0e0;
  font-family:"Inter","Segoe UI",system-ui,sans-serif;

  /* Hover-effekt (subtil) */
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.blog-post:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,0.5);
  background:rgba(30,30,35,0.8);
}

/* Media i post: spräng aldrig bredden */
.blog-post img,
.blog-post video,
.blog-post iframe,
.blog-post svg{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================
   TYPOGRAFI (Markdown)
========================= */
.blog-post h1,
.blog-post h2,
.blog-post h3{
  margin-top:1.5rem;
  margin-bottom:1rem;
  color:#0ff;
  line-height:1.3;
}
.blog-post h1{ font-size:2rem; }
.blog-post h2{ font-size:1.5rem; }
.blog-post h3{ font-size:1.25rem; }

.blog-post p{ margin-bottom:1rem; }

.blog-post a{
  color:#0ff;
  text-decoration:underline;
}

.blog-post ul,
.blog-post ol{
  margin:0 0 1rem 1.5rem;
}

.blog-post blockquote{
  border-left:4px solid #0ff;
  padding-left:1rem;
  margin:1rem 0;
  color:#b0f0ff;
  font-style:italic;
}

/* Horisontell linje */
.blog-post hr{
  border:none;
  border-top:1px solid rgba(255,255,255,0.12);
  margin:1.5rem 0;
}

/* Tabeller */
.blog-post table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  background:rgba(255,255,255,0.03);
  border-radius:.5rem;
  overflow:hidden;
}
.blog-post th,
.blog-post td{
  padding:.6rem .8rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-align:left;
}
.blog-post th{
  background:rgba(255,255,255,0.05);
  font-weight:600;
}

/* Kod */
.blog-post pre{
  background:rgba(0,0,0,0.6);
  padding:1rem;
  border-radius:.5rem;
  overflow-x:auto;             /* ingen sidscroll på sidan */
  font-family:"Fira Code",monospace;
  line-height:1.5;
}
.blog-post code{
  background:rgba(0,0,0,0.4);
  padding:.2rem .4rem;
  border-radius:.3rem;
  font-family:"Fira Code",monospace;
}

/* =========================
   TILLBAKA-KNAPP
========================= */
.back-link-container{
  display:flex;
  justify-content:flex-start;
  width:100%;
  max-width:800px;
  margin-top:1.25rem;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .6rem;              /* liten och subtil */
  background:rgba(0,255,240,0.05);
  color:#0ff;
  border-radius:.3rem;
  font-weight:500;
  text-decoration:none;
  font-size:.95rem;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.back-link:hover{
  background:rgba(0,255,240,0.12);
  color:#fff;
  transform:translateY(-1px);
}
.back-link .arrow{
  display:inline-block;
  transition:transform .3s ease;
}
.back-link:hover .arrow{
  transform:translateY(-2px);
}

/* =========================
   MOBIL
========================= */
@media (max-width:768px){
  .blog-post{ padding:1.5rem; }
}