/* ============================================================
   Turnir Lapovci — public stylesheet  (v2 "premium sport")
   Drop-in zamjena za /assets/css/style.css
   - Bez ikakvih izmjena HTML strukture u PHP fajlovima.
   - Sve koristi POSTOJEĆE klase iz header.php / index.php /
     kategorija.php / vijesti.php / vijest.php / footer.php.
   - Paleta: crveno-plavo iz logoa, uz tamne "broadcast" akcente.
   ============================================================ */

/* --- Tipografija (sportski kondenzirani naslovi + Barlow tekst) --- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box}

:root{
  /* Brend (iz logoa) */
  --c-red:#d6202a;
  --c-red-d:#a8161e;
  --c-blue:#1f3c99;
  --c-blue-d:#152a6e;
  --c-primary:var(--c-blue);
  --c-primary-d:var(--c-blue-d);
  --c-accent:var(--c-red);
  --c-accent-d:var(--c-red-d);

  /* Površine */
  --c-bg:#eef1f8;
  --c-text:#141a2b;
  --c-muted:#5b6478;
  --c-card:#fff;
  --c-border:#e1e5f0;

  /* Tamne "broadcast" površine (hero, bracket, footer) */
  --c-ink:#0a0f20;
  --c-ink-2:#121a35;
  --c-ink-3:#1b2546;
  --c-ink-line:rgba(255,255,255,.10);
  --c-ink-text:#e8ecf7;
  --c-ink-muted:#97a2c2;

  /* Fontovi */
  --font-body:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Barlow Condensed",var(--font-body);

  --shadow-sm:0 1px 3px rgba(15,30,80,.08);
  --shadow:0 4px 16px rgba(15,30,80,.10);
  --shadow-lg:0 14px 40px rgba(15,30,80,.18);
  --radius:14px;
}

html,body{margin:0;padding:0;font-family:var(--font-body);background:var(--c-bg);color:var(--c-text);line-height:1.55;-webkit-font-smoothing:antialiased}
body{
  /* suptilna teksturna podloga umjesto plošne boje */
  background-image:radial-gradient(circle at 50% -120px,#dbe1f2 0,transparent 480px);
}
img{max-width:100%}
a{color:var(--c-primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  background:linear-gradient(100deg,var(--c-ink) 0,var(--c-blue-d) 60%,var(--c-blue) 130%);
  color:#fff;position:sticky;top:0;z-index:30;
  box-shadow:0 6px 24px rgba(8,14,35,.28);
  border-bottom:3px solid var(--c-red);
}
.site-header .container{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}

.brand{color:#fff;display:flex;align-items:center;gap:14px;line-height:1.05}
.brand:hover{text-decoration:none}
.brand img.logo{
  height:58px;width:auto;display:block;background:#fff;border-radius:10px;padding:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-title{
  font-family:var(--font-display);font-weight:800;font-size:25px;
  letter-spacing:.6px;text-transform:uppercase;line-height:1.0;white-space:nowrap;
}
.brand-tag{font-size:12px;opacity:.82;letter-spacing:.4px;margin-top:2px}

.main-nav{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.main-nav a{
  color:#eaeefc;padding:9px 14px;border-radius:7px;font-size:14px;font-weight:600;
  letter-spacing:.2px;position:relative;transition:background .15s,color .15s;
}
.main-nav a:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
/* aktivna stavka: crveni "underline" indikator */
.main-nav > a.active,.dropdown > a.active{background:rgba(255,255,255,.10);color:#fff}
.main-nav > a.active::after,.dropdown > a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2.5px;
  background:var(--c-red);border-radius:2px;
}

.admin-link{border:1px solid rgba(255,255,255,.30);background:var(--c-red);font-weight:700;letter-spacing:.4px}
.admin-link:hover{background:var(--c-red-d)!important;color:#fff}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;background:#fff;min-width:248px;
  border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;z-index:10;
  border-top:3px solid var(--c-red);padding:6px;
}
.dropdown-menu a{
  color:var(--c-text);display:block;padding:10px 12px;border-radius:7px;font-weight:600;font-size:14px;
}
.dropdown-menu a:hover{background:var(--c-bg);text-decoration:none;color:var(--c-blue-d);padding-left:16px}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}

.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;line-height:1}

/* ============================================================
   MAIN
   ============================================================ */
.main{padding:28px 18px 72px}

/* ============================================================
   HERO  (tamni "broadcast" + pozadinska fotografija)
   >>> STAVI SVOJU FOTOGRAFIJU u: /assets/img/hero.jpg <<<
   Ako fotografije nema, ostaje elegantan tamni gradijent.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:84px 28px;margin-bottom:34px;border-radius:var(--radius);
  background:
    linear-gradient(180deg,rgba(8,12,28,.62) 0,rgba(8,12,28,.78) 100%),
    linear-gradient(115deg,var(--c-ink) 0,var(--c-blue-d) 70%,var(--c-blue) 130%);
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-lg);
  isolation:isolate;
}
/* sloj s fotografijom (ako postoji /assets/img/hero.jpg) */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("../img/hero.jpg") center/cover no-repeat;
  /* zatamnjenje da tekst bude čitljiv */
  filter:saturate(1.05);
}
/* dijagonalni "spray" akcent + crveni rub na dnu */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--c-red),var(--c-blue) 60%,var(--c-red));
}
.hero h1{
  margin:0 0 10px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(38px,6vw,68px);line-height:.96;letter-spacing:.5px;text-transform:uppercase;
  text-shadow:0 4px 24px rgba(0,0,0,.45);
}
.hero p{
  margin:0 auto;max-width:640px;font-size:clamp(15px,2vw,19px);font-weight:500;
  opacity:.96;text-shadow:0 2px 10px rgba(0,0,0,.4);letter-spacing:.3px;
}
/* mali crveni "kicker" iznad naslova */
.hero h1::before{
  content:"";display:block;width:64px;height:5px;margin:0 auto 20px;
  background:var(--c-red);border-radius:3px;box-shadow:0 0 0 4px rgba(214,32,42,.18);
}

/* ============================================================
   NASLOVI SEKCIJA
   ============================================================ */
.section-title{
  font-family:var(--font-display);font-size:clamp(22px,3vw,30px);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--c-ink);
  margin:38px 0 16px;padding:0 0 10px 0;display:flex;align-items:center;gap:12px;
  border-bottom:2px solid var(--c-border);
}
.section-title::before{
  content:"";width:10px;height:26px;background:var(--c-red);border-radius:3px;flex:none;
  box-shadow:3px 0 0 var(--c-blue);
}

/* ============================================================
   GRID / KARTICE (vijesti)
   ============================================================ */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{
  background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .card-body,.card-body{padding:16px 18px 18px}
.card h3{
  margin:2px 0 6px;font-family:var(--font-display);font-size:21px;font-weight:700;
  letter-spacing:.3px;color:var(--c-ink);line-height:1.08;text-transform:uppercase;
}
.card p{margin:0;color:var(--c-muted);font-size:14.5px;line-height:1.5}
.card-link{color:inherit}
.card-link:hover{text-decoration:none}

/* slika kartice + zoom na hover */
.card img{width:100%;height:188px;object-fit:cover;display:block;transition:transform .4s ease}
.card-link{overflow:hidden}
.card-link:hover img{transform:scale(1.06)}

/* datum kao "chip" */
.meta{
  display:inline-block;color:var(--c-blue-d);font-size:12px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;margin-bottom:8px;
  background:rgba(31,60,153,.09);padding:3px 9px;border-radius:20px;
}

/* ============================================================
   KATEGORIJE (tiles)
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.cat-tile{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--c-border);
  border-radius:12px;padding:20px 22px;font-family:var(--font-display);font-weight:700;
  font-size:18px;text-transform:uppercase;letter-spacing:.5px;color:var(--c-blue-d);
  box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-left:5px solid var(--c-red);
  transition:transform .16s ease,box-shadow .16s ease,color .16s,background .16s;
}
/* strelica koja "klizne" */
.cat-tile::after{
  content:"\2192";font-family:var(--font-body);font-weight:700;color:var(--c-red);
  transform:translateX(-4px);opacity:.7;transition:transform .18s ease,opacity .18s,color .18s;
}
.cat-tile:hover{
  transform:translateY(-3px);text-decoration:none;color:#fff;box-shadow:var(--shadow-lg);
  background:linear-gradient(120deg,var(--c-blue-d),var(--c-blue));
}
.cat-tile:hover::after{transform:translateX(2px);opacity:1;color:#fff}

/* ============================================================
   TABLICE PORETKA (broadcast standings)
   ============================================================ */
table.std{
  width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--c-border);border-radius:12px;overflow:hidden;
  font-size:14.5px;box-shadow:var(--shadow-sm);
}
table.std thead th{
  background:linear-gradient(180deg,var(--c-blue) 0,var(--c-blue-d) 100%);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.7px;
  text-transform:uppercase;padding:11px 10px;text-align:left;white-space:nowrap;
}
table.std td{padding:10px 10px;border-bottom:1px solid var(--c-border);text-align:left;vertical-align:middle}
table.std tbody tr:last-child td{border-bottom:0}
table.std tbody tr:nth-child(even){background:#f7f9fd}
table.std tbody tr:hover{background:#eaf0fd}
table.std td.num,table.std th.num{text-align:center;width:46px}
/* zadnji stupac (Pts) malo širi da stane "PTS" */
table.std th:last-child,table.std td:last-child{width:58px;text-align:center;padding-left:6px;padding-right:6px}

/* naziv ekipe izraženiji */
table.std td:nth-child(2){font-weight:600;color:var(--c-ink)}
/* zadnji stupac (Pts) naglašen */
table.std th:last-child,table.std td:last-child{
  background:rgba(31,60,153,.05);font-weight:700;
}
table.std td:last-child strong{
  font-family:var(--font-display);font-size:17px;color:var(--c-blue-d);
}

/* rang badge */
.rank{
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--c-muted);
  background:var(--c-bg);border-radius:7px;
}
.rank.top{
  background:linear-gradient(180deg,var(--c-red),var(--c-red-d));color:#fff;
  box-shadow:0 2px 6px rgba(214,32,42,.4);
}

/* ============================================================
   POPIS UTAKMICA (scoreboard)
   ============================================================ */
.matches{display:grid;gap:10px}
.match{
  display:grid;grid-template-columns:1fr 104px 1fr;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--c-border);border-radius:11px;padding:12px 14px;
  box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s;
}
.match:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.match .home{text-align:right;font-weight:600;color:var(--c-ink)}
.match .away{text-align:left;font-weight:600;color:var(--c-ink)}
.match .score{
  text-align:center;font-family:var(--font-display);font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--c-blue) 0,var(--c-blue-d) 100%);
  border-radius:8px;padding:8px 6px;font-size:20px;letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(21,42,110,.3);
}
.match.unplayed .score{
  color:var(--c-muted);background:var(--c-bg);font-weight:600;font-size:14px;
  box-shadow:none;border:1px solid var(--c-border);
}
.match small{display:block;color:var(--c-muted);font-weight:500;font-size:11.5px;margin-top:3px}

/* ============================================================
   PLAYOFF BRACKET  (tamni "broadcast" panel)
   ============================================================ */
.bracket{
  display:flex;gap:22px;overflow-x:auto;padding:22px;
  background:linear-gradient(160deg,var(--c-ink) 0,var(--c-ink-2) 100%);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  scroll-snap-type:x proximity;
  background-image:
    linear-gradient(160deg,rgba(10,15,32,.92),rgba(18,26,53,.92)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 22px);
}
.bracket .round{
  min-width:248px;display:flex;flex-direction:column;justify-content:space-around;gap:14px;
  scroll-snap-align:start;
}
.bracket .round h4{
  margin:0 0 4px;color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:13px;text-transform:uppercase;letter-spacing:1.2px;text-align:center;
  padding:7px 10px;border-radius:8px;
  background:linear-gradient(90deg,var(--c-red-d),var(--c-red));
  box-shadow:0 3px 10px rgba(214,32,42,.35);
}
/* finale (zadnja kolona) — svijetloplavi akcent (Cibalia) */
.bracket .round:last-child h4{
  background:linear-gradient(90deg,#3a9bd6,#7ec8f5);color:#08233a;
  box-shadow:0 3px 12px rgba(90,170,230,.45);
}

.bracket .match{
  grid-template-columns:1fr 58px;padding:10px 12px;gap:10px;
  background:linear-gradient(180deg,var(--c-ink-3),#151e3c);
  border:1px solid var(--c-ink-line);border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.3);
}
.bracket .match:hover{transform:none;box-shadow:0 8px 22px rgba(0,0,0,.45);border-color:rgba(255,255,255,.22)}
.bracket .match .home,.bracket .match .away{
  text-align:left;font-size:14px;font-weight:600;color:var(--c-ink-text);
  padding:2px 0;line-height:1.2;
}
/* tanka linija između dvije ekipe u paru */
.bracket .match .away{border-top:1px solid var(--c-ink-line);padding-top:5px;margin-top:3px}
.bracket .match small{color:var(--c-ink-muted)!important;font-size:11px;margin-top:6px}
.bracket .match .score{
  font-family:var(--font-display);font-size:18px;font-weight:800;padding:0;
  background:transparent;color:#fff;box-shadow:none;display:flex;align-items:center;
  justify-content:center;border-left:1px solid var(--c-ink-line);border-radius:0;
}
.bracket .match .score small{color:var(--c-ink-muted)!important}

/* ============================================================
   GALERIJA  (suptilno poboljšanje — koristi inline grid iz PHP-a)
   ============================================================ */

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:linear-gradient(180deg,#0c1428,#080d1c);color:#9ca6c2;
  padding:26px 0;margin-top:52px;font-size:14px;text-align:center;
  border-top:3px solid var(--c-red);letter-spacing:.3px;
}
.site-footer p{margin:0}

/* ============================================================
   GUMBI / FORME
   ============================================================ */
.btn{
  display:inline-block;background:linear-gradient(180deg,var(--c-blue),var(--c-blue-d));color:#fff;
  border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-family:var(--font-display);
  font-size:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 3px 10px rgba(21,42,110,.3);transition:transform .12s,box-shadow .12s,filter .12s;
}
.btn:hover{filter:brightness(1.08);text-decoration:none;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn.alt{background:linear-gradient(180deg,var(--c-red),var(--c-red-d));box-shadow:0 3px 10px rgba(214,32,42,.3)}
.btn.danger{background:linear-gradient(180deg,#dc2626,#991b1b)}
.btn.small{padding:6px 12px;font-size:13px}
.btn.ghost{background:transparent;color:var(--c-blue);border:2px solid var(--c-blue);box-shadow:none}
.btn.ghost:hover{background:var(--c-blue);color:#fff}

.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:600;border:1px solid transparent}
.flash.ok{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.flash.err{background:#fee2e2;color:#991b1b;border-color:#fecaca}

.notice{
  padding:22px;background:#fff;border:1.5px dashed var(--c-border);border-radius:12px;
  color:var(--c-muted);text-align:center;font-weight:500;
}

/* ============================================================
   ČLANAK (vijest)
   ============================================================ */
.article{background:#fff;padding:28px;border-radius:var(--radius);border:1px solid var(--c-border);box-shadow:var(--shadow-sm)}
.article img.cover{width:100%;max-height:420px;object-fit:cover;border-radius:12px;margin-bottom:18px}
.article h1{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.4px;color:var(--c-ink);line-height:1.05}

/* ============================================================
   RESPONZIVNOST
   ============================================================ */
@media (max-width:860px){
  .main{padding:22px 14px 56px}
  .hero{padding:60px 22px}
}

@media (max-width:760px){
  /* mobilna navigacija */
  .nav-toggle{display:block;margin-left:auto}
  .main-nav{
    display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;
    margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);
  }
  body.nav-open .main-nav{display:flex}
  .main-nav a{padding:11px 12px;border-radius:8px}
  .main-nav > a.active::after,.dropdown > a.active::after{display:none}
  .dropdown-menu{
    position:static;box-shadow:none;background:rgba(255,255,255,.07);border-top:none;
    padding:2px;margin-top:2px;
  }
  .dropdown-menu a{color:#eaeefc}
  .dropdown-menu a:hover{background:rgba(255,255,255,.12);color:#fff;padding-left:14px}
  .brand img.logo{height:46px}
  .brand-title{font-size:20px}

  /* tablica: sažmi manje važne stupce (GF, GA, GD = 7,8,9) */
  table.std th:nth-child(7),table.std td:nth-child(7),
  table.std th:nth-child(8),table.std td:nth-child(8),
  table.std th:nth-child(9),table.std td:nth-child(9){display:none}
  table.std{font-size:14px}
  table.std thead th,table.std td{padding:9px 7px}

  /* utakmice: kompaktnije */
  .match{grid-template-columns:1fr 76px 1fr;gap:8px;padding:10px}
  .match .score{font-size:17px;padding:6px 4px}

  /* bracket: lakši horizontalni scroll */
  .bracket{padding:16px;gap:16px}
  .bracket .round{min-width:212px}
}

@media (max-width:440px){
  .hero h1{font-size:clamp(30px,9vw,40px)}
  .card h3{font-size:19px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .cat-tile{font-size:15px;padding:16px}
}

/* ============================================================
   PRISTUPAČNOST / MANJE ANIMACIJE
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card:hover,.match:hover,.cat-tile:hover{transform:none}
}