/* =========================================================
   SMO – Slovenski mladinski orkester
   1:1 po Figmi (node 25097:527). Natančne mere/pisave/pozicije.
   Tehnika: kontejnerji (container queries) -> elementi so v % in cqw,
   zato so pri designerski širini PIKSEL-NATANČNI, navzdol pa sorazmerno
   skalirajo (telefon/tablica).
   ========================================================= */

@font-face{
  font-family:"PP Neue World";
  src:url("../fonts/PPNeueWorld-CondensedRegular.woff2") format("woff2"),
      url("../fonts/PPNeueWorld-CondensedRegular.woff")  format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PP Neue World";
  src:url("../fonts/PPNeueWorld-SemiCondensedUltrabold.woff2") format("woff2"),
      url("../fonts/PPNeueWorld-SemiCondensedUltrabold.woff")  format("woff");
  font-weight:700 900; font-style:normal; font-display:swap;
}

:root{
  --lemon:#D2F245; --lemon-light:#ECFAB1;
  --pink:#FF7BE4;  --pink-light:#FFD2EA;
  --dark-blue:#050078; --violet:#5F54DF;
  --blue-light:#B2CDFF; --ebonit:#1C2B43; --white:#fff;
  --serif:"PP Neue World", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, Arial, sans-serif;
  --content:1432px;
  --pad:clamp(16px, 50vw - 700px, 244px);  /* 244 pri >=1920, manj pri ožjih */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); background:var(--violet); color:var(--dark-blue); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(100% - 32px, var(--content)); margin-inline:auto;
  padding-inline:0; container-type:inline-size;
}
.band{ width:100%; }

/* barve */
.bg-lemon{background:var(--lemon)} .bg-lemon-light{background:var(--lemon-light)}
.bg-pink{background:var(--pink)} .bg-pink-light{background:var(--pink-light)}
.bg-dark-blue{background:var(--dark-blue)} .bg-violet{background:var(--violet)}
.band-lemon{background:var(--lemon)} .band-lemon-light{background:var(--lemon-light)}
.band-pink-light{background:var(--pink-light)} .band-violet{background:var(--violet)}
.band-dark-blue{background:var(--dark-blue)}
.c-lemon{color:var(--lemon)} .c-pink{color:var(--pink)} .c-dark-blue{color:var(--dark-blue)}
.c-blue-light{color:var(--blue-light)} .c-ebonit{color:var(--ebonit)} .c-white{color:var(--white)}

.dot{ width:10px; height:10px; border-radius:50%; background:var(--lemon); flex:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:500; text-transform:uppercase; text-align:center;
  white-space:nowrap; transition:filter .15s ease;
}
.btn:hover{ filter:brightness(1.06); }

.hl-big,.hl-mid,.prog-tag,.block-title,.projects-title,.partners-title,
.gi-title,.news-h,.proj-name,.prog-photo-label{
  font-family:var(--serif); font-weight:400; font-style:normal; text-transform:uppercase;
}

/* ===================== HEADER (84px; 6px lemon zgoraj/spodaj) ===================== */
.site-header{
  position:sticky; top:0; z-index:100; background:var(--dark-blue);
  border-top:6px solid var(--lemon); border-bottom:6px solid var(--lemon);
}
.header-inner{
  width:min(100% - 32px, 1431px); margin-inline:auto; padding-inline:0;
  height:72px; display:flex; align-items:center; justify-content:space-between;
}
.logo img{ height:46px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:50px; }
.main-nav a{ font-weight:500; font-size:18px; letter-spacing:.056em; line-height:26px; text-transform:uppercase; color:var(--lemon); white-space:nowrap; }
.main-nav a.active{ font-weight:800; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ width:26px; height:2px; background:var(--lemon); }

/* ===================== HERO ===================== */
.hero{ background:var(--violet); padding:52px 0 0; }
.hero .container{ display:flex; flex-direction:column; align-items:center; gap:50px; }

/* Bunner top 1192x497 */
.bunner{
  position:relative; width:100%; max-width:1192px; aspect-ratio:1192/497;
  background:var(--pink); overflow:hidden; container-type:inline-size;
}
.bunner-photo{
  position:absolute; left:38.51%; top:-1.2%; width:61.74%; height:103.6%;
  background:url("../img/concert.jpg") center/cover no-repeat, var(--dark-blue);
}
.bunner-txt{ position:absolute; left:1.17%; top:4.6%; width:97.1%; height:93.2%; }
.hl-big{ position:absolute; top:0; left:0; width:67%; font-size:15.10cqw; line-height:.75; letter-spacing:-.02em; color:var(--lemon); }
.hl-mid{ position:absolute; top:64%; left:0; font-size:5.87cqw; line-height:.8; letter-spacing:-.01em; color:var(--lemon); }
.bunner-meta{ position:absolute; left:1.8%; top:79%; font-family:var(--sans); font-weight:500; font-size:1.846cqw; line-height:1.18; color:var(--dark-blue); text-transform:uppercase; }

