/* =========================================================
   FK Olimpik Beograd – novi izgled sajta (2026)
   Javne stranice koriste ovaj fajl; administracija i dalje
   koristi stari css/style.css.
   ========================================================= */

:root{
    --navy:#0B3B8C;
    --navy-dark:#082C6B;
    --navy-deep:#061F4D;
    --blue:#1F6FEB;
    --blue-soft:#E8F0FD;
    --ink:#0E1420;
    --ink-2:#1E2738;
    --text:#2D3748;
    --muted:#4A5568;
    --line:#E2E7F0;
    --bg:#F4F6FA;
    --white:#FFFFFF;
    --radius:16px;
    --shadow:0 2px 12px rgba(14,20,32,.07);
    --shadow-lg:0 10px 32px rgba(14,20,32,.12);
    --font:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display:'Barlow Condensed', 'Barlow', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    margin:0;
    font-family:var(--font);
    font-size:17px;
    line-height:1.6;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.15;color:var(--ink)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* stari pomoćni razredi */
.left,.right{float:none}
.clearfix::after{content:"";display:table;clear:both}
.center,p.center{text-align:center}
.divsredina{display:flex;justify-content:center}
.greybg{display:none}

.wrapper{max-width:1240px;margin:0 auto;padding:0 24px}
.site-main{min-height:40vh}

/* ---------- dugmad ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:48px;padding:12px 26px;border-radius:999px;
    font-weight:700;font-size:16px;line-height:1.2;border:2px solid transparent;
    transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:#1559c9;color:var(--white)}
.btn-white{background:var(--white);color:var(--navy)}
.btn-white:hover{background:var(--blue-soft);color:var(--navy)}
.btn-outline{border-color:var(--white);color:var(--white)}
.btn-outline:hover{background:var(--white);color:var(--navy)}

/* =========================================================
   ZAGLAVLJE
   ========================================================= */
.topbar{background:var(--ink);color:#C9D3E6;font-size:14px}
.topbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding-top:8px;padding-bottom:8px}
.topbar a{color:var(--white);font-weight:600}
.topbar a:hover{color:#9CC0FF}
.topbar .fas{margin-right:6px}

.site-header{position:sticky;top:0;z-index:100;background:var(--white);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}

.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand img{width:54px;height:54px;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:.5px}
.brand-text small{font-size:12px;letter-spacing:3px;color:var(--muted);margin-top:3px}

.main-nav{display:flex;align-items:center;gap:4px}
.main-nav > a,
.main-nav .has-drop > button{
    display:flex;align-items:center;gap:6px;
    padding:10px 12px;border:0;background:none;border-radius:8px;
    font-weight:600;font-size:16px;color:var(--ink);
}
.main-nav > a:hover,
.main-nav .has-drop > button:hover,
.main-nav .has-drop:focus-within > button{color:var(--navy);background:var(--blue-soft)}
.main-nav > a.active{color:var(--navy)}
.main-nav .fa-chevron-down{font-size:11px}
.main-nav .nav-cta{margin-left:10px;color:var(--white);padding:12px 22px}
.main-nav .nav-cta:hover{color:var(--white);background:#1559c9}

.has-drop{position:relative}
.drop{
    position:absolute;top:100%;left:0;min-width:210px;
    background:var(--white);border-radius:12px;box-shadow:var(--shadow-lg);
    padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s,transform .18s,visibility .18s;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop,
.has-drop.open .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 14px;border-radius:8px;color:var(--ink);font-weight:500}
.drop a:hover{background:var(--blue-soft);color:var(--navy)}

.nav-toggle{
    display:none;width:48px;height:48px;border:0;border-radius:10px;
    background:var(--blue-soft);color:var(--navy);font-size:20px;
}

@media (max-width:1060px){
    .nav-toggle{display:flex;align-items:center;justify-content:center}
    .main-nav{
        position:absolute;left:0;right:0;top:100%;
        flex-direction:column;align-items:stretch;gap:0;
        background:var(--white);padding:8px 16px 20px;
        box-shadow:0 14px 24px rgba(14,20,32,.12);
        max-height:calc(100vh - 110px);overflow-y:auto;
        display:none;
    }
    .main-nav.open{display:flex}
    .main-nav > a,
    .main-nav .has-drop > button{width:100%;justify-content:space-between;padding:14px 8px;border-radius:0;border-bottom:1px solid var(--line)}
    .drop{position:static;box-shadow:none;opacity:1;visibility:visible;transform:none;display:none;padding:0 0 8px 12px;min-width:0}
    .has-drop:hover .drop,.has-drop:focus-within .drop{display:none}
    .has-drop.open .drop{display:block}
    .main-nav .nav-cta{margin:16px 0 0}
}
@media (max-width:600px){
    .topbar-in > span{display:none}
    .topbar-in{justify-content:flex-end}
    .brand img{width:46px;height:46px}
    .brand-text strong{font-size:22px}
}

/* =========================================================
   POČETNA
   ========================================================= */
.hero{
    position:relative;color:var(--white);overflow:hidden;
    background:var(--navy) center/cover no-repeat;
}
.hero::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg, rgba(6,31,77,.94) 0%, rgba(11,59,140,.85) 50%, rgba(11,59,140,.45) 100%);
}
.hero-in{position:relative;padding:96px 24px 104px;max-width:1240px;margin:0 auto}
.hero .eyebrow{display:inline-block;font-weight:700;letter-spacing:3px;font-size:14px;color:#9CC0FF;margin-bottom:18px}
.hero h1{
    color:var(--white);font-family:var(--font-display);font-weight:800;
    font-size:clamp(44px,7vw,84px);line-height:.95;text-transform:uppercase;max-width:760px;
}
.hero p{font-size:clamp(17px,2vw,21px);color:#DCE6F7;max-width:600px;margin:22px 0 32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

.stats{background:var(--navy-dark);color:var(--white)}
.stats-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:26px;padding-bottom:26px}
.stat strong{display:block;font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1.1}
.stat span{color:#B9CCEC;font-size:15px}
@media (max-width:800px){.stats-in{grid-template-columns:repeat(2,minmax(0,1fr))}}

.block{padding:80px 0}
.block-dark{background:var(--ink);color:var(--white)}
.block-dark h2{color:var(--white)}
.block-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-bottom:32px}
.block-head h2,
.section-title{
    font-family:var(--font-display);font-weight:800;text-transform:uppercase;
    font-size:clamp(36px,5vw,52px);letter-spacing:.3px;
}
.block-head p{margin:6px 0 0;color:var(--muted);font-size:18px}
.more-link{font-weight:700;font-size:17px;white-space:nowrap}
.block-dark .more-link{color:#9CC0FF}
.block-dark .more-link:hover{color:var(--white)}

.intro-split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.intro-split .lead{font-size:21px;line-height:1.6;color:var(--text);margin:18px 0 22px}
.intro-split .photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--line)}
.intro-split .photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.intro-split{grid-template-columns:1fr}}

