/* RAZLIČICA 7 — če na strežniku ta vrstica ni vidna, je naložena stara datoteka.
   ==========================================================
   ROKOBORSKI KLUB LENART
   Barvni svet: rdeč in moder — barvi dresov na blazini,
   na črnini dvorane in belini zapisnika.
   ========================================================== */

:root{
  --black:#0C0C0C;
  --black-2:#161616;
  --paper:#FFFFFF;
  --stone:#F1F1F1;
  --red:#D0121B;
  --red-dark:#A20E15;
  --green:#0B7C2C;
  --green-svetla:#1FA53F;
  --ash:#6A6A6A;
  --ash-dark:#9A9A9A;

  --wrap:1280px;
  --pad:clamp(20px,5vw,56px);

  --disp:"Archivo Black", Impact, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--black);
  font-family:var(--body); font-size:17.5px; line-height:1.6;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
figure{margin:0}
ul{list-style:none; margin:0; padding:0}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}

.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--red); color:#fff; padding:12px 18px}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--red); outline-offset:2px}

/* ---------- tipografija ---------- */
h1,h2,h3{
  font-family:var(--disp); font-weight:400; text-transform:uppercase; margin:0 0 .5em;
  letter-spacing:-.022em; text-wrap:balance; overflow-wrap:break-word;
}
h1{font-size:clamp(2.7rem,6.4vw,5rem); line-height:.9}
h2{font-size:clamp(2rem,4.8vw,3.5rem); line-height:.94; margin-bottom:.6em}
h3{font-size:1.05rem; letter-spacing:.02em}
p{margin:0 0 1.15em}

