/* TenantBridge — mobile-only overrides (max-width: 767px via index.html media)
   Loaded after landing.css; keeps small-screen tweaks out of the main sheet. */

/* Hero trust row: tighter rhythm, readable line length on narrow screens */
.hero-trust {
  gap: 1rem 1rem;
}
.hero-trust-item {
  flex: 1 1 45%;
  min-width: min(100%, 12rem);
}

/* Workflow: vertical rhythm without the timeline rail */
.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 1.75rem;
}
.step-num {
  margin-bottom: 0;
}
.step-body {
  padding-top: 0;
  width: 100%;
}

/* Section pills: less likely to wrap awkwardly */
.section-label {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

/* Metrics strip: stacked layout reads as distinct rows */
.metrics-strip {
  text-align: center;
}
.metric-item + .metric-item {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Footer */
.footer-legal,
.footer-links a {
  font-size: 0.75rem;
}
.footer-inner {
  gap: 1.25rem;
}

/* Modal close: minimum tap target (44×44) */
.ld-modal-close {
  min-width: 44px;
  min-height: 44px;
}

/* Nav dropdown — inline sub-list in mobile drawer */
.nav-dropdown-panel {
  position: static;
  transform: none;
  min-width: 0;
  width: 100%;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.nav-dropdown-panel[data-open] {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding-top: .125rem;
}
.nav-dropdown-panel a {
  padding: .5rem .75rem .5rem 1.25rem;
  font-size: .9375rem;
  white-space: normal;
}
.nav-dd-icon {
  background: var(--bg-muted);
}

/* Show hero dashboard mockup on small screens (landing.css hides it below 768px) */
.hero-panel {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile nav drawer: 44px tap targets; Workloads sub-links always visible when drawer open */
.nav-links[data-open] > li > a,
.nav-links[data-open] > li > button.nav-dropdown-btn {
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.nav-links[data-open] > li > button.nav-dropdown-btn {
  width: 100%;
  justify-content: flex-start;
}
.nav-links[data-open] .nav-dropdown-panel {
  display: flex !important;
  flex-direction: column;
  gap: .125rem;
  padding-top: .125rem;
}
.nav-links[data-open] .nav-dropdown-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-links[data-open] .nav-cta-mobile .btn {
  min-height: 44px;
  width: 100%;
}

/* Workload cards: extra vertical rhythm when stacked */
.workload-cards {
  gap: 1.25rem;
}

/* Nav drawer in dark mode */
@media (prefers-color-scheme: dark) {
  .nav-links[data-open] {
    background: rgba(15, 23, 42, 0.97);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .nav-links[data-open] a {
    color: #cbd5e1;
  }
  .nav-links[data-open] a:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
  }
  .nav-cta-mobile {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
}

/* ── Narrow phones (≤480px) — dashboard mockup, hero bridge, chips, demo form ─ */
@media (max-width: 480px) {
  .hero-bridge {
    align-items: center;
    text-align: center;
  }
  .hb-platform {
    align-items: center;
    width: 100%;
  }
  .hb-platform-info {
    align-items: center;
  }
  .hb-icons {
    justify-content: center;
  }
  .hb-connector {
    align-self: center;
  }

  .hero-panel {
    padding: 1rem;
  }
  .hero-panel-header {
    flex-wrap: wrap;
    row-gap: .375rem;
    margin-bottom: .875rem;
    padding-bottom: .625rem;
  }
  .hp-title {
    font-size: .625rem;
  }
  .hp-badge {
    font-size: .625rem;
  }

  .ht-top {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .ht-legend {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .35rem;
  }
  .ht-leg {
    white-space: normal;
  }
  .ht-period-lbl,
  .ht-period-faux,
  .ht-leg {
    font-size: .55rem;
  }

  .hp-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
  .hp-row-name {
    font-size: .75rem;
    white-space: normal;
  }
  .hp-row-sub {
    font-size: .625rem;
  }
  .hp-status {
    align-self: flex-start;
  }
  .hp-progress-bar {
    width: 100%;
    margin-top: .125rem;
  }
  .hp-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
  }

  .step-tags {
    flex-wrap: wrap;
    gap: 6px;
  }
  .step-tags .tag {
    max-width: 100%;
    box-sizing: border-box;
  }

  .ld-form input.ld-input {
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
  }
  .ld-form textarea.ld-input {
    min-height: 7rem;
    width: 100%;
    box-sizing: border-box;
  }
  .ld-form button[type="submit"],
  .ld-form #ld-demo-submit {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }
}