/* Sportske vijesti v1 (29.10.). Okvir je u alati-v2.css, hero i panel u naslovna-v2.css. */
body.ziher-vijesti-v2 #masthead,
body.ziher-vijesti-v2 #colophon,
body.ziher-vijesti-v2 .entry-header,
body.ziher-vijesti-v2 #ziher-brko-fab,
body.ziher-vijesti-v2 #ast-scroll-top{display:none!important}
body.ziher-vijesti-v2,
body.ziher-vijesti-v2 #page,
body.ziher-vijesti-v2 .site-content,
body.ziher-vijesti-v2 .ast-container,
body.ziher-vijesti-v2 #primary,
body.ziher-vijesti-v2 #main{margin:0!important;padding:0!important;max-width:none!important;width:100%!important;background:#060a15!important}

#app .vj-main{gap:28px}
#app .vj-head{display:grid;gap:12px;padding-top:12px;padding-bottom:6px}
#app .vj-head h1{font-size:clamp(30px,5cqi,44px);font-weight:800;letter-spacing:-.02em}
#app .vj-head>p{margin:0;color:#c3cce0;max-width:60ch}
#app .vj-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
#app .vj-tools .seg{flex:0 1 auto;max-width:100%;min-width:0}
#app .vj-tools .seg button{flex:none;min-height:42px}
#app .seg .cnt{font-size:12px;margin-left:4px;color:var(--mut2)}
#app .seg button[aria-pressed="true"] .cnt{color:var(--green)}
#app #v-dani{display:grid;gap:32px}
#app .day{display:grid;gap:14px}
#app .day[hidden],#app #v-prazno[hidden],#app #v-more[hidden],#app .vj-art[hidden]{display:none!important}
#app .day-h{display:flex;align-items:baseline;gap:10px;font-size:18px;font-weight:800}
#app .day-h small{font-size:13px;font-weight:500;color:var(--mut)}
#app .vgrid{display:grid;gap:14px;align-items:stretch}
@container app (min-width:761px){
#app .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
#app .vgrid .nc.lead{grid-column:span 2}
}
#app .nc{position:relative;display:flex;flex-direction:column;border-radius:var(--r);border:1px solid var(--line2);background:var(--card);overflow:hidden;text-decoration:none;min-width:0;transition:border-color .15s,transform .15s}
#app .nc[hidden]{display:none!important}
#app .nc:hover{border-color:rgba(34,192,138,.45);transform:translateY(-2px)}
#app .nc:focus-visible{outline:2px solid var(--green);outline-offset:3px}
#app .med{position:relative;aspect-ratio:16/9;max-width:100%;isolation:isolate;overflow:hidden;background:var(--card2)}
#app .nc.lead .med{aspect-ratio:auto;height:clamp(180px,22cqi,250px)}
@container app (max-width:760px){
#app .nc.lead .med{height:auto;aspect-ratio:16/9}
}
#app .med img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#app .med::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,21,0) 40%,rgba(12,19,39,.85))}
#app .med.g::before{content:"";position:absolute;inset:0;z-index:-1}
#app .med.g[data-sport="f"]::before{background:radial-gradient(circle at 50% 115%,transparent 0 56px,rgba(255,255,255,.2) 57px 58px,transparent 59px),linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.18) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),repeating-linear-gradient(90deg,#0f5a3c 0 48px,#0c4d33 48px 96px)}
#app .med.g[data-sport="k"]::before{background:radial-gradient(circle at 50% 120%,transparent 0 70px,rgba(255,255,255,.22) 71px 72px,transparent 73px),radial-gradient(circle at 50% 120%,transparent 0 26px,rgba(255,255,255,.2) 27px 28px,transparent 29px),repeating-linear-gradient(90deg,#7a4318 0 20px,#6f3c15 20px 40px)}
#app .med.g[data-sport="t"]::before{background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.28) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(0deg,transparent 32%,rgba(255,255,255,.22) 32% calc(32% + 2px),transparent calc(32% + 2px)),#1d4f8f}
#app .med.g[data-sport="o"]::before{background:radial-gradient(120% 120% at 20% 0,#3b2d6b,#141b38 70%)}
#app .gx{position:absolute;inset:auto 14px 12px;display:grid;gap:2px;z-index:1}
#app .gx small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
#app .gx b{font-size:clamp(16px,2.2cqi,22px);font-weight:800;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#app .med .wm{position:absolute;right:14px;top:50%;transform:translateY(-60%);width:clamp(56px,9cqi,92px);height:auto;opacity:.16;z-index:0;color:#fff}
#app .med .wm svg{width:100%;height:auto;stroke-width:1.2}
#app .nc-b{display:grid;gap:8px;padding:14px 16px 16px;align-content:start;flex:1}
#app .nc-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;color:var(--mut)}
#app .sp{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:var(--gsoft);color:var(--green);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
#app .sp svg{width:13px;height:13px}
#app .nc h3{font-size:17px;font-weight:700;line-height:1.3}
#app .nc.lead h3{font-size:clamp(19px,2.6cqi,24px)}
#app .nc p{margin:0;font-size:14px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#app .bk{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#d5dcec;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);margin-top:2px}
#app .bk .brko-ring{flex:none}
#app .nc .bk span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#app .vj-more{display:flex;flex-direction:column;align-items:center;gap:6px}
#app .c{text-align:center}
#app .vj-main>*,#app #v-lista,#app #v-dani,#app .vj-head,#app .vj-tools,#app .day,#app .vgrid{min-width:0;max-width:100%}
@container app (max-width:560px){
#app .vj-tools{flex-direction:column;align-items:stretch;gap:8px}
#app .vj-tools .seg{width:100%;overflow:hidden}
#app .vj-tools .seg button{flex:1 1 auto;min-width:0;padding:0 6px;font-size:12.5px;min-height:40px;display:flex;flex-direction:column;justify-content:center;gap:2px}
#app .seg .cnt{display:block;margin:0;font-size:11px;line-height:1}
#app .vj-head h1{font-size:30px}
#app .nc .gx b{font-size:17px}
#app .nc h3{font-size:16px}
#app .med .wm{width:52px}
}
#app .vj-art{display:grid;gap:22px}
#app .art-hero{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line2)}
#app .art-hero .med{aspect-ratio:21/9}
@container app (max-width:760px){
#app .art-hero .med{aspect-ratio:4/3}
}
#app .art-hero .gx{inset:auto 20px 18px}
#app .art-hero .gx b{font-size:clamp(20px,4cqi,34px)}
#app .art-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
#app .art-grid{display:grid;gap:22px;align-items:start}
@container app (min-width:900px){
#app .art-grid{grid-template-columns:minmax(0,1fr) 340px;gap:40px}
#app .art-side{position:sticky;top:96px}
}
#app .art-t{display:grid;gap:14px;min-width:0}
#app .art-t h1{font-size:clamp(26px,4.6cqi,40px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
#app .art-t .lead-p{font-size:18px;color:#d5dcec;margin:0;max-width:62ch}
#app .art-t .txt p{margin:0 0 14px;font-size:16px;line-height:1.75;color:#d3d9e6;max-width:65ch}
#app .aim{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);padding:6px 10px;border-radius:999px;border:1px solid var(--line2)}
#app .bk.big{padding:14px 16px;font-size:15px}
#app .bk.big .brko-ring{--size:44px}
#app .bk.big b{display:block;font-size:13px;color:var(--fg)}
#app .src{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:13px;color:var(--mut)}
#app .src b{color:var(--fg);font-weight:600}
#app .src a{color:var(--green)}
#app .art-side{display:grid;gap:14px;min-width:0}
#app .side-card{display:grid;gap:12px;padding:16px;border-radius:var(--r);border:1px solid var(--line2);background:var(--card)}
#app .side-card h2{font-size:15px;font-weight:700}
#app .rel{display:grid;gap:2px}
#app .rel a{display:grid;gap:2px;padding:10px 4px;border-top:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:600}
#app .rel a:first-child{border-top:0}
#app .rel a small{font-size:12px;color:var(--mut);font-weight:500}
#app #sheet .art-hero{border-radius:16px}
#app #sheet .art-hero .med{aspect-ratio:16/8}
#app #sheet .art-hero .gx{inset:auto 16px 14px}
#app #sheet .art-hero .gx b{font-size:20px}
#app #sheet .txt p{margin:0 0 12px;font-size:15px;line-height:1.7;color:#d3d9e6}
#app #sheet .side-card h2{font-size:14px}
#app .sh-f.vj-f .pill-nav{flex:none}
#app .sh-f.vj-f #vj-main{flex:1;display:flex}
#app .sh-f.vj-f #vj-main .btn{flex:1}