/* Raspored stranica. Komponente su u bundle.css. */
*{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:var(--reka)}
a.cb-btn{text-decoration:none}
/* Napomena na vrhu: informacija, ne upozorenje */
.napomena{background:var(--surface-sunken);color:var(--status-cekanje-fg);border-bottom:1px solid var(--line);font-size:15px;line-height:21px;padding:10px 16px;display:flex;gap:10px;justify-content:center}
.napomena > span:last-child{max-width:calc(var(--content-max) - 26px)}
.napomena strong{color:var(--ink);font-weight:600}
.napomena-i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-muted);font:600 12px/15px var(--font-text);text-align:center;margin-top:1px}
.notice strong{color:var(--ink);font-weight:600}
main{max-width:var(--content-max);margin:0 auto;padding:16px 16px 64px}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0 16px}
.brand{display:flex;align-items:center;gap:10px;font:700 24px/30px var(--font-display);color:var(--ink);text-decoration:none}
.brand img{width:48px;height:auto}
.cb-script button{min-height:36px;padding:0 12px;font-size:15px}

.hero h1{font:700 40px/46px var(--font-display);margin:24px 0 8px}
.hero p{font-size:19px;line-height:28px;color:var(--ink-muted);margin:0 0 24px}
.tab-head{display:flex;justify-content:flex-end;margin:16px 0}
.tab-head .cb-btn{width:100%;justify-content:center}
@media (min-width:560px){.tab-head .cb-btn{width:auto}}
.promeni{font-size:15px;font-weight:600;margin:-8px 0 8px}

.controls{display:flex;flex-direction:column;gap:12px;margin:0 0 24px}
.controls .cb-select{max-width:260px}
.section-title{font:700 24px/30px var(--font-display);margin:32px 0 16px}
.list{display:flex;flex-direction:column;gap:24px}
.empty{background:var(--surface-sunken);border-radius:var(--radius-lg);padding:24px;color:var(--ink-muted)}

.cb-card .photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-md);background:var(--surface-sunken)}
.cb-card h3 a{color:inherit;text-decoration:none}
.cb-card h3 a:hover{text-decoration:underline}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cb-card.featured{border:2px solid var(--cigla)}
.featured-label{font:600 13px/18px var(--font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--cigla)}
.vote-msg{font-size:15px;color:var(--danger);font-weight:600}
.opis{margin:0;white-space:pre-line}
.vote-split{background:var(--status-odbijeno-bg)}
.vote-split span{background:var(--trava)}
.cb-vote .ti{font-size:20px}
.cb-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.cb-tabs button{font-size:15px;padding:0 4px}

.choices{display:grid;gap:16px;margin:24px 0}
.choice{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1.5px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--ink);text-decoration:none}
.choice:hover{border-color:var(--cigla)}
.choice i{font-size:28px;color:var(--cigla)}
.choice strong{display:block;font:700 22px/28px var(--font-display);margin-bottom:4px}
.choice span{color:var(--ink-muted)}

form.cb-col{padding:0;max-width:none}
.notice{font-size:15px;line-height:22px;color:var(--ink-muted);background:var(--surface-sunken);border-radius:var(--radius-md);padding:12px 14px}
.done{background:var(--status-gotovo-bg);color:var(--status-gotovo-fg);border-radius:var(--radius-lg);padding:20px;font-size:17px}
.back{display:inline-flex;align-items:center;gap:6px;margin:8px 0 16px;font-weight:600}

footer{max-width:var(--content-max);margin:0 auto;padding:24px 16px 48px;border-top:1px solid var(--line);color:var(--ink-muted);font-size:15px}

/* Računar: šira naslovna, tabovi i dugme u istom redu, objave u dve kolone */
@media (min-width:900px){
  main.siroko{max-width:1080px}
  .hero p{max-width:640px}
  .tab-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1.5px solid var(--line)}
  .tab-bar .cb-tabs{border-bottom:0;display:flex;gap:4px}
  .tab-bar .cb-tabs button{padding:0 18px;font-size:16px}
  .tab-bar .tab-head{margin:0 0 10px}
  .tab-bar .tab-head .cb-btn{width:auto}
  .controls{flex-direction:row;justify-content:space-between;align-items:center;margin-top:20px}
  .controls .cb-select{width:240px}
  .list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
  .list > .empty,.list > p{grid-column:1/-1}
  body:has(main.siroko) footer{max-width:1080px}
}