/* Shared responsive polish for The Tipping Floor static pages. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
svg,
canvas,
iframe {
  max-width: 100%;
}

a,
button,
[role="button"],
.btn,
.pill,
.filter-pill,
.tab,
.jf,
.nav-link,
.action-link {
  touch-action: manipulation;
}

.brand,
.brand-name,
.hero-headline,
.hero-h1,
.archive-title,
.page-head h1,
.hero h1,
.section-title,
.program-title,
.record-title,
.card-name,
.unit-title,
.unit-group-title,
.tile-title,
.top-story-title,
.nc-title,
.modal-title {
  overflow-wrap: anywhere;
}

.primary-nav,
.top-nav,
.filter-strip-inner,
.pills,
.filter-pills,
.job-filters,
.mast-actions,
.masthead-actions {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.primary-nav::-webkit-scrollbar,
.top-nav::-webkit-scrollbar,
.filter-strip-inner::-webkit-scrollbar,
.pills::-webkit-scrollbar,
.filter-pills::-webkit-scrollbar,
.job-filters::-webkit-scrollbar,
.mast-actions::-webkit-scrollbar,
.masthead-actions::-webkit-scrollbar {
  display: none;
}

@media (min-width: 721px) and (max-width: 1100px) {
  .masthead-top,
  .masthead-inner,
  .mast-inner {
    flex-wrap: wrap;
    align-items: center;
  }

  .masthead-search {
    order: 4;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .filter-strip-inner,
  .top-nav {
    overflow-x: auto;
    white-space: nowrap;
  }

  .primary-nav {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    white-space: normal !important;
  }

  .hero-inner,
  .hero-grid,
  .layout,
  .archive-grid {
    grid-template-columns: 1fr !important;
  }

  .news-grid,
  .equip-ref-grid,
  .issue-grid,
  .grid,
  .unit-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sidebar,
  .archive-sidebar {
    position: static !important;
  }

}

@media (max-width: 720px) {
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .masthead,
  .mast,
  .page-head,
  .hero-band,
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .masthead-inner,
  .mast-inner,
  .masthead-top {
    width: 100%;
    align-items: stretch !important;
  }

  .brand,
  .brand-name {
    min-width: 0;
  }

  .brand-sub,
  .brand-tag {
    max-width: 100%;
  }

  .masthead-right {
    order: 3;
    width: 100%;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .masthead-right .btn {
    justify-content: center;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .masthead-search {
    order: 4;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .mast-actions,
  .masthead-actions,
  .top-nav,
  .filter-strip-inner,
  .pills,
  .filter-pills,
  .job-filters {
    width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .primary-nav {
    width: 100%;
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    gap: 0;
    padding-bottom: 0;
  }

  .mast-actions .btn,
  .masthead-actions .action-link,
  .top-nav a,
  .filter-strip-inner > *,
  .nav-link,
  .pill,
  .filter-pill,
  .jf {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .primary-nav .nav-link {
    flex: 0 1 auto;
    white-space: nowrap;
  }

  .btn,
  .action-link,
  .pill,
  .filter-pill,
  .tab,
  .jf,
  .event-mode-btn,
  .nav-link {
    min-height: 44px;
  }

  .hero,
  .archive-hero {
    padding-top: 36px !important;
    padding-bottom: 32px !important;
  }

  .hero-headline,
  .hero-h1,
  .archive-title,
  .page-head h1,
  .hero h1 {
    font-size: clamp(28px, 9vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.45px !important;
  }

  .hero-sub,
  .hero p,
  .archive-sub,
  .page-head p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .hero-pulse,
  .market-grid,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-stats {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
  }

  .ps-item {
    text-align: left !important;
  }

  .filter-strip,
  .controls-bar {
    position: static !important;
  }

  .toolbar,
  .toolbar-row,
  .toolbar-top,
  .controls-inner,
  .section-head,
  .program-top,
  .record-top,
  .card-row,
  .equip-ref-head,
  .lounge-panel-top,
  .footer-bottom {
    align-items: stretch !important;
  }

  .search,
  .search-wrap,
  .toolbar-search,
  .nl-input,
  .footer-nl input {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .news-grid,
  .equip-ref-grid,
  .issue-grid,
  .grid,
  .unit-group-grid,
  .filters,
  .fact-grid,
  .modal-job-grid {
    grid-template-columns: 1fr !important;
  }

  .top-story,
  .program-card,
  .record-card,
  .sidebar-card,
  .side-card,
  .toolbar,
  .unit-group,
  .modal,
  .modal-box,
  .reg-box,
  .ack-box {
    border-radius: 14px !important;
  }

  .top-story-header,
  .top-story-body,
  .modal-content,
  .modal-body,
  .drawer-body {
    padding: 18px !important;
  }

  .top-story-flag {
    margin-left: 0 !important;
  }

  .award-row,
  .sl,
  .story-card-footer,
  .modal-source-box,
  .footer-nl,
  .modal-actions,
  .modal-event-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .sl {
    grid-template-columns: 1fr !important;
  }

  .sl-thumb {
    display: none !important;
  }

  .lounge-kpis {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
  }

  .lounge-kpi {
    text-align: left !important;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
  }

  .job-search-bar {
    margin-left: 14px !important;
    margin-right: 14px !important;
    width: calc(100% - 28px) !important;
  }

  .job-filters {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .drawer,
  .modal,
  .modal-box,
  .reg-box,
  .ack-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .toast {
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    transform: none;
    text-align: center;
  }

  .unit-group {
    padding: 10px !important;
  }

  .unit-group-head {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .unit-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .unit-table {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent;
    font-size: 12px;
  }

  .unit-table thead {
    display: none;
  }

  .unit-table tbody,
  .unit-table tr,
  .unit-table td {
    display: block;
    width: 100%;
  }

  .unit-table tbody tr.unit-row {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 6px 18px rgba(10,22,40,0.05);
  }

  .unit-table td {
    border-top: 0 !important;
    padding: 7px 0 !important;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    word-break: break-word;
  }

  .unit-table td::before {
    color: var(--muted);
    content: "";
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
  }

  .unit-table td:nth-child(1)::before { content: "Body Type"; }
  .unit-table td:nth-child(2)::before { content: "Body Mfg"; }
  .unit-table td:nth-child(3)::before { content: "Chassis Type"; }
  .unit-table td:nth-child(4)::before { content: "Chassis Mfg"; }
  .unit-table td:nth-child(5)::before { content: "Engine"; }
  .unit-table td:nth-child(6)::before { content: "Transmission"; }
  .unit-table td:nth-child(7)::before { content: "GVW"; }
  .unit-table td:nth-child(8)::before { content: "Stock #"; }
  .unit-table td:nth-child(9)::before { content: "Price"; }
  .unit-table td:nth-child(10)::before { content: "Location"; }
  .unit-table td:nth-child(11)::before { content: "Source"; }

  .unit-detail-row td {
    display: block;
    padding: 0 !important;
  }

  .unit-detail-row td::before {
    content: none !important;
  }
}

.issue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

@media (min-width: 1101px) {
  .page-body > .sidebar {
    align-self: start;
    gap: 16px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    position: static;
  }

  .page-body {
    align-items: start;
  }

  .page-body > .sidebar .widget {
    border-radius: 9px;
  }

  .page-body > .sidebar .widget-head {
    padding: 10px 16px;
  }

  .page-body > .sidebar .widget-body {
    padding: 12px 16px;
  }

  .page-body > .sidebar .stock-row,
  .page-body > .sidebar .trend-item,
  .page-body > .sidebar .rfp-item,
  .page-body > .sidebar .funding-item,
  .page-body > .sidebar .compliance-item,
  .page-body > .sidebar .assoc-item,
  .page-body > .sidebar .event-item {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .page-body > .sidebar .nl-icon {
    font-size: 28px;
    margin-bottom: 6px;
  }

  .page-body > .sidebar .assoc-item:nth-of-type(n+7) {
    display: none;
  }

  #associationsWidget,
  #sidebarNewsletterWidget {
    display: none;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .brand-name,
  .brand {
    font-size: 24px !important;
  }

  .hero-headline,
  .hero-h1,
  .archive-title,
  .page-head h1,
  .hero h1 {
    font-size: clamp(26px, 8.6vw, 31px) !important;
  }

  .hero-pulse,
  .market-grid,
  .stats,
  .page-stats,
  .lounge-kpis {
    grid-template-columns: 1fr !important;
  }

  .masthead-right {
    grid-template-columns: 1fr;
  }

  .unit-table td {
    grid-template-columns: 94px minmax(0, 1fr);
  }
}

/* Homepage guardrails: keep the news column and right rail inside the viewport. */
.page-body {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
}

.page-body > main,
.page-body > .sidebar,
.page-body .top-story,
.page-body .news-grid,
.page-body .story-list,
.page-body .awards-strip,
.page-body .widget,
.page-body .nc,
.page-body .sl,
.page-body .stock-row,
.page-body .trend-item,
.page-body .rfp-item,
.page-body .funding-item,
.page-body .compliance-item,
.page-body .assoc-item,
.page-body .event-item {
  min-width: 0;
}

.page-body .top-story-title,
.page-body .top-story-excerpt,
.page-body .nc-title,
.page-body .sl-title,
.page-body .award-text,
.page-body .trend-title,
.page-body .rfp-detail,
.page-body .funding-title,
.page-body .compliance-title,
.page-body .assoc-hint,
.page-body .event-name,
.page-body .event-loc,
.page-body .stock-name {
  overflow-wrap: anywhere;
}

@media (min-width: 1101px) {
  .page-body {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
    gap: clamp(20px, 2.6vw, 40px);
  }

  .page-body > .sidebar {
    display: flex !important;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 1100px) {
  .page-body {
    grid-template-columns: 1fr !important;
  }
}