/* Diatonica Lessons (podstran lessons/): nagovor, strune, tečaj, lekcija, vadnica. Gradi na stran.css (žetoni, pisave,
   glava .lekcije-oder, predvajalnik). Dia, 2. 11. 2026 (Mitja: »samo CTA, potem se odpre podstran Diatonica Lessons«). */

.podstran { --stolpci: repeat(3, minmax(0, 1fr)); --razmik: clamp(32px, 5vw, 80px);   /* ena mreža za vso podstran (Mitja, 2. 11.: »vse poravnano«) */
  background: linear-gradient(180deg, var(--deep) 0, var(--abyss) 26%, #08121a 64%, var(--ink) 100%); }
.l-skrito { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* vrh: logotip domov in pot nazaj, nad fotografijo */
.l-vrh { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100%, 1440px); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: max(26px, env(safe-area-inset-top)) var(--rob) 0; }
.l-logo img { width: clamp(132px, 11vw, 168px); height: auto; }
.l-domov { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; transition: color .3s; }
.l-domov::before { content: '←'; letter-spacing: 0; transition: transform .4s var(--mehko); }
.l-domov:hover { color: var(--led); }
.l-domov:hover::before { transform: translateX(-4px); }

/* glava */
.l-hero { height: max(560px, 100svh); }
.l-hero .lekcije-glava { max-width: 1296px; }                 /* rob kot nagovor, tečaj in vadnica (1440 − 2 × 72) */
.l-status { margin-top: 28px; font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }

/* nagovor */
.l-nagovor { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 9vh, 110px) var(--rob) 0; }
.lekcije-izjava { display: grid; grid-template-columns: var(--stolpci); gap: var(--razmik); align-items: start; }
.lekcije-poziv { grid-column: 1 / span 2; }                 /* poziv čez prva dva stolpca, odstavek v tretjem, kot točke spodaj */
.lekcije-izjava p + p { grid-column: 3; }
.lekcije-poziv { font-size: clamp(26px, 2.6vw, 38px); font-weight: 300; line-height: 1.3; max-width: 22ch; text-wrap: balance; }
.lekcije-izjava p + p { max-width: 38ch; color: rgba(235, 229, 217, .86); padding-top: .5em; }
.lekcije-tocke { display: grid; grid-template-columns: var(--stolpci); gap: var(--razmik);
  margin-top: clamp(64px, 10vh, 112px); }
.lekcije-tocke h2, .l-poglavje h3 { font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; font-size: 22px;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; }
.lekcije-tocke p { margin-top: 14px; max-width: 38ch; color: rgba(235, 229, 217, .86); }
.lekcije-tocke .prikaz:nth-child(2) { transition-delay: .12s; }
.lekcije-tocke .prikaz:nth-child(3) { transition-delay: .24s; }

/* strune: od roba vsebine do desnega roba zaslona, kot tabulatura (e zgoraj, E spodaj) */
.strune { margin-top: 0; }                                   /* za vadnico: igranje skupaj (Mitja, 2. 11.); odmik da vadnica */
.strune-glava { max-width: 1440px; margin: 0 auto; padding: 0 var(--rob);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.strune-zvok { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; cursor: pointer;
  background: none; border: 1px solid var(--steel); font-size: 13px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; transition: border-color .3s, color .3s; }
.strune-stanje { color: var(--mist); min-width: 3ch; text-align: left; }
.strune-zvok:hover, .strune-zvok[aria-pressed="true"] { border-color: var(--led); color: var(--led); }
.strune-zvok[aria-pressed="true"] .strune-stanje { color: var(--led); }
.strune-platno { width: 100%; height: clamp(180px, 26vh, 250px); margin-top: 10px; touch-action: none; }

/* tečaj */
.l-tecaj { max-width: 1440px; margin: 0 auto; }
.l-tecaj-glava .uvod { margin-top: 30px; }
.l-tecaj-meta { margin-top: 20px; font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }
.l-poglavja { display: grid; grid-template-columns: var(--stolpci); gap: var(--razmik);
  margin-top: clamp(56px, 9vh, 96px); }
.l-poglavje h3 { margin-bottom: 18px; }
.l-seznam li { display: block; min-height: 0; }
.l-vrstica, .l-seznam .l-pripravlja { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center;
  gap: 14px; min-height: 56px; }
.l-vrstica { text-decoration: none; transition: color .3s; }
.l-seznam .ime { font-size: 17px; letter-spacing: .14em; line-height: 1.3; padding: 8px 0; }
.l-seznam .stanje { letter-spacing: .14em; }
.l-vrstica .stanje { font-variant-numeric: tabular-nums; }
.l-vrstica:hover, .l-vrstica:hover .st, .l-vrstica:hover .stanje { color: var(--led); }
.l-vrstica[aria-current] .ime, .l-vrstica[aria-current] .st { color: var(--led); }

/* lekcija */
.l-lekcija { max-width: 1440px; margin: 0 auto; padding: 0 var(--rob) var(--odsek); scroll-margin-top: 24px; }
.l-lekcija-mreza { display: grid; grid-template-columns: var(--stolpci); gap: var(--razmik); align-items: start; }
.l-video { grid-column: 1 / span 2; }                        /* video čez dva stolpca, besedilo v tretjem: rob kot »The solos« */
.l-video { aspect-ratio: 16 / 9; background: #08121a; overflow: hidden; box-shadow: 0 34px 70px rgba(0, 0, 0, .45); }
.l-video iframe, .l-video video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.l-video-prazno { width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(rgba(7, 12, 16, .62), rgba(7, 12, 16, .62)), url("../img/lekcije-siroka.jpg") 60% 50% / cover; }
.l-video-prazno .oznaka { color: var(--foam); }
/* YouTube na klik: krog s trikotnikom, napis, drobna opomba */
.l-video-zacni { border: 0; padding: 0; cursor: pointer; color: var(--foam); align-content: center; gap: 14px;
  background-size: cover; background-position: 60% 50%; }
.l-video-krog { width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(235, 229, 217, .55); justify-self: center;
  background: no-repeat 54% 50% / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23ebe5d9'/%3E%3C/svg%3E");
  transition: border-color .3s, transform .4s var(--mehko); }
.l-video-zacni:hover .l-video-krog { border-color: var(--led); transform: scale(1.05); }
.l-video-opomba { font-size: 15px; color: var(--mist); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.l-lekcija-naslov { margin-top: 18px; font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; text-transform: uppercase;
  font-size: clamp(30px, 3vw, 44px); letter-spacing: .14em; line-height: 1.15; }
.l-lekcija-kje { margin-top: 14px; font-size: 16px; color: var(--mist); font-variant-numeric: tabular-nums; }
.l-lekcija-opis { margin-top: 18px; max-width: 42ch; color: rgba(235, 229, 217, .86); }
.l-gumbi { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* čez cel stolpec, enako široki */
.l-gumbi .gumb-tanek { justify-content: center; }
.gumb-tanek { background: none; cursor: pointer; }
.l-listaj { margin-top: 40px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.l-listaj a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--mist); transition: color .3s; }
.l-listaj a:hover { color: var(--led); }
.l-listaj a:last-child { justify-self: end; }
#lekcijaPrej::before { content: '←'; letter-spacing: 0; margin-right: 10px; }
#lekcijaNaprej::after { content: '→'; letter-spacing: 0; margin-left: 10px; }

/* vadnica */
.l-vadnica { max-width: 1440px; margin: 0 auto; }
.l-vadnica-glava .uvod { margin-top: 30px; max-width: 40ch; }
.l-pult { margin-top: clamp(48px, 8vh, 88px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.l-val { height: 96px; }
.l-orodja { display: grid; grid-template-columns: var(--stolpci); gap: 32px var(--razmik); align-items: start; }   /* Speed 1. stolpec, Loop 2. */
/* skupina: oznaka levo, gumbi desno; opomba zanke pod gumbi, poravnana z njimi */
.l-skupina { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* oznaka nad gumbi */
.l-gumbi-vrsta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.l-skupina[aria-label="Track"] .l-gumbi-vrsta { grid-auto-flow: row; grid-template-columns: var(--stolpci); gap: var(--razmik); }   /* sled = stolpec */
.l-izbira { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px;
  background: none; border: 1px solid var(--steel); color: rgba(235, 229, 217, .82); cursor: pointer;
  font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .3s, color .3s; }
.l-izbira:hover:not(:disabled) { border-color: var(--led); color: var(--led); }
.l-izbira[aria-pressed="true"] { border-color: var(--led); color: var(--led); }
.l-izbira:disabled { color: rgba(235, 229, 217, .65); cursor: default; }
.l-kmalu { margin-left: 12px; font-size: 13px; letter-spacing: .14em; color: var(--mist); }
.l-zanka-cas { font-size: 15px; line-height: 1.4; color: var(--mist); font-variant-numeric: tabular-nums; }

/* noga */
/* noga: ista slika grbavca kot na glavni strani (Mitja, 2. 11.); vsebina v stolpcu na sredini */
.l-noga .konec-vsebina { display: flex; flex-direction: column; align-items: center; }
.l-noga-logo img { width: clamp(150px, 13vw, 196px); height: auto; filter: drop-shadow(0 0 18px rgba(7, 12, 16, .9)); }
.l-nazaj { margin-top: 40px; }
.l-nazaj::before { content: '←'; letter-spacing: 0; transition: transform .4s var(--mehko); }
.l-nazaj:hover::before { transform: translateX(-4px); }

@media (max-width: 1200px) {
  /* video nad besedilom; gumbi v stolpcih mreže, listanje čez vso širino */
  .l-lekcija-mreza { grid-template-columns: minmax(0, 1fr); }
  .l-video { grid-column: auto; }
  .l-gumbi { grid-template-columns: var(--stolpci); gap: var(--razmik); }
  .l-orodja { grid-template-columns: minmax(0, 1fr); }         /* Speed in Loop vsak v svoji vrsti čez vso širino */
  .l-skupina[aria-label="Loop"] .l-gumbi-vrsta { grid-auto-flow: row; grid-template-columns: var(--stolpci); gap: var(--razmik); }
}
@media (max-width: 900px) {
  .lekcije-izjava { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lekcije-poziv, .lekcije-izjava p + p { grid-column: auto; }
  .lekcije-tocke, .l-poglavja { grid-template-columns: minmax(0, 1fr); gap: 44px; }   /* čez vso širino: desni rob kot ostali bloki */
}
@media (max-width: 760px) {
  /* vadnica: oznaka nad gumbi, gumbi v skupini enako široki čez vso širino (Track en stolpec, Speed 4, Loop 3) */
  .l-orodja { display: grid; gap: 28px; }
  .l-skupina { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .l-zanka-cas { grid-column: 1; }
  .l-gumbi-vrsta { width: 100%; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .l-skupina[aria-label="Speed"] .l-gumbi-vrsta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .l-skupina[aria-label="Loop"] .l-gumbi-vrsta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .l-skupina[aria-label="Track"] .l-gumbi-vrsta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .l-gumbi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 700px) {
  .l-hero { height: auto; }
}
@media (max-width: 600px) {
  .strune-glava .pika, .l-status > .pika { display: none; }
  .l-status .del { display: block; }
  .l-status .del + .pika + .del { margin-top: 6px; }
  .strune-namig { display: block; margin-top: 8px; letter-spacing: .2em; }
  .l-val { height: 76px; }
  .l-izbira { min-width: 0; padding: 0 6px; letter-spacing: .06em; }
  .l-gumbi { max-width: none; }
  .l-nazaj { width: 100%; justify-content: center; }
  .l-listaj { letter-spacing: .14em; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .l-hero { height: max(340px, 100svh); }
  .strune-platno { height: clamp(120px, 30vh, 150px); }
}