/* NOS Media — stability and responsive fixes */
:root {
  --site-header-height: 68px;
}

html {
  scroll-padding-top: calc(var(--site-header-height) + 24px);
  scrollbar-gutter: stable;
}

html,
body {
  min-width: 320px;
  overflow-x: clip;
}

#site-header {
  isolation: isolate;
}

#site-header .brand,
#site-header .menu,
.hero-copy,
.hero-visual,
.hero-banner-title,
.hero-mini-metrics,
.hero-stat-pill,
.project-card,
.card,
.panel {
  min-width: 0;
}

/* Prevent the visual overlays inside hero banners from overlapping on phones. */
@media (max-width: 640px) {
  .hero-banner {
    min-height: 210px;
  }

  .hero-banner img {
    height: 210px !important;
  }

  .hero-banner-bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 8px !important;
  }

  .hero-mini-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    flex-direction: row !important;
    gap: 6px !important;
  }

  .hero-mini-metrics div {
    min-width: 0;
    text-align: right !important;
  }

  .hero-mini-metrics b {
    font-size: .88rem !important;
  }

  .hero-mini-metrics small {
    display: block;
    font-size: .61rem !important;
    line-height: 1.15;
  }

  .hero-banner-title strong {
    display: block;
    max-width: 19ch;
  }
}

@media (max-width: 480px) {
  #site-header .nav-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .hero-banner-top {
    padding: 9px 10px !important;
  }

  .hero-stack {
    display: none !important;
  }

  .hero-banner-bottom {
    padding: 9px 10px 10px !important;
  }

  .hero-banner-title strong {
    font-size: .84rem !important;
  }
}

/* Checkout generated by js/shop/shop.js. Keep the form usable at every width. */
body.checkout-open {
  overflow: hidden;
  touch-action: none;
}

.checkout-dialog {
  max-height: calc(100dvh - 36px);
  overflow: auto;
  overscroll-behavior: contain;
}

.checkout-form-grid {
  display: grid;
  gap: 12px;
}

.checkout-form-grid--two {
  grid-template-columns: 1fr 1fr;
}

.checkout-form-grid--three {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 640px) {
  .checkout-backdrop {
    padding: 10px !important;
    align-items: flex-end !important;
  }

  .checkout-dialog {
    width: 100% !important;
    max-height: calc(100dvh - 20px);
  }

  .checkout-form-grid--two,
  .checkout-form-grid--three {
    grid-template-columns: 1fr !important;
  }

  .checkout-actions .btn {
    width: 100%;
  }
}