:root{
	--color-primary:#93A9C1;
	--color-primary-700:#6F859E;
	--color-bg:#F8FAFC; /* light background */
	--color-surface:#FFFFFF; /* cards and header surfaces */
	--color-text:#0F172A; /* main text */
	--color-muted:#475569; /* muted text */
	--color-accent:#334155; /* subtle accents/dividers */
	--container-max:1140px;
	--radius:14px;
	--gap:clamp(16px,2vw,28px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0; background:var(--color-bg); color:var(--color-text);
	font:400 16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container-max); margin-inline:auto; padding:0 20px}
section{padding:clamp(48px,6vw,96px) 0}
h1,h2,h3{line-height:1.2; margin:0 0 12px}
h1{font-size:clamp(28px,5vw,44px)}
h2{font-size:clamp(22px,3.5vw,32px)}
p{margin:0 0 12px}
.lead{font-size:clamp(18px,2.6vw,20px); color:var(--color-muted)}
.card{background:var(--color-surface); border:1px solid rgba(15,23,42,0.08); border-radius:var(--radius); overflow:hidden; box-shadow:0 6px 24px rgba(2,6,23,0.06)}
.divider{height:1px; background:linear-gradient(90deg,transparent,rgba(2,6,23,0.08),transparent); margin:28px 0}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px); background:rgba(255,255,255,0.8); border-bottom:1px solid rgba(2,6,23,0.08)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--color-text)}
.brand img{height:34px; width:auto; border-radius:6px}
.brand span{font-weight:700; letter-spacing:0.3px}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav a{color:var(--color-text); text-decoration:none; opacity:0.9}
nav a:hover{opacity:1}
.menu-btn{display:none; background:var(--color-surface); border:1px solid rgba(2,6,23,0.12); color:var(--color-text); padding:8px 10px; border-radius:10px}
/* Always hide mobile nav by default */
.mobile-nav{display:none}
@media (max-width:860px){
	nav ul{display:none}
	.menu-btn{display:inline-flex; align-items:center; gap:8px}
	.mobile-nav{display:none; flex-direction:column; gap:10px; padding:12px 0}
	.mobile-nav a{padding:10px 12px; border:1px solid rgba(2,6,23,0.08); border-radius:10px; text-decoration:none; color:var(--color-text); background:var(--color-surface)}
	.mobile-nav.open{display:flex}
}

/* Hero */
.hero{position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden; background:var(--color-bg)}
.hero media-picture{display:block}
.hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none}
.hero .overlay{display:none}
.hero .content{position:relative; text-align:center; padding:40px 20px}
.hero .content{position:relative; text-align:center; padding:28px 20px; max-width:900px; margin-inline:auto; background:rgba(2,6,23,0.5); border:1px solid rgba(255,255,255,0.18); border-radius:14px; box-shadow:0 10px 30px rgba(2,6,23,0.25); backdrop-filter:saturate(120%) blur(2px)}
.hero .kicker{color:#C1D0E4; text-transform:uppercase; font-size:12px; letter-spacing:2px}
.hero h1{margin-top:6px; color:#FFFFFF; text-shadow:0 2px 8px rgba(0,0,0,0.35)}
.hero .lead{color:#E6ECF4}
.hero .scroll{margin-top:18px; color:#E2E8F0; font-size:14px; opacity:0.9}
@media (max-width:640px){
	.hero .content{background:rgba(2,6,23,0.6)}
}

/* Grids */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap)}
@media (max-width:980px){.grid-2{grid-template-columns:1fr}}
.figure{border-radius:var(--radius); overflow:hidden; border:1px solid rgba(2,6,23,0.08); aspect-ratio:21/9; max-height:clamp(220px,35vh,360px)}
@media (max-width:700px){.figure{aspect-ratio:16/9}}
.figure img{width:100%; height:100%; object-fit:cover}

/* Lists */
ul.clean{list-style:none; margin:0; padding:0}
ul.clean li{padding-left:14px; position:relative; margin:8px 0}
ul.clean li:before{content:""; position:absolute; left:0; top:0.8em; width:6px; height:6px; border-radius:50%; background:var(--color-primary)}

.badge{display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; background:rgba(147,169,193,0.2); border:1px solid rgba(147,169,193,0.5); color:#1E293B}

/* Cards for treningi */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap)}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card-inner{padding:18px}
.card h3{font-size:18px; margin-bottom:6px; padding-left:0}
.card p{color:var(--color-muted)}
.cards.vertical{grid-template-columns:1fr !important}

/* FB embed */
.fb-fallback{border:1px dashed rgba(2,6,23,0.2); border-radius:var(--radius); padding:16px; text-align:center; background:var(--color-surface)}
.fb-fallback a{color:#0F766E}

/* Kontakt */
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:var(--gap)}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}
.map-wrap{aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(2,6,23,0.08); background:var(--color-surface)}

/* Footer */
footer{padding:28px 0; border-top:1px solid rgba(2,6,23,0.08); color:var(--color-muted); background:var(--color-surface)}

/* Alternating section background and container measure */
section.alt{background:#F3F6FB}
.container p{max-width:70ch}

/* Headings accent */
section h2{position:relative; display:inline-block; padding-bottom:8px}
section h2:after{content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; background:#93A9C1; border-radius:2px}

/* Hero bottom fade and refined scrim */
.hero:after{content:""; position:absolute; left:0; right:0; bottom:0; height:140px; pointer-events:none; background:linear-gradient(180deg,rgba(248,250,252,0),var(--color-bg) 85%)}
.hero .content{background:rgba(2,6,23,0.44); border:0; box-shadow:0 10px 30px rgba(2,6,23,0.22)}

/* Card polish */
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(2,6,23,0.08)}
.card h3{position:relative;}
.card h3:before{display:none}

/* Two-column list utility */
.two-col{columns:2; column-gap:var(--gap)}
@media (max-width:900px){.two-col{columns:1}}

/* Zgodovina timeline styling */
.timeline{position:relative; padding-left:24px}
.timeline:before{content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, rgba(2,6,23,0.08), rgba(2,6,23,0.18))}
.timeline p{position:relative; margin:14px 0}
.timeline p:before{content:""; position:absolute; left:-18px; top:0.45em; width:10px; height:10px; border-radius:50%; background:#93A9C1; box-shadow:0 0 0 3px #ffffff}

/* Subtle reveal on scroll */
@media (prefers-reduced-motion: no-preference){
	.reveal{opacity:0; transform:translateY(12px); transition:opacity .28s ease, transform .28s ease}
	.reveal.in{opacity:1; transform:none}
}

/* Ensure Facebook plugin uses full available width */
.fb-page, .fb_iframe_widget, .fb_iframe_widget > span, .fb_iframe_widget iframe{width:100% !important}

/* History aside mini-cards */
.history-aside{display:grid; gap:12px; align-content:start}
.mini-cards{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:700px){.mini-cards{grid-template-columns:1fr}}
.mini-card{background:var(--color-surface); border:1px solid rgba(15,23,42,0.08); border-radius:12px; padding:14px; text-align:center; box-shadow:0 4px 18px rgba(2,6,23,0.05)}
.mini-card .value{font-weight:700; font-size:20px}
.mini-card .label{color:var(--color-muted); font-size:12px}

.grid-aside{display:grid; grid-template-columns:1fr auto; gap:var(--gap); align-items:start}
@media (max-width:980px){.grid-aside{grid-template-columns:1fr}}
.feed-col{width:100%; max-width:520px}

.social-embed-wrapper{margin-top:16px}