/* Maker Muhely Vac - site-specific additions on top of the SAM Labs design system.
   Mainly the image-slot placeholder tiles (real photos drop in later). */
.img-slot {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  background:
    repeating-linear-gradient(45deg, var(--sam-aqua-faint, #EAF9FB) 0 12px, #ffffff 12px 24px);
  border: 1.5px dashed var(--sam-aqua-soft, #BFEBF0);
  border-radius: inherit;
  color: var(--sam-aqua-deep, #14879A);
}
.img-slot > span {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  opacity: 0.9;
}
/* taller header so the (low-res) logo can be shown bigger and stay readable */
.hd-inner { height: 92px; }

/* language toggle button focus nicety */
button[data-langlabel] { transition: background .15s ease; }
button[data-langlabel]:hover { background: var(--sam-aqua-faint, #EAF9FB) !important; }

/* ---- Mobile responsiveness ----
   The design canvas applies INLINE grid-template-columns on the cards/sections,
   which beats the design system's own @media (max-width:880px) collapse rule.
   Force every inline multi-column grid to a single column on phones/tablets,
   which removes the horizontal overflow seen on mobile. */
@media (max-width: 880px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .container { padding-left: 20px; padding-right: 20px; }
  /* founder / about photos cap nicely and center when the two columns stack */
  .prow img { max-width: 520px; margin-left: auto; margin-right: auto; }
}
/* general overflow safety: nothing wider than the screen */
img, .card, .fcard, pre, table { max-width: 100%; }

/* ---- Mobile hamburger navigation ---- */
.hd-burger { display: none; }
@media (max-width: 880px) {
  .hd-inner { height: auto; min-height: 72px; flex-wrap: wrap; align-items: center; }
  .hd-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 40px; padding: 9px 10px;
    background: transparent; border: 1px solid var(--border-hairline); border-radius: 8px; cursor: pointer;
  }
  .hd-burger span { display: block; height: 2px; width: 100%; background: var(--fg-1); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  /* nav + CTA hidden until the burger is toggled */
  .hd-nav, .hd-cta { display: none; flex-basis: 100%; }
  .hd.menu-open .hd-nav { display: flex; flex-direction: column; width: 100%; padding: 6px 0 4px; }
  .hd.menu-open .hd-nav a { padding: 12px 6px; border-radius: 8px; font-size: 16px; }
  .hd.menu-open .hd-cta { display: flex; width: 100%; gap: 10px; padding: 4px 0 14px; align-items: center; }
  .hd.menu-open .hd-cta .btn { flex: 1; text-align: center; }
  /* burger morphs into an X when open */
  .hd.menu-open .hd-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hd.menu-open .hd-burger span:nth-child(2) { opacity: 0; }
  .hd.menu-open .hd-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}