/* ==========================================================================
   Competition page (single-sl_competition.php) — Competition.dc.html 1:1.
   Breakpoints from the prototype: 1200 (5 player cols), 1100 (matches/standings split), 1000 (scorers split, news 2-col),
   900 (about split, match meta col), 700 (3 player cols), 600 (news thumb), 560 (facts 2-col / 18px).
   ========================================================================== */

/* ---- header ---- */
.sl-comp__header{background:#fff;border-bottom:1px solid var(--line)}
.sl-comp__header-in{padding-top:16px;padding-bottom:0;display:flex;flex-direction:column;gap:14px}
.sl-comp__header .sl-comp__crumbs{margin:0;gap:8px;flex-wrap:wrap}
.sl-comp__header .sl-comp__crumbs a{color:var(--faint)}
.sl-comp__header .sl-comp__crumbs a:hover{color:#111}
.sl-comp__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.sl-comp__ident{display:flex;align-items:center;gap:18px;min-width:0}
.sl-comp__logo-box{width:72px;height:72px;flex-shrink:0;display:grid;place-items:center;background:#f4f4f2;border:1px solid var(--line);border-radius:var(--r-md)}
.sl-comp__logo{width:52px;height:52px;display:block;object-fit:contain}
.sl-comp__titles{display:flex;flex-direction:column;gap:8px;min-width:0}
.sl-comp__h1{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,2.8vw,42px);line-height:0.9;letter-spacing:-0.01em;text-transform:uppercase}
.sl-comp__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:var(--font-body);font-weight:500;font-size:var(--text-ui);color:#555}
.sl-comp__meta-item{display:flex;align-items:center;gap:7px}
.sl-comp__flag{display:block;width:18px;height:12px;border-radius:1px;background-size:cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)}
.sl-comp__meta-sep{width:1px;height:12px;background:var(--line-strong)}
.sl-comp__meta-data{font-family:var(--font-data);font-weight:600;color:#111}
.sl-comp__meta-strong{font-weight:600;color:#111}
.sl-comp__actions{display:flex;flex-wrap:wrap;gap:8px}
.sl-comp__btn{display:flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:700;font-size:var(--text-ui);letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.sl-comp__btn--dark{background:#0d0d0d;color:#fff}
.sl-comp__btn--light{background:#fff;color:#111;box-shadow:inset 0 0 0 1px var(--line-strong)}
.sl-comp__btn--news{gap:12px;height:42px;letter-spacing:0.06em}
.sl-comp__btn-arrow{display:flex;transition:transform var(--dur) var(--ease)}
.sl-comp__tabs{display:flex;gap:4px;overflow-x:auto;margin-top:4px}
.sl-comp__tab{position:relative;flex-shrink:0;display:flex;align-items:center;height:44px;padding:0 16px;font-family:var(--font-display);font-weight:700;font-size:var(--text-nav);letter-spacing:0.08em;text-transform:uppercase;color:#666;transition:color var(--dur) var(--ease)}
.sl-comp__tab.is-active{color:#111}
.sl-comp__tab-line{position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--accent);border-radius:2px 2px 0 0;opacity:0;transition:opacity var(--dur) var(--ease)}
.sl-comp__tab.is-active .sl-comp__tab-line{opacity:1}

/* ---- main / rows / heads ---- */
.sl-comp__main{padding-top:24px;padding-bottom:56px;display:flex;flex-direction:column;gap:32px}
.sl-comp__row{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.sl-comp__row--top{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.sl-comp__row--mid{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.sl-comp__row--single{grid-template-columns:minmax(0,1fr)}
.sl-comp__sec{min-width:0;display:flex;flex-direction:column}
.sl-comp__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.sl-comp__head--plain{justify-content:flex-start;gap:14px}
.sl-comp__head-l{display:flex;align-items:center;gap:14px;min-width:0}
.sl-comp__bar{width:5px;height:30px;background:var(--accent);border-radius:2px;flex-shrink:0}
.sl-comp__h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:0;text-transform:uppercase;line-height:1;white-space:nowrap}
.sl-comp__head-l .sl-comp__h2{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sl-comp__h2--wrap{white-space:normal}
.sl-comp__sub{font-family:var(--font-data);font-weight:500;font-size:var(--text-ui);color:#666}
.sl-comp__more{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:var(--text-ui);letter-spacing:0.06em;text-transform:uppercase;color:#444;white-space:nowrap;transition:color var(--dur) var(--ease)}
.sl-comp__box{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.sl-comp__panel[hidden],.sl-comp__extra,[data-comp-show][hidden]{display:none}
.sl-comp--all .sl-comp__extra{display:contents}
.sl-comp__empty{padding:36px 16px;text-align:center;font-family:var(--font-body);font-size:var(--text-nav);color:var(--muted)}
.sl-comp__cta{height:46px;display:flex;align-items:center;justify-content:center;gap:10px;background:#0d0d0d;color:#fff;font-family:var(--font-display);font-weight:700;font-size:var(--text-ui);letter-spacing:0.08em;text-transform:uppercase;transition:background var(--dur) var(--ease)}

/* ---- matches ---- */
.sl-comp__live{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:var(--text-ui);letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.sl-comp__live[hidden]{display:none}
.sl-comp__live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-out infinite}
.sl-comp__days{display:flex;gap:4px;padding:4px;background:#e9e9e6;border-radius:var(--r-sm)}
.sl-comp__day{display:flex;align-items:center;height:30px;padding:0 12px;border:0;cursor:pointer;border-radius:4px;background:transparent;color:#555;font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.sl-comp__day.is-active{background:#fff;color:#111}

/* ---- standings (summary cols: 28px | name | 44px × n) ---- */
.sl-comp__table{--tcols:28px minmax(0,1fr) repeat(var(--n),44px)}
.sl-comp__thead{display:grid;grid-template-columns:var(--tcols);gap:0 8px;align-items:center;height:38px;padding:0 14px;background:#f1f1ef;border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);letter-spacing:0.1em;text-transform:uppercase;color:#555}
.sl-comp__thead .sl-comp__tc{text-align:center}
.sl-comp__trow{position:relative;display:grid;grid-template-columns:var(--tcols);gap:0 8px;align-items:center;height:50px;padding:0 14px;border-bottom:1px solid var(--line);background:#fff;transition:background var(--dur) var(--ease)}
.sl-comp__tzone{position:absolute;left:0;top:0;bottom:-1px;width:3px;background:transparent}
.sl-comp__tzone--q,.sl-comp__legend-dot.sl-comp__tzone--q{background:#1f9d55}.sl-comp__tzone--e,.sl-comp__legend-dot.sl-comp__tzone--e{background:#1d4ed8}.sl-comp__tzone--c,.sl-comp__legend-dot.sl-comp__tzone--c{background:#d97706}.sl-comp__tzone--r,.sl-comp__legend-dot.sl-comp__tzone--r{background:var(--accent)}
.sl-comp__tpos{font-family:var(--font-data);font-weight:600;font-size:var(--text-nav);color:#111}
.sl-comp__tteam{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.sl-comp__tlogo{width:24px;height:24px;flex-shrink:0;display:block;background-size:contain;background-repeat:no-repeat;background-position:center}
.sl-comp__tlogo--flag{height:16px;border-radius:2px;background-size:cover}
.sl-comp__tinit{width:24px;height:24px;font-size:8px}
.sl-comp__tname{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur) var(--ease)}
.sl-comp__trow .sl-comp__tc{font-family:var(--font-data);font-weight:500;font-size:var(--text-nav);text-align:center;color:#555}
.sl-comp__trow .sl-comp__tc--bold{font-weight:600;color:#111}
.sl-comp__legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 14px;font-family:var(--font-body);font-size:var(--text-xs);color:var(--faint)}
.sl-comp__legend-item{display:flex;align-items:center;gap:6px}
.sl-comp__legend-dot{position:static;width:8px;height:8px;border-radius:2px}

/* ---- scorers ---- */
.sl-comp__shead{display:grid;grid-template-columns:34px minmax(0,1fr) 64px;gap:12px;align-items:center;height:38px;padding:0 16px;background:#f1f1ef;border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);letter-spacing:0.1em;text-transform:uppercase;color:#555}
.sl-comp__shead-v{text-align:right}
.sl-comp__scorer{display:grid;grid-template-columns:34px minmax(0,1fr) 64px;gap:12px;align-items:center;height:58px;padding:0 16px;border-bottom:1px solid var(--line)}
.sl-comp__scorer:last-child{border-bottom-color:transparent}
.sl-comp__snum{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1;color:#8f8f8b}
.sl-comp__scorer:first-of-type .sl-comp__snum,.sl-comp__scorer:first-of-type .sl-comp__sval{color:var(--accent)}
.sl-comp__splayer{display:flex;align-items:center;gap:12px;min-width:0}
.sl-comp__sphoto{width:40px;height:40px;flex-shrink:0;border-radius:var(--r-sm);background-color:#eeeeeb;background-size:cover;background-position:50% 30%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:var(--text-ui);color:#666}
.sl-comp__stext{display:flex;flex-direction:column;gap:3px;min-width:0}
.sl-comp__sname{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur) var(--ease)}
.sl-comp__steam{font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-comp__sval{font-family:var(--font-data);font-weight:600;font-size:18px;text-align:right;color:#111}

/* ---- featured players ---- */
.sl-comp__players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sl-comp__player{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color var(--dur) var(--ease)}
.sl-comp__pmedia{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#161616}
.sl-comp__pimg{position:absolute;inset:0;display:block;background-size:cover;background-position:50% 30%;transition:transform var(--dur-img) var(--ease)}
.sl-comp__ppos{position:absolute;left:8px;top:8px;height:22px;padding:0 8px;display:flex;align-items:center;border-radius:var(--r-xs);background:rgba(255,255,255,0.92);font-family:var(--font-display);font-weight:700;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:#111}
.sl-comp__pbody{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;min-width:0}
.sl-comp__pname{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.05;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur) var(--ease)}
.sl-comp__pteam{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-comp__plogo{display:block;width:14px;height:14px;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-position:center}

/* ---- news ---- */
.sl-comp__news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start}

/* ---- about + facts ---- */
.sl-comp__about{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.sl-comp__about--single{grid-template-columns:minmax(0,1fr)}
.sl-comp__about-box{padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.sl-comp__about-title{margin:0 0 10px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:0;text-transform:uppercase;line-height:1}
.sl-comp__about-text,.sl-comp__about-text p{margin:0;font-family:var(--font-body);font-size:var(--text-body);line-height:1.6;color:#444;text-wrap:pretty}
.sl-comp__about-text p+p{margin-top:10px}
.sl-comp__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sl-comp__fact{display:flex;flex-direction:column;gap:6px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.sl-comp__fact-v{font-family:var(--font-data);font-weight:600;font-size:22px;line-height:1.1;color:#111;overflow-wrap:anywhere}
.sl-comp__fact-v--accent{color:var(--accent)}
.sl-comp__fact-l{font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);letter-spacing:0.1em;text-transform:uppercase;color:#666}


/* ---- responsive ---- */
@media (max-width:1199px){.sl-comp__players{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1099px){.sl-comp__row--top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:999px){.sl-comp__row--mid,.sl-comp__news{grid-template-columns:minmax(0,1fr)}}
@media (max-width:899px){.sl-comp__about{grid-template-columns:minmax(0,1fr)}}
@media (max-width:699px){.sl-comp__players{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.sl-comp__facts{grid-template-columns:repeat(2,minmax(0,1fr))}.sl-comp__fact-v{font-size:18px}}

/* ---- hover ---- */
@media (hover:hover) and (pointer:fine){
  .sl-comp__btn--dark:hover,.sl-comp__cta:hover{background:var(--accent)}
  .sl-comp__btn--dark:hover .sl-comp__btn-arrow,.sl-comp__cta:hover .sl-comp__btn-arrow{transform:translateX(4px)}
  .sl-comp__btn--light:hover{background:#0d0d0d;color:#fff}
  .sl-comp__tab:hover,.sl-comp__day:not(.is-active):hover{color:#111}
  .sl-comp__more:hover{color:var(--accent)}
  .sl-comp__trow:hover{background:#f7f7f5}
  .sl-comp__trow:hover .sl-comp__tname{color:var(--accent)}
  .sl-comp__sname--link:hover{color:var(--accent)}
  .sl-comp__player:hover{border-color:#111}
  .sl-comp__player:hover .sl-comp__pimg{transform:scale(1.04)}
  .sl-comp__player:hover .sl-comp__pname{color:var(--accent)}
}
/* interlinking */
.sl-comp a.is-tl{color:inherit;text-decoration:none}
.sl-comp a.is-tl:hover{color:var(--accent)}

@media (max-width:640px){.sl-comp__h2{white-space:normal;font-size:24px;line-height:1.05}}