/* Lead 944px, Inter medium 22 / 30 */
.hero-lead{ width:100%; max-width:944px; font-family:var(--sans); font-weight:500; font-size:22px; line-height:30px; color:var(--lemon); text-transform:uppercase; }
.hero-lead strong{ font-weight:800; }

/* Sub-nav (full-bleed, 6px pink spodaj) */
.subnav{
  width:100vw; position:relative; left:50%; transform:translateX(-50%);
  background:var(--dark-blue); border-bottom:6px solid var(--pink);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:50px;
  padding:19px 16px;
}
.subnav a{ font-weight:500; font-size:18px; letter-spacing:.056em; line-height:26px; color:var(--lemon); text-transform:uppercase; white-space:nowrap; }
.subnav a.active{ font-weight:800; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }

/* ===================== PRETEKLI / AKTIVNI / NASLEDNI ===================== */
.programs-band{ border-bottom:6px solid var(--lemon); }
.programs{ padding:130px 0; display:flex; gap:32px; justify-content:center; flex-wrap:wrap; }
.prog-card{ position:relative; flex:1 1 360px; max-width:456px; aspect-ratio:456/420; overflow:hidden; container-type:inline-size; }
.prog-tag{ position:absolute; left:0; top:0; width:22.81%; height:97.14%; display:flex; align-items:flex-end; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg); font-size:21.93cqw; line-height:.84; letter-spacing:.02em; }
.prog-card.bg-violet .prog-tag{ letter-spacing:.09em; }
.prog-photo{ position:absolute; left:22.81%; top:0; width:77.19%; height:73.57%; overflow:hidden; background:url("../img/sitdown.jpg") center/cover no-repeat, var(--dark-blue); display:flex; align-items:center; justify-content:center; }
.prog-photo-label{ color:var(--white); font-size:7.02cqw; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.prog-cap{ position:absolute; left:23.46%; top:78.1%; width:57.46%; font-family:var(--sans); font-weight:600; font-size:3.95cqw; line-height:1.1; letter-spacing:.055em; text-transform:uppercase; }
.prog-card .btn{ position:absolute; right:0; bottom:0; height:8.33%; min-width:21.93%; padding:0 2.2cqw; font-size:3.51cqw; }

/* ===================== NOVICE + GALERIJA ===================== */
.band-violet{ border-bottom:6px solid var(--pink); }
.news-gallery{ padding:90px 0; display:flex; gap:29px; justify-content:center; flex-wrap:wrap; align-items:stretch; }
.news,.gallery{ position:relative; flex:1 1 420px; max-width:700px; overflow:hidden; container-type:inline-size; }
.news{ aspect-ratio:700/1046; } .gallery{ aspect-ratio:700/1046; }
.block-title{ position:absolute; left:4.14%; top:5.2%; font-size:11.43cqw; line-height:.84; }
.gallery .block-title{ left:2.43%; }
.block-more{ position:absolute; right:0; top:0; width:17.14%; height:3.35%; min-height:33px; font-size:2.286cqw; }

.news-list{ position:absolute; inset:0; display:flex; flex-direction:column; gap:1.91cqw; padding:12.5% 4.14% 3.35%; }
.news-card{ position:relative; width:100%; flex:1; display:flex; overflow:hidden; }
.news-photo{ width:48.75%; flex:none; height:100%; background:url("../img/concert.jpg") center/cover no-repeat, var(--dark-blue); }
.news-body{ flex:1; display:flex; flex-direction:column; gap:1.86cqw; padding:4.7cqw 4cqw 6.1cqw 2.85cqw; text-transform:uppercase; position:relative; }
.news-h{ font-size:4.571cqw; line-height:.85; letter-spacing:-.01em; }
.news-p{ font-family:var(--sans); font-weight:500; font-size:2.286cqw; line-height:1.25; }
.news-more{ position:absolute; right:0; bottom:0; width:19%; min-width:90px; height:4.7cqw; min-height:28px; font-size:2.286cqw; }

.gallery-grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:2.857cqw; padding:22.3% 2.43% 3.35%; align-content:start; }
.gallery-grid span{ aspect-ratio:208/199; overflow:hidden; background:url("../img/concert.jpg") center/cover no-repeat, var(--dark-blue); }
.gallery-head{ position:absolute; right:2.43%; top:4.4%; display:flex; align-items:center; gap:1.4cqw; z-index:2; }
.art-bsa{ font-family:var(--sans); font-weight:500; font-size:2.857cqw; letter-spacing:.05em; color:var(--dark-blue); text-decoration:underline; text-transform:lowercase; }
.art-bsa-logo{ width:8.57cqw; height:8.57cqw; }

