/* Rift Lab pages, 2026-10 pass: comfortable width and type, one tier info card, portrait tiles, next-step cards, rune glyphs.
   Loaded last on every Rift Lab view (rift-lab.php), so it only refines what the earlier layers set. Logical properties: it mirrors under dir="rtl". */

/* ---------- width and type ---------- */
.nx-rift-lab-page .riftlab-body > .container { width: min(100% - 32px, 1280px); max-width: 1280px; margin-inline: auto; }
.nx-rift-lab-page .riftlab-body { font-size: 16px; line-height: 1.65; }
.nx-rift-lab-page .rl-hub-head > p,
.nx-rift-lab-page .rl-detail-head > p,
.nx-rift-lab-page .rl-detail-block > p { font-size: 16px; line-height: 1.75; }
.nx-rift-lab-page .rl-hub-head h2 { font-size: clamp(24px, 2.4vw, 30px); }
.nx-rift-lab-page .rl-hub-kicker { font-size: 13px; }
.nx-rift-lab-page .rl-hub-figures span,
.nx-rift-lab-page .rl-hub-lane header p,
.nx-rift-lab-page .rl-hub-tier header p,
.nx-rift-lab-page .rl-hub-cat header p { font-size: 14px; }
.nx-rift-lab-page .rl-hub-chips a,
.nx-rift-lab-page .rl-hub-roster a,
.nx-rift-lab-page .rl-hub-ranked a,
.nx-rift-lab-page .rl-hub-list a { font-size: 15px; }
.nx-rift-lab-page .rl-hub-chips small,
.nx-rift-lab-page .rl-hub-roster small,
.nx-rift-lab-page .rl-hub-ranked small,
.nx-rift-lab-page .rl-detail-roster small,
.nx-rift-lab-page .rl-hub-tierspread li { font-size: 13px; }
.nx-rift-lab-page .rl-hub-source { font-size: 14px; line-height: 1.7; }
.nx-rift-lab-page .rl51-rune-card b { font-size: 16px; }
.nx-rift-lab-page .rl51-rune-card small { font-size: 14px; }
.nx-rift-lab-page .rl70-qa p { font-size: 15.5px; line-height: 1.75; }

/* ---------- champion portraits in lists ---------- */
.rl-portrait {
  flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  background: #0c1218; border: 1px solid rgba(53, 239, 130, .28);
}
.rl-hub-ranked li, .rl-hub-roster li, .rl-hub-list li { align-items: center; }
.rl-hub-ranked li .rl-portrait, .rl-hub-roster li .rl-portrait, .rl-hub-list li .rl-portrait { width: 40px; height: 40px; }

/* ---------- tier list: the single info card under the board ---------- */
.rl-hub[data-hub="tier"] { margin-top: 0; padding: 0; border: 0; background: none; }
.rl-tier-info {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 24px; align-items: start;
  margin-top: 28px; padding: 26px; border: 1px solid var(--rl-border, rgba(55, 239, 129, .18)); border-radius: 20px;
  background: linear-gradient(160deg, var(--rl-panel2, #101820), var(--rl-panel, #0c1218));
}
.rl-tier-info h2 { margin: 0 0 14px; font-size: 24px; line-height: 1.25; }
.rl-tier-info .rl-insight-list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.rl-tier-info .rl-insight-list li { position: relative; padding-inline-start: 18px; font-size: 16px; line-height: 1.7; color: #d7dde3; }
.rl-tier-info .rl-insight-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--rl-green, #35ef82); }
.rl-tier-info p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--rl-muted, #aab4be); }
.rl-tier-info a { color: var(--rl-green, #35ef82); }
.rl-tier-info-facts { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .rl-tier-info { grid-template-columns: 1fr; padding: 20px; } }

/* ---------- related champions as portrait tiles, next steps as cards ---------- */
.rl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.rl-tile {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--rl-border, rgba(55, 239, 129, .18)); background: rgba(255, 255, 255, .03);
  transition: border-color .15s ease, transform .15s ease;
}
.rl-tile:hover, .rl-tile:focus-within { border-color: rgba(53, 239, 130, .6); transform: translateY(-1px); }
.rl-tile .rl-portrait { width: 64px; height: 64px; border-radius: 14px; }
.rl-tile-text { display: grid; gap: 2px; min-width: 0; }
.rl-tile a, .rl-tile .rl-noindex-ref { color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.rl-tile a:hover { text-decoration: underline; }
.rl-tile small { color: var(--rl-muted, #aab4be); font-size: 14px; }
.rl-next-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.rl-next-cards a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--rl-border, rgba(55, 239, 129, .18)); color: #fff; text-decoration: none;
  background: linear-gradient(150deg, rgba(53, 239, 130, .09), rgba(255, 255, 255, .02));
  transition: border-color .15s ease, transform .15s ease;
}
.rl-next-cards a:hover, .rl-next-cards a:focus-visible { border-color: rgba(53, 239, 130, .65); transform: translateY(-1px); }
.rl-next-cards b { font-size: 17px; font-weight: 700; }
.rl-next-cards a::after { content: "\2192"; color: var(--rl-green, #35ef82); font-size: 20px; }
[dir="rtl"] .rl-next-cards a::after { content: "\2190"; }
.rl-art-credit { margin: 16px 0 0; color: var(--rl-muted, #8f9aa5); font-size: 13px; }

/* ---------- collapsed Arabic link list (English pages) ---------- */
.rl-seo-fold { margin-top: 18px; border: 1px solid var(--rl-border, rgba(55, 239, 129, .18)); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.rl-seo-fold > summary { cursor: pointer; padding: 12px 16px; color: var(--rl-muted, #aab4be); font-size: 14px; }
.rl-seo-fold > summary bdi { margin-inline-start: 8px; color: #d7dde3; }
.rl-seo-fold[open] > summary { border-bottom: 1px solid var(--rl-border, rgba(55, 239, 129, .18)); }
.rl-seo-fold > ul { padding: 14px 16px 16px; }

/* ---------- rune glyph (no third-party rune artwork) ---------- */
.rl-rune-glyph {
  --rh: 150; display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  font-size: 18px; font-weight: 800; line-height: 1; color: hsl(var(--rh) 90% 82%);
  background: radial-gradient(circle at 30% 25%, hsl(var(--rh) 70% 40% / .8), hsl(var(--rh) 60% 14%));
  border: 1px solid hsl(var(--rh) 70% 55% / .6); box-shadow: 0 0 14px hsl(var(--rh) 80% 45% / .25);
}
.rl51-rune-hero .rl-rune-glyph { width: 84px; height: 84px; font-size: 36px; }
.rl51-rune-card .rl-rune-glyph { width: 46px; height: 46px; }