/* Shared screen-size rules for the VBLabs mockup blog.
   Loaded after each page's inline CSS so it can restore nav and reflow grids. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body { overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; height: auto; }
.wrap, .wrap-wide, .prose, article { overflow-wrap: anywhere; }

/* Nav "Connect" is .nav-links a.btn — link color was winning over button ink,
   so light theme showed dark-gray text on a black fill. */
.nav-links a.btn {
  color: var(--btn-ink) !important;
  background: var(--btn-bg);
  border-color: var(--btn-bg);
}
.nav-links a.btn:hover {
  color: var(--btn-ink) !important;
  opacity: 0.82;
}

/* Tablet: 2-col work grids, keep nav visible */
@media (max-width: 1080px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  nav { height: auto; }
  .nav-inner {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.55rem 1rem;
    gap: 0.45rem 1rem;
  }
  .wordmark { order: 1; margin-right: 0; }
  .theme-toggle { order: 2; margin-left: auto; }
  .nav-links {
    order: 3;
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.35rem 1rem;
    padding-bottom: 0.35rem;
  }
  .nav-links a,
  .nav-links a:not(.btn) {
    display: inline-flex !important;
    align-items: center;
    min-height: 2.4rem;
  }
  .wrap,
  .wrap-wide { padding-left: 1rem; padding-right: 1rem; }
  header,
  article.header { padding-top: 7.25rem; }
  .work-grid,
  .featured,
  .services,
  .about-grid { grid-template-columns: 1fr !important; }
  .dive-row {
    grid-template-columns: 1fr !important;
    gap: 0.25rem 0.75rem;
  }
  .hero-mark { display: none; }
  .sec-head { align-items: flex-start; }
}

@media (max-width: 720px) {
  h1 { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  h2 { font-size: 1.35rem; }
  .hero-sub, .lede { font-size: 1rem; }
  header { padding: 7rem 0 2.5rem; }
  article.header { padding: 6.75rem 0 1.75rem; margin-bottom: 1.5rem; }
  section { padding: 2.75rem 0; }
  .card { min-height: 0; }
  .card.feature { min-height: 0; }
  .nav-posts a { max-width: 100%; }
  .foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .foot a { margin-left: 0; margin-right: 1rem; }
  .prose h2 { margin-top: 1.75rem; }
  .prose pre { font-size: 0.72rem; }
  .mockup-badge { display: none; }
  #lab { padding: 3.25rem 0; }
}

@media (max-width: 420px) {
  .wordmark .name { font-size: 0.95rem; }
  .hero-ctas .btn,
  .cta-row .btn { width: 100%; text-align: center; }
  .filters { width: 100%; }
  .filters button { flex: 1 1 auto; }
}