/* Sports 803 Events Hub — frontend styles
   Design: dark broadcast scoreboard. One accent color (red) is reserved for
   LIVE state and the primary action; every other status reads through a
   muted slate/amber so LIVE stays the thing the eye jumps to. */

.s803-events{
  --s803-bg:#0a0d13;
  --s803-panel:#0f1420;
  --s803-card-a:#141b28;
  --s803-card-b:#0c111a;
  --s803-line:#232d3e;
  --s803-line-soft:rgba(255,255,255,.06);
  --s803-text:#eef1f6;
  --s803-muted:#8b97ab;
  --s803-muted-2:#5c6980;
  --s803-red:#ef3f45;
  --s803-red-soft:rgba(239,63,69,.14);
  --s803-amber:#f5a524;
  --s803-amber-soft:rgba(245,165,36,.14);
  --s803-radius:16px;
  --s803-radius-sm:10px;

  background:var(--s803-bg);
  color:var(--s803-text);
  font-family:'Barlow Condensed',system-ui,-apple-system,'Segoe UI',sans-serif;
  padding:clamp(16px,3.5vw,32px);
  border-top:3px solid var(--s803-red);
  border-radius:var(--s803-radius);
}

/* Edge-to-edge on phones so the hub reads as part of the page, not a boxed
   widget dropped into it. Breaks out of whatever padded container the
   theme wraps shortcode content in. Desktop keeps the panel look. */
@media(max-width:759px){
  .s803-events{
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    border-radius:0;
    border-left:0;
    border-right:0;
    padding-left:16px;
    padding-right:16px;
    box-sizing:border-box;
  }
}

/* ---------- filters ---------- */
.s803-filters{display:grid;gap:10px;margin-bottom:24px}
.s803-search{
  background:var(--s803-panel) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%238b97ab" stroke-width="1.8"><circle cx="6.5" cy="6.5" r="5"/><path d="M14 14l-3.5-3.5" stroke-linecap="round"/></svg>') no-repeat 14px center;
  background-size:16px;
  color:var(--s803-text);
  border:1px solid var(--s803-line);
  border-radius:var(--s803-radius-sm);
  padding:11px 14px 11px 40px;
  min-height:46px;
  font:500 15px/1.2 'Barlow Condensed',sans-serif;
  letter-spacing:.01em;
}
.s803-search::placeholder{color:var(--s803-muted-2)}
.s803-date{
  background:var(--s803-panel) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" fill="none" stroke="%238b97ab" stroke-width="1.8"><path d="M1 1l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 14px center;
  background-size:12px;
  color:var(--s803-text);
  border:1px solid var(--s803-line);
  border-radius:var(--s803-radius-sm);
  padding:11px 34px 11px 14px;
  min-height:46px;
  font:500 15px/1.2 'Barlow Condensed',sans-serif;
  appearance:none;
  -webkit-appearance:none;
}
.s803-search:focus-visible,.s803-date:focus-visible{outline:2px solid var(--s803-red);outline-offset:1px}

.s803-sport-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.s803-sport-tabs button{
  background:var(--s803-panel);
  color:var(--s803-muted);
  border:1px solid var(--s803-line);
  border-radius:999px;
  padding:8px 15px;
  white-space:nowrap;
  cursor:pointer;
  font:500 13px/1 'Barlow Condensed',sans-serif;
  letter-spacing:.02em;
  transition:background-color .15s,border-color .15s,color .15s;
}
.s803-sport-tabs button.is-active{background:var(--s803-red);border-color:var(--s803-red);color:#fff}
.s803-sport-tabs button:hover:not(.is-active){border-color:var(--s803-muted-2);color:var(--s803-text)}
.s803-sport-tabs button:focus-visible{outline:2px solid var(--s803-red);outline-offset:2px}

/* ---------- sections ---------- */
.s803-section{margin:26px 0}
.s803-section h2{
  font:600 22px/1.1 'Barlow Condensed',sans-serif;
  letter-spacing:.01em;
  margin:0 0 14px;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.s803-section h2 span{font:500 13px/1 'Barlow Condensed',sans-serif;color:var(--s803-muted-2)}
.s803-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

.s803-empty{
  padding:28px 20px;
  text-align:center;
  border:1px dashed var(--s803-line);
  border-radius:var(--s803-radius-sm);
  color:var(--s803-muted);
  font:500 14px/1.4 'Barlow Condensed',sans-serif;
}

/* ---------- card ---------- */
.s803-event-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px 16px 14px;
  background:linear-gradient(165deg,var(--s803-card-a),var(--s803-card-b));
  border:1px solid var(--s803-line);
  border-left:3px solid var(--s803-muted-2);
  border-radius:var(--s803-radius);
  color:var(--s803-text);
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.s803-event-card:hover,.s803-event-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.4);
  outline:2px solid var(--s803-red);
  outline-offset:2px;
}
.s803-event-card:hover .s803-action::after,.s803-event-card:focus-visible .s803-action::after{transform:rotate(-45deg) translate(1px,-1px)}

.s803-status-live,.s803-status-halftime{border-left-color:var(--s803-red)}
.s803-status-starting_soon,.s803-status-postponed,.s803-status-suspended{border-left-color:var(--s803-amber)}
.s803-status-cancelled{border-left-color:var(--s803-muted-2);opacity:.72}

/* head: status badge + sport/competition */
.s803-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.s803-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--s803-line);
  color:var(--s803-muted);
  font:600 12px/1.4 'Barlow Condensed',sans-serif;
  letter-spacing:.03em;
  white-space:nowrap;
}
.s803-dot{width:6px;height:6px;border-radius:50%;background:var(--s803-muted-2)}
.s803-status-live .s803-badge,.s803-status-halftime .s803-badge{background:var(--s803-red-soft);border-color:rgba(239,63,69,.4);color:#ff9599}
.s803-status-live .s803-dot,.s803-status-halftime .s803-dot{background:var(--s803-red);box-shadow:0 0 0 4px rgba(239,63,69,.22);animation:s803-pulse 1.5s infinite}
.s803-status-starting_soon .s803-badge{background:var(--s803-amber-soft);border-color:rgba(245,165,36,.4);color:var(--s803-amber)}
.s803-status-starting_soon .s803-dot{background:var(--s803-amber)}

.s803-badge-countdown{flex-direction:column;align-items:flex-start;gap:1px;padding:5px 10px;background:rgba(255,255,255,.05)}
.s803-badge-countdown small{color:var(--s803-muted-2);font:600 9px/1 'Barlow Condensed',sans-serif;letter-spacing:.06em}
.s803-badge-countdown b{font:700 13px/1.2 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums;color:var(--s803-text)}

.s803-comp-pill{
  display:inline-flex;align-items:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(139,109,255,.12);
  border:1px solid rgba(139,109,255,.4);
  color:#b9a6ff;
  font:600 11.5px/1.4 'Barlow Condensed',sans-serif;
  letter-spacing:.02em;
  white-space:nowrap;
  max-width:52%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.s803-center-vs{border:0}
.s803-center-vs span{color:var(--s803-muted);font:600 15px/1 'Barlow Condensed',sans-serif;letter-spacing:.04em}

.s803-trophy{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;background:var(--s803-muted-2);mask:radial-gradient(circle at 50% 30%,transparent 3px,#000 3.5px) top/100% 60% no-repeat,linear-gradient(#000,#000) bottom/40% 40% no-repeat;-webkit-mask:radial-gradient(circle at 50% 30%,transparent 3px,#000 3.5px) top/100% 60% no-repeat,linear-gradient(#000,#000) bottom/40% 40% no-repeat}
.s803-watchcount{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--s803-line);
  color:var(--s803-text);
  font:600 12px/1 'Barlow Condensed',sans-serif;
  flex-shrink:0;
}
.s803-play{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--s803-text)}

/* scoreboard row */
.s803-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.s803-team{display:grid;gap:7px;justify-items:center;text-align:center}
.s803-team strong{font:600 16px/1.15 'Barlow Condensed',sans-serif;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s803-logo{width:44px;height:44px;display:grid;place-items:center;background:#1a2434;border-radius:50%;overflow:hidden;border:1px solid var(--s803-line)}
.s803-logo img{width:100%;height:100%;object-fit:contain}
.s803-logo i{width:16px;height:16px;border-radius:2px;background:var(--s803-muted-2);opacity:.5}

.s803-center{display:grid;justify-items:center;gap:3px;min-width:66px;padding:6px 2px;border-top:1px solid var(--s803-line-soft);border-bottom:1px solid var(--s803-line-soft)}
.s803-center small{color:var(--s803-muted-2);font:500 10.5px/1 'Barlow Condensed',sans-serif;letter-spacing:.05em}
.s803-score{display:flex;align-items:baseline;gap:6px;font:700 28px/1 'Barlow Condensed',sans-serif;font-variant-numeric:tabular-nums}
.s803-score i{font-style:normal;color:var(--s803-muted-2);font-size:16px}
.s803-center-live{color:#ff9599}
.s803-center-live small{color:#ff9599}
.s803-livedot{width:8px;height:8px;border-radius:50%;background:var(--s803-red);box-shadow:0 0 0 4px rgba(239,63,69,.22);animation:s803-pulse 1.5s infinite}
.s803-center-countdown .s803-countdown{font:600 15px/1.2 'Barlow Condensed',sans-serif}
.s803-center-note small{color:var(--s803-muted);font-size:11.5px}

/* footer: meta + action */
.s803-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--s803-line-soft)}
.s803-meta{color:var(--s803-muted);font:500 13px/1.2 'Barlow Condensed',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s803-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#fff;
  background:var(--s803-red);
  padding:7px 13px;
  border-radius:999px;
  font:600 12.5px/1 'Barlow Condensed',sans-serif;
  letter-spacing:.02em;
  white-space:nowrap;
  flex-shrink:0;
}
.s803-action::after{content:'';width:6px;height:6px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);transition:transform .18s ease}
.s803-status-finished .s803-action,.s803-status-postponed .s803-action,.s803-status-cancelled .s803-action,.s803-status-suspended .s803-action,.s803-status-unknown .s803-action{
  background:transparent;border:1px solid var(--s803-line);color:var(--s803-text);
}
.s803-status-finished .s803-action::after,.s803-status-postponed .s803-action::after,.s803-status-cancelled .s803-action::after,.s803-status-suspended .s803-action::after,.s803-status-unknown .s803-action::after{
  border-color:var(--s803-text);
}

@keyframes s803-pulse{50%{opacity:.4}}

@media(prefers-reduced-motion:reduce){
  .s803-event-card{transition:none}
  .s803-dot,.s803-livedot{animation:none}
  .s803-action::after{transition:none}
}

/* Compact spacing so two cards comfortably fit a phone width. */
@media(max-width:479px){
  .s803-event-card{padding:12px 12px 11px;gap:10px;border-radius:12px}
  .s803-badge{padding:3px 8px;font-size:10.5px}
  .s803-comp-pill{font-size:10px;padding:3px 8px}
  .s803-logo{width:34px;height:34px}
  .s803-team strong{font-size:13px}
  .s803-score{font-size:20px}
  .s803-card-foot{padding-top:9px}
  .s803-meta{font-size:11px}
  .s803-action,.s803-watchcount{padding:5px 9px;font-size:11px}
}

@media(min-width:760px){
  .s803-filters{grid-template-columns:minmax(220px,1fr) 150px}
  .s803-sport-tabs{grid-column:1/-1}
  .s803-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1180px){
  .s803-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- categories grid ([sports803_categories], standalone) ---------- */
.s803-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.s803-cat-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:20px 8px;
  background:linear-gradient(165deg,var(--s803-card-a),var(--s803-card-b));
  border:1px solid var(--s803-line);
  border-radius:var(--s803-radius-sm);
  color:var(--s803-text);
  text-decoration:none;
  font:600 14px/1.15 'Barlow Condensed',sans-serif;
  text-align:center;
  transition:transform .15s ease,border-color .15s ease;
}
.s803-cat-tile:hover,.s803-cat-tile:focus-visible{transform:translateY(-2px);border-color:var(--s803-red);outline:none}
.s803-cat-icon{font-size:30px;line-height:1}
.s803-cat-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(min-width:760px){.s803-cat-grid{grid-template-columns:repeat(5,1fr)}}