/* 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}


/* Generic modal (used by Teams/Tournaments etc.) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;padding:24px;z-index:10000;}
.modal.active{display:flex;}
.modal-box{width:100%;max-width:560px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.55);}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);}
.modal-title{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:4px 6px;}
.modal-close:hover{color:rgba(255,255,255,.82);}
.modal-body{padding:18px;}