/**
 * Public marketing site — responsive system layer (mobile → large desktop).
 * Requires body.tb-public-site (marketing_start.php). Loads after marketing-premium.css.
 */

html {
  overflow-x: clip;
}

body.tb-public-site {
  overflow-x: clip;
}

body.tb-public-site .container {
  padding-left: max(var(--tb-space-4, 16px), env(safe-area-inset-left, 0px));
  padding-right: max(var(--tb-space-4, 16px), env(safe-area-inset-right, 0px));
}

@media (min-width: 1024px) {
  body.tb-public-site .container {
    padding-left: var(--tb-space-5, 20px);
    padding-right: var(--tb-space-5, 20px);
  }
}

/* Marketing premium grids — avoid rigid min columns on phones */
@media (max-width: 639px) {
  body.tb-public-site .tb-mp-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.tb-public-site .tb-mp-cta {
    flex-direction: column;
    align-items: stretch;
  }

  body.tb-public-site .tb-mp-cta .btn,
  body.tb-public-site .tb-mp-cta a.btn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  body.tb-public-site .topbar-inner {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }

  body.tb-public-site .nav a,
  body.tb-public-site .nav-more > summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  body.tb-public-site .tb-mp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1400px) {
  body.tb-public-site .tb-mp-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* Demo sell page */
@media (max-width: 639px) {
  body.tb-public-site .tb-demo-sell-form-row {
    flex-direction: column !important;
  }

  body.tb-public-site .tb-demo-sell-form-actions--inline {
    width: 100%;
  }

  body.tb-public-site .tb-demo-sell-form-actions .btn {
    width: 100%;
    min-height: 46px;
  }
}

/* Media and screenshot blocks */
body.tb-public-site img,
body.tb-public-site video,
body.tb-public-site svg {
  max-width: 100%;
  height: auto;
}

body.tb-public-site .tb-tour-hero-title {
  font-size: clamp(1.65rem, 5vw, 2.75rem);
  line-height: 1.08;
  margin: 10px 0 12px;
  letter-spacing: -0.02em;
}

@media (max-width: 639px) {
  body.tb-public-site .tb-toolbar--responsive,
  body.tb-public-site form[role="search"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.tb-public-site .tb-toolbar--responsive .field,
  body.tb-public-site form[role="search"] .field {
    max-width: none !important;
    width: 100%;
  }

  body.tb-public-site .section .grid-2,
  body.tb-public-site .section .grid {
    grid-template-columns: 1fr !important;
  }

  body.tb-public-site .input,
  body.tb-public-site textarea.input,
  body.tb-public-site select.input {
    min-height: 44px;
    font-size: 16px;
  }

  body.tb-public-site textarea.input {
    min-height: 120px;
  }
}