body { margin: 0; }


.article-container {
  padding: 10% 20%;
  padding-bottom: calc(10% + 80px);
  /* reserve space for footer overlap */
  box-sizing: border-box;
}

.caption {
  color: #737070;
  font-size: 14px;
  margin: 10px 10px auto;
  display: block;
  text-align: center;
}


/* NEW articles: hero media (image or video) right under H1, same width as text */
.article-container .meta,
.article-container .meta-video {
  text-align: center;
  margin: 24px 0 62px !important;   /* consistent spacing */
}

.article-container .meta img,
.article-container .meta-video .article-hero-video {
  display: block;                   /* fill the content width cleanly */
  width: 100%;                      /* exactly the width of the text column */
  height: auto;                     /* no crop; keep natural aspect ratio */
  max-width: 100%;                  /* never overflow the container */
  border-radius: 8px;
  transition: transform .25s ease;  /* hover animation for both */
}

/* Subtle hover for both image & video */
.article-container .meta:hover img,
.article-container .meta-video:hover .article-hero-video {
  transform: scale(1.05);
}

/* Mobile tweak is no longer necessary since we use width:100% and height:auto,
   but you can keep it if you want explicit control. */
@media (max-width: 576px) {
  .article-container .meta img,
  .article-container .meta-video .article-hero-video {
    width: 100%;
    height: auto;
  }
}



/* ===== Code Blocks as snippet & one line code snippet ===== */
/* Dark code block with a GitHub-style copy button */
.article-container .codebox{
  position: relative;
  background: #0f0f10;
  border: 1px solid #262626;
  max-width: 80ch;
  border-radius: 12px;
  padding: 16px 48px 16px 16px; /* room for button */
  margin: 16px 0;
  overflow: hidden;
}


.article-container .codebox pre{ margin: 0; overflow-x: auto; }
.article-container .codebox code{
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #e6f1ff;
  line-height: 1.55;
  font-size: .96rem;
  white-space: pre;              /* keep formatting */
}

/* Copy button */
.article-container .copy-btn{
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px;
  display: inline-grid; place-content: center;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #171717;
  color: #d5d0d0;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s, color .15s;
}
.article-container .copy-btn:hover{
  background: #1f1f1f; border-color: #3a3a3a; color: #ffe08a;
}
.article-container .copy-btn:active{ transform: scale(.98); }
.article-container .copy-btn:focus-visible{ outline: 2px solid #ffe08a; outline-offset: 2px; }

/* Ionicon inside button */
.article-container .copy-btn ion-icon{ font-size: 18px; }

/* Temporary success state */
.article-container .copy-btn.copied{
  background: #1a1400; border-color: #5a4700; color: #ffe08a;
}

/* Optional: nicer selection in code */
.article-container .codebox code::selection{ background: rgba(255,224,138,.2); }


/* img {
  position: relative;
  margin: 30px auto;
  display: block;
  height: 5%;
  width: 70%;
} */

/* .article-container figure.meta img {
  display: block;          
  width: 100%;
  height: auto;
  border-radius: 8px;      
} */