/* Scope blog styles so they don’t leak to home */
.blog-post{
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}
.blog-title{
  font-size: 2.4rem;
  margin: 0 0 1.25rem;
  color: var(--accent);
  text-align:center;
}
.blog-post h2{
  margin-top:2rem; margin-bottom:.5rem;
  color: var(--accent);
}

/* Desktop-only: fit the whole post comfortably on one screen */
@media (min-width: 980px){
  .blog-post{ padding-top: 2rem; padding-bottom: 2rem; }
  /* Constrain the slider by viewport so its height never dominates */
  .blog-post .igslider{ width: min(60vw, 56vh, 720px); margin-left: auto; margin-right: auto; }
  .blog-post .igslider img{ width: 100%; height: auto; }
  /* Tighten text spacing below the image */
  .blog-post .blog-title{ margin: .5rem 0 .25rem; }
  .blog-post .muted{ margin: 0 0 .5rem; }
  /* Compact link blocks; override any inline margins */
  .blog-post .stl-banner{ margin-top: .5rem !important; }
  .blog-post .aff{ margin-top: .4rem !important; }
}

/* Bill of Materials grid */
:root{ --part-thumb: 140px } /* default; can be overridden per post */
.grid-links{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; margin: 0 0 2rem; text-align:center;
}
.grid-links a{
  background: var(--card); border:1px solid var(--border);
  border-radius:12px; padding:.75rem;
  display:flex; flex-direction:column; align-items:center;
  color:inherit; text-decoration:none;
  transition: transform .2s, box-shadow .2s;
}
.grid-links a:hover{ transform: translateY(-3px); box-shadow:0 0 8px var(--accent) }

/* fixed-size thumbnail boxes for even layout */
.part-thumb{
  width: var(--part-thumb); height: var(--part-thumb);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto .5rem;
}
.part-thumb img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* side-by-side videos */
.grid-videos{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.grid-videos video{ border-radius:12px }
.grid-videos p{ text-align:center; font-style:italic; opacity:.85; margin:.5rem 0 0 }

@media (max-width:768px){
  .grid-videos{ grid-template-columns:1fr }
}

/* inline photo rows */
.gallery {
  --gap: 1rem;
  --radius: 12px;
  --ratio: 4/3;              /* change to 3/2, 1/1, 16/9, etc */
  display: grid;
  gap: var(--gap);
  margin: 1rem 0;
}
.gallery.two   { grid-template-columns: 1fr 1fr; }
.gallery.three { grid-template-columns: 1fr 1fr 1fr; }

.frame {
  position: relative;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: var(--radius);
  background: #111;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* perfectly aligned crops */
  display: block;
}
.caption {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 0.4rem;
}
@media (max-width: 768px){
  .gallery.two   { grid-template-columns: 1fr; }
  .gallery.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .gallery.three { grid-template-columns: 1fr; }
}