/*
Theme Name: KiekkoMedia
Theme URI: https://kiekkomedia.fi
Author: Stars & Dreams Media Oy
Description: KiekkoMedian jääkiekko- ja viihdeuutisteema. Tulosnauha, mainospaikat widgetteinä, sponsoroidut jutut ja kumppanitasot.
Version: 1.0.0
Text Domain: kiekkomedia
*/

:root{--ink:#0e1013;--graph:#16191f;--graph2:#1f242c;--bg:#f3f4f6;--card:#fff;--line:#e1e4ea;--text:#14171c;--mute:#667085;--blue:#076ad0;--blue2:#0a53a3;--warm:#ff7a1a}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:"Helvetica Neue",Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* Tulosnauha */
.scores{background:var(--ink);color:#c9ced8;border-bottom:1px solid #262b34;font-size:.8rem}
.scores .wrap{display:flex;align-items:stretch;overflow:hidden}
.lg{display:flex;gap:2px;padding:8px 14px 8px 0;border-right:1px solid #262b34;margin-right:6px;flex-shrink:0}
.lg button{background:none;border:0;color:#7e8797;font-weight:800;font-size:.72rem;letter-spacing:1px;padding:6px 10px;border-radius:4px;cursor:pointer}
.lg button.on{background:var(--blue);color:#fff}
.sc-list{display:flex;overflow-x:auto;scrollbar-width:none}
.g{padding:8px 18px;border-right:1px solid #262b34;min-width:150px}
.g small{display:block;font-size:.62rem;letter-spacing:1px;text-transform:uppercase;color:#7e8797}
.g small.live{color:var(--warm);font-weight:800}
.g div{display:flex;justify-content:space-between;gap:14px;font-weight:700}
.g div.lose{color:#6c7585;font-weight:500}
.sc-empty{padding:14px 18px;color:#7e8797}

/* Header */
.site-header{background:var(--graph);position:sticky;top:0;z-index:20;border-bottom:3px solid var(--blue)}
.nav{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:34px;padding:10px 24px}
.nav .logo img{height:64px;width:auto}
.main-nav{flex:1}
.main-nav ul{display:flex;gap:24px;list-style:none;font-weight:700;font-size:.88rem;text-transform:uppercase;letter-spacing:.8px}
.main-nav a{color:#b4bcc9;padding:8px 0;border-bottom:3px solid transparent;display:inline-block}
.main-nav a:hover,.main-nav .current-menu-item a{color:#fff;border-color:var(--blue)}
.cta{background:var(--blue);color:#fff;padding:10px 18px;border-radius:4px;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:1px;display:inline-block}
.cta:hover{background:var(--blue2)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;margin-left:auto}
.presenting{background:var(--graph2);color:#c9ced8;text-align:center;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;padding:7px}
.presenting *{display:inline}
.presenting b,.presenting strong{color:#fff}

/* Mainospaikat */
.ad-slot{margin:22px 0;text-align:center}
.ad-slot img{margin:0 auto}
.ad-slot .widget{margin:0}
.ad-top{min-height:0}
.ad-note{border:1px dashed #b6bcc8;background:#e8ebf0;color:#8a93a4;font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:4px;min-height:90px}

/* Etusivun hero */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:22px}
.lead{position:relative;min-height:520px;border-radius:8px;overflow:hidden;background:linear-gradient(150deg,#0b2c57,#16191f 70%);display:flex;align-items:flex-end;color:#fff}
.lead img.bg,.tile img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead::after,.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88),transparent 62%)}
.lead .t{position:relative;z-index:2;padding:32px}
.badge{display:inline-block;background:var(--blue);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:5px 11px;border-radius:3px}
.badge.w{background:var(--warm)}
.lead h1{font-size:2.7rem;line-height:1.08;letter-spacing:-1px;margin:12px 0 8px;max-width:760px}
.lead p{color:#cfd6e2;max-width:620px}
.stack{display:flex;flex-direction:column;gap:18px}
.tile{position:relative;flex:1;min-height:168px;border-radius:8px;overflow:hidden;background:linear-gradient(140deg,#1d4f8f,#16191f);display:flex;align-items:flex-end;color:#fff}
.tile .t{position:relative;z-index:2;padding:18px}
.tile h3{font-size:1.15rem;line-height:1.2;margin-top:8px}

/* Osiot */
h2.sec{font-size:1.25rem;text-transform:uppercase;letter-spacing:1.4px;margin:44px 0 18px;display:flex;align-items:center;gap:12px}
h2.sec::before{content:"";width:6px;height:24px;background:var(--blue)}
h2.sec a{margin-left:auto;font-size:.75rem;color:var(--blue);letter-spacing:.5px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:block}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1)}
.card .im{height:150px;background:linear-gradient(135deg,#cfd6e3,#aab4c8);position:relative;overflow:hidden}
.card .im img{width:100%;height:100%;object-fit:cover}
.card .b{padding:14px 16px 18px}
.k{color:var(--blue);font-size:.68rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.card h3{font-size:1.02rem;line-height:1.25;margin:6px 0 4px}
.meta{color:var(--mute);font-size:.78rem}
.card.sp{border-top:3px solid var(--warm)}
.card.sp .k{color:var(--warm)}

.nhl{background:var(--graph);color:#fff;border-radius:10px;padding:30px;margin-top:44px}
.nhl h2{font-size:1.7rem;line-height:1.1;margin:10px 0 20px}
.nhl .card{background:var(--graph2);border-color:#2b323d;color:#fff}
.nhl .meta{color:#9aa3b2}
.nhl .card .k{color:#6fb0ff}

.event{border-radius:10px;background:linear-gradient(110deg,var(--blue2),var(--blue) 60%,#2b8cff);color:#fff;padding:32px 36px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:44px}
.event h2{font-size:2rem;line-height:1.1;margin-top:8px}
.event .d{font-size:2.6rem;font-weight:900;line-height:1;text-align:right}
.event .d small{display:block;font-size:.9rem;font-weight:600;margin-top:6px}

.two{display:grid;grid-template-columns:2.3fr 1fr;gap:22px}
.list .r{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:12px}
.list .im{width:150px;height:100px;border-radius:6px;background:linear-gradient(135deg,#cfd6e3,#aab4c8);flex-shrink:0;overflow:hidden}
.list .im img{width:100%;height:100%;object-fit:cover}
.list h3{font-size:1.08rem;line-height:1.25;margin:4px 0}

.rail .widget{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px}
.rail .widget-title{font-size:.78rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.rail li{list-style:none;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.rail li:last-child{border:0}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.trust div{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px}
.trust b{display:block;margin-bottom:4px}
.trust span{color:var(--mute);font-size:.88rem}

/* Juttusivu */
.article{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:34px;margin-top:22px}
.article h1{font-size:2.3rem;line-height:1.12;letter-spacing:-.5px;margin:12px 0 10px}
.article .meta{margin-bottom:18px}
.article .feat{margin:0 -34px 22px}
.article .feat img{width:100%}
.article .cap{font-size:.78rem;color:var(--mute);padding:8px 34px 0}
.entry{font-size:1.08rem;max-width:760px}
.entry p{margin-bottom:1.1em}
.entry h2,.entry h3{margin:1.4em 0 .5em}
.entry a{color:var(--blue);text-decoration:underline}
.entry iframe,.entry video{max-width:100%}
.entry .wp-video,.entry .wp-block-embed{margin:1.2em 0}
.entry blockquote{border-left:4px solid var(--blue);padding:4px 0 4px 18px;color:#444;margin:1.2em 0;font-style:italic}
.creditbox{margin-top:26px;padding:14px 18px;background:#f0f4fa;border-left:4px solid var(--blue);border-radius:4px;font-size:.85rem;color:#3a4558}
.sponsorbar{background:#fff4ea;border:1px solid #ffd7b3;border-top:3px solid var(--warm);color:#8a4a12;padding:10px 16px;font-size:.82rem;font-weight:700;margin-bottom:14px;border-radius:4px}
.pager{display:flex;justify-content:center;gap:8px;margin:30px 0}
.pager a,.pager span{padding:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:4px}
.pager .current{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Kumppanit ja footer */
.partners{background:var(--graph);color:#fff;margin-top:54px;padding:46px 0}
.partners h2{text-align:center;font-size:.82rem;letter-spacing:4px;text-transform:uppercase;color:#9db8e0;margin-bottom:24px}
.tier{display:grid;gap:14px;margin-bottom:14px;align-items:center;justify-items:center}
.t1{grid-template-columns:repeat(2,1fr)}.t1 img{max-height:90px;width:auto}
.t2{grid-template-columns:repeat(4,1fr)}.t2 img{max-height:64px;width:auto}
.t3{grid-template-columns:repeat(6,1fr)}.t3 img{max-height:46px;width:auto}
.tier .widget{width:100%;text-align:center}
.tier-empty{border:1px dashed #3a4252;background:#1f242c;color:#7e8797;font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;text-align:center;padding:26px;border-radius:4px;width:100%}
.c2{text-align:center;margin-top:22px}
.site-footer{background:var(--ink);color:#8e97a8;font-size:.82rem;padding:30px 0;text-align:center}
.site-footer ul{list-style:none;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.site-footer a:hover{color:#fff}

@media(max-width:900px){
  .hero,.two{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr}
  .t1,.t2,.trust{grid-template-columns:1fr}.t3{grid-template-columns:repeat(3,1fr)}
  .lead h1{font-size:1.9rem}.lead{min-height:380px}
  .event{flex-direction:column;align-items:flex-start}.event .d{text-align:left}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--graph);padding:10px 24px 20px}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:6px}
  .nav{position:relative}.nav .cta{display:none}
  .article{padding:20px}.article .feat{margin:0 -20px 18px}.article .cap{padding:8px 20px 0}.article h1{font-size:1.7rem}
}

[hidden]{display:none !important}