/* A3.3 — Page structure + mobile friendliness
   ------------------------------------------
   CSS + light markup edits so pages stop overflowing and feel closer to Faceit.
*/

/* ---------- Topbar responsiveness ---------- */
@media (max-width: 920px){
  .topbar{padding:10px 10px; gap:10px}
  .topbar-left{gap:10px}
  .crumbs-sub{display:none}
  .search-wrap{flex: 1 1 240px; max-width: none}
  .actions{gap:8px}
  .actions .btn.primary .label{display:none}
}
@media (max-width: 720px){
  .search-wrap{display:none}
  .pill.mono{display:none}
  .user-name{display:none}
}

/* ---------- Generic grids ---------- */
.grid{align-items:start}
.grid.grid-1{grid-template-columns: 1fr !important}

/* Two-col content blocks used inside pages */
.page-grid{display:grid; grid-template-columns: minmax(0,1fr) 420px; gap:14px; align-items:start}
@media (max-width: 1180px){
  .page-grid{grid-template-columns: 1fr}
}

/* ---------- Hero / header blocks ---------- */
.hero{overflow:hidden}
.hero-inner{display:grid; gap:12px; align-items:stretch}
/* default 3-col hero */
.hero-inner.hero-3{grid-template-columns: 220px minmax(0,1fr) 360px}
@media (max-width: 1180px){
  .hero-inner.hero-3{grid-template-columns: 200px minmax(0,1fr)}
  .hero-right{grid-column: 1 / -1}
}
@media (max-width: 720px){
  .hero-inner.hero-3{grid-template-columns: 1fr}
  .hero-map{max-width: 220px; justify-self:start}
}

/* Hero score rows should never lock to wide fixed columns */
.hero-score{display:grid; gap:12px}
.hero-score.hero-score-2{grid-template-columns: minmax(0,1fr) 420px}
@media (max-width: 1180px){
  .hero-score.hero-score-2{grid-template-columns: 1fr !important}
}

/* Pills and actions wrap cleanly */
.hero-actions, .hero-pills, .focus-right{flex-wrap:wrap}

/* ---------- Cards / tables for mobile ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.table{min-width: 720px}
@media (max-width: 820px){
  .table{min-width: 640px}
}

/* KPI rows: auto fit */
.kpi-row{display:grid; gap:10px; grid-template-columns: repeat(4, minmax(0,1fr))}
.kpi-row.kpi-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.kpi-row.kpi-5{grid-template-columns: repeat(5, minmax(0,1fr))}
@media (max-width: 980px){
  .kpi-row, .kpi-row.kpi-3, .kpi-row.kpi-5{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 520px){
  .kpi-row, .kpi-row.kpi-3, .kpi-row.kpi-5{grid-template-columns: 1fr}
}

/* Reasons grid: responsive columns */
.reason-grid{display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 720px){
  .reason-grid{grid-template-columns: 1fr}
}

/* Match-grid (used in profile) */
.match-grid{display:grid; grid-template-columns: minmax(0,1fr) 420px; gap:14px; align-items:start}
@media (max-width: 1180px){
  .match-grid{grid-template-columns: 1fr}
}

/* Make long badges not overflow */
.badge, .pill{max-width: 100%; white-space: nowrap; overflow:hidden; text-overflow: ellipsis}

/* Fix select rows / filter bars wrapping */
.filters, .filter-row, .toolbar{flex-wrap:wrap}