.tag{
  font-family:var(--mono); font-size:.74rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; color:var(--ash-dark); margin:0 0 1.6em;
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px;
}
.tag.red{color:var(--red)}
.tag .dot{width:7px; height:7px; background:var(--red); display:inline-block; flex:none}
.lead{font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:52ch; color:#C9C9C9}
.muted{color:var(--ash); font-size:.95rem}
.light{color:var(--paper)}

/* ---------- gumbi ---------- */
.btn{
  display:inline-block; font-family:var(--mono); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.82rem; padding:17px 28px; text-decoration:none;
  border:2px solid transparent; transition:background .18s, color .18s, border-color .18s;
}
.btn-solid{background:var(--red); color:#fff}
.btn-solid:hover{background:#fff; color:var(--black)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:#fff; color:var(--black); border-color:#fff}
.btn.small{padding:12px 20px}
.btns{display:flex; flex-wrap:wrap; gap:12px; margin:2.4em 0 0}

/* zrno: temne ploskve niso ploski digitalni črni pravokotniki */
.hero,.sec-dark,.sec-red,.foot{position:relative}
.hero::after,.sec-dark::after,.sec-red::after,.foot::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- glava ---------- */
.head{position:sticky; top:0; z-index:50; background:var(--black); color:#fff}
.head::after{content:""; display:block; height:3px; background:linear-gradient(90deg,var(--red) 0 50%,var(--green) 50% 100%)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:70px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff}
.brand img{width:38px}
.brand-txt{
  font-family:var(--disp); font-size:1.02rem; line-height:1; text-transform:uppercase; letter-spacing:.01em;
}
.brand-txt i{
  display:block; font-family:var(--mono); font-style:normal; font-size:.62rem; font-weight:500;
  letter-spacing:.26em; color:var(--ash-dark); margin-top:4px;
}

.nav{display:flex; align-items:center; gap:30px}
.nav a{
  font-family:var(--mono); font-size:.8rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.14em; text-decoration:none; padding:5px 0; border-bottom:2px solid transparent;
}
.nav a:hover{border-color:var(--red)}
.nav .nav-cta{background:var(--red); border:0; padding:11px 16px; font-weight:600}
.nav .nav-cta:hover{background:#fff; color:var(--black)}

.burger{
  display:none; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
  padding:12px 4px 12px 12px; min-height:48px; color:#fff;
  font-family:var(--mono); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
}
.burger-crte{display:block; width:26px; flex:none}
.burger-crte span{display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:transform .2s, opacity .2s}
.burger[aria-expanded="true"] .burger-crte span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-crte span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-crte span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{background:var(--black); color:#fff}
.hero-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,72px); align-items:center;
  max-width:none;
  padding-left:max(var(--pad), calc((100vw - var(--wrap))/2 + var(--pad)));
  padding-right:0;
  padding-top:clamp(50px,6vw,92px); padding-bottom:clamp(50px,6vw,92px);
}
.hero h1{margin-bottom:.34em}
.hero h1 .pika{color:var(--red)}
.hero-img{position:relative}
.hero-img img{filter:contrast(1.05) saturate(.92); width:100%}
.hero-img::before{
  content:""; position:absolute; left:-16px; top:-16px; width:70px; height:70px;
  border-left:5px solid var(--red); border-top:5px solid var(--red);
}
.hero-img::after{
  content:""; position:absolute; right:-16px; bottom:-16px; width:70px; height:70px;
  border-right:5px solid var(--green); border-bottom:5px solid var(--green);
}
.znak{
  position:absolute; left:-34px; bottom:34px; margin:0; z-index:3;
  background:var(--red); color:#fff; padding:14px 18px 12px;
  font-family:var(--mono); font-weight:600; font-size:1.5rem; line-height:1; letter-spacing:.02em;
}
.znak span{
  display:block; font-size:.6rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.28em; opacity:.85; margin-bottom:5px;
}

/* tabla z osnovnimi podatki — se ponovi v nogi */
.board{background:var(--black-2); border-top:1px solid #242424}
.board-in{display:flex; flex-wrap:wrap; gap:16px 52px; padding-top:20px; padding-bottom:20px; align-items:baseline}
.board span{
  display:block; font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--ash-dark); margin-bottom:3px;
}
.board b{font-family:var(--mono); font-weight:600; font-size:1.02rem; color:#fff; letter-spacing:.02em}
.board-fb{margin-left:auto}
.board-fb a{
  font-family:var(--mono); font-size:.82rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:#fff; text-decoration:none; border-bottom:2px solid var(--red);
  padding-bottom:3px;
}
.board-fb a:hover{color:var(--red)}

/* ---------- splošne sekcije ---------- */
.sec{padding:clamp(64px,8vw,124px) 0; scroll-margin-top:76px}
.sec-dark{background:var(--black); color:#fff}
.sec-stone{background:var(--stone)}
.sec-red{background:var(--red); color:#fff}
.sec-red .tag{color:rgba(255,255,255,.88)}
.sec-dark .muted{color:var(--ash-dark)}

/* ---------- klub ---------- */
.klub{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(30px,5vw,80px); align-items:start}
.klub-txt p{max-width:60ch}
.klub-txt h2{margin-bottom:.55em}
.mark{
  font-family:var(--mono); font-size:.96rem; line-height:1.6; border-left:4px solid var(--red);
  padding:4px 0 4px 18px; margin-top:1.8em;
}
.klub-img img{width:100%; filter:contrast(1.04) saturate(.95)}
.klub-img figcaption{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--ash); padding-top:10px; border-top:2px solid var(--black); margin-top:10px;
}


/* ---------- fotografski pas ---------- */
.band{position:relative; background:var(--black)}
.band img{width:100%; height:clamp(220px,32vw,420px); object-fit:cover; object-position:50% 42%; filter:contrast(1.05) saturate(.9)}
.band figcaption{
  position:absolute; right:var(--pad); bottom:18px; color:#fff; background:rgba(11,11,12,.75);
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; padding:8px 12px;
}

/* ---------- urnik ---------- */
.urnik{border-top:2px solid #2B2B2B; margin:0 0 clamp(44px,6vw,72px)}
.urnik li{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:20px;
  padding:22px 0 22px 22px; border-bottom:1px solid #2B2B2B; position:relative;
  transition:background .2s;
}
.urnik li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform .22s ease;
}
.urnik li:hover{background:#161616}
.urnik li:hover::before{transform:scaleY(1)}
.dan{font-family:var(--disp); font-size:clamp(1.5rem,3.6vw,2.5rem); text-transform:uppercase; line-height:1}
.ura{font-family:var(--mono); font-weight:600; font-size:clamp(1rem,2vw,1.35rem); color:#fff; white-space:nowrap}
.kje{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ash-dark); text-align:right}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px)}
.blok h3{color:var(--red); margin-bottom:1.4em; font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.2em}
.list li{padding:12px 0 12px 24px; border-bottom:1px solid #242424; position:relative}
.list li:first-child{border-top:1px solid #242424}
.list li::before{content:""; position:absolute; left:0; top:21px; width:9px; height:9px; background:var(--green-svetla)}
.naslov{font-family:var(--mono); font-size:1.05rem; line-height:1.55}

/* ---------- galerija ---------- */
.gal-head{margin-bottom:clamp(28px,4vw,48px)}
.gal{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; gap:4px;
  padding:0 4px;
}
.gal button{
  display:block; padding:0; border:0; cursor:pointer; position:relative; overflow:hidden;
  background:var(--black); aspect-ratio:3/4;
}
.gal .w2{grid-column:span 2; aspect-ratio:3/2}
.gal img{width:100%; height:100%; object-fit:cover; object-position:50% 32%; transition:transform .5s ease}
.gal button::after{
  content:""; position:absolute; inset:0; background:var(--red); opacity:0; transition:opacity .25s; mix-blend-mode:multiply;
}
.gal .podpis{
  position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:left;
  padding:10px 12px; background:linear-gradient(to top,rgba(11,11,12,.92),rgba(11,11,12,0));
  color:#fff; font-family:var(--mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.12em; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s;
}
.gal button:hover .podpis,.gal button:focus-visible .podpis{opacity:1; transform:none}
.gal button:hover img,.gal button:focus-visible img{transform:scale(1.05)}
.gal button:hover::after,.gal button:focus-visible::after{opacity:.35}

/* ---------- kontakt ---------- */
.kontakt{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:3px solid #fff; margin-top:clamp(30px,4vw,50px);
}
.kontakt article{padding:34px 0; border-bottom:1px solid rgba(255,255,255,.3)}
.kontakt article:nth-child(odd){padding-right:40px; border-right:1px solid rgba(255,255,255,.3)}
.kontakt article:nth-child(even){padding-left:40px}
.kontakt article:nth-last-child(-n+2){border-bottom:0}
.kontakt .tag{margin-bottom:1.1em}
.veliki{
  font-family:var(--mono); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.4rem);
  text-decoration:none; border-bottom:3px solid rgba(255,255,255,.45); padding-bottom:6px;
  display:inline-block;
}
.veliki:hover{border-color:#fff}
.srednji{font-family:var(--mono); font-weight:500; font-size:1.02rem; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.45); word-break:break-word}
.srednji:hover{border-color:#fff}
.podcrtaj{font-family:var(--mono); font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; text-decoration:none; border-bottom:2px solid #fff; padding-bottom:3px}

/* ---------- noga ---------- */
.foot{background:var(--black); color:var(--ash-dark); padding:clamp(44px,6vw,72px) 0 40px; font-size:.92rem}
.foot-mark{
  font-family:var(--disp); text-transform:uppercase; color:transparent;
  -webkit-text-stroke:1px #383838; font-size:clamp(2.1rem,7.6vw,5.6rem); line-height:.9;
  letter-spacing:-.03em; margin:0 0 clamp(26px,4vw,44px);
}
.foot-in{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.foot img{width:44px; opacity:.9}
.foot p{margin:0 0 .2em}
.foot b{color:#fff; font-weight:600}
.foot a{color:#fff; text-decoration:none; border-bottom:1px solid var(--red)}
.foot a:hover{color:var(--red)}
.copy{margin-left:auto; font-family:var(--mono); font-size:.78rem}

/* ---------- povečava fotografije ---------- */
.lb{position:fixed; inset:0; z-index:90; background:rgba(8,8,9,.96); display:flex; align-items:center; justify-content:center; padding:5vh 4vw}
.lb[hidden]{display:none}
.lb-fig{max-width:100%; display:flex; flex-direction:column; align-items:center; gap:16px}
.lb-fig img{max-height:78vh; width:auto; object-fit:contain; border-top:4px solid var(--red)}
.lb-fig figcaption{color:#fff; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.18em; text-align:center}
.lb button{background:none; border:0; color:#fff; cursor:pointer; line-height:1}
.lb-close{position:absolute; top:12px; right:20px; font-size:2.6rem}
.lb-nav{font-size:3.2rem; padding:10px 16px; opacity:.65}
.lb-nav:hover{opacity:1; color:var(--red)}

/* ---------- odzivnost ---------- */
@media (max-width:1120px){
  .nav{gap:20px}
  .nav a{font-size:.75rem; letter-spacing:.1em}
}
@media (max-width:980px){
  .burger{display:flex}
  .nav{
    position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column; align-items:stretch;
    gap:0; background:var(--black-2); padding:6px var(--pad) 26px; border-bottom:4px solid var(--red);
    max-height:calc(100vh - 74px); overflow-y:auto; box-shadow:0 20px 40px rgba(0,0,0,.5);
  }
  .nav.open{display:flex}
  .nav a{
    padding:17px 0; font-size:.9rem; letter-spacing:.14em; border-bottom:1px solid #242424;
    border-top:0; min-height:52px; display:flex; align-items:center;
  }
  .nav a:hover{border-color:#242424}
  .nav .nav-cta{
    margin-top:16px; justify-content:center; border-bottom:0; min-height:54px; font-size:1rem;
  }
}
@media (max-width:1040px){
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:34px; padding-left:var(--pad); padding-right:var(--pad); max-width:var(--wrap)}
  .znak{left:0; bottom:0}
  .zgo{grid-template-columns:1fr; gap:26px}
  .zgo-head{position:static}
  .hero-img{order:-1}
  .hero-img::before,.hero-img::after{display:none}
  .klub{grid-template-columns:1fr}
  .klub-img{max-width:440px}
  .duo{grid-template-columns:1fr}
}
@media (max-width:760px){
  .urnik li{grid-template-columns:1fr; gap:6px; padding-left:18px}
  .kje{text-align:left}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .w2{grid-column:span 2; aspect-ratio:16/9}
  .kontakt{grid-template-columns:1fr}
  .kontakt article{padding:26px 0 !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.3)}
  .kontakt article:last-child{border-bottom:0}
  .copy{margin-left:0}
  .lb-nav{font-size:2.3rem; padding:6px 8px}
}

@media (max-width:430px){
  .head-in{min-height:64px; gap:10px}
  .brand img{width:32px}
  .brand-txt{font-size:.92rem}
  .burger{padding:12px 0 12px 8px; font-size:.68rem; letter-spacing:.14em}
  .gal{grid-template-columns:1fr}
  .gal .w2{grid-column:span 1; aspect-ratio:3/2}
  .btns .btn{width:100%; text-align:center}
  .oddaja .btn{width:100%; text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ---------- zgodovina ---------- */
.zgo{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(30px,5vw,80px); align-items:start}
.zgo-head{position:sticky; top:104px}
.uvod{max-width:44ch; font-size:clamp(1rem,1.5vw,1.15rem); margin-bottom:clamp(30px,4vw,52px)}
.casovnica{border-top:3px solid var(--black)}
.casovnica li{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(16px,3vw,48px);
  padding:26px 0; border-bottom:1px solid #DCDCDC;
}
.casovnica li:last-child{border-bottom:0}
.leto{
  font-family:var(--mono); font-weight:600; font-size:1.05rem; letter-spacing:.06em;
  color:var(--red); padding-top:4px; white-space:nowrap;
}
.casovnica h3{font-size:1.3rem; margin-bottom:.45em}
.casovnica p{margin:0; max-width:62ch; color:#3A3A3A}
.casovnica li:last-child .leto{color:var(--green)}

/* ---------- rezultati ---------- */
#rezultati{overflow:hidden}
#rezultati::before{
  content:""; position:absolute; z-index:0; right:-70px; top:70px;
  width:min(440px,42vw); aspect-ratio:1.05;
  background:url("../img/logo-lenart-wrestling.png") no-repeat center/contain;
  opacity:.05; pointer-events:none;
}
#rezultati .wrap{position:relative; z-index:1}
.izpostavljeno{
  border-left:5px solid var(--red); padding:4px 0 4px clamp(20px,3vw,34px);
  margin:0 0 clamp(42px,5vw,66px); max-width:70ch;
}
.izpostavljeno h3{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:.4em}
.izpostavljeno p{color:#C9C9C9}
.drobno{font-family:var(--mono); font-size:.88rem; color:#fff}
.drobno li{padding:9px 0 9px 22px; position:relative; border-top:1px solid #242424}
.drobno li::before{content:""; position:absolute; left:0; top:18px; width:8px; height:8px; background:var(--green-svetla)}

.rezultati{border-top:2px solid #2B2B2B}
.rezultati li{
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(14px,3vw,44px);
  padding:20px 0 20px 20px; border-bottom:1px solid #2B2B2B; position:relative;
}
.rezultati li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform .22s ease;
}
.rezultati li:hover::before{transform:scaleY(1)}
.kdo{font-family:var(--disp); text-transform:uppercase; font-size:1.05rem; line-height:1.25; padding-top:2px}
.kaj{color:#C2C2C2}

/* ---------- ljudje ---------- */
.ekipa{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:3px solid var(--black)}
.ekipa article{padding:30px 34px 30px 0; border-right:1px solid #E0E0E0}
.ekipa article:last-child{border-right:0}
.ekipa article:not(:first-child){padding-left:34px}
.ekipa h3{font-size:1.6rem; margin-bottom:.55em}
.ekipa p{font-size:.99rem}
.stik{display:flex; flex-direction:column; gap:7px; margin-top:1.6em; font-family:var(--mono); font-size:.92rem}
.stik a{text-decoration:none; border-bottom:2px solid var(--red); align-self:flex-start; padding-bottom:2px; word-break:break-word}
.stik a:hover{color:var(--red)}

@media (max-width:900px){
  .casovnica li{grid-template-columns:1fr; gap:6px}
  .leto{padding-top:0}
  .rezultati li{grid-template-columns:1fr; gap:6px}
  .ekipa{grid-template-columns:1fr}
  .ekipa article{border-right:0; border-bottom:1px solid #E0E0E0; padding:26px 0 !important}
  .ekipa article:last-child{border-bottom:0}
}

/* ---------- vabilo v EŠR na domači strani ---------- */
.nav a.poudarek{color:#fff; background:rgba(225,6,0,.18); padding:5px 10px; border-bottom-color:transparent}
.nav a.poudarek:hover{background:var(--red); border-bottom-color:var(--red)}
.pas-esr{background:var(--green); color:#fff; position:relative}
.pas-esr::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pas-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:end;
  padding-top:clamp(44px,5vw,72px); padding-bottom:clamp(44px,5vw,72px);
}
.pas-esr .tag{color:rgba(255,255,255,.88)}
.pas-esr .lead{color:#D5EBD9}
.pas-cta{margin:0}
@media (max-width:760px){
  .pas-in{grid-template-columns:1fr; align-items:start; gap:22px}
  .nav a.poudarek{padding:15px 0; background:none}
}

/* ==========================================================
   ELEMENTARNA ŠOLA ROKOBORBE (esr.html)
   ========================================================== */
/* obvezna navedba za dokazilo o objavi */
.brezplacno{background:var(--red); color:#fff; position:relative}
.brezplacno::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.brezplacno-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(22px,4vw,60px); align-items:end;
  padding-top:clamp(40px,5vw,68px); padding-bottom:clamp(40px,5vw,68px);
}
.izjava{
  font-family:var(--disp); text-transform:uppercase; letter-spacing:-.022em;
  font-size:clamp(1.9rem,5vw,3.6rem); line-height:.94; margin:0;
}
.izjava em{
  font-style:normal; background:#fff; color:var(--red); padding:0 .14em .06em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.izjava-pod{
  font-family:var(--mono); font-size:.86rem; line-height:1.7; margin:0;
  border-top:2px solid rgba(255,255,255,.5); padding-top:16px; color:rgba(255,255,255,.92);
}

/* ---------- prijava ---------- */
.prijava-mreza{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,70px); align-items:start;
}
.prijava-uvod{position:sticky; top:104px}
.prijava-uvod h2{margin-bottom:.5em}
.prijava-uvod p{max-width:38ch}
.drobno-stik{display:flex; flex-direction:column; gap:8px; margin-top:1.6em; font-family:var(--mono); font-size:.92rem}
.drobno-stik a{text-decoration:none; border-bottom:2px solid var(--red); align-self:flex-start; padding-bottom:2px}
.drobno-stik a:hover{color:var(--red)}

.prijava-okvir{background:#fff; border:2px solid var(--black); padding:clamp(24px,3.4vw,44px)}
.obrazec{display:grid; grid-template-columns:1fr 1fr; gap:20px 26px}
.polje{display:flex; flex-direction:column; gap:8px; margin:0}
.polje.sirok{grid-column:1 / -1}
.polje label{
  font-family:var(--mono); font-size:.7rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.16em; color:var(--ash);
}
.obrazec input[type="text"],
.obrazec input[type="tel"],
.obrazec input[type="email"],
.obrazec input[type="date"],
.obrazec textarea{
  font-family:var(--body); font-size:1rem; color:var(--black); width:100%;
  background:#FBFBFB; border:0; border-bottom:2px solid #D2D2D2; padding:11px 2px;
  transition:border-color .18s;
}
.obrazec input:hover,.obrazec textarea:hover{border-bottom-color:var(--black)}
.obrazec input:focus,.obrazec textarea:focus{outline:0; border-bottom-color:var(--red)}
.obrazec textarea{resize:vertical; line-height:1.5}
.obrazec input::placeholder{color:#B0B0B0}

.privolitve{gap:14px; margin-top:6px; border-top:1px solid #E4E4E4; padding-top:22px}
.privolitev{display:flex; align-items:flex-start; gap:12px; font-size:.95rem; line-height:1.5; cursor:pointer}
.privolitev input{width:20px; height:20px; margin-top:2px; accent-color:var(--red); flex:none}
.obvezno{
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em;
  color:#fff; background:var(--red); padding:2px 7px; white-space:nowrap;
}
.pastka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.oddaja{flex-direction:row; align-items:center; flex-wrap:wrap; gap:18px; margin-top:8px}
.oddaja .muted{font-size:.88rem}

.obvestilo{
  border-left:5px solid var(--red); padding:15px 18px; margin:0 0 24px;
  font-family:var(--mono); font-size:.92rem; line-height:1.6; background:#F4F4F4;
}
.obvestilo-ok{border-color:var(--green)}
.obvestilo a{color:var(--red)}

/* ---------- logotipi podpornikov ---------- */
.plosca{
  background:#fff; border:1px solid #E0E0E0; margin:clamp(26px,4vw,44px) 0 clamp(24px,3vw,38px);
  display:grid; grid-template-columns:repeat(3,1fr); align-items:center;
}
.znak-polje{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding:clamp(30px,4vw,54px) clamp(18px,3vw,40px); min-height:230px;
  border-right:1px solid #EAEAEA; text-align:center;
}
.znak-polje:last-child{border-right:0}
.znak-polje img{width:auto; object-fit:contain}
.znak-fso img{max-height:46px}
.znak-rzs img{max-height:104px}
.znak-klub img{max-height:96px}
.znak-polje span{
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--ash);
}
.drobni-zapis{
  font-family:var(--mono); font-size:.84rem; line-height:1.75; color:#464646;
  max-width:82ch; border-top:2px solid var(--black); padding-top:18px;
}

@media (max-width:900px){
  .brezplacno-in{grid-template-columns:1fr; align-items:start; gap:24px}
  .prijava-mreza{grid-template-columns:1fr; gap:26px}
  .prijava-uvod{position:static}
  .prijava-uvod p{max-width:none}
}
@media (max-width:760px){
  .obrazec{grid-template-columns:1fr}
  .plosca{grid-template-columns:1fr}
  .znak-polje{border-right:0; border-bottom:1px solid #EAEAEA; min-height:0; padding:34px 20px}
  .znak-polje:last-child{border-bottom:0}
}

/* ==========================================================
   OBVESTILO O PIŠKOTKIH
   ========================================================== */
.piskotki{
  position:fixed; z-index:80; left:var(--pad); bottom:var(--pad); width:min(430px, calc(100vw - 2*var(--pad)));
  background:var(--black-2); color:#E4E4E4; border-top:4px solid transparent;
  border-image:linear-gradient(90deg,var(--red) 0 50%,var(--green) 50% 100%) 1;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.piskotki[hidden]{display:none}
.piskotki-vsebina{padding:24px 26px 26px}
.piskotki .tag{margin-bottom:1.1em}
.piskotki p{font-size:.94rem; line-height:1.6; margin:0 0 1.1em}
.piskotki details{margin:0 0 1.2em; border-top:1px solid #2B2B2B; padding-top:12px}
.piskotki summary{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--ash-dark); cursor:pointer; list-style:none;
}
.piskotki summary::-webkit-details-marker{display:none}
.piskotki summary::after{content:" +"; color:var(--red)}
.piskotki details[open] summary::after{content:" –"}
.piskotki details p{font-size:.88rem; margin:12px 0 0; color:#B4B4B4}
.piskotki-gumbi{display:flex; flex-wrap:wrap; gap:10px; margin:0}
.piskotki .btn{padding:13px 20px; font-size:.76rem}
.foot .piskotki-odpri{
  background:none; border:0; padding:0; cursor:pointer; color:#fff; font:inherit;
  border-bottom:1px solid var(--red);
}
.foot .piskotki-odpri:hover{color:var(--red)}

@media (max-width:600px){
  .piskotki{left:0; right:0; bottom:0; width:100%}
  .piskotki-vsebina{padding:20px var(--pad) 22px}
}