/* ===================== SMO PROJEKTI ===================== */
.band-pink-light{ border-bottom:6px solid var(--dark-blue); }
.projects{ padding:80px 0; display:flex; flex-direction:column; gap:75px; }
.projects-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:84px; flex-wrap:wrap; }
.projects-intro{ font-family:var(--sans); font-weight:500; font-size:22px; line-height:30px; text-transform:uppercase; max-width:436px; }
.projects-title{ font-size:11.87cqw; line-height:.75; letter-spacing:-.02em; text-align:right; flex:1; min-width:300px; }
.projects-grid{ display:flex; gap:32px; justify-content:center; flex-wrap:wrap; }
.proj-card{ position:relative; flex:1 1 360px; max-width:456px; aspect-ratio:456/420; overflow:hidden; container-type:inline-size; }
.proj-photo{ position:absolute; top:0; left:0; width:100%; height:76.9%; background-size:cover; background-position:center; background-color:var(--dark-blue); }
.proj-maria{ background-image:url("../img/maria.jpg"); }
.proj-cankarjev{ background-image:url("../img/cankarjev.jpg"); }
.proj-peace{ background-image:url("../img/peacechild.jpg"); }
.proj-name{ position:absolute; top:2.1%; left:1.5%; width:96.7%; font-size:15.35cqw; line-height:.82; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.proj-cap{ position:absolute; left:0; right:0; bottom:0; height:23.1%; padding:1.75cqw 2.85cqw; font-family:var(--sans); font-weight:500; font-size:4.6cqw; line-height:1.14; letter-spacing:-.048em; text-transform:uppercase; background:var(--lemon); display:flex; align-items:center; }
.proj-card.bg-violet .proj-cap{ background:var(--violet); }
.proj-card.bg-violet .proj-cap{ color:var(--blue-light); }

/* ===================== PARTNERJI ===================== */
.band-lemon{ border-bottom:6px solid var(--pink); }
.partners{ padding:80px 0; display:flex; flex-direction:column; gap:96px; }
.partners-title{ font-size:11.87cqw; line-height:.75; letter-spacing:-.02em; }
.partners-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:65px; }
.partners-row img{ width:auto; object-fit:contain; }
.partners-row img:nth-child(1){ height:95px; }
.partners-row img:nth-child(2){ height:61px; }
.partners-row img:nth-child(3){ height:51px; }
.partners-row img:nth-child(4){ height:43px; }
.partners-row img:nth-child(5){ height:43px; }

/* ===================== GET INVOLVED ===================== */
.gi{ padding:60px 0 50px; display:flex; flex-direction:column; gap:26px; }
.gi-top{ display:flex; align-items:center; gap:53px; flex-wrap:wrap; }
.gi-title{ font-size:11.87cqw; line-height:.75; letter-spacing:-.02em; flex:1; min-width:300px; }
.gi-contact{ display:flex; flex-direction:column; gap:6px; text-align:right; }
.gi-contact a{ font-family:var(--sans); font-weight:500; font-size:18px; line-height:30px; text-transform:uppercase; text-decoration:underline; }
.gi-social{ display:flex; gap:18px; align-items:center; }
.gi-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--lemon); color:var(--lemon); display:flex; align-items:center; justify-content:center; }
.gi-social a:hover{ background:var(--lemon); color:var(--dark-blue); }
.gi-grid{ display:flex; gap:60px; justify-content:space-between; flex-wrap:wrap; border-top:1px solid rgba(210,242,69,.2); padding-top:24px; }
.gi-address p{ font-family:var(--sans); font-weight:500; font-size:18px; line-height:26px; text-transform:uppercase; margin-bottom:18px; font-style:normal; }
.gi-credit{ font-size:10px !important; line-height:14px !important; text-transform:none !important; opacity:.85; }
.gi-menu{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; min-width:159px; }
.gi-menu-title{ font-family:var(--sans); font-weight:800; font-size:18px; line-height:26px; letter-spacing:.056em; text-transform:uppercase; text-decoration:underline; text-underline-offset:6px; }
.gi-menu a{ font-family:var(--sans); font-weight:500; font-size:18px; line-height:26px; letter-spacing:.056em; text-transform:uppercase; }

/* ===================== MOBILNO ===================== */
@media (max-width:900px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header.open .main-nav{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:14px; background:var(--dark-blue); padding:18px var(--pad); border-bottom:6px solid var(--lemon); }
  .site-header.open .main-nav .dot{ display:none; }
  .programs{ padding-block:60px; } .news-gallery{ padding-block:50px; }
  .projects,.partners,.gi{ padding-block:50px; }
  .projects-head{ flex-direction:column; align-items:flex-start; gap:24px; }
  .projects-title{ text-align:left; }
  .gi-contact{ text-align:left; }
  .hero-lead,.projects-intro{ font-size:18px; line-height:1.4; }
}
@media (max-width:560px){
  .news,.gallery{ aspect-ratio:auto; min-height:0; }
  .news{ height:auto; }
  .news-list{ position:static; gap:14px; padding:64px 18px 24px; }
  .news-card{ flex-direction:column; }
  .news-photo{ width:100%; aspect-ratio:16/9; }
  .news-body{ gap:8px; padding:14px; }
  .news-h{ font-size:24px; } .news-p{ font-size:13px; } .news-more{ font-size:12px; height:28px; position:static; align-self:flex-start; margin-top:6px; }
  .gallery{ aspect-ratio:auto; }
  .gallery-grid{ position:static; padding:64px 14px 24px; }
  .block-title{ position:static; font-size:48px; margin:0 0 8px; }
  .block-more{ font-size:11px; }
  .gallery-head{ top:18px; }
  .hl-big{ width:78%; }
}