/* ======================================================================
   Guide (/community) and Crews (/crews): page banner, framed cards, crew podium and ladder.
   Built only on the site's theme tokens, so Red, Black and Light all work.
   ====================================================================== */

/* ---------- page banner (a shorter version of the home hero) ---------- */
.page-hero { position: relative; overflow: hidden; min-height: clamp(220px, 24vw, 300px); margin-bottom: 18px; }
.page-hero-inner { justify-content: center; gap: 10px; }
.page-hero .hero-title { font-size: clamp(2rem, 4vw, 3.3rem); }
.page-hero .hero-copy { max-width: 560px; }
.page-hero .hero-stats { margin-top: 2px; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.page-hero-actions:empty { display: none; }
.page-hero .btn-ghost:where(:not(:hover, :focus-visible)) { --b-frame: rgba(255, 255, 255, .85); --b-fill: rgba(0, 0, 0, .6); --b-ink: #fff; }

/* ---------- shared framed card: white frame, chamfered corners, plate fill ---------- */
.flow-card, .info-card, .elo-fact, .rank-tile {
  position: relative; isolation: isolate; min-width: 0;
}
.flow-card::before, .info-card::before, .elo-fact::before, .rank-tile::before,
.flow-card::after, .info-card::after, .elo-fact::after, .rank-tile::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.flow-card::before, .info-card::before {
  inset: 0; z-index: -2; background: var(--frame);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.flow-card::after, .info-card::after {
  inset: 2px; background: linear-gradient(180deg, var(--plate-2), var(--plate) 70%); box-shadow: inset 0 0 0 1px var(--rim), inset 0 0 40px var(--inset-shadow);
  clip-path: polygon(calc(var(--ch) - 1px) 0, 100% 0, 100% calc(100% - var(--ch) + 1px), calc(100% - var(--ch) + 1px) 100%, 0 100%, 0 calc(var(--ch) - 1px));
}
.flow-card h2, .flow-card h3, .info-card h3 {
  margin: 0 0 6px; font: 400 1.2rem/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 0 var(--ts-color);
}
.flow-card p, .info-card p { margin: 0; color: var(--text-soft, var(--text)); font-size: .9rem; line-height: 1.45; }

/* ---------- Guide: match flow ---------- */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.flow-card { padding: 18px 16px 16px; }
.flow-ic, .info-ic {
  display: grid; width: 42px; height: 42px; padding: 9px; margin-bottom: 10px; color: var(--hot-ink, #fff); background: var(--hot);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
/* a slanted arrow between the steps on wide screens */
@media (min-width: 1001px) {
  .flow-card:not(:last-child) { margin-right: 4px; }
  .flow-card:not(:last-child) h2::after { content: ""; position: absolute; top: 50%; right: -15px; width: 12px; height: 18px; z-index: 2;
    background: var(--hot); clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateY(-50%); }
}

.guide-grid { margin-bottom: 18px; }
.guide-grid .panel h2 { margin-top: 0; }
.elo-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.elo-fact { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.elo-fact::before, .rank-tile::before { inset: 0; background: rgba(var(--tint-rgb), .2); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.elo-fact::after, .rank-tile::after { inset: 1px; background: var(--plate-2); clip-path: polygon(7.5px 0, 100% 0, 100% calc(100% - 7.5px), calc(100% - 7.5px) 100%, 0 100%, 0 7.5px); }
.elo-fact b { font: 400 1.7rem/1 var(--display); letter-spacing: .03em; color: var(--hot-text, var(--hot)); text-shadow: 0 2px 0 var(--ts-color); }
.elo-fact span { color: var(--muted); font: 800 .64rem/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; }

.rank-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.rank-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px 12px; text-align: center; }
.rank-tile .hexb { width: 42px; height: 48px; }
.rank-tile .hexb b { font-size: 1.35rem; padding-top: 3px; }
.rank-tile-name { font: 400 .9rem/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 0 var(--ts-color); overflow-wrap: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rank-tile-elo { color: var(--muted); font: 800 .66rem/1 var(--label); letter-spacing: .08em; }

.rules-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin: 4px 0 14px; padding: 0; list-style: none; }
.rules-list li { position: relative; padding: 8px 10px 8px 22px; font-size: .9rem; line-height: 1.4; background: rgba(var(--tint-rgb), .05); box-shadow: inset 2px 0 0 rgba(var(--tint-rgb), .35); }
.rules-list li::before { content: ""; position: absolute; left: 9px; top: 15px; width: 6px; height: 6px; background: var(--hot); transform: rotate(45deg); }
.rules-list li.rule-hot { font-weight: 700; background: rgba(var(--hot-rgb), .12); box-shadow: inset 3px 0 0 var(--hot); }
.rules-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; color: var(--text); font-size: .88rem; line-height: 1.45;
  background: rgba(var(--hot-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--hot-rgb), .4); }
.rules-note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--hot-text, var(--hot)); }

.info-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.info-card { padding: 18px 16px 16px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-tiles { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}
@media (max-width: 760px) {
  .info-cards { grid-template-columns: 1fr; }
  .rules-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .flow, .elo-facts { grid-template-columns: 1fr; }
  .page-hero { min-height: 0; }
}
@media (forced-colors: active) {
  .flow-card, .info-card, .elo-fact, .rank-tile { border: 1px solid CanvasText; }
}