/* lokacije treninga */
.loc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.loc-card{
    background:var(--white);border-radius:var(--radius);padding:24px;
    border-top:6px solid var(--navy);box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:12px;
}
.loc-card h3{font-family:var(--font-display);font-size:27px;font-weight:700}
.loc-card .addr{color:var(--muted);font-size:15px;margin-top:-6px}
.loc-card .days{font-weight:700;color:var(--navy)}
.loc-card ul li{padding:4px 0;border-bottom:1px dashed var(--line);font-size:15px;color:var(--text)}
.loc-card ul li:last-child{border-bottom:0}
.loc-card .price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.loc-card .price strong{font-size:24px;color:var(--ink);margin-right:4px}
@media (max-width:1100px){.loc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.loc-grid{grid-template-columns:1fr}}

/* poziv na upis */
.cta-band{background:var(--blue);color:var(--white)}
.cta-band .wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:56px;padding-bottom:56px}
.cta-band h2{color:var(--white);font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(32px,4vw,46px)}
.cta-band p{margin:8px 0 0;font-size:18px;color:#E3EDFF;max-width:640px}

/* =========================================================
   KARTICE (vesti, galerija, kadar)
   ========================================================= */
.cards{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
    max-width:1240px;margin:0 auto;padding:0 24px;
}
.block .cards,.wrapper .cards{padding:0}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

/* vest kartica */
.news-card{
    background:var(--white);border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news-card > a{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.news-card .img{aspect-ratio:16/10;overflow:hidden;background:var(--line)}
.news-card .img .imgbox,.news-card .img img{width:100%;height:100%}
.news-card .img img{object-fit:cover;transition:transform .4s}
.news-card:hover .img img{transform:scale(1.04)}
.news-card .info{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-card .info .date{font-size:13px;font-weight:700;letter-spacing:1px;color:var(--blue);text-transform:uppercase}
.news-card .info h2,.news-card .info h3{font-family:var(--font);font-size:20px;font-weight:700;line-height:1.3;text-transform:none;margin:0}
.news-card .info p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-card .info .read{margin-top:auto;padding-top:8px;font-weight:700;color:var(--navy)}
.news-card .overlay{display:none}

/* galerija */
.galerija-card{border-radius:12px;overflow:hidden;background:var(--line);aspect-ratio:1/1}
.galerija-card .img,.galerija-card a{display:block;width:100%;height:100%}
.galerija-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.galerija-card:hover img{transform:scale(1.05)}
.block-dark .galerija-card{background:var(--ink-2)}
.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* stručni kadar */
.kadar-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.kadar-card .img{aspect-ratio:4/4.4;background:var(--line);overflow:hidden}
.kadar-card .img img{width:100%;height:100%;object-fit:cover;object-position:top}
.kadar-card .img-placeholder{display:flex;align-items:center;justify-content:center;background:var(--blue-soft)}
.kadar-card .img-placeholder img{width:46%;height:auto;object-fit:contain;opacity:.9}
.kadar-card .kadar-info{padding:18px 20px 22px}
.kadar-card .kadar-info p{margin:0}
.kadar-card .kadar-info p.name{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);margin-bottom:6px}
.kadar-card .kadar-info p.desc{font-size:14px;color:var(--muted);line-height:1.55;word-break:break-word}

/* =========================================================
   UNUTRAŠNJE STRANICE (stari sadržaj)
   ========================================================= */
.page-hero{background:var(--navy);color:var(--white)}
.page-hero .wrapper{padding-top:56px;padding-bottom:56px}
.page-hero h1{color:var(--white);font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(36px,5vw,56px)}
.page-hero p{margin:10px 0 0;color:#DCE6F7;font-size:18px;max-width:720px}

h1.naslov-strane{
    font-family:var(--font-display);font-weight:800;text-transform:uppercase;
    font-size:clamp(34px,5vw,54px);line-height:1.05;text-align:center;
    max-width:900px;margin:64px auto 36px;padding:0 24px;
}

.site-main > section,
.site-main .wrapper > section{padding:56px 0 24px}
.site-main section h2{
    font-family:var(--font-display);font-weight:800;text-transform:uppercase;
    font-size:clamp(34px,4.5vw,50px);margin-bottom:22px;
}
.site-main .wrapper > section > h2{text-align:left}
.site-main section h3{font-family:var(--font-display);font-size:26px;font-weight:700;margin:28px 0 12px;color:var(--navy);text-transform:uppercase;letter-spacing:.3px}

.text-wrapper{max-width:860px;margin:0 auto;padding:0 24px}
p.normal,p.list,.text-wrapper > p{font-size:18px;line-height:1.75;color:var(--text);margin:0 0 18px}
p.list{font-size:19px}
p.list.bold,span.bold,p.normal span.bold{font-weight:700;color:var(--ink)}
p.normal.napomena{
    background:var(--blue-soft);border-radius:12px;padding:18px 22px;
    color:var(--navy-deep);font-weight:600;
}
p.link{margin:28px 0 0}
p.link a{font-weight:700}

/* tri slike */
.tri-imgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1240px;margin:28px auto 12px;padding:0 24px}
.tri-imgs .img{border-radius:14px;overflow:hidden;background:var(--white);box-shadow:var(--shadow);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.tri-imgs .img img{width:100%;height:100%;object-fit:cover}
#takmicenja .tri-imgs .img img{object-fit:contain;padding:20px}
@media (max-width:700px){.tri-imgs{grid-template-columns:1fr}}

/* podmeni na stranicama Aktivnosti / O nama */
.subnav{position:sticky;top:76px;z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:6px;max-width:1240px;margin:0 auto;padding:10px 24px;overflow-x:auto}
.subnav li a{display:block;white-space:nowrap;padding:8px 16px;border-radius:999px;font-weight:600;color:var(--ink)}
.subnav li a:hover,.subnav li.active a{background:var(--blue-soft);color:var(--navy)}

/* pojedinačna vest */
.vest{max-width:900px;margin:0 auto;padding:56px 24px 0}
.vest-heading h1.naslov-strane{text-align:left;margin:0 0 16px;padding:0;font-size:clamp(32px,4.5vw,50px);text-transform:none}
.vest-heading .info{display:flex;flex-wrap:wrap;gap:6px 24px;color:var(--muted);font-size:15px;padding:0}
.vest-heading .info p{margin:0}
.vest-baner{margin:28px 0}
.vest-baner .img{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--line)}
.vest-baner .img img{width:100%;max-height:620px;object-fit:cover}
.vest .text-wrapper{padding:0}
.vest .text-wrapper .normal,.vest .text-wrapper p{font-size:18px;line-height:1.75;color:var(--text)}
.vest .text-wrapper p{margin:0 0 16px}
.vest li{margin-left:20px;list-style:disc}
.back-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;margin-bottom:22px}
.ostale-vesti{padding:64px 0 80px}
.ostale-vesti > h2{max-width:1240px;margin:0 auto 24px;padding:0 24px}

/* raspored utakmica */
.tabela{max-width:1240px;margin:24px auto 64px;padding:0 24px;overflow-x:auto}
.tabela table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.tabela th{background:var(--navy);color:var(--white);text-align:left;font-weight:700;padding:14px 16px;font-size:15px}
.tabela td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:16px;color:var(--text)}
.tabela tr:nth-child(even) td{background:#F8FAFD}
.tabela tr:hover td{background:var(--blue-soft)}
.tabresp{display:none}
@media (max-width:760px){
    .tabela{display:none}
    .tabresp{display:block;max-width:none;padding:0 16px 48px}
    .tabresp table{width:100%;background:var(--white);border-radius:14px;box-shadow:var(--shadow);margin:0 0 16px;border-collapse:collapse;overflow:hidden}
    .tabresp th{text-align:left;width:38%;padding:10px 14px;color:var(--muted);font-weight:600;font-size:15px;border-bottom:1px solid var(--line)}
    .tabresp td{padding:10px 14px;font-weight:600;border-bottom:1px solid var(--line)}
    .tabresp tr:first-child th,.tabresp tr:first-child td{background:var(--navy);color:var(--white)}
}

/* kontakt */
.kontakt{padding-bottom:40px}
.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1240px;margin:0 auto;padding:0 24px}
.contact-cards a{
    display:flex;align-items:center;gap:14px;background:var(--white);border-radius:var(--radius);
    padding:22px;box-shadow:var(--shadow);font-weight:700;color:var(--ink);word-break:break-word;
}
.contact-cards a:hover{color:var(--navy);box-shadow:var(--shadow-lg)}
.contact-cards .fas,.contact-cards .far{
    flex:0 0 48px;height:48px;border-radius:50%;background:var(--blue-soft);color:var(--navy);
    display:flex;align-items:center;justify-content:center;font-size:18px;
}
@media (max-width:860px){.contact-cards{grid-template-columns:1fr}}

.kontakt > .text-wrapper{display:none}
.mapa{max-width:1240px;height:440px;margin:40px auto;padding:0 24px}
.mapa iframe{width:100%;height:100%;border:0;border-radius:var(--radius);box-shadow:var(--shadow)}
.lokacije{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1240px;margin:0 auto 24px;padding:0 24px}
.lokacije .lok{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border-top:5px solid var(--navy)}
.lokacije .lok p{text-align:left;margin:0}
.lokacije .lok p.list{font-family:var(--font-display);font-size:24px;margin-bottom:8px}
.lokacije .lok p.normal{font-size:15px;line-height:1.6;color:var(--muted)}
@media (max-width:1100px){.lokacije{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.lokacije{grid-template-columns:1fr}.mapa{height:340px}}

/* forma za upis */
#upis{padding-top:40px}
.forma{
    max-width:860px;margin:24px auto 72px;background:var(--white);border-radius:20px;
    box-shadow:var(--shadow-lg);padding:36px;
}
.text-wrapper .forma{margin-left:0;margin-right:0}
.forma .title{margin:0 0 22px;color:var(--ink);text-transform:none;font-family:var(--font-display);font-size:30px}
.forma form{display:block}
.forma label{display:block;font-weight:600;font-size:15px;margin:14px 0 6px;color:var(--ink)}
.forma input,.forma select,.forma textarea{
    width:100%;padding:13px 14px;border:1px solid #C5CEDD;border-radius:10px;
    font:inherit;font-size:16px;color:var(--ink);background:var(--white);
}
.forma input:focus,.forma select:focus,.forma textarea:focus{border-color:var(--blue);outline:3px solid rgba(31,111,235,.18)}
.forma input.button,.forma input[type=submit]{
    margin-top:18px;background:var(--blue);color:var(--white);border:0;
    border-radius:999px;font-weight:700;font-size:17px;padding:16px;cursor:pointer;
}
.forma input.button:hover{background:#1559c9}
.forma .g-recaptcha{margin-top:18px}
.forma br{display:none}
@media (max-width:699px){.forma{padding:24px 18px}}

/* =========================================================
   PODNOŽJE
   ========================================================= */
.footer{background:var(--ink);color:#C9D3E6;margin-top:0}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-top:64px;padding-bottom:40px}
.footer .brand-text strong{color:var(--white)}
.footer .brand-text small{color:#8A96AD}
.footer .brand img{background:var(--white);border-radius:50%;padding:4px}
.footer .motto{margin:16px 0 0;color:#AEB9CE;font-size:15px;max-width:300px}
.footer h4{color:var(--white);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.footer li{padding:4px 0}
.footer a{color:#C9D3E6}
.footer a:hover{color:var(--white)}
.footer .social{display:flex;gap:10px;margin-top:4px}
.footer .social a{
    width:44px;height:44px;border-radius:50%;background:var(--ink-2);
    display:flex;align-items:center;justify-content:center;font-size:18px;
}
.footer .social a:hover{background:var(--blue)}
.footer .rights{border-top:1px solid #2A3346}
.footer .rights .wrapper{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:18px;padding-bottom:22px;font-size:14px;color:#8A96AD}
.footer .rights a{color:#8A96AD}
@media (max-width:900px){.footer-in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-in{grid-template-columns:1fr}}

/* animacije: ako je korisnik isključio pokrete, bez njih */
@media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}