/* Sporting Pearls — results.css (Phase 7)
   Public Results page. Base design system (tokens, nav, footer, reveal)
   loads first via safeguarding.css; this sheet adds the results layout:
   compact hero with W/D/L legend, the honest Coming Soon panel, and the
   match-result cards the JS renders once /api/results/ has published
   entries. Matches are grouped by month with a sticky-ish group label.
   Outcome colours: win = lagoon green, draw = slate, loss = muted red —
   they are the only non-brand accents on the page and always carry the
   letter itself (W/D/L) so colour is never the only signal. */

/* ============ HERO ============ */
.res-hero{position:relative;background:linear-gradient(135deg,var(--navy-2) 0%,var(--navy-4) 55%,var(--navy) 100%);color:var(--pearl);padding:clamp(6.5rem,10vh,8.5rem) 0 clamp(3.25rem,6vw,4.5rem);overflow:hidden;}
.res-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(52% 68% at 82% 12%,rgba(245,157,30,.14),transparent 62%),radial-gradient(40% 55% at 8% 88%,rgba(46,111,158,.16),transparent 60%);pointer-events:none;}
.res-hero .wrap{max-width:1040px;}
.res-hero .sec-eyebrow{color:var(--amber);}
.res-hero .sec-eyebrow::before{background:var(--amber);}
.res-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);color:var(--pearl);line-height:1.06;max-width:22ch;margin-top:1rem;}
.res-lede{margin-top:1.25rem;max-width:62ch;font-size:clamp(1rem,1.6vw,1.125rem);color:var(--muted-d);line-height:1.75;}
.res-legend{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.6rem;}
.rl-chip{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,250,247,.82);background:rgba(251,250,247,.06);border:1px solid rgba(251,250,247,.18);border-radius:100px;padding:.45rem 1rem;}
.rl{width:1.5rem;height:1.5rem;border-radius:6px;display:grid;place-items:center;font-size:.72rem;color:var(--pearl);}
.rl-w{background:var(--lagoon);}
.rl-d{background:#5b6678;}
.rl-l{background:#a0463c;}

/* ============ COMING SOON ============ */
.res-list-sec{padding-block:clamp(3rem,6vw,4.5rem);}
.res-soon-card{max-width:760px;margin-inline:auto;background:var(--pearl);border:1.5px dashed rgba(20,40,75,.28);border-radius:var(--radius);padding:clamp(2rem,4.5vw,3.25rem);text-align:center;}
.res-soon-kicker{font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-2);margin-bottom:.8rem;}
.res-soon-card h2{font-size:clamp(1.6rem,3vw,2.15rem);margin-bottom:1rem;}
.res-soon-card p{color:var(--muted);max-width:58ch;margin-inline:auto;line-height:1.75;}
.res-soon-alt{margin-top:1.25rem;font-size:.95rem;}
.res-soon-alt a{color:var(--blue-2);font-weight:600;text-decoration:underline;text-decoration-color:rgba(31,86,126,.35);text-underline-offset:3px;}
.res-soon-alt a:hover{color:var(--amber-2);}

/* ============ RESULT GROUPS + CARDS (JS-rendered) ============ */
.res-groups{display:grid;gap:2.25rem;}
.res-group{display:grid;gap:.9rem;}
.res-month{display:flex;align-items:center;gap:1rem;font-family:var(--fm);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-2);}
.res-month::after{content:'';flex:1;height:1px;background:var(--hair);}
.res-match{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:1.25rem;align-items:center;background:var(--pearl);border:1px solid var(--hair);border-radius:var(--radius);padding:1.15rem 1.35rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);}
.res-match:hover{transform:translateY(-3px);border-color:rgba(245,157,30,.5);box-shadow:0 18px 42px rgba(11,26,54,.1);}
.res-date{display:grid;justify-items:center;gap:.15rem;border-right:1px solid var(--hair);padding-right:1.1rem;}
.res-date b{font-family:var(--fd);font-size:1.7rem;color:var(--ink);line-height:1;}
.res-date span{font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.16em;color:var(--amber-2);text-transform:uppercase;}
.res-teams{min-width:0;}
.res-teams .rt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem;font-size:1.05rem;color:var(--ink);font-weight:600;line-height:1.4;}
.res-teams .rt .vs{font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;}
.res-meta{margin-top:.3rem;font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.3rem 1rem;}
.res-badge{font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;border:1px solid var(--hair);border-radius:100px;padding:.12rem .6rem;}
.res-report{margin-top:.6rem;font-size:.92rem;color:var(--muted);line-height:1.65;max-width:70ch;}
.res-score{display:flex;align-items:center;gap:.7rem;}
.res-score b{font-family:var(--fd);font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--ink);letter-spacing:.02em;white-space:nowrap;}
.res-out{width:2.35rem;height:2.35rem;border-radius:10px;display:grid;place-items:center;font-family:var(--fm);font-weight:700;font-size:.95rem;color:var(--pearl);flex:none;}
.res-out-w{background:var(--lagoon);}
.res-out-d{background:#5b6678;}
.res-out-l{background:#a0463c;}

/* ============ CTA ============ */
.res-cta{background:linear-gradient(135deg,var(--navy-2) 0%,var(--navy-4) 55%,var(--navy) 100%);color:var(--muted-d);padding-block:clamp(3.5rem,7vw,5.5rem);position:relative;overflow:hidden;}
.res-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(48% 62% at 85% 20%,rgba(245,157,30,.13),transparent 60%);pointer-events:none;}
.res-cta .wrap{max-width:1040px;position:relative;z-index:2;}
.res-cta h2{color:var(--pearl);font-size:clamp(1.9rem,3.8vw,2.9rem);}
.res-cta p{margin-top:1rem;max-width:56ch;line-height:1.75;}
.res-cta-row{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.9rem;}
.res-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--fm);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 1.9rem;border-radius:100px;border:1.5px solid transparent;text-decoration:none;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);}
.res-btn-solid{background:var(--amber);color:var(--navy-2);border-color:var(--amber);box-shadow:0 10px 30px rgba(245,157,30,.28);}
.res-btn-solid:hover{background:var(--amber-2);border-color:var(--amber-2);transform:translateY(-2px);}
.res-btn-line{border-color:rgba(251,250,247,.42);color:var(--pearl);}
.res-btn-line:hover{background:var(--pearl);color:var(--navy-2);border-color:var(--pearl);transform:translateY(-2px);}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .res-match{grid-template-columns:1fr;gap:.9rem;padding:1.1rem;}
  .res-date{grid-template-columns:auto auto;justify-content:start;justify-items:start;align-items:baseline;gap:.5rem;border-right:0;border-bottom:1px solid var(--hair);padding:0 0 .8rem;width:100%;}
  .res-date b{font-size:1.35rem;}
  .res-score{justify-content:space-between;border-top:1px solid var(--hair);padding-top:.85rem;width:100%;}
  .res-score b{font-size:1.5rem;}
}