/*
 * Theme Name:   Hello Elementor Child
 * Template:     hello-elementor
 * Description:  V2 child tema za conference.almamater.si — podim-inspired redesign
 * Version:      2.0.0
 * Author:       Alma Mater Europaea
 */


/* =======================================================
   AMEU CONFERENCE — BARVNI SISTEM v3
   Poenoten s support.almamater.si. Pet plasti:
     L0  primitivi       — komponentna pravila jih NE uporabljajo
     L1  tematizirano    — se obrne med svetlo in temno
     L2a pasovi          — temni v OBEH temah, v temni se poglobijo
     L2b crnilo na pasu  — NESPREMENLJIVO, nic dark overrideov (G2)
     L3  track cipi      — izpeljani iz inline barve tracka
   Vsako razmerje v komentarju je IZRACUNANO (WCAG 2.x), ne ocenjeno.
   Specifikacija in izpeljava: docs/COLOR-SYSTEM.md
   ======================================================= */
:root {
    color-scheme: light dark;   /* nativni <select> seznami + drsniki */

    /* ---------- L0 PRIMITIVI (besednjak support.almamater.si) ---------- */
    --ameu-primary:        #0061AA;  /* support --primary / ameu-primary       */
    --ameu-primary-hover:  #004d8a;  /* support --primary-hover                */
    --ameu-primary-bright: #5ab4f0;  /* support dark --primary                 */
    --ameu-primary-lift:   #7ec8f7;  /* support dark --primary-hover           */
    --ameu-navy:           #00386C;  /* ameu-dark                              */
    --ameu-navy-mid:       #004E92;  /* razsiritev za konferenco               */
    --ameu-navy-deep:      #002347;  /* ameu-darker = noga support strani      */
    --ameu-navy-deepest:   #001A33;  /* ozadje <html> na support strani        */
    --ameu-abyss:          #000d1c;  /* razsiritev, stopnja nizje              */
    --ameu-gold:           #FFCC33;  /* ameu-secondary — SAMO plast pasov      */
    --ameu-ink:            #1A1A2E;  /* support --text / ameu-text             */
    --ameu-ink-inverse:    #0f1b2d;  /* support dark --btn-text                */
    --ameu-paper:          #e8edf4;  /* support dark --text                    */
    --ameu-white:          #ffffff;

    /* ---------- L1 PLOSKVE ---------- */
    --surface:          #ffffff;   /* podlaga strani                                     */
    --surface-sunken:   #eef2f7;   /* izmenicna sekcija. 1.12:1 proti strani — namenoma
                                      temneje od #f5f7fa (1.07): barvni trak je
                                      prepovedan, zato mora pas nositi sam sebe.        */
    --surface-card:     #ffffff;   /* dvignjen panel. Kartica proti strani je 1.00:1 po
                                      svetlosti — mejo nosi IZKLJUCNO --shadow-md.
                                      NE "popravljaj" tega z barvnim levim robom.       */
    --surface-hover:    #f2f6fa;   /* hover podlaga kartice / vrstice                   */
    --surface-selected: #dfeaf5;   /* izbrana vrstica. 1.22:1 — tint NI znak stanja,
                                      to je inset obroc --color-emphasis (5.24:1).      */
    --surface-media:    #ffffff;   /* NESPREMENLJIVO: skatla za nalozene slike.
                                      V temni temi OSTANE bela, sicer se prosojni
                                      partnerski PNG logotipi razbijejo.                */
    --media-placeholder-1: #dbe1ea; /* gradient za manjkajoco sliko / slicico            */
    --media-placeholder-2: #c3cddd;

    /* ---------- L1 CRNILO ---------- */
    --color-text:        #1a1a2e;  /* telo. 17.06 stran / 15.17 sunken. = support --text */
    --color-heading:     #00386C;  /* VLOGA (b) STRUKTURNA: h2/h3, naslovi kartic in
                                      sekcij. 11.78. V temni se obrne v skoraj belo.    */
    --color-emphasis:    #0061AA;  /* VLOGA (b) PODATEK/STANJE: statisticne stevilke,
                                      naslovi dni, casovne oznake, aktivna vrstica,
                                      tocke casovnice. 6.38. V temni v blagovno modro.  */
    --color-text-subtle: #4c515b;  /* drugotno besedilo, podnaslovi, meta.
                                      Resen: >=6.5 na VSEH stirih svetlih podlagah.     */
    --color-text-faint:  #616875;  /* tretjinsko: napisi pod slikami, casi, formati.
                                      Resen: >=4.5 na vseh stirih (najslabse 4.60).
                                      support --text-light #9ca3af je 2.26 — ZAVRNJEN.  */

    /* ---------- L1 INTERAKCIJA ---------- */
    --color-primary:       #0061AA;  /* povezave, polnila, UI na SVETLI podlagi. 6.38   */
    --color-primary-hover: #004d8a;  /* 8.65                                            */
    --on-brand:            #ffffff;  /* crnilo na polnilu --color-primary. 6.38.
                                        V temni se OBRNE v #0f1b2d — belo na #5ab4f0
                                        je 2.28 in ne sme nikoli iti v produkcijo.      */

    /* ---------- L1 ROBOVI ---------- */
    --color-border:        rgba(0, 0, 0, 0.07);      /* SAMO okrasno, 1.17:1. Dovoljeno
                                                        le tam, kjer tece tudi --shadow-*/
    --color-border-strong: rgba(0, 97, 170, 0.18);   /* okrasna hover lasnica           */
    --border-ui:           #7d828c;                  /* OBVEZNA meja za polja, izbirnike,
                                                        obrisne gumbe. 3.86 / 3.43 /
                                                        3.16. WCAG 1.4.11.              */

    /* ---------- L1 OBRAZCI ---------- */
    --field-bg:          #ffffff;
    --field-text:        var(--color-text);
    --field-placeholder: #616875;   /* 5.61. Zamenja rgba(0,73,131,.4), ki je bil 2.63. */

    /* ---------- L1 STATUS ---------- */
    --color-success: #1d7731;  /* ameu-success #28A745 je 3.13 na belem — popravljen    */
    --color-danger:  #c12f3d;  /* ameu-danger #DC3545 pade za las (4.53) — popravljen   */

    /* ---------- L1 DUH (zapiralni gumbi modalov) ---------- */
    --btn-ghost-bg:       rgba(0, 0, 0, 0.08);
    --btn-ghost-bg-hover: var(--color-primary);
    --btn-ghost-ink:      var(--color-text-subtle);   /* 6.66 na duhastem polnilu       */

    /* ---------- L1 GLOBINA (geometrija + alfe s support strani) ---------- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);   /* nosi mejo kartice pri 1.00:1 */
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);

    /* ---------- L1 FOKUS (dvobarven iz nuje) ---------- */
    /* Nobena posamicna barva ne doseze 3:1 na vseh 16 resnicnih ploskvah: #0061AA pade
       na glavi, #5ab4f0 in #FFCC33 in #ffffff padejo na belem, #0f1b2d na vsakem navyju.
       S tem parom je najslabsa boljsa polovica 6.38 (svetlo) in 7.59 (temno). Ne
       "pospravljaj" tega nazaj v eno barvo.                                            */
    --focus-ring: #0f1b2d;   /* outline: 2px solid    */
    --focus-halo: #ffffff;   /* box-shadow: 0 0 0 4px */

    /* ---------- L1 LOCNICA PASU — edini token na pasu, ki se OBRNE ---------- */
    /* Imenovan --divider-band in NE --on-band-*, ravno zato, da varovalke G2 ("noben
       on-band token ne sme biti v temnem bloku") ni mogoce uporabiti mehansko.
       Tu okrasna (pas se od strani loci pri 11.78:1); v TEMNI NOSILNA, kjer je
       pas proti strani samo 1.11:1.

       13. 8. 2026 je bila ta vrednost za en dan 0.48, da bi bila lasnica na pasovih
       vidna tudi v svetli temi (3.89:1 namesto 1.32:1). Uporabnik se je premislil —
       lasnica ostane samo v temni temi. Ce jo bos kdaj hotel nazaj: dvigni to alfo
       na 0.48 IN odstrani vezavo na temo pri pravilu za pasove na dnu datoteke.
       Postopek merjenja je v tools/qa/hairline.js.                                   */
    --divider-band: rgba(255, 255, 255, 0.10);

    /* ======== L2a PASOVI — temni v OBEH temah, v temni stopnjo globlje ======== */
    --band:         #00386C;  /* glava, nav, odstevalnik, govorci, FAQ, CTA, dnevna vrstica */
    --band-deep:    #002347;  /* noga, spustni meniji, mobilni nav = noga support strani    */
    --band-raised:  #004E92;  /* kartica, ki lezi NA pasu (govorci / highlight kartice)     */
    --band-accent:  #004E92;  /* okrasna blagovna plosca: statisticni pas, poudarjena
                                 datumska kartica. RESENO NAVZDOL z #0061AA: tam je bil
                                 --on-band-link 3.49 in --gold 4.24, kar bi naredilo to
                                 omejeno ploskev in past za naslednjega, ki doda povezavo.
                                 Pri #004E92 vsako crnilo doseze AA (najslabse 4.59).      */

    /* Ambientalni preliv ozadja strani. Zelo nizka amplituda (1.00 -> 1.09 svetlosti),
       da ne tekmuje z vsebino in ne pokvari kontrasta — merjeno je najslabsi postanek.
       Kartice ostanejo RAVNE (--surface-card), zato se z njega dvignejo. */
    --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f4f8fc 45%, #e9eff7 100%);

    --gradient-hero: linear-gradient(135deg, #001A33 0%, #00386C 45%, #004E92 100%);
        /* Literalni navyji, popolnoma LOCENI od --color-primary*: ce bi hero
           interpoliral blagovni token, bi se v temni temi prebarval svetlo modro.
           Najsvetlejsi postanek je omejen na #004E92, da --on-band-link se doseze
           AA (4.59); pri #00548f pade na 4.31 in pri #0061AA na 3.49.                  */
    --gradient-accent: linear-gradient(135deg, #00386C 0%, #004E92 100%);
        /* Par cyan #0091ea / #0277bd je upokojen.                                      */
    --hero-scrim: linear-gradient(to bottom,
                    rgba(0, 35, 71, 0.88) 0%,
                    rgba(0, 35, 71, 0.82) 45%,
                    rgba(0, 35, 71, 0.88) 100%);
        /* Presojano proti NAJSLABSEMU primeru — cisto beli fotografiji — zato je vsaka
           resnicna slika varnejsa. Pri tankem postanku (.82): belo 9.08, muted 6.04,
           zlato 6.03 — vse AA+. Dvignjeno z danasnjih .82/.68/.80; .82 ne znizuj.      */

    /* ==== L2b CRNILO NA PASU — NESPREMENLJIVO. NIC dark overrideov. Varovalka G2 ==== */
    /* ~55 deklaracij barva kromiranje, ki je temno v obeh temah. Ker se te nikoli ne
       obrnejo, temni blok vsebuje samo L1 preslikave in 4 poglobitve pasov.
       Ce se katera od teh pojavi v temnem bloku, je bila NAPACNO RAZVRSCENA.           */
    --on-band:            #ffffff;  /* 11.78 pas / 15.77 deep / 8.38 raised+accent      */
    --on-band-soft:       #e6ecf3;  /* 9.91 / 13.26 / 7.05                              */
    --on-band-muted:      #c8d4e2;  /* 7.84 / 10.49 / 5.58. TRDNA, ne alfa: stara
                                       rgba(255,255,255,.60) se je cez svetli postanek
                                       heroja sestavila na 3.06 — ziva napaka danes,
                                       poleg tega alfe cez fotografijo ni mogoce
                                       presojati.                                       */
    --on-band-link:       #7ec8f7;  /* interaktivno NA pasu, v OBEH temah. 6.45 / 8.63 /
                                       4.59. --color-primary je 2.47 na nogi in 1.85
                                       na glavi.                                        */
    --on-band-border:     rgba(255, 255, 255, 0.14);  /* okrasna lasnica                */
    --on-band-border-ui:  #afb7c2;  /* OBVEZNA meja za kontrolo na pasu
                                       (.prog-track-select). 5.82 / 7.79 / 4.14.
                                       Trdna, ker bela alfa ne doseze 3:1 na vsakem pasu*/
    --on-band-fill:       rgba(255, 255, 255, 0.08);  /* stekleni panel                 */
    --on-band-fill-hover: rgba(255, 255, 255, 0.16);
    --on-band-btn-fill:   #ffffff;  /* TRDNA TABLETKA na pasu. 11.78 proti glavi.
                                       To je gumb Register v glavi in aktivni zavihek
                                       dneva na programu. --color-primary #0061AA na
                                       navy glavi je 1.85 — necitljivo.                 */
    --on-band-btn-ink:    #002347;  /* 15.77 znotraj te tabletke. NI naslov: v OBEH
                                       temah mora ostati navy.                          */
    --gold:               #FFCC33;  /* SAMO plast pasov. Natanko tri uporabe: nadnaslov
                                       heroja, oznaka aktivne postavke menija, hover
                                       povezav v nogi. 7.82 pas / 10.47 deep.
                                       1.51 na belem — nikoli na svetli podlagi.        */
    --on-gold:            #002347;  /* 10.47. Belo na zlatem je 1.51, nikoli dovoljeno. */

    /* ============ L3 TRACK CIPI NA PROGRAMU ============ */
    /* --card-track-color vbrizga shortcode-programme.php inline.
       Anatomija cipa: tintano polnilo + TRDNA pika --track-key + oznaka --track-key.
       PIKA je nosilka identitete. Merjeno na vseh 120 parih 16 resnicnih trackov
       (CIEDE2000): surovi nasiceni odtenki 5 zamenljivih parov (to je strop, ker sta
       PLENARY #c2185b in DANCE ART #ad1457 skoraj enaka PODATKA); samo 12% polnilo 70;
       to 22% polnilo 26; --track-key 9. Pika vrne prepoznavo na prvi pogled, kar je
       cel smisel barvnega kodiranja urnika.                                            */
    --track-base:        var(--surface-card);
    --track-key-partner: var(--ameu-ink);
    --track-fill: color-mix(in srgb, var(--card-track-color) 22%, var(--track-base));
    --track-key:  color-mix(in srgb, var(--card-track-color) 50%, var(--track-key-partner));
    --track-line: color-mix(in srgb, var(--track-key) 45%, var(--track-fill));

    /* ================= ALIAS POLICA — SEZNAM ZA OPUSTITEV ================= */
    /* Absorbira ~150 od ~490 obstojecih uporab BREZ urejanja. Nov CSS mora uporabiti
       semanticno ime; stare uporabe zamenjaj, ko se jih naslednjic dotaknes.
       Vrstico izbrisi sele, ko njeno stetje pade na nic.                               */
    --color-primary-dark:  var(--band);                /* 18 deklaracij ploskev, 0 posegov */
    --color-primary-light: var(--color-primary-hover); /* 4 deklaracije                    */
    --color-accent:        var(--color-emphasis);      /* SAMO ZACASNO — glej role split   */
    --color-accent-hover:  var(--color-primary-hover); /* 3 deklaracije                    */
    --color-white:         var(--on-band);             /* PREOBSEZENO na LITERALNO BELO.
                                                          Varno za 34 uporab color:,
                                                          NE za 21 uporab background:
                                                          — glej VRATA ZAPOREDJA.         */
    --color-off-white:     var(--surface-sunken);      /* 15 deklaracij, 0 posegov         */
    --color-text-light:    var(--on-band-soft);        /* 11 deklaracij, vse na pasovih    */
    --color-text-muted:    var(--on-band-muted);       /* 6 deklaracij; sam ta alias
                                                          popravi napako heroja pri 3.06   */
    --color-bg-card:       var(--on-band-fill);        /* 0 deklaracij                     */
    --color-bg-card-hover: var(--on-band-fill-hover);  /* 0 deklaracij                     */
    --color-border-light:  var(--divider-band);        /* 0 deklaracij                     */

    /* ---------- Nebarvni tokeni (nespremenjeni) ---------- */
    --conf-header-h:       80px;   /* visina fiksne glave; mobilna plosca se zacne pod njo */
    /* Koliko prostora si mora heroj vzeti na vrhu, da ga glava ne prekrije.
       Glava je `position: fixed` in ne zaseda prostora v postavitvi; odkar je
       prosojna, distancnika ni vec, zato ta odmik nosi heroj sam.
       Prijavljenemu uporabniku se pristeje se visina WP admin vrstice — tema
       WP-jev lastni odmik izklopi (`html.wp-toolbar { padding-top: 0 }`),
       zato dokument NE zacne pod njo in bi jo heroj sicer podlezel. */
    --conf-header-offset:  var(--conf-header-h);
    --btn-radius:          50px;
    --card-radius:         0;
    --section-padding:     6rem 0;
    --container-max:       1200px;
    --transition:          0.3s ease;

    /* ---------- Tipografija (v4, poenotena s support.almamater.si) ----------
       Saira za naslove, Inter za besedilo. `--font-primary` je STARO ime, ki ga
       uporablja ~120 pravil v tej datoteki; ostane kot vzdevek za --font-head,
       da ni treba zamenjati vsakega klicnega mesta posebej.
       Negativni letter-spacing na naslovih je NOSILEN, ne kozmeticen: Saira ima
       privzeto siroke medcrkovne razmike in brez tega naslovi delujejo razmaknjeni. */
    --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-head:           'Saira', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-primary:        var(--font-head);

    /* Lestvica velikosti */
    --fs-label:            0.75rem;    /* 12px — oznake, znacke */
    --fs-meta:             0.8125rem;  /* 13px — drobtine, meta */
    --fs-ui:               0.9375rem;  /* 15px — navigacija, gumbi */
    --fs-body:             1rem;       /* 16px — besedilo */
    --fs-lead:             1.125rem;   /* 18px — uvodni odstavek, h4 */
    --fs-h3:               1.25rem;    /* 20px */
    --fs-h2:               1.5rem;     /* 24px */
    --fs-h1:               clamp(1.75rem, 3.2vw, 2.375rem);
}


/* =======================================================
   RESET & BASE
   ======================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Podlaga strani. Nujna za temno temo: brez tega se povsod, kjer sekcija ne
   barva sama, vidi privzeta bela stran brskalnika — v svetli temi je to nevidno,
   ker se privzeta bela slucajno ujema s --surface. html dobi isto barvo zaradi
   overscroll obmocja. */
html {
    /* Preliv je pripet na viewport (fixed), sicer bi se na dolgi strani raztegnil
       cez vso visino dokumenta in postal neviden. */
    background: var(--gradient-surface) no-repeat fixed;
    background-color: var(--surface);   /* rezerva, ce preliv ne obvelja */
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
    background: transparent;
    line-height: 1.65;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Naslovi so Saira. Pravilo je splosno, da ga dobijo tudi naslovi v Gutenberg
   vsebini strani, ki nimajo lastnega razreda. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    letter-spacing: -0.015em;
}

.conf-page-content h1 { font-size: var(--fs-h1); }
.conf-page-content h2 { font-size: var(--fs-h2); }
.conf-page-content h3 { font-size: var(--fs-h3); }
.conf-page-content h4 { font-size: var(--fs-lead); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary-hover);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

section + section {
    border-top: none;
}


/* =======================================================
   CONTAINER
   ======================================================= */
.conf-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}


/* =======================================================
   SECTION TITLES — z accent podčrtajem
   ======================================================= */
.conf-section-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    margin: 0 0 0.5rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    position: relative;
    display: inline-block;
}

/* Brez barvne črtice pod naslovom — glej "BREZ BARVNIH TRAKOV" na dnu datoteke. */
.conf-section-title::after {
    content: none;
}

/* Center varianta za sekcije ki rabijo centered title */
.conf-section-title--center {
    text-align: center;
    display: block;
}

.conf-section-title--center::after {
    margin-left: auto;
    margin-right: auto;
}

.conf-section-subtitle {
    font-size: 1.1rem;
    margin: 0.75rem 0 3rem;
    color: var(--color-text-subtle);
    line-height: 1.6;
}

.conf-section-subtitle--center {
    text-align: center;
}

/* Bela varianta za temne sekcije */
.conf-section-title--light {
    color: var(--color-white);
}

.conf-section-subtitle--light {
    color: var(--color-text-light);
}


/* =======================================================
   BUTTONS  (v4 — kapsula s krozno puscico, vzor support.almamater.si)
   =======================================================
   Oblika je enotna za vse razlicice: kapsula, znotraj nje na levi barvni krog
   s puscico, ob njem krepko besedilo. Barve ostanejo take, kot jih ima vsaka
   razlicica ze zdaj — spremeni se oblika, ne pomen.

   Puscica je background-image na ::before, ne mask: mask bi pobrala
   `currentColor` in bi bila puscica v beli kapsuli bela na beli. Zato dve
   razlicici SVG-ja, izbrani prek --conf-btn-arrow.

   Gumb brez ikone: dodaj razred `conf-btn--noicon` (npr. prenos PDF-ja, kjer
   puscica naprej pomeni napacno stvar).
   ======================================================= */
:root {
    --conf-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --conf-arrow-navy:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300386C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --conf-arrow-left-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
}

.conf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 1.75rem 0.375rem 0.375rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-ui);
    letter-spacing: -0.005em;
    line-height: 1.3;
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    border: 1px solid transparent;
    /* privzetka; razlicice ju prepisejo */
    --conf-btn-icon-fill: var(--color-primary);
    --conf-btn-arrow: var(--conf-arrow-light);
}

.conf-btn::before {
    content: "";
    flex: 0 0 auto;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background-color: var(--conf-btn-icon-fill);
    background-image: var(--conf-btn-arrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.125rem 1.125rem;
    transition: transform var(--transition), background-color var(--transition);
}

.conf-btn:hover::before {
    transform: translateX(3px);
}

/* Razlicice brez ikone se obnasajo kot navadna kapsula */
.conf-btn--noicon {
    padding: 0.8rem 1.75rem;
    gap: 0;
}

.conf-btn--noicon::before {
    content: none;
}

/* Primarni gumb — bela kapsula, navy crnilo, modri krog s puscico.
   Bela ploskev se od svetle podlage loci z nevtralno 1px obrobo in senco
   (glej "BREZ BARVNIH TRAKOV"), na temnem pasu pa sama po sebi izstopa. */
.conf-btn-accent {
    background: var(--on-band-btn-fill);
    color: var(--on-band-btn-ink);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-md);
    --conf-btn-icon-fill: var(--color-primary);
    --conf-btn-arrow: var(--conf-arrow-light);
}

.conf-btn-accent:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: var(--on-band-btn-ink);
}

.conf-btn-outline {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.4);
    --conf-btn-icon-fill: rgba(255, 255, 255, 0.16);
    --conf-btn-arrow: var(--conf-arrow-light);
}

.conf-btn-outline:hover {
    background: var(--on-band-btn-fill);
    color: var(--on-band-btn-ink);
    border-color: var(--on-band-btn-fill);
    transform: translateY(-3px);
    --conf-btn-icon-fill: var(--color-primary);
}

.conf-btn-small {
    padding: 0.25rem 1.25rem 0.25rem 0.25rem;
    gap: 0.5rem;
    font-size: var(--fs-meta);
    background: var(--color-primary);
    color: var(--on-brand);
    border-radius: var(--btn-radius);
    --conf-btn-icon-fill: rgba(255, 255, 255, 0.22);
    --conf-btn-arrow: var(--conf-arrow-light);
}

.conf-btn-small::before {
    width: 1.875rem;
    height: 1.875rem;
    background-size: 0.875rem 0.875rem;
}

.conf-btn-small:hover {
    background: var(--color-primary-light);
    color: var(--on-brand);
    transform: translateY(-2px);
}

/* Pri Gutenbergovem gumbu razred `conf-btn` sedi na OVOJU (`div.wp-block-button`),
   ne na povezavi. Brez tega pravila bi ovoj dobil celotno kapsulo — ploskev,
   obrobo, senco IN krog s puscico — okoli povezave, ki ima ze svojo: kapsula
   v kapsuli. Ovoj mora ostati prazen zabojcek; oblikuje se samo notranji <a>. */
.wp-block-button.conf-btn,
.wp-block-button.conf-btn-accent,
.wp-block-button.conf-btn-outline,
.wp-block-button.conf-btn-small {
    display: inline-block;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 0;
}

.wp-block-button.conf-btn::before,
.wp-block-button.conf-btn-accent::before,
.wp-block-button.conf-btn-outline::before,
.wp-block-button.conf-btn-small::before {
    content: none;
}

/* Gumbi iz Gutenberga.
   Urednik vstavi navaden blok "Button" in ta NIMA nasih razredov — na strani
   /the-2027-01-call/ je tak gumb izpadel iz sistema v4 (polna modra tabletka,
   brez kroga s puscico, druga velikost). Zato pravilo cilja na
   `.wp-block-button__link` SAM, ne na kombinacijo z `conf-btn`: kar urednik
   vstavi, se samo po sebi obnasa kot ostali gumbi.

   Privzetek je bela kapsula (`conf-btn-accent`), ker Gutenberg gumbi stojijo v
   vsebini na svetli podlagi. Za obrobljeno razlicico se ovoju doda razred
   `conf-btn-outline` (Block → Advanced → Additional CSS class). */
.wp-block-button__link,
.conf-page-content .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 1.75rem 0.375rem 0.375rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-ui);
    letter-spacing: -0.005em;
    line-height: 1.3;
    text-decoration: none;
    transition: all var(--transition);
    background: var(--on-band-btn-fill);
    color: var(--on-band-btn-ink);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-md);
    --conf-btn-icon-fill: var(--color-primary);
    --conf-btn-arrow: var(--conf-arrow-light);
}

.wp-block-button__link::before,
.conf-page-content .wp-block-button__link::before {
    content: "";
    flex: 0 0 auto;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background-color: var(--conf-btn-icon-fill);
    background-image: var(--conf-btn-arrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.125rem 1.125rem;
    transition: transform var(--transition), background-color var(--transition);
}

.wp-block-button__link:hover,
.conf-page-content .wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: var(--on-band-btn-ink);
}

.wp-block-button__link:hover::before {
    transform: translateX(3px);
}

/* Obrobljena razlicica na svetli podlagi */
.wp-block-button.conf-btn-outline .wp-block-button__link,
.conf-page-content .wp-block-button.conf-btn-outline .wp-block-button__link {
    background: transparent;
    color: var(--color-emphasis);
    border: 1px solid var(--color-emphasis);
    box-shadow: none;
}

.wp-block-button.conf-btn-outline .wp-block-button__link:hover {
    background: var(--color-primary);
    color: var(--on-brand);
    box-shadow: var(--shadow-md);
    --conf-btn-icon-fill: rgba(255, 255, 255, 0.22);
}

/* Gumb brez puscice (npr. prenos datoteke) */
.wp-block-button.conf-btn--noicon .wp-block-button__link {
    padding: 0.8rem 1.75rem;
    gap: 0;
}

.wp-block-button.conf-btn--noicon .wp-block-button__link::before {
    content: none;
}

/* Buttons wrapper — spacing for Gutenberg button groups */
.wp-block-buttons {
    gap: 1rem;
}

/* Outline na svetlem ozadju */
.conf-btn-outline-dark {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.conf-btn-outline-dark:hover {
    background: var(--color-primary);
    color: var(--on-brand);
    transform: translateY(-3px);
}


/* =======================================================
   TWO COLUMN LAYOUT
   ======================================================= */
.conf-two-col {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3.5rem;
    align-items: start;
}

.conf-two-col__text h3 {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
    letter-spacing: -0.01em;
}

.conf-two-col__text p {
    margin: 0 0 1rem;
    line-height: 1.75;
}

@media (max-width: 768px) {
    .conf-two-col {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* =======================================================
   INFO BOX (sidebar)
   ======================================================= */
.conf-info-box {
    background: var(--surface-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.conf-info-box h4 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--color-heading);
}

.conf-info-box ul {
    padding-left: 1.25rem;
    margin: 0 0 1.25rem;
}

.conf-info-box li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.conf-info-box p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 1rem;
}


/* =======================================================
   HEADER
   ======================================================= */
/* Glava je na vrhu strani PROSOJNA in lezi cez heroj; ploskev dobi sele ob
   drsenju (razred `conf-header--scrolled`, prag 50 px, glej header-v2.php).
   Varno je, ker se VSAKA stran zacne s temnim herojem — naslovnica z blokom
   `conf-hero`, vse ostale s `conf-page-hero`. Ce bo kdaj nastala stran, ki se
   zacne s svetlo ploskvijo, bo bela pisava v glavi na njej nevidna in bo taka
   stran potrebovala izjemo. */
.conf-header {
    position: fixed !important;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: transparent !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
}

/* WP Admin bar offset ko si prijavljen */
html.wp-toolbar {
    padding-top: 0 !important;
}

.admin-bar .conf-header {
    top: 32px !important;
}

/* Distancnik nima vec visine (glej .conf-header-spacer nize); prijavljenemu
   uporabniku se namesto tega poveca odmik heroja. */
.admin-bar {
    --conf-header-offset: calc(var(--conf-header-h) + 32px);
}

.admin-bar #wpadminbar {
    z-index: 999999 !important;
}

@media (max-width: 782px) {
    .admin-bar .conf-header {
        top: 46px !important;
    }
    .admin-bar {
        --conf-header-offset: calc(var(--conf-header-h) + 46px);
    }
}

/* `!important` je nujen, ker ima prosojnost na `.conf-header` prav tako
   `!important` (podedovano od boja s parent temo) — brez tega ploskev ob
   drsenju sploh ne bi obveljala. Prej je bila tu trda barva #01304F, ki ni
   iz sistema in se v temni temi ni obrnila; zdaj gre skozi `--band`.
   Prva vrstica je rezerva za brskalnike brez `color-mix`. */
.conf-header--scrolled {
    background: var(--band) !important;
    background: color-mix(in srgb, var(--band) 92%, transparent) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.conf-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* Distancnik je ostal iz casa, ko je bila glava neprosojna in je morala vsebina
   zaceti pod njo. Zdaj glava lezi cez heroj, zato mora biti brez visine —
   sicer bi bil nad herojem viden pas barve strani. Element ostane v predlogi
   (uporabljajo ga sidra in nekaj skript), samo ne zaseda vec prostora. */
.conf-header-spacer {
    height: 0;
    background: transparent;
}

/* Logo */
.conf-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.conf-logo-img {
    height: 56px;
    width: auto;
}

@media (max-width: 768px) {
    .conf-logo-img {
        height: 44px;
    }
}

.conf-logo-text {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-white);
    letter-spacing: -0.01em;
}

.conf-logo:hover .conf-logo-text {
    color: var(--on-band-link);
}

/* Nav wrapper — flex za desktop da so lista + CTA gumb v vrsti */
.conf-nav {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
}

/* Nav list */
.conf-nav-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    visibility: visible !important;
}

.conf-nav-list > li {
    position: relative;
}

.conf-nav-list > li > a {
    display: block;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color var(--transition);
}

.conf-nav-list > li > a:hover,
.conf-nav-list > li.current-menu-item > a {
    color: var(--on-band-link);
}

/* CTA gumb v navigaciji */
.conf-nav-cta {
    display: inline-block;
    margin-left: 1rem;
    padding: 0.55rem 1.5rem;
    font-family: var(--font-primary);
    font-size: 0.825rem;
    font-weight: 700;
    color: var(--on-band-btn-ink);
    background: var(--on-band-btn-fill);
    border-radius: var(--btn-radius);
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}

.conf-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
    color: var(--on-band-btn-ink);
}

/* Dropdown */
.conf-nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--color-primary-dark);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    z-index: 100;
}

.conf-nav-list > li:hover > .sub-menu {
    display: block;
}

.conf-nav-list .sub-menu li a {
    display: block;
    padding: 0.55rem 1.25rem;
    font-family: var(--font-primary);
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none;
    transition: all var(--transition);
}

.conf-nav-list .sub-menu li a:hover {
    color: var(--gold);
    background: rgba(255, 255, 255, 0.05);
}

/* Gumb s puscico in vrstica "nazaj" obstajata v DOM-u vedno (skript ju vstavi
   enkrat), na namizju pa nimata pomena — tam podmeni odpre hover. */
.conf-nav-sub-toggle,
.conf-nav-back {
    display: none;
}

/* Hamburger */
.conf-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
}

.conf-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--on-band);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.conf-menu-toggle--open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.conf-menu-toggle--open span:nth-child(2) {
    opacity: 0;
}
.conf-menu-toggle--open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* =======================================================
   MOBILNI IN TABLICNI MENI  (v4 — celozaslonska plosca z drsnimi podmeniji)
   =======================================================
   Meja je 1024px, ne 768px: na tablici je hamburger, ne skrcena namizna vrsta.

   Podmeni NI razprt seznam pod postavko, ampak lastna plosca, ki se pripelje
   z desne. Zato je `position: fixed` (ne absolute) — plosca mora pokriti tudi
   del strani pod menijem, ne le svojega prednika.

   Puscica desno je LOCEN gumb, ne del povezave: postavke kot "Past Events"
   imajo svojo stran in mora klik na napis se vedno peljati nanjo. Pri
   postavkah brez lastne strani (href="#") skript to zazna in odpre podmeni
   tudi ob kliku na napis.
   ======================================================= */
@media (max-width: 1024px) {
    /* Logotip in hamburger morata ostati NAD plosco. Plosca je otrok
       <header>, ne njegov brat — z-index glave (9999) je zato ne prekrije;
       primerja se z brati znotraj glave. Brez tega logotip izgine. */
    .conf-menu-toggle,
    .conf-logo {
        position: relative;
        z-index: 1002;
    }

    .conf-menu-toggle {
        display: flex;
    }

    .conf-nav {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1001;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        background: var(--band-deep, var(--color-primary-dark));
        padding: calc(var(--conf-header-h, 80px) + 0.5rem) 0 2rem;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden !important;
        opacity: 1 !important;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s;
    }

    .conf-nav--open {
        transform: translateX(0);
        visibility: visible !important;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }

    /* Prva raven */
    .conf-nav-list {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }

    .conf-nav-list > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .conf-nav-list > li > a {
        flex: 1 1 auto;
        padding: 1.15rem 1.5rem;
        font-family: var(--font-head);
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: var(--color-white);
    }

    /* Gumb s puscico desno */
    .conf-nav-sub-toggle {
        flex: 0 0 auto;
        width: 56px;
        min-height: 44px;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--color-white);
    }

    .conf-nav-sub-toggle svg {
        width: 18px;
        height: 18px;
        display: block;
    }

    /* Podmeni kot drsna plosca */
    .conf-nav-list .sub-menu {
        position: fixed;
        inset: 0;
        z-index: 2;
        display: block;
        flex-direction: column;
        background: var(--band-deep, var(--color-primary-dark));
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        padding: calc(var(--conf-header-h, 80px) + 0.5rem) 0 2rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s;
    }

    .conf-nav-list > li:hover > .sub-menu {
        /* namizni hover ne sme odpirati plosce na dotikalnem zaslonu */
        transform: translateX(100%);
    }

    .conf-nav-list .sub-menu--open,
    .conf-nav-list > li:hover > .sub-menu--open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }

    .conf-nav-list .sub-menu li a {
        padding: 0.9rem 1.5rem;
        padding-left: 1.5rem;
        font-family: var(--font-head);
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-white);
    }

    /* Vrstica "nazaj" na vrhu podmenija */
    .conf-nav-back {
        display: block;
        list-style: none;
    }

    .conf-nav-back button {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        min-height: 48px;
        padding: 0.75rem 1.5rem;
        margin-bottom: 0.25rem;
        background: none;
        border: none;
        border-bottom: 1px solid var(--divider-band);
        font-family: var(--font-head);
        font-size: var(--fs-ui);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--color-white);
        cursor: pointer;
        text-align: left;
    }

    .conf-nav-back svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

    /* CTA na dnu plosce — krog s puscico + napis, kot na vzoru */
    .conf-nav-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.9rem;
        margin: 1.75rem 1.5rem 0;
        padding: 0;
        background: none;
        border-radius: 0;
        font-family: var(--font-head);
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--color-white);
    }

    .conf-nav-cta::before {
        content: "";
        flex: 0 0 auto;
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.55);
        background-image: var(--conf-arrow-light);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.25rem 1.25rem;
        transition: transform var(--transition), border-color var(--transition);
    }

    .conf-nav-cta:hover {
        transform: none;
        box-shadow: none;
        color: var(--color-white);
    }

    .conf-nav-cta:hover::before {
        transform: translateX(3px);
        border-color: var(--color-white);
    }

    /* Ko je meni odprt, stran za njim ne sme drseti */
    body.conf-nav-locked {
        overflow: hidden;
    }

    /* Glava ostane nad plosco (z-index 9999), zato mora ob odprtem meniju
       prevzeti isto barvo — sicer je med vrstico z logotipom in plosco
       viden sef med #00386C in #002347. */
    body.conf-nav-locked .conf-header {
        background: var(--band-deep) !important;
        box-shadow: none !important;
    }
}


/* =======================================================
   HERO
   ======================================================= */
.conf-hero {
    background: var(--gradient-hero);
    color: var(--color-white);
    text-align: center;
    /* Zgornji odmik nosi visino prosojne glave — prej jo je nosil distancnik. */
    padding: calc(8rem + var(--conf-header-offset)) 2rem 7rem;
    position: relative;
    overflow: hidden;
}

/* Hero z fotografijo */
.conf-hero--photo {
    background-size: cover;
    background-position: center 60%;
    background-repeat: no-repeat;
    padding: calc(6rem + var(--conf-header-offset)) 2rem 5rem;
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conf-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(1, 48, 79, 0.82) 0%,
        rgba(1, 48, 79, 0.68) 40%,
        rgba(0, 73, 131, 0.80) 100%
    );
    z-index: 1;
}

.conf-hero-content {
    position: relative;
    z-index: 2;
}

.conf-hero--photo .conf-hero-title {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.conf-hero--photo .conf-hero-subtitle {
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}

.conf-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 180%;
    background: radial-gradient(ellipse at 30% 50%, rgba(0, 145, 234, 0.06) 0%, transparent 55%);
    pointer-events: none;
}

.conf-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse at 70% 60%, rgba(0, 104, 183, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.conf-hero-edition {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(0, 145, 234, 0.12);
    padding: 0.4rem 1.25rem;
    border-radius: var(--btn-radius);
    margin-bottom: 1.5rem;
}

.conf-hero-label {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}

.conf-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 900;
    line-height: 1.02;
    margin: 0 0 0.75rem;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 1;
}

.conf-hero-subtitle {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 300;
    color: var(--color-text-light);
    margin: 0 0 2.5rem;
}

.conf-hero-meta {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.conf-hero-date,
.conf-hero-location {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text-light);
    letter-spacing: 0.01em;
}

.conf-hero-meta-separator {
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
    align-self: stretch;
}

.conf-hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.conf-hero-buttons--secondary {
    margin-top: 0.75rem;
}

/* Druga vrsta hero gumbov je bila prej manjsa (0.8rem / 0.55rem 1.25rem).
   Pri kapsuli s krogom to ne deluje: gumb postane visji od prve vrste (62 proti
   56 px), simetricni odmik pa krog odlepi od levega roba, medtem ko je v prvi
   vrsti prislonjen. Vsi hero gumbi so zato enaki; razlika med primarnim in
   sekundarnim ostane v barvi, ne v velikosti. */


/* =======================================================
   COUNTDOWN
   ======================================================= */
.conf-countdown {
    padding: 2.5rem 0;
    background: var(--color-primary-dark);
    text-align: center;
}

.conf-countdown-label {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--on-band-muted);
    margin: 0 0 1.25rem;
}

.conf-countdown-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.conf-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5rem;
}

.conf-countdown-number {
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-white);
    letter-spacing: -0.03em;
}

.conf-countdown-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-top: 0.35rem;
}

.conf-countdown-sep {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1;
    padding-bottom: 1.2rem;
}

@media (max-width: 480px) {
    .conf-countdown { padding: 2rem 0; }
    .conf-countdown-number { font-size: 2rem; }
    .conf-countdown-unit { min-width: 3.5rem; }
    .conf-countdown-sep { font-size: 1.75rem; padding-bottom: 0.9rem; }
}


/* =======================================================
   KEY DATES
   ======================================================= */
.conf-dates {
    padding: var(--section-padding);
    background: transparent;   /* preliv strani se vidi skozi */
}

.conf-dates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.conf-date-card {
    text-align: center;
    padding: 2.25rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--surface-card);
    transition: all var(--transition);
}

.conf-date-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.conf-date-card--highlight {
    background: var(--band-accent);
    border-color: var(--band-accent);
    color: var(--color-white);
}

.conf-date-card--highlight:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.conf-date-day {
    display: block;
    font-family: var(--font-primary);
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.conf-date-card--highlight .conf-date-day {
    color: var(--color-white);
}

.conf-date-label {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    /* Compact list layout for key dates on mobile */
    .conf-dates {
        padding: 2rem 1rem;
    }

    .conf-dates-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 1.25rem;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        overflow: hidden;
    }

    .conf-date-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
        padding: 0.65rem 1rem;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--color-border);
    }

    .conf-date-card:last-child {
        border-bottom: none;
    }

    .conf-date-card:hover {
        transform: none;
        box-shadow: none;
    }

    .conf-date-day {
        font-size: 1rem;
        font-weight: 800;
        margin-bottom: 0;
        min-width: 110px;
        flex-shrink: 0;
        letter-spacing: 0;
    }

    .conf-date-label {
        font-size: 0.825rem;
        line-height: 1.3;
    }

    .conf-date-card--highlight {
        background: var(--band-accent);
        border-color: var(--band-accent);
    }
}

/* Hide dates section until new conference is announced */
.conf-dates--hidden {
    display: none;
}

/* --- Key Dates Timeline --- */
.conf-dates-timeline {
    max-width: 640px;
    margin: 2.5rem auto 0;
    position: relative;
    padding-left: 2rem;
}

.conf-dates-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--color-border);
}

.conf-tl-item {
    position: relative;
    padding: 0 0 1.5rem 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.conf-tl-item:last-child {
    padding-bottom: 0;
}

.conf-tl-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--color-emphasis);
    z-index: 1;
}

.conf-tl-item--highlight::before {
    background: var(--color-emphasis);
    border-color: var(--color-emphasis);
    box-shadow: 0 0 0 4px rgba(0, 145, 234, 0.2);
}

.conf-tl-date {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
    min-width: 120px;
    flex-shrink: 0;
}

.conf-tl-item--highlight .conf-tl-date {
    color: var(--color-emphasis);
}

.conf-tl-label {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.4;
}

@media (max-width: 480px) {
    .conf-tl-item {
        flex-direction: column;
        gap: 0.15rem;
    }
    .conf-tl-date {
        min-width: auto;
    }
}


/* =======================================================
   THE CALL
   ======================================================= */
.conf-call {
    padding: var(--section-padding);
    background: var(--color-off-white);
}

/* `.conf-section-title` je `display: inline-block` (ostanek iz casa, ko je imel
   pod sabo barvno crtico). Zato se naslednji vrstici element prilepi OB naslov,
   ne podenj. Dokler je bil med naslovom in gumbom odstavek, se to ni videlo;
   ko je bil povzetek calla odstranjen, se je gumb znasel v isti vrstici kot
   naslov in ga celo prekril. Tu naslov postane blok. */
.conf-call .conf-section-title {
    display: block;
}

.conf-call .conf-two-col__text > .conf-btn {
    margin-top: 1.5rem;
}

/* Brez besedila v levem stolpcu dvostolpicna postavitev ne zasluzi svoje visine:
   ob visokem okvircku z navodili ostane ~350 px praznine. Razred doda render.php,
   ko so intro, description IN topics prazni — ko se besedilo vrne, razreda ni
   in postavitev je spet obicajna. */
.conf-call--compact {
    padding-block: 3.5rem;
}

.conf-call--compact .conf-two-col {
    align-items: center;
}

.conf-topics-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2rem;
    padding-left: 1.25rem;
    margin: 0 0 2rem;
}

.conf-topics-list li {
    line-height: 1.7;
}

@media (max-width: 640px) {
    .conf-topics-list {
        grid-template-columns: 1fr;
    }
}


/* =======================================================
   SPEAKERS
   ======================================================= */
.conf-speakers {
    padding: var(--section-padding);
    background: linear-gradient(180deg, var(--band) 0%, var(--band-raised) 100%);
    color: var(--color-white);
}


/* --- Speaker Grid (podim-inspired) --- */
.cs-speakers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 1rem 0;
}

@media (max-width: 1024px) {
    .cs-speakers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .cs-speakers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Speaker accordion toggle (desktop + mobile) --- */

/* Fully hidden cards (beyond 2 rows on desktop) — hidden everywhere */
.cs-speaker-card--hidden {
    display: none;
}

/* Mobile-only hidden cards (rows 3+ visible on desktop, hidden on mobile) */
@media (max-width: 768px) {
    .cs-speaker-card--mobile-hidden {
        display: none;
    }
}

/* Revealed cards animate in */
.cs-speaker-card--revealed {
    animation: cs-speaker-slide-in 0.35s ease both;
}

@keyframes cs-speaker-slide-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toggle button wrapper — visible on both desktop and mobile */
.cs-speakers-toggle-wrap {
    text-align: center;
    margin-top: 1.5rem;
}

/* Toggle button */
.cs-speakers-toggle-btn {
    display: inline-block;
    padding: 0.6rem 1.8rem;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--on-band-btn-ink);
    background: var(--on-band-btn-fill);
    border: 2px solid var(--on-band-btn-fill);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    outline: none;
}

.cs-speakers-toggle-btn:hover,
.cs-speakers-toggle-btn:focus-visible {
    background: var(--on-band-btn-fill);
    border-color: var(--on-band-btn-fill);
    color: var(--on-band-btn-ink);
}


/* --- Speaker Card: Podim-Style Overlay --- */
.cs-speaker-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: none;
    background: var(--color-primary-dark);
    aspect-ratio: 3 / 4;
    cursor: default;
}

/* Foto zapolni celoten card */
.cs-speaker-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cs-speaker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: grayscale(0);
    transition: filter 0.4s ease, transform 0.5s ease;
}

/* Grayscale hover efekt */
.cs-speaker-card:hover .cs-speaker-photo img {
    filter: grayscale(100%);
    transform: scale(1.05);
}

/* Placeholder ko ni slike */
.cs-speaker-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--band-raised) 0%, var(--band) 100%);
}

.cs-speaker-photo-placeholder span {
    font-size: 4rem;
    font-weight: 900;
    color: var(--color-white);
    font-family: var(--font-primary);
    text-transform: uppercase;
    opacity: 0.3;
}

/* Info overlay na dnu fotografije */
.cs-speaker-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: padding var(--transition);
}

.cs-speaker-name {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-white);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* Naziv se pokaze SELE ob hover / fokusu.
   Ker je `.cs-speaker-info` pripet na dno kartice, rast naziva potisne ime
   navzgor — premika imena zato ni treba animirati posebej. Prehod je na
   `grid-template-rows`, ne na `max-height`: pri max-height je treba ugibati
   koncno visino in pri dvovrsticnem nazivu se besedilo odrezhe. */
.cs-speaker-title {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 400;
    color: var(--on-band-link);
    margin: 0;
    line-height: 1.35;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}

/* Otrok mreze rabi overflow:hidden, sicer 0fr ne odreze vsebine. */
.cs-speaker-title > span {
    overflow: hidden;
    min-height: 0;
}

.cs-speaker-card:hover .cs-speaker-title,
.cs-speaker-card:focus-within .cs-speaker-title {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.35rem;
}

/* Kartice na podstrani letnika so uporabljale isti razred, a je bil naziv
   ves cas napisan cez fotografijo (najbolj vidno pri letu 2026). Zdaj velja
   isto pravilo povsod — naziv je samo ob hover. */

/* Bio + link skriti, se pokažejo na hover */
.cs-speaker-bio {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.35s ease, max-height 0.4s ease, margin 0.35s ease;
}

.cs-speaker-card:hover .cs-speaker-bio {
    opacity: 1;
    max-height: 120px;
    margin-top: 0.5rem;
}

.cs-speaker-link {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 0.775rem;
    font-weight: 700;
    color: var(--on-band-link);
    text-decoration: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: opacity 0.35s ease, max-height 0.4s ease, color var(--transition);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.cs-speaker-card:hover .cs-speaker-link {
    opacity: 1;
    max-height: 40px;
    margin-top: 0.5rem;
}

.cs-speaker-link:hover {
    color: var(--color-white);
}

.cs-no-speakers {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: 3rem 0;
    grid-column: 1 / -1;
}

.cs-speaker-card h3 {
    margin-top: 0;
    margin-bottom: 0;
}

/* Clickable speaker cards */
.cs-speaker-card--clickable {
    cursor: pointer;
}

/* --- Speaker Bio Modal --- */
.cs-speaker-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 1.5rem;
}

.cs-speaker-modal-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.cs-speaker-modal {
    background: var(--surface-card);
    border-radius: 10px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.cs-speaker-modal-overlay--visible .cs-speaker-modal {
    transform: translateY(0) scale(1);
}

.cs-speaker-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
    z-index: 2;
}

.cs-speaker-modal__close:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

.cs-speaker-modal__body {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
}

.cs-speaker-modal__photo {
    flex-shrink: 0;
    width: 150px;
    height: 190px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-off-white);
}

.cs-speaker-modal__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

.cs-speaker-modal__content {
    flex: 1;
    min-width: 0;
}

.cs-speaker-modal__name {
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 0.25rem;
    line-height: 1.25;
}

.cs-speaker-modal__title {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-emphasis);
    font-weight: 500;
    margin: 0 0 1rem;
}

.cs-speaker-modal__bio {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #444;
    line-height: 1.65;
    margin: 0 0 1rem;
}

.cs-speaker-modal__link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-emphasis);
    text-decoration: none;
    transition: opacity var(--transition);
}

.cs-speaker-modal__link:hover {
    opacity: 0.7;
}

@media (max-width: 640px) {
    .cs-speaker-modal__body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cs-speaker-modal__photo {
        width: 150px;
        height: 190px;
    }
}


/* =======================================================
   HIGHLIGHTS / STATS — Podim-style full-width bar
   ======================================================= */
.conf-highlights {
    padding: 0;
    background: transparent;   /* preliv strani se vidi skozi */
}

.conf-highlights-header {
    padding: 6rem 0 3rem;
    text-align: center;
}

/* Full-bleed stats bar */
.conf-stats-bar {
    background: var(--band-accent);
    width: 100%;
}

.conf-stats-row {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem 2rem;
}

.conf-stat {
    text-align: center;
    padding: 1rem 3rem;
    flex: 1;
    border-right: 2px dashed rgba(255, 255, 255, 0.25);
}

.conf-stat:last-child {
    border-right: none;
}

.conf-stat-number {
    display: block;
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.conf-stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

.conf-gallery-placeholder {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
}

.conf-gallery-placeholder p {
    padding: 3rem 2rem;
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    color: var(--color-text-subtle);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .conf-stats-row {
        flex-wrap: wrap;
    }
    .conf-stat {
        flex: 0 0 50%;
        padding: 1.5rem 1rem;
        border-right: none;
    }
    .conf-stat:nth-child(odd) {
        border-right: 2px dashed rgba(255, 255, 255, 0.25);
    }
    .conf-stat:nth-child(1),
    .conf-stat:nth-child(2) {
        border-bottom: 2px dashed rgba(255, 255, 255, 0.25);
    }
}

@media (max-width: 480px) {
    .conf-stat {
        flex: 0 0 100%;
        border-right: none !important;
        border-bottom: 2px dashed rgba(255, 255, 255, 0.25);
        padding: 1.5rem 1rem;
    }
    .conf-stat:last-child {
        border-bottom: none;
    }
}


/* =======================================================
   ABOUT
   ======================================================= */
.conf-about {
    padding: var(--section-padding);
    background: var(--color-off-white);
}

.conf-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2.5rem;
}

.conf-about-col {
    display: flex;
    flex-direction: column;
}

.conf-about-heading {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    margin: 0 0 1.25rem;
}

.conf-about-img-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--color-primary-dark);
}

.conf-about-img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.conf-about-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-band-muted);   /* rgba(255,255,255,.3) je bil 2.38:1 na pasu */
    font-style: italic;
    font-size: 0.9rem;
}

.conf-about-col p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.7;
    margin: 0 0 1rem;
}

@media (max-width: 768px) {
    .conf-about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* =======================================================
   FOR PRESENTERS
   ======================================================= */
.conf-presenters {
    padding: var(--section-padding);
    background: transparent;   /* preliv strani se vidi skozi */
}

.conf-resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.conf-resource-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.25rem 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--surface-card);
    color: var(--color-text);
    transition: all var(--transition);
}

.conf-resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.conf-resource-icon {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

.conf-resource-name {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.conf-resource-desc {
    font-size: 0.825rem;
    color: var(--color-text-subtle);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .conf-resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .conf-resources-grid {
        grid-template-columns: 1fr;
    }
}


/* =======================================================
   FAQ
   ======================================================= */
.conf-faq {
    padding: var(--section-padding);
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.conf-faq .conf-section-title {
    color: var(--color-white);
}

/* (barvna črtica pod naslovom odstranjena — glej "BREZ BARVNIH TRAKOV") */

.conf-faq-list {
    max-width: 750px;
    margin: 2rem auto 0;
}

.conf-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.conf-faq-item summary {
    padding: 1.35rem 0;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color var(--transition);
}

.conf-faq-item summary:hover {
    color: var(--on-band-link);
}

.conf-faq-item summary::-webkit-details-marker {
    display: none;
}

.conf-faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--on-band-link);
    transition: transform var(--transition);
    flex-shrink: 0;
    margin-left: 1rem;
}

.conf-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.conf-faq-answer {
    padding: 0 0 1.35rem;
    color: var(--color-text-light);
    line-height: 1.75;
}

.conf-faq-answer p {
    margin: 0 0 0.75rem;
}

.conf-faq-answer a {
    color: var(--on-band-link);
}

/* Daljsi odgovori (npr. seznam podrocij ob oddaji povzetka) nosijo sezname in
   vec odstavkov. Pravilo velja za obe razlicici — blok na naslovnici in
   .conf-faq-item--page — ker sta oba gnezdena pod .conf-faq-answer; barvo
   podedujeta od svojega ovoja, zato je tu samo geometrija. */
.conf-faq-answer ul,
.conf-faq-answer ol {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.conf-faq-answer li {
    margin: 0 0 0.35rem;
}

.conf-faq-answer ul ul {
    margin: 0.4rem 0 0.6rem;
}

.conf-faq-answer > :last-child {
    margin-bottom: 0;
}


/* =======================================================
   CONTACT
   ======================================================= */
.conf-contact {
    padding: var(--section-padding);
    background: transparent;   /* preliv strani se vidi skozi */
}

.conf-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.conf-contact-item strong {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-subtle);
    margin-bottom: 0.4rem;
}

.conf-contact-item a {
    font-size: 1.05rem;
    color: var(--color-primary);
    font-weight: 500;
}

.conf-contact-item p {
    margin: 0;
    line-height: 1.65;
}

.conf-social-links {
    display: flex;
    gap: 1.25rem;
}

.conf-social-links a {
    font-weight: 500;
    font-size: 0.95rem;
}

.conf-form-placeholder {
    color: var(--color-text-subtle);
    font-style: italic;
    text-align: center;
    padding: 2rem 0;
}


/* =======================================================
   SCROLL ANIMATIONS — slide in from left / right / up / split
   ======================================================= */

/* conf-scroll-hide / conf-scroll-show: used by footer-injected per-page scripts */
.conf-scroll-hide {
    opacity: 0 !important;
    transition: opacity 1.0s ease, transform 1.0s ease !important;
}
.conf-scroll-hide.conf-scroll--left {
    transform: translateX(-60px) !important;
}
.conf-scroll-hide.conf-scroll--right {
    transform: translateX(60px) !important;
}
.conf-scroll-hide.conf-scroll--up {
    transform: translateY(40px) !important;
}
.conf-scroll-show {
    opacity: 1 !important;
    transform: translateX(0) translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .conf-scroll-hide {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Base hidden state */
.conf-anim-hidden {
    opacity: 0;
    transition: opacity 1.0s ease, transform 1.0s ease;
}

/* Direction-specific starting positions */
.conf-anim--left.conf-anim-hidden {
    transform: translateX(-60px);
}
.conf-anim--right.conf-anim-hidden {
    transform: translateX(60px);
}
.conf-anim--up.conf-anim-hidden {
    transform: translateY(50px);
}

/* Split: whole section fades, children slide from opposite sides */
.conf-anim--split.conf-anim-hidden {
    transform: none;
}
.conf-anim--split .conf-anim-child {
    opacity: 0;
    transition: opacity 1.0s ease, transform 1.0s ease;
}
.conf-anim--split .conf-anim-child--left {
    transform: translateX(-60px);
}
.conf-anim--split .conf-anim-child--right {
    transform: translateX(60px);
}

/* Visible state — everything animates to center (higher specificity to override hidden) */
.conf-anim-hidden.conf-anim-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}
.conf-anim-visible .conf-anim-child {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger children slightly for split */
.conf-anim-visible .conf-anim-child--right {
    transition-delay: 0.15s;
}

/* Respect prefers-reduced-motion (belt & suspenders with JS check) */
@media (prefers-reduced-motion: reduce) {
    .conf-anim-hidden,
    .conf-anim--split .conf-anim-child {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =======================================================
   FOOTER
   ======================================================= */
.conf-footer {
    background: var(--color-primary-dark);
    color: var(--color-text-light);
    padding: 4rem 0 0;
}

.conf-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 3rem;
}

.conf-footer-col h4 {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 1.25rem;
}

.conf-footer-col p {
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 0 0.75rem;
    color: var(--color-text-light);
}

.conf-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.conf-footer-links li {
    margin-bottom: 0.5rem;
}

.conf-footer-links a {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--transition);
}

.conf-footer-links a:hover {
    color: var(--gold);
}

.conf-footer-col a {
    color: var(--on-band-link);
}

.conf-footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
}

.conf-footer-social a {
    color: var(--color-text-light);
    transition: color var(--transition);
}

.conf-footer-social a:hover {
    color: var(--gold);
}

.conf-footer-bottom {
    margin-top: 3rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conf-footer-bottom p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.conf-back-to-top {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.conf-back-to-top:hover {
    color: var(--gold);
}

/* Gumb „Accessibility" v nogi — edina vstopna tocka v pripomocek UserWay
   (plava ikona v kotu je izklopljena prek data-trigger, glej accessibility-v2.php).
   Videti mora kot ostale povezave v tej vrstici, zato brez ploskve in obrobe;
   je pa <button>, ker odpre plosco in ne pelje nikamor. */
.conf-a11y-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-head);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.conf-a11y-btn svg {
    flex: 0 0 auto;
}

.conf-a11y-btn:hover,
.conf-a11y-btn:focus-visible {
    color: var(--gold);
}

@media (max-width: 768px) {
    .conf-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .conf-footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}


/* =======================================================
   ELEMENTOR OVERRIDES
   ======================================================= */
.e-loop-item .cs-speaker-card {
    height: 100%;
}

.elementor-loop-container .elementor-loop-item {
    display: flex;
    flex-direction: column;
}

.elementor-widget-image img {
    height: auto;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item:focus {
    color: var(--on-band-link) !important;
}

@media (max-width: 767px) {
    .elementor-nav-menu--main .elementor-nav-menu {
        background-color: var(--color-primary-dark);
    }
}


/* =======================================================
   PAGE TEMPLATE (podstrani)
   ======================================================= */
.conf-page-hero {
    background: var(--gradient-hero);
    color: var(--color-white);
    padding: calc(5rem + var(--conf-header-offset)) 2rem 4rem;
    text-align: center;
}

.conf-page-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.conf-page-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin: 1rem 0 0;
}

.conf-year-event-image {
    padding: 2rem 0 0;
    background: var(--surface-sunken);
}
.conf-year-event-img {
    width: 100%;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* ===== Gutenberg Block: Image alignment & sizing ===== */
.conf-year-content .wp-block-image {
    margin: 1.5rem 0;
}
.conf-year-content .wp-block-image img {
    border-radius: 8px;
    height: auto;
}
.conf-year-content .wp-block-image.aligncenter {
    text-align: center;
}
.conf-year-content .wp-block-image.aligncenter img {
    margin-left: auto;
    margin-right: auto;
}
.conf-year-content .wp-block-image.alignleft {
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
    max-width: 50%;
}
.conf-year-content .wp-block-image.alignright {
    float: right;
    margin-left: 2rem;
    margin-bottom: 1rem;
    max-width: 50%;
}
.conf-year-content .wp-block-image.alignwide {
    margin-left: -2rem;
    margin-right: -2rem;
    max-width: calc(100% + 4rem);
    width: calc(100% + 4rem);
}
.conf-year-content .wp-block-image.alignfull {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    width: 100vw;
}
.conf-year-content .wp-block-image.alignwide img,
.conf-year-content .wp-block-image.alignfull img {
    width: 100%;
    border-radius: 0;
}
.conf-year-content .wp-block-image.size-large img { max-width: 100%; }
.conf-year-content .wp-block-image.size-medium img { max-width: 600px; }
.conf-year-content .wp-block-image.size-thumbnail img { max-width: 300px; }
/* Clearfix after floated images */
.conf-year-content .wp-block-image.alignleft + *,
.conf-year-content .wp-block-image.alignright + * {
    overflow: hidden;
}
@media (max-width: 600px) {
    .conf-year-content .wp-block-image.alignleft,
    .conf-year-content .wp-block-image.alignright {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.conf-page-content {
    padding: 3.5rem 0 5rem;
    background: transparent;   /* preliv strani se vidi skozi */
}

.conf-page-container {
    max-width: 800px;
}

/* WP editor content stili */
.conf-page-content h2 {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-heading);
    margin: 2.5rem 0 0.75rem;
    letter-spacing: -0.02em;
}

.conf-page-content h3 {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 2rem 0 0.5rem;
}

.conf-page-content p {
    line-height: 1.8;
    margin: 0 0 1rem;
    color: var(--color-text);
}

.conf-page-content ul,
.conf-page-content ol {
    line-height: 1.8;
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.conf-page-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.conf-page-content a:hover {
    color: var(--color-primary-hover);
}

.conf-page-content img {
    border-radius: 8px;
    margin: 1.5rem 0;
}

.conf-page-content blockquote {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--surface-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    font-style: italic;
    color: var(--color-text-subtle);
}


/* =======================================================
   PAST EVENTS — TIMELINE OVERVIEW
   ======================================================= */

.conf-timeline {
    position: relative;
    padding: 2rem 0;
    max-width: 1000px;
    margin: 0 auto;
}

/* Vertical line */
.conf-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--color-emphasis), var(--color-heading));
    transform: translateX(-50%);
}

.conf-timeline-item {
    position: relative;
    margin-bottom: 4rem;
}

.conf-timeline-item:last-child {
    margin-bottom: 0;
}

/* Dot on the line */
.conf-timeline-dot {
    position: absolute;
    left: 50%;
    top: 2rem;
    transform: translateX(-50%);
    z-index: 2;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-emphasis);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 3px var(--color-emphasis);
}

.conf-timeline-dot-year {
    display: none; /* shown only on mobile */
}

/* Card */
.conf-timeline-card {
    display: flex;
    gap: 0;
    width: 44%;
    background: var(--surface-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
    flex-direction: column;
}

.conf-timeline-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Left cards (even index) */
.conf-timeline-item:nth-child(odd) .conf-timeline-card {
    margin-left: 0;
    margin-right: auto;
}

/* Right cards (odd index) */
.conf-timeline-item:nth-child(even) .conf-timeline-card {
    margin-left: auto;
    margin-right: 0;
}

.conf-timeline-card--reverse {
    /* Reversed handled by nth-child above */
}

.conf-timeline-card-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.conf-timeline-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.conf-timeline-card:hover .conf-timeline-card-img img {
    transform: scale(1.05);
}

/* Placeholder when no photo uploaded */
.conf-timeline-card-img--placeholder {
    background: linear-gradient(135deg, var(--band) 0%, var(--band-raised) 100%);
}

.conf-timeline-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.conf-timeline-card-img-year {
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
    letter-spacing: 2px;
}

.conf-timeline-card-img-label {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.conf-timeline-card-body {
    padding: 1.5rem;
}

.conf-timeline-card-year {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-emphasis);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.conf-timeline-card-theme {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.conf-timeline-card-opening {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-subtle);
    margin: 0 0 0.25rem;
}

.conf-timeline-card-featured {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    margin: 0 0 1rem;
    font-style: italic;
}

.conf-btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 1.25rem 0.25rem 0.25rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-head);
    font-size: var(--fs-meta);
    font-weight: 700;
    color: var(--color-emphasis);
    background: transparent;
    border: 1px solid var(--color-emphasis);
    text-decoration: none;
    transition: all var(--transition);
    --conf-btn-icon-fill: var(--color-emphasis);
    --conf-btn-arrow: var(--conf-arrow-light);
}

.conf-btn--outline::before {
    width: 1.875rem;
    height: 1.875rem;
    background-size: 0.875rem 0.875rem;
}

.conf-btn--outline:hover {
    background: var(--color-primary-hover);
    color: var(--on-brand);
    --conf-btn-icon-fill: rgba(255, 255, 255, 0.22);
}

/* Mobile timeline */
@media (max-width: 768px) {
    .conf-timeline::before {
        left: 20px;
    }

    .conf-timeline-dot {
        left: 20px;
        top: 0;
    }

    .conf-timeline-dot-year {
        display: block;
        position: absolute;
        left: 2rem;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-primary);
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--color-emphasis);
        white-space: nowrap;
    }

    .conf-timeline-card,
    .conf-timeline-item:nth-child(odd) .conf-timeline-card,
    .conf-timeline-item:nth-child(even) .conf-timeline-card {
        width: calc(100% - 50px);
        margin-left: 50px;
        margin-right: 0;
    }
}


/* =======================================================
   PAST EVENTS — YEAR SUBPAGE
   ======================================================= */

/* Hero */
.conf-year-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 560px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.conf-year-hero-overlay {
    width: 100%;
    padding: 4rem 0 3rem;
    background: linear-gradient(to top, rgba(1, 48, 79, 0.85) 0%, rgba(1, 48, 79, 0.4) 60%, transparent 100%);
}

.conf-year-hero-year {
    display: block;
    font-family: var(--font-primary);
    font-size: 4rem;
    font-weight: 900;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.conf-year-hero-theme {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 700px;
    line-height: 1.3;
}

/* Summary */
.conf-year-summary {
    padding: 3rem 0;
    background: var(--color-off-white);
}

.conf-year-summary-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text);
}

.conf-year-summary-text p {
    margin: 0 0 1rem;
}

.conf-year-summary-text p:last-child {
    margin-bottom: 0;
}

/* Opening speaker */
.conf-year-opening {
    padding: 3rem 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.conf-year-opening-label {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-emphasis);
    margin-bottom: 0.5rem;
}

.conf-year-opening-name {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--color-heading);
    margin: 0 0 0.25rem;
}

.conf-year-opening-title {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-subtle);
    margin: 0;
}

/* Speakers section */
.conf-year-speakers {
    padding: 3rem 0;
}

.conf-year-speakers-title {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-heading);
    margin: 0 0 1.5rem;
    text-align: center;
}

/* Recordings */
.conf-year-recordings {
    padding: 3rem 0;
    text-align: center;
    background: var(--color-off-white);
}

.conf-year-recordings-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-heading);
    margin: 0 0 0.5rem;
}

.conf-year-recordings p {
    color: var(--color-text-subtle);
    margin: 0 0 1rem;
}

/* ── Session Recordings page ── */
.conf-page-recordings .conf-recordings-content {
    padding: 4rem 0;
}

.conf-page-recordings .conf-recordings-content h2 {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-heading);
    margin: 3rem 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-border);
}

.conf-page-recordings .conf-recordings-content h2:first-child {
    margin-top: 0;
}

/* YouTube embed responsive wrapper */
.conf-page-recordings .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
}

.conf-page-recordings .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* Grid layout when multiple embeds */
.conf-page-recordings .wp-block-columns {
    gap: 1.5rem;
}

.conf-page-recordings .wp-block-embed {
    margin-bottom: 1.5rem;
}

/* Placeholder when no content yet */
.conf-recordings-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-off-white);
    border-radius: 12px;
}

.conf-recordings-placeholder p {
    font-size: 1.1rem;
    color: var(--color-text-subtle);
    margin: 0 0 1rem;
}

.conf-recordings-hint {
    font-size: 0.85rem !important;
    color: var(--color-text-subtle);
    max-width: 500px;
    margin: 1rem auto 0 !important;
}

@media (max-width: 768px) {
    .conf-page-recordings .conf-recordings-content {
        padding: 2.5rem 0;
    }

    .conf-page-recordings .conf-recordings-content h2 {
        font-size: 1.35rem;
        margin: 2rem 0 1rem;
    }
}

/* Gallery */
.conf-year-gallery {
    padding: 3rem 0;
}

.conf-year-gallery-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-heading);
    margin: 0 0 1.5rem;
    text-align: center;
}

.conf-year-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.conf-year-gallery-item {
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.conf-year-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.conf-year-gallery-item:hover img {
    transform: scale(1.05);
}

/* Lightbox */
.conf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.conf-lightbox--open {
    opacity: 1;
    visibility: visible;
}

.conf-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    transition: color 0.2s;
}

.conf-lightbox-close:hover {
    color: #fff;
}

.conf-lightbox-prev,
.conf-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 3rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}

.conf-lightbox-prev:hover,
.conf-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.conf-lightbox-prev { left: 1.5rem; }
.conf-lightbox-next { right: 1.5rem; }

.conf-lightbox-img-wrap {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conf-lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.conf-lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .conf-lightbox-prev,
    .conf-lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }
    .conf-lightbox-prev { left: 0.5rem; }
    .conf-lightbox-next { right: 0.5rem; }
}

@media (max-width: 768px) {
    .conf-year-hero {
        aspect-ratio: 16 / 9;
        max-height: 300px;
    }

    .conf-year-hero-year {
        font-size: 2.5rem;
    }

    .conf-year-hero-theme {
        font-size: 1.15rem;
    }

    .conf-year-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.conf-past-empty {
    text-align: center;
    color: var(--color-text-subtle);
    font-style: italic;
    padding: 2rem 0;
}


/* =======================================================
   HIGHLIGHTS 2026 — Grid kartic s promo slikami
   ======================================================= */
.conf-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.conf-highlight-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    display: block;
    text-decoration: none;
    background: var(--color-primary-dark);
}

.conf-highlight-image {
    position: absolute;
    inset: 0;
}

.conf-highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.4s ease;
}

.conf-highlight-card:hover .conf-highlight-image img {
    transform: scale(1.05);
    filter: brightness(0.6);
}

.conf-highlight-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--band-raised) 0%, var(--band) 100%);
}

.conf-highlight-placeholder span {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.conf-highlight-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.conf-highlight-title {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-white);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.conf-highlight-subtitle {
    font-size: 0.8rem;
    color: var(--on-band-muted);
    margin: 0;
    line-height: 1.35;
}

.conf-highlight-arrow {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    margin-top: 0.5rem;
}

.conf-highlight-card:hover .conf-highlight-arrow {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .conf-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .conf-highlights-grid {
        grid-template-columns: 1fr;
    }
}


/* =======================================================
   HIGHLIGHTS V3 — Podim-style layout
   ======================================================= */

/* --- Hero --- */
.hl-hero {
    background: var(--color-primary-dark);
    padding: 6rem 0 4rem;
    text-align: center;
}

.hl-hero-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--on-band-muted);
    margin-bottom: 0.75rem;
}

.hl-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.1;
}

.hl-hero-sub {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Numbered cards grid --- */
.hl-cards {
    background: var(--color-primary-dark);
    padding: 0 0 4rem;
}

.hl-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.hl-card {
    display: block;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hl-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--on-band-link);
    transform: translateY(-3px);
}

.hl-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--on-band-btn-fill);
    color: var(--on-band-btn-ink);
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.hl-card-title {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.hl-card-sub {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .hl-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .hl-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Alternating feature blocks --- */
.hl-features {
    background: var(--color-primary-dark);
    padding: 2rem 0 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.hl-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 280px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.3s ease;
}

.hl-feature:hover {
    border-color: var(--on-band-link);
}

.hl-feature--reverse {
    direction: rtl;
}
.hl-feature--reverse > * {
    direction: ltr;
}

.hl-feature-img {
    position: relative;
    overflow: hidden;
}

.hl-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.hl-feature:hover .hl-feature-img img {
    transform: scale(1.03);
}

.hl-feature-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}

.hl-feature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.5rem;
}

.hl-feature-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.hl-feature-sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--on-band-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.hl-feature .conf-btn-accent {
    align-self: flex-start;
    font-size: 0.8rem;
    padding: 0.5rem 1.25rem;
}

@media (max-width: 768px) {
    .hl-features {
        padding: 2rem 1rem 3rem;
    }
    .hl-feature {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hl-feature--reverse {
        direction: ltr;
    }
    .hl-feature-img {
        aspect-ratio: 16 / 9;
    }
    .hl-feature-text {
        padding: 1.5rem;
    }
}


/* =======================================================
   HIGHLIGHT CARDS (Gutenberg block: conf/highlight-card)
   ======================================================= */

/* Content wrapper — no constraints, full-width sections */
.hlc-content {
    width: 100%;
}

/* Section — full-width row with alternating background */
.hlc-section {
    padding: 5rem 2rem;
    background: transparent;   /* preliv strani se vidi skozi */
}

.hlc-section:first-child {
    padding-top: 4rem;
}

.hlc-section:nth-child(even) {
    background: var(--color-off-white);
}

/* Inner card — two-column layout */
.hlc-card {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: var(--container-max);
    margin: 0 auto;
}

.hlc-card--reverse {
    flex-direction: row-reverse;
}

/* Image column */
.hlc-card-visual {
    flex: 0 0 50%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}

.hlc-card-visual img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.hlc-section:hover .hlc-card-visual img {
    transform: scale(1.04);
}

.hlc-card-placeholder {
    width: 100%;
    height: 380px;
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
}

/* Content column */
.hlc-card-content {
    flex: 1;
    padding: 1rem 0;
}

.hlc-card-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.hlc-card-title {
    font-family: var(--font-primary);
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--color-heading);
    line-height: 1.18;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}

.hlc-card-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.hlc-card-body p {
    margin: 0 0 0.75rem;
}

.hlc-card-body ul,
.hlc-card-body ol {
    padding-left: 1.25rem;
    margin: 0 0 0.75rem;
}

.hlc-card-body li {
    margin-bottom: 0.35rem;
}

/* CTA Button — outlined accent style */
.hlc-card-btn {
    display: inline-block;
    padding: 0.8rem 2.25rem;
    border: 2px solid var(--color-emphasis);
    color: var(--color-emphasis);
    background: transparent;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.hlc-card-btn:hover {
    background: var(--color-primary-hover);
    color: var(--on-brand);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 145, 234, 0.25);
}

/* Scroll-in animation */
.hlc-anim {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.hlc-anim--in {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 900px) {
    .hlc-section {
        padding: 3.5rem 1.5rem;
    }

    .hlc-card {
        flex-direction: column !important;
        gap: 2rem;
    }

    .hlc-card-visual {
        flex: none;
        width: 100%;
    }

    .hlc-card-visual img {
        height: 280px;
    }

    .hlc-card-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .hlc-section {
        padding: 2.5rem 1rem;
    }

    .hlc-card-visual img,
    .hlc-card-placeholder {
        height: 220px;
    }

    .hlc-card-title {
        font-size: 1.4rem;
    }

    .hlc-card-btn {
        width: 100%;
        text-align: center;
    }
}


/* =======================================================
   THE CALL PAGE — datumi sidebar
   ======================================================= */
.conf-call-page .conf-page-container,
.conf-wide-page .conf-page-container {
    max-width: var(--container-max);
}

.conf-call-dates {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Datumi v stranski kartici uporabljajo ISTI vzorec kot blok "Key Dates" na
   naslovnici: kartica z velikim datumom in majhno oznako pod njim
   (`.conf-date-card` / `.conf-date-day` / `.conf-date-label`). Prej je bila tu
   tabela z vrsticami in poudarjeno vrstico kot barvnim pasom cez sirino kartice —
   dva razlicna jezika za isto stvar, pas pa je se kršil pravilo o barvnih trakovih.
   Pri enem samem vnosu je bila razlika se posebej ocitna, ker "poudarjena vrstica"
   brez drugih vrstic nima pomena. */
.conf-call-dates li {
    display: block;
    text-align: center;
    padding: 1.25rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--surface-card);
}

.conf-call-dates li:last-child {
    margin-bottom: 0;
}

/* Datum je nosilec — velik, v Sairi, kot na naslovnici. */
.conf-call-date-value {
    display: block;
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.35rem;
    color: var(--color-heading);
    white-space: nowrap;
}

/* Oznaka je drugotna in stoji POD datumom. V HTML je pred njim, zato jo
   premakne `order` — vsebine v bazi ni treba spreminjati. */
.conf-call-date-label {
    display: block;
    font-size: var(--fs-meta);
    line-height: 1.4;
    color: var(--color-text-subtle);
}

.conf-call-dates li {
    display: flex;
    flex-direction: column;
}

.conf-call-date-value { order: 1; }
.conf-call-date-label { order: 2; }

/* Poudarjena vrstica (datum konference).
   Prej je bila to nasicena modra ploskev cez celo sirino kartice (`--band-accent`
   z negativnimi robovi). To je natanko vzorec, ki ga hisno pravilo prepoveduje —
   glej blok BREZ BARVNIH TRAKOV na dnu datoteke: poudarek dela GLOBINA IN PROSTOR,
   barva ostane samo tam, kjer nosi pomen. Pri enem samem vnosu je pas se posebej
   izstopal, ker ni bilo drugih vrstic, ob katerih bi bil kontrast smiseln.

   Zdaj: mirna svetla ploskev, nevtralna lasnica, vec zraka in vecja teza.
   Barva ostane na DATUMU (`--color-emphasis`), ker ta nosi podatek. */
/* Datum konference je poudarjen ENAKO kot na naslovnici: polna blagovna kartica
   z belim crnilom. To je CELA kartica, ne trak cez drugo ploskev — barva tu nosi
   pomen (kateri od datumov je sama konferenca) in je zato dovoljena. */
/* Selektor mora nositi tudi `li`: `.conf-call-dates li` je (0,1,1) in bi sicer
   s svojo belo ploskvijo premagal (0,1,0) tega pravila — crnilo bi se obrnilo
   v belo, ploskev pa ne, in kartica bi bila videti prazna. */
.conf-call-dates li.conf-call-date-highlight {
    background: var(--band-accent);
    border-color: var(--band-accent);
}

.conf-call-dates li.conf-call-date-highlight .conf-call-date-value {
    color: var(--color-white);
}

.conf-call-dates li.conf-call-date-highlight .conf-call-date-label {
    color: rgba(255, 255, 255, 0.85);
}

.conf-call-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}


/* =======================================================
   FAQ PAGE VARIANT — svetlo ozadje
   ======================================================= */
.conf-faq-page .conf-faq-list--page {
    max-width: 800px;
    margin: 0 auto;
}

.conf-faq-item--page {
    border-bottom: 1px solid var(--color-border);
}

.conf-faq-item--page summary {
    padding: 1.35rem 0;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color var(--transition);
}

.conf-faq-item--page summary:hover {
    color: var(--color-primary-hover);
}

.conf-faq-item--page summary::-webkit-details-marker {
    display: none;
}

.conf-faq-item--page summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-emphasis);
    transition: transform var(--transition);
    flex-shrink: 0;
    margin-left: 1rem;
}

.conf-faq-item--page[open] summary::after {
    transform: rotate(45deg);
}

.conf-faq-item--page .conf-faq-answer {
    padding: 0 0 1.35rem;
    color: var(--color-text-subtle);
    line-height: 1.75;
}

.conf-faq-item--page .conf-faq-answer a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.conf-faq-item--page .conf-faq-answer a:hover {
    color: var(--color-primary-hover);
}

.conf-faq-cta {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.conf-faq-cta p {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}


/* =======================================================
   PRESENTERS PAGE — wider resources grid
   ======================================================= */
.conf-page-content .conf-resources-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: var(--container-max);
    margin: 2rem auto 0;
}

@media (max-width: 768px) {
    .conf-page-content .conf-resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .conf-page-content .conf-resources-grid {
        grid-template-columns: 1fr;
    }
}


/* =======================================================
   PROGRAMME / TIMETABLE
   ======================================================= */

/* ── Section wrapper (light) ── */
.prog-section {
    background: var(--color-off-white);
    color: var(--color-text);
    padding: 0 0 5rem;
}

/* ── Sticky toolbar ── */
.prog-toolbar {
    position: sticky;
    top: 80px;
    z-index: 100;
    background: var(--color-off-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 2rem;
}

.admin-bar .prog-toolbar {
    top: 112px;
}

/* ── Day selector bar ── */
.prog-day-bar {
    background: var(--color-primary-dark);
    padding: 0.85rem 2rem;
    text-align: center;
}

/* ── Search + filters row ── */
.prog-toolbar > .conf-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* ── Search bar ── */
/* ── Search row: search input + PDF button side by side ── */
.prog-search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    max-width: 700px;
}

.prog-search-row .prog-pdf-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
}

/* ── Search bar (pill shape, semi-transparent) ── */
.prog-search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.prog-search {
    width: 100%;
    padding: 0.85rem 2.5rem 0.85rem 2.75rem;
    border: 2px solid rgba(0, 73, 131, 0.15);
    border-radius: var(--btn-radius);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 500;
    background: rgba(0, 73, 131, 0.04);
    color: var(--color-text);
    transition: all var(--transition);
    outline: none;
    letter-spacing: 0.01em;
}

.prog-search:focus {
    border-color: var(--color-emphasis);
    background: var(--surface-card);
    box-shadow: 0 4px 15px rgba(0, 145, 234, 0.12);
}

.prog-search::placeholder {
    color: rgba(0, 73, 131, 0.4);
    font-weight: 500;
}

.prog-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    pointer-events: none;
    opacity: 0.35;
}

.prog-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 73, 131, 0.08);
    border: none;
    font-size: 1.1rem;
    color: var(--color-text-subtle);
    cursor: pointer;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    line-height: 1;
}

.prog-search-clear:hover {
    background: var(--color-primary-hover);
    color: var(--on-brand);
}

/* ── Track filters (visible only on mobile via prog-mobile-only) ── */
.prog-track-filters {
    flex: 1;
    display: none;
}

/* ── No results ── */
.prog-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-subtle);
    font-style: italic;
}

/* ── Mobile / Desktop toggle ── */
.prog-desktop-only { display: flex; }
.prog-mobile-only  { display: none; }

.prog-mobile-search {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0.5rem 2rem;
}

/* ── Mobile selects (hidden on desktop, shown via media query) ── */
.prog-mobile-selects {
    display: none;
    gap: 0.5rem;
    justify-content: center;
    padding: 0 1rem;
}

.prog-day-select,
.prog-track-select {
    display: none;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--on-band-border-ui);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255,255,255,0.15);
    color: var(--color-white);
    cursor: pointer;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='white' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* Options must have dark text on white bg (native dropdown) */
.prog-day-select option,
.prog-track-select option {
    background: var(--surface-card);
    color: var(--color-text);
}

.prog-track-select {
    background: var(--surface-card);
    color: var(--color-text);
    border-color: var(--border-ui);
    margin: 0;
}

@media (max-width: 768px) {
    .prog-desktop-only { display: none !important; }
    .prog-mobile-only  { display: block !important; }
    .prog-mobile-selects { display: flex !important; }

    .prog-toolbar {
        top: 80px;
    }

    .admin-bar .prog-toolbar {
        top: 112px;
    }

    .prog-toolbar > .conf-container {
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .prog-search-row {
        max-width: 100%;
    }

    .prog-search-wrap {
        max-width: 100%;
    }

    .prog-day-bar {
        padding: 0.6rem 1rem;
    }

    .prog-day-select,
    .prog-track-select {
        display: block !important;
        width: 100%;
    }

    .prog-track-filters {
        display: block !important;
        width: 100%;
    }

    .prog-layout {
        flex-direction: column;
    }

    .prog-sidebar {
        display: none !important;
    }
}

.prog-day-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}

.prog-day-tab {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.15);
    padding: 0.85rem 1.75rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.prog-day-tab:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.prog-day-tab--active {
    background: var(--on-band-btn-fill);
    color: var(--on-band-btn-ink);
    border-color: var(--on-band-btn-fill);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.prog-day-tab--active:hover {
    background: var(--on-band-btn-fill);
    border-color: var(--on-band-btn-fill);
}

/* ── Track filter bar ── */
.prog-track-filters {
    margin-bottom: 2.5rem;
}

.prog-filter-label {
    display: block;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-subtle);
    margin-bottom: 0.75rem;
}

.prog-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.prog-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--btn-radius);
    background: var(--surface-card);
    color: var(--color-text-subtle);
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.prog-filter-pill:hover {
    background: var(--surface-hover);
    color: var(--color-text);
}

.prog-filter-pill--active {
    background: var(--surface-selected);
    color: var(--color-text);
    border-color: var(--pill-color, var(--color-border));
}

.prog-filter-pill:not(.prog-filter-pill--active) {
    opacity: 0.45;
}

.prog-filter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Two-column layout (sidebar + content) ── */
.prog-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.prog-main {
    flex: 1;
    min-width: 0;
}

/* ── Desktop sidebar ── */
.prog-sidebar {
    display: block;
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 160px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-bar .prog-sidebar {
    top: 192px;
}

.prog-sidebar__title {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-subtle);
    margin: 0 0 0.75rem;
    padding: 0 0.5rem;
}

.prog-sidebar__search {
    max-width: 100%;
    margin-bottom: 1.25rem;
}

.prog-sidebar__search .prog-search {
    font-size: 0.82rem;
    padding: 0.65rem 2rem 0.65rem 2.25rem;
}

.prog-sidebar__pdf {
    margin-top: 1.5rem;
}

.prog-sidebar__pdf .prog-pdf-btn {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
}

.prog-sidebar__filters {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.prog-sidebar__btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-subtle);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition);
    white-space: normal;
    text-align: left;
    line-height: 1.3;
}

.prog-sidebar__btn:hover {
    background: rgba(0, 73, 131, 0.06);
    color: var(--color-text);
}

.prog-sidebar__btn--active {
    background: var(--surface-selected);
    color: var(--color-text);
    border-color: var(--pill-color, var(--color-emphasis));
    font-weight: 600;
}

.prog-sidebar__btn:not(.prog-sidebar__btn--active) {
    opacity: 0.6;
}

.prog-sidebar__btn:not(.prog-sidebar__btn--active):hover {
    opacity: 1;
}

/* ── Day heading (visible when "All Days" mode) ── */
.prog-day-heading {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-emphasis);
    margin: 2.5rem 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    letter-spacing: -0.02em;
}

.prog-day-panel:first-child .prog-day-heading {
    margin-top: 0;
}

/* ── Time slot grouping ── */
.prog-time-slot {
    margin-bottom: 2.5rem;
}

.prog-time-label {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-emphasis);
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 70px;
    background: var(--color-off-white);
    z-index: 5;
}

/* ── Session cards grid ── */
.prog-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) {
    .prog-slot-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Session card ── */
/* Barva tracka je že na značkah .prog-card__number in .prog-card__track,
   zato je barvni trak ob robu odveč. Kartico dvigne senca. */
.prog-card {
    background: var(--surface-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
}

.prog-card:hover,
.prog-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.prog-card[style*="display: none"] {
    /* filtered out — keep no residual space */
}

/* Card header row */
.prog-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.prog-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--track-fill);
    color: var(--track-key);
    box-shadow: inset 0 0 0 1px var(--track-line);
}

.prog-card__time {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}

/* Card title */
.prog-card__title {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    margin: 0;
}

.prog-card__subtitle {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-subtle);
    margin: 0;
    line-height: 1.4;
}

/* Card meta row */
.prog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
}

.prog-card__track {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--track-fill);
    color: var(--track-key);
    box-shadow: inset 0 0 0 1px var(--track-line);
}

/* Pika je nosilka identitete tracka. Merjeno na vseh 120 parih 16 trackov
   (CIEDE2000): samo tintano polnilo pusti 26 zamenljivih parov, s trdno piko
   jih je 9 — pri stropu 5, ki ga postavljata PLENARY in DANCE ART (skoraj
   enaka PODATKA, ne napaka palete). */
.prog-card__track::before,
.prog-modal__track-badge::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.4rem;
    vertical-align: baseline;
    border-radius: 50%;
    background: var(--track-key);
}

.prog-card__lang {
    font-size: 1rem;
}

.prog-card__format {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--color-text-subtle);
    background: var(--color-off-white);
    padding: 0.15rem 0.55rem;
    border-radius: var(--btn-radius);
}

.prog-card__expand-hint {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: rgba(0, 0, 0, 0.3);
    transition: color var(--transition);
}

.prog-card:hover .prog-card__expand-hint {
    color: var(--color-primary-hover);
}

/* ── Modal overlay ── */
.prog-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 1.5rem;
}

.prog-modal-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.prog-modal {
    background: var(--surface-card);
    border-radius: 10px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.prog-modal-overlay--visible .prog-modal {
    transform: translateY(0) scale(1);
}

.prog-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
    z-index: 2;
}

.prog-modal__close:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

.prog-modal__body {
    padding: 2rem 2rem 1.75rem;
}

.prog-modal__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.prog-modal__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--track-fill);
    color: var(--track-key);
    box-shadow: inset 0 0 0 1px var(--track-line);
}

.prog-modal__track-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--track-fill);
    color: var(--track-key);
    box-shadow: inset 0 0 0 1px var(--track-line);
}

.prog-modal__title {
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.prog-modal__subtitle {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-subtle);
    margin: 0 0 1rem;
    line-height: 1.4;
}

.prog-modal__info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-subtle);
}

.prog-modal__info > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.prog-modal__format-badge {
    background: var(--color-off-white);
    padding: 0.15rem 0.65rem;
    border-radius: var(--btn-radius);
    font-size: 0.78rem;
}

.prog-modal__moderator {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-emphasis);
    margin-bottom: 1.25rem;
    font-style: italic;
}

.prog-modal__presentations h4 {
    font-family: var(--font-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle);
    margin: 0 0 0.75rem;
}

.prog-modal__pres-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.prog-modal__pres-list li {
    padding: 0.75rem 1rem;
    background: var(--color-off-white);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text);
}

.prog-modal__pres-list li strong {
    font-weight: 600;
}

.prog-modal__pres-authors {
    color: var(--color-text-subtle);
    font-size: 0.82rem;
}

/* ── Programme page responsive ── */
@media (max-width: 768px) {
    .prog-day-bar {
        padding: 1rem 0;
    }
    .prog-day-tabs {
        gap: 0.35rem;
    }
    .prog-day-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    .prog-filter-pills {
        gap: 0.3rem;
    }
    .prog-filter-pill {
        font-size: 0.68rem;
        padding: 0.25rem 0.6rem;
    }
    .prog-modal__body {
        padding: 1.5rem 1.25rem;
    }
    .prog-modal__title {
        font-size: 1.15rem;
    }
}

@media (max-width: 480px) {
    .prog-day-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    .prog-time-label {
        font-size: 0.95rem;
    }
    .prog-card__title {
        font-size: 0.92rem;
    }
}

/* =======================================================
   PROGRAMME PDF BUTTON
   ======================================================= */
.prog-pdf-btn {
    cursor: pointer;
}

.prog-pdf-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}


/* =======================================================
   NEWSLETTER POPUP
   ======================================================= */
.conf-newsletter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 1.5rem;
}

.conf-newsletter-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.conf-newsletter-modal {
    background: var(--surface-card);
    border-radius: 10px;
    max-width: 520px;
    width: 100%;
    height: 480px;
    max-height: 85vh;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.conf-newsletter-overlay--visible .conf-newsletter-modal {
    transform: translateY(0) scale(1);
}

.conf-newsletter-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: rgba(0, 0, 0, 0.08);
    color: #333;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 2;
}

.conf-newsletter-close:hover {
    background: var(--color-primary-hover);
    color: var(--on-brand);
}

@media (max-width: 600px) {
    .conf-newsletter-modal {
        max-width: 100%;
        height: 70vh;
        border-radius: 10px 10px 0 0;
    }

    .conf-newsletter-overlay {
        align-items: flex-end;
        padding: 0;
    }
}

/* =======================================================
   MOBILE BUTTON OVERRIDES (max-width: 768px)
   ======================================================= */
@media (max-width: 768px) {
    /* Stack Gutenberg button groups vertically on mobile */
    .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    /* Full-width individual button wrappers when stacked */
    .wp-block-buttons .wp-block-button {
        width: 100%;
    }

    /* Na mobilnem so gumbi cez celo sirino, a OSTANEJO kapsula s krogom.
       Prej je bilo tu `display: block` in simetricen odmik — to bi krog
       postavilo v novo vrstico in razbilo obliko. Zato `inline-flex` ostane,
       sirina gre na 100 %, vsebina pa se poravna na levo ob krog. */
    .conf-btn,
    .wp-block-button__link {
        font-size: var(--fs-meta);
    }

    .wp-block-buttons .wp-block-button__link,
    .wp-block-button.conf-btn .wp-block-button__link,
    .wp-block-button.conf-btn-accent .wp-block-button__link,
    .wp-block-button.conf-btn-outline .wp-block-button__link {
        display: inline-flex;
        width: 100%;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .wp-block-button.conf-btn--noicon .wp-block-button__link {
        justify-content: center;
    }
}


/* =======================================================
   HOMEPAGE SECTION SPACING — mobile (max-width: 768px)
   ======================================================= */
@media (max-width: 768px) {
    /* Override global section padding variable — 6rem → 3rem top/bottom */
    :root {
        --section-padding: 3rem 0;
    }

    /* Hero — reduce oversized top/bottom padding.
       Odmik glave mora ostati tudi tu: brez njega naslov zleze pod prosojno
       glavo, ker distancnika ni vec.
       Zgornji odmik je bil 5rem (skupaj 160 px) in je heroj na telefonu potisnil
       na 1141 px, torej cez celo visino zaslona; naslov se je zacel sele pri
       480 px. Zato 1.5rem. */
    .conf-hero {
        padding: calc(1.5rem + var(--conf-header-offset)) 1.5rem 3rem;
    }

    .conf-hero--photo {
        padding: calc(1.5rem + var(--conf-header-offset)) 1.5rem 2.5rem;
        min-height: 45vh;
    }

    /* Vrstica z organizatorji je na telefonu zavzela 166 px (sest vrstic verzalk
       z razmikom 2.16 px) in odrinila naslov pod pregib. Na ozkih zaslonih jo
       skrijemo; podatek ostane v nogi in na strani About the Conference. */
    .conf-hero-label {
        display: none;
    }

    /* Hero title — cap font size on narrow screens */
    .conf-hero-title {
        font-size: clamp(2.25rem, 10vw, 3.5rem);
        margin-bottom: 0.5rem;
    }

    /* Hero subtitle — reduce large bottom gap */
    .conf-hero-subtitle {
        margin-bottom: 1.5rem;
    }

    /* Hero meta row — tighter gap and spacing */
    .conf-hero-meta {
        gap: 1.25rem;
        margin-bottom: 2rem;
    }

    /* Section subtitle — reduce the 3rem bottom margin */
    .conf-section-subtitle {
        margin-bottom: 1.75rem;
    }

    /* Countdown bar — slight reduction */
    .conf-countdown {
        padding: 1.75rem 0;
    }

    /* About grid — reduce top gap since section padding is smaller */
    .conf-about-grid {
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
}


/* =======================================================
   DESIGN POLISH 2026-08-03
   Zaobljene kartice + sence/hover-lift.
   Dodano na koncu, da ne posega v obstoječa pravila.
   ======================================================= */

/* --- Zaobljene kartice + sence + hover-lift --- */
.conf-date-card,
.conf-resource-card,
.conf-info-box,
.cs-speaker-card {
    border-radius: 14px;
}
.conf-resource-card,
.conf-info-box,
.cs-speaker-card {
    box-shadow: 0 6px 20px rgba(1, 48, 79, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
}
.conf-resource-card:hover,
.cs-speaker-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(1, 48, 79, 0.16);
}


/* =======================================================
   DOKUMENTNE PODSTRANI (For the Presenters → Zoom navodila)
   Zaslonske slike iz nekdanjih PDF-jev + napisi pod njimi.
   ======================================================= */
.conf-page-content .wp-block-image {
    margin: 1.75rem 0;
    text-align: center;
}

.conf-page-content .wp-block-image img {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--surface-media);
    box-shadow: 0 4px 14px rgba(1, 48, 79, 0.07);
}

.conf-page-content .wp-block-image figcaption,
.conf-page-content .wp-element-caption {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    font-style: italic;
    text-align: center;
}

/* Info box znotraj vsebine strani (kontakt / prenos originala) */
.conf-page-content .conf-info-box {
    margin: 3rem 0 2rem;
}

.conf-page-content .conf-info-box h4 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--color-heading);
}


/* =======================================================
   SESSION RECORDINGS V2 — conf/recordings-playlist blok
   Zamenjava za Elementor Pro "Video Playlist" widget.
   ======================================================= */

/* Stran je sirsa od privzetih 800px — playlist rabi prostor */
.conf-page-recordings-v2 .conf-page-container {
    max-width: 1200px;
}

.conf-page-recordings-v2 .conf-rec-intro {
    max-width: 820px;
    margin: 0 auto 3.5rem;
}

.conf-page-recordings-v2 .conf-rec-intro p {
    font-size: 1.05rem;
    color: var(--color-text-subtle);
}

/* ---------- Skupina (en dan / ena tema) ---------- */
.conf-rec-group {
    margin: 0 0 3.5rem;
}

.conf-rec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.conf-page-content .conf-rec-title {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-heading);
    letter-spacing: -0.02em;
    margin: 0;
}

.conf-rec-headmeta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.conf-rec-count {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-emphasis);
}

.conf-rec-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: all var(--transition);
}

.conf-rec-toggle:hover {
    color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.conf-rec-toggle-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--transition);
}

.conf-rec-toggle[aria-expanded="false"] .conf-rec-toggle-caret {
    transform: rotate(-180deg);
}

/* Generični .conf-page-content img (margin: 1.5rem 0 + border-radius: 8px) je
   bolj specifičen od razredov bloka in je slikam dodal 24px črn pas na vrhu —
   tako v predvajalniku kot v sličicah seznama. */
.conf-page-content .conf-rec-group img {
    margin: 0;
    border-radius: 0;
}

/* ---------- Postavitev: predvajalnik + seznam ---------- */
.conf-rec-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

.conf-rec-body--list-left {
    grid-template-columns: 340px minmax(0, 1fr);
}

.conf-rec-body--list-left .conf-rec-player {
    order: 2;
}

.conf-rec-body--list-left .conf-rec-list {
    order: 1;
}

/* Zlozen seznam — ostane samo predvajalnik */
.conf-rec-body--collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.conf-rec-body--collapsed .conf-rec-list {
    display: none;
}

/* ---------- Predvajalnik ---------- */
.conf-rec-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.conf-rec-iframe,
.conf-rec-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.conf-rec-facade {
    padding: 0;
    background: #000;
    cursor: pointer;
    display: block;
}

.conf-rec-facade-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transition: opacity var(--transition), transform var(--transition);
}

.conf-rec-facade:hover .conf-rec-facade-img {
    opacity: 1;
    transform: scale(1.02);
}

.conf-rec-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--color-emphasis);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    transition: background var(--transition), transform var(--transition);
}

.conf-rec-facade-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-left: 22px solid #fff;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}

.conf-rec-facade:hover .conf-rec-facade-play {
    background: var(--color-primary-hover);
    transform: translate(-50%, -50%) scale(1.08);
}

.conf-rec-now {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.conf-page-content .conf-rec-now-title {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
}

.conf-page-content a.conf-rec-yt {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-emphasis);
    text-decoration: none;
    white-space: nowrap;
}

.conf-page-content a.conf-rec-yt:hover {
    text-decoration: underline;
}

/* ---------- Seznam videov ---------- */
.conf-page-content ol.conf-rec-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    max-height: 480px;
    overflow-y: auto;
    background: var(--color-off-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    scrollbar-width: thin;
}

.conf-rec-list::-webkit-scrollbar {
    width: 8px;
}

.conf-rec-list::-webkit-scrollbar-thumb {
    background: rgba(0, 73, 131, 0.25);
    border-radius: 4px;
}

.conf-rec-li {
    margin: 0;
}

.conf-rec-item {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 0.7rem;
    width: 100%;
    padding: 0.5rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition);
}

.conf-rec-item:hover {
    background: rgba(0, 145, 234, 0.08);
}

.conf-rec-item.is-active {
    background: var(--surface-selected);
}

.conf-rec-item:focus-visible {
    outline: 2px solid var(--focus-ring);
    box-shadow: 0 0 0 4px var(--focus-halo);
    outline-offset: -2px;
}

.conf-rec-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
    background: var(--media-placeholder-1);
}

.conf-rec-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conf-rec-dur {
    position: absolute;
    right: 3px;
    bottom: 3px;
    padding: 1px 4px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 3px;
}

.conf-rec-itext {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
}

.conf-rec-inum {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-emphasis);
}

.conf-rec-ititle {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}

.conf-rec-item.is-active .conf-rec-ititle {
    color: var(--color-emphasis);
}

.conf-rec-empty {
    padding: 1rem;
    color: var(--color-text-subtle);
    background: var(--color-off-white);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .conf-rec-body,
    .conf-rec-body--list-left {
        grid-template-columns: minmax(0, 1fr);
    }
    .conf-rec-body--list-left .conf-rec-player { order: 1; }
    .conf-rec-body--list-left .conf-rec-list   { order: 2; }
    .conf-page-content ol.conf-rec-list {
        max-height: 340px;
    }
}

@media (max-width: 600px) {
    .conf-page-content .conf-rec-title {
        font-size: 1.25rem;
    }
    .conf-rec-facade-play {
        width: 58px;
        height: 58px;
    }
    .conf-rec-facade-play::after {
        border-left-width: 17px;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
    .conf-rec-item {
        grid-template-columns: 88px minmax(0, 1fr);
    }
    .conf-rec-ititle {
        font-size: 0.8rem;
    }
}


/* =======================================================
   BREZ BARVNIH TRAKOV (pravilo, 2026-08-12)
   =======================================================

   Poudarjen blok se loci z GLOBINO (senca), ne z barvnim trakom.

   NE UPORABLJAJ:
     border-left: 4px solid var(--color-accent);   <- klasicni "AI" trak
     border-bottom: 3px solid var(--color-accent); <- barvna crta pod naslovom
     ::after { width: 60px; height: 4px; background: accent }  <- crtica pod naslovom

   UPORABI:
     background: var(--surface-card);
     border: 1px solid var(--color-border);
     border-radius: 12px;
     box-shadow: var(--shadow-md);        (sm / md / lg so v :root)

   Barva ostane samo tam, kjer NOSI POMEN ali je interaktivna:
   gumbi, znacke (.prog-card__track, .hl-card-num), tocke na casovnici,
   oznaka aktivnega elementa, hover/focus stanja.

   Preveri z: tools/qa/accentscan.js (prek /browse) — mora vrniti "none".
   ======================================================= */


/* =======================================================
   STATISTIKA (kartice s stevilkami)
   Uporablja jih /about-alma-mater/. Brez barvnih trakov —
   kartico dvigne senca (glej "BREZ BARVNIH TRAKOV").
   ======================================================= */
.conf-page-content .conf-facts {
    display: grid;
    /* Fiksno 3 stolpce, ne auto-fit: pri 6 karticah in 800px vsebini bi
       auto-fit naredil vrsto 5+1. 3+3 na namizju, 2+2+2 na mobilnem. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    margin: 2rem 0 2.5rem;
}

/* WordPress doda sosednjim blokom margin-block-start: 24px (pravilo v :where(),
   specificnost 0). V mrezi to razmakne kartice navzdol — iznicimo. */
.conf-page-content .conf-facts > * {
    margin-top: 0;
    margin-block-start: 0;
}

.conf-page-content .conf-fact {
    background: var(--surface-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 1.4rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.conf-page-content p.conf-fact-num {
    font-family: var(--font-primary);
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-emphasis);
    margin: 0;
}

.conf-page-content p.conf-fact-label {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--color-text-subtle);
}

/* Seznam lokacij / fakultet v dveh stolpcih */
.conf-page-content .conf-cols-2 {
    columns: 2;
    column-gap: 2rem;
}

.conf-page-content .conf-cols-2 li {
    break-inside: avoid;
}

@media (max-width: 700px) {
    .conf-page-content .conf-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .conf-page-content .conf-cols-2 {
        columns: 1;
    }
    .conf-page-content p.conf-fact-num {
        font-size: 1.8rem;
    }
    .conf-page-content .conf-fact {
        padding: 1.1rem 0.75rem;
    }
    .conf-page-content p.conf-fact-label {
        font-size: 0.8rem;
    }
}


/* =======================================================
   TRACK CIPI — rezerva za motorje brez color-mix()
   Namenoma NEVTRALEN cip, ne trdno polnilo v barvi tracka:
   trdno polnilo je natanko stanje, ki danes pade pri
   #e65100 (3.79), #558b2f (4.10) in #f9a825. Izguba odtenka
   na starem brskalniku je boljsa od necitljive znacke.
   ======================================================= */
@supports not (color-mix(in srgb, red 50%, blue)) {
    .prog-card__track,
    .prog-card__number,
    .prog-modal__track-badge,
    .prog-modal__number {
        background: var(--surface-sunken);
        color: var(--color-text);
        box-shadow: inset 0 0 0 1px var(--border-ui);
    }
    .prog-card__track::before,
    .prog-modal__track-badge::before {
        background: var(--color-text-subtle);
    }
}


/* =======================================================
   TEMNA TEMA
   Vrednosti so deklarirane ENKRAT kot zasebni --_d-* primitivi,
   da se dva selektorja — @media (prefers-color-scheme: dark) za
   nacin "auto" in [data-theme="dark"] za izrecno izbiro — brez
   build stepa ne moreta razhajati.
   ======================================================= */
:root {
    --_d-surface:          #1a2332;  /* support --surface, dobesedno                  */
    --_d-surface-sunken:   #121924;  /* 1.12:1 pod stranjo — zrcali svetlo temo       */
    --_d-surface-card:     #243040;  /* support --card-bg, dobesedno                  */
    --_d-surface-hover:    #2b3949;
    --_d-surface-selected: #2c4259;
    --_d-media-1:          #2b3949;
    --_d-media-2:          #3a4a5e;

    --_d-text:      #e8edf4;  /* support --text, dobesedno                            */
    --_d-heading:   #f2f6fb;  /* STRUKTURNI naslovi gredo v najsvetlejse crnilo, NE v
                                 modro: stran, kjer je vsak h2 svetlo moder, bere kot
                                 produktna nadzorna plosca, ne kot znanstvena revija. */
    --_d-emphasis:  #5ab4f0;  /* PODATEK/STANJE gre v blagovno modro: statisticna
                                 stevilka ali naslov aktivne vrstice v skoraj beli bi
                                 se stopila v telo besedila. Zato je vloga (b)
                                 razdeljena na dvoje.                                 */
    --_d-subtle:    #c6cedb;  /* reseno >=6.5 na vseh 5 temnih podlagah (najslabse 6.53) */
    --_d-faint:     #a2aec3;  /* reseno >=4.5 na vseh 5 (najslabse 4.62). support dark
                                 --text-light #5a6a82 je 2.43 in --text-muted #8b9ab5
                                 je 4.14 na hover kartici — oba ZAVRNJENA.            */

    --_d-primary:       #5ab4f0;  /* support dark --primary, dobesedno  */
    --_d-primary-hover: #7ec8f7;  /* support dark --primary-hover       */
    --_d-on-brand:      #0f1b2d;  /* support dark --btn-text, dobesedno */

    --_d-border:        rgba(255, 255, 255, 0.12);
    --_d-border-strong: rgba(255, 255, 255, 0.22);
    --_d-border-ui:     #838fa1;  /* reseno >=3:1 na vseh 5 temnih podlagah (3.16)    */

    --_d-field-bg:      #121924;
    --_d-placeholder:   #a2aec3;
    --_d-success:       #65c079;
    --_d-danger:        #ed959d;
    --_d-ghost-bg:      rgba(255, 255, 255, 0.12);

    --_d-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20);
    --_d-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
    --_d-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.30);

    --_d-focus-ring: #e8edf4;
    --_d-focus-halo: #0f1b2d;

    /* NAJPOMEMBNEJSA TEMNA VREDNOST V DATOTEKI. Na temni strani #1a2332 se noben
       navy ne loci po svetlosti: noga support strani #002347 meri natanko 1.00:1
       proti njej, nas pas pa 1.11. Senca prispeva ~1.1. Edini mehanizem, ki deluje,
       je 1px lasnica pri 0.42 alfe: 4.00 proti pasu, 3.59 proti strani. Ce to
       izbrises, temna tema tiho izgubi celotno strukturno ogrodje — nic ne javi
       napake in posnetek ene sekcije se vedno izgleda v redu.                       */
    --_d-divider-band: rgba(255, 255, 255, 0.42);

    /* PASOVI SE POGLOBIJO — ne splostijo se in ne posvetlijo. #00386C ima relativno
       svetlost .0391 proti strani pri .0165, zato bi pas, ki bi ostal na mestu, bil
       2,4x SVETLEJSI od vsebine, ki jo uokvirja, in bi lebdel namesto uokvirjal.    */
    --_d-band:        #001A33;  /* = ozadje <html> na support strani                 */
    --_d-band-deep:   #000d1c;
    --_d-band-raised: #0d3050;  /* kartica na pasu ostane svetlejsa od svojega pasu  */
    --_d-band-accent: #00386C;  /* NAJNEVARNEJSA preslikava v celotni paleti: ce bi
                                   statisticni pas sledil --color-primary na #5ab4f0,
                                   bi bilo njegovo belo besedilo 2.28.               */

    --_d-gradient-surface: linear-gradient(180deg, #1e2837 0%, #1a2332 45%, #141c28 100%);

    --_d-gradient-hero: linear-gradient(135deg, #000d1c 0%, #001A33 45%, #002347 100%);
    --_d-hero-scrim: linear-gradient(to bottom,
                       rgba(0, 13, 28, 0.94) 0%,
                       rgba(0, 13, 28, 0.88) 45%,
                       rgba(0, 13, 28, 0.94) 100%);
    /* Alfe scrima se v temni DVIGNEJO. Svetla fotografija heroja na temni strani
       postane najsvetlejsi objekt na zaslonu in obrne hierarhijo. Cez cisto belo
       fotografijo pri tankem postanku: belo 14.54, muted 9.67, zlato 9.65.          */
}

/* ============ OHRANJAJ V SINHRONIZACIJI — enaka telesa ============ */
[data-theme="dark"] {
    color-scheme: dark;

    --surface:          var(--_d-surface);
    --surface-sunken:   var(--_d-surface-sunken);
    --surface-card:     var(--_d-surface-card);
    --surface-hover:    var(--_d-surface-hover);
    --surface-selected: var(--_d-surface-selected);
    --media-placeholder-1: var(--_d-media-1);
    --media-placeholder-2: var(--_d-media-2);
    /* --surface-media je NAMENOMA ODSOTEN — ostane #ffffff. Preusmeritev na
       --surface je najbolj verjetna dobronamerna regresija v tej specifikaciji:
       vsak prosojen partnerski PNG je bil narejen za belo podlago.                  */

    --color-text:        var(--_d-text);
    --color-heading:     var(--_d-heading);
    --color-emphasis:    var(--_d-emphasis);
    --color-text-subtle: var(--_d-subtle);
    --color-text-faint:  var(--_d-faint);

    --color-primary:       var(--_d-primary);
    --color-primary-hover: var(--_d-primary-hover);
    --on-brand:            var(--_d-on-brand);

    --color-border:        var(--_d-border);
    --color-border-strong: var(--_d-border-strong);
    --border-ui:           var(--_d-border-ui);

    --field-bg:          var(--_d-field-bg);
    --field-placeholder: var(--_d-placeholder);
    --color-success:     var(--_d-success);
    --color-danger:      var(--_d-danger);
    --btn-ghost-bg:      var(--_d-ghost-bg);

    --shadow-sm: var(--_d-shadow-sm);
    --shadow-md: var(--_d-shadow-md);
    --shadow-lg: var(--_d-shadow-lg);
    /* OPOMBA: na temni senca sama ne loci #243040 od #1a2332 (1.18:1). Kartice
       morajo tu nositi OBOJE — --shadow-md IN 1px --color-border. V svetli temi
       senca to zmore sama.                                                          */

    --focus-ring: var(--_d-focus-ring);
    --focus-halo: var(--_d-focus-halo);

    --divider-band: var(--_d-divider-band);

    --band:        var(--_d-band);
    --band-deep:   var(--_d-band-deep);
    --band-raised: var(--_d-band-raised);
    --band-accent: var(--_d-band-accent);

    --gradient-surface: var(--_d-gradient-surface);
    --gradient-hero:   var(--_d-gradient-hero);
    --gradient-accent: linear-gradient(135deg, #001A33 0%, #002347 100%);
    --hero-scrim:      var(--_d-hero-scrim);

    --track-key-partner: var(--ameu-paper);
    --track-key: color-mix(in srgb, var(--card-track-color) 40%, var(--track-key-partner));
    /* --track-base se samodejno razresi na --surface-card. Kljuc potegnjen 60%
       proti #e8edf4: najslabsa oznaka na polnilu 5.20, najslabsa pika 6.35.         */

    /* ODSOTNO PO NACRTU — celotna plast L2b, ~55 deklaracij:
       --on-band, --on-band-soft, --on-band-muted, --on-band-link, --on-band-border,
       --on-band-border-ui, --on-band-fill, --on-band-fill-hover, --on-band-btn-fill,
       --on-band-btn-ink, --gold, --on-gold, --surface-media.
       VAROVALKA G2: ce se katera od teh pojavi v tem bloku, je bila napacno
       razvrscena in sodi v L1. --divider-band NI iz te druzine — je L1 in MORA biti
       tu. Zato ni imenovan --on-band-*.                                             */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --surface:          var(--_d-surface);
        --surface-sunken:   var(--_d-surface-sunken);
        --surface-card:     var(--_d-surface-card);
        --surface-hover:    var(--_d-surface-hover);
        --surface-selected: var(--_d-surface-selected);
        --media-placeholder-1: var(--_d-media-1);
        --media-placeholder-2: var(--_d-media-2);

        --color-text:        var(--_d-text);
        --color-heading:     var(--_d-heading);
        --color-emphasis:    var(--_d-emphasis);
        --color-text-subtle: var(--_d-subtle);
        --color-text-faint:  var(--_d-faint);

        --color-primary:       var(--_d-primary);
        --color-primary-hover: var(--_d-primary-hover);
        --on-brand:            var(--_d-on-brand);

        --color-border:        var(--_d-border);
        --color-border-strong: var(--_d-border-strong);
        --border-ui:           var(--_d-border-ui);

        --field-bg:          var(--_d-field-bg);
        --field-placeholder: var(--_d-placeholder);
        --color-success:     var(--_d-success);
        --color-danger:      var(--_d-danger);
        --btn-ghost-bg:      var(--_d-ghost-bg);

        --shadow-sm: var(--_d-shadow-sm);
        --shadow-md: var(--_d-shadow-md);
        --shadow-lg: var(--_d-shadow-lg);

        --focus-ring: var(--_d-focus-ring);
        --focus-halo: var(--_d-focus-halo);

        --divider-band: var(--_d-divider-band);

        --band:        var(--_d-band);
        --band-deep:   var(--_d-band-deep);
        --band-raised: var(--_d-band-raised);
        --band-accent: var(--_d-band-accent);

        --gradient-surface: var(--_d-gradient-surface);
        --gradient-hero:   var(--_d-gradient-hero);
        --gradient-accent: linear-gradient(135deg, #001A33 0%, #002347 100%);
        --hero-scrim:      var(--_d-hero-scrim);

        --track-key-partner: var(--ameu-paper);
        --track-key: color-mix(in srgb, var(--card-track-color) 40%, var(--track-key-partner));
    }
}

/* Na temni podlagi senca ne loci kartice od strani (1.18:1) — kartice tam nosijo
   tudi lasnico. V svetli temi to pravilo ne velja, ker senca zadostuje.

   POZOR — to je pravilo o STRUKTURI, ne o tokenu, zato ga temni @media blok zgoraj
   NE pokrije. V nacinu "auto" skript atribut data-theme ODSTRANI (glej footer-v2.php),
   torej se [data-theme="dark"] ne ujame in kartice ostanejo brez lasnice. Vsako tako
   pravilo mora imeti oba zapisa; spodnji @media je zrcalo tega selektorja.           */
[data-theme="dark"] .conf-info-box,
[data-theme="dark"] .conf-page-content blockquote,
[data-theme="dark"] .conf-page-content .conf-fact,
[data-theme="dark"] .conf-timeline-card,
[data-theme="dark"] .conf-date-card,
[data-theme="dark"] .conf-resource-card,
[data-theme="dark"] .prog-card {
    border: 1px solid var(--color-border);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .conf-info-box,
    :root:not([data-theme="light"]) .conf-page-content blockquote,
    :root:not([data-theme="light"]) .conf-page-content .conf-fact,
    :root:not([data-theme="light"]) .conf-timeline-card,
    :root:not([data-theme="light"]) .conf-date-card,
    :root:not([data-theme="light"]) .conf-resource-card,
    :root:not([data-theme="light"]) .prog-card {
        border: 1px solid var(--color-border);
    }
}

/* Polnokrvni pasovi rabijo v TEMNI temi lasnico, sicer se ne locijo od strani.
   V svetli temi je namenoma ni (odlocitev uporabnika, 13. 8. 2026): tam pas proti
   beli vsebini stoji sam zase pri 11.78:1 in lasnice ne rabi.

   Isto pravilo dvakrat — glej opozorilo pri karticah zgoraj: v nacinu "auto" atributa
   data-theme ni, zato brez @media dvojnika lasnice na temnem OS ne bi bilo.          */
[data-theme="dark"] .conf-header,
[data-theme="dark"] .conf-footer,
[data-theme="dark"] .conf-faq,
[data-theme="dark"] .conf-speakers,
[data-theme="dark"] .conf-countdown,
[data-theme="dark"] .prog-day-bar {
    border-block: 1px solid var(--divider-band);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .conf-header,
    :root:not([data-theme="light"]) .conf-footer,
    :root:not([data-theme="light"]) .conf-faq,
    :root:not([data-theme="light"]) .conf-speakers,
    :root:not([data-theme="light"]) .conf-countdown,
    :root:not([data-theme="light"]) .prog-day-bar {
        border-block: 1px solid var(--divider-band);
    }
}


/* =======================================================
   PREKLOPNIK TEME (noga)
   Segmentirana kontrola Light / Dark / Auto, enak vzorec kot
   support.almamater.si. Sedi na pasu --band-deep, zato uporablja
   izkljucno crnilo iz plasti L2b (nespremenljivo v obeh temah).
   ======================================================= */
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem;
    border: 1px solid var(--on-band-border);
    border-radius: var(--btn-radius);
}

.theme-switch__label {
    padding: 0 0.5rem 0 0.6rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-band-muted);
}

.theme-switch__opt {
    padding: 0.28rem 0.7rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--on-band-soft);
    background: transparent;
    border: 0;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.theme-switch__opt:hover {
    background: var(--on-band-fill);
    color: var(--on-band);
}

/* Izbrana moznost: trdna tabletka. Belo polnilo z navy crnilom je 15.77:1 in
   drzi v OBEH temah, ker je pas temen v obeh. Nobenega barvnega traku. */
.theme-switch__opt.is-on {
    background: var(--on-band-btn-fill);
    color: var(--on-band-btn-ink);
}

.theme-switch__opt:focus-visible {
    outline: 2px solid var(--focus-ring);
    box-shadow: 0 0 0 4px var(--focus-halo);
    outline-offset: 2px;
}

/* Noga ima zdaj tri otroke namesto dveh — na ozjem zaslonu jih zlozimo. */
@media (max-width: 860px) {
    .conf-footer-bottom {
        flex-direction: column;
        gap: 0.9rem;
        text-align: center;
    }
}


/* =======================================================
   NEWSLETTER SIGNUP (Gravity Forms)
   =======================================================

   Pot podatka:  GF obrazec -> GF Webhooks feed -> Make webhook
                 -> Mailjet lista "It's About People" (339769).

   POZOR — GF lasten CSS je IZKLOPLJEN (rg_gforms_disable_css = 1), ker ima
   spletisce lasten barvni sistem v3. Zato tu ne oblikujemo samo videza:
   nekaj pravil je NOSILNIH in brez njih je obrazec pokvarjen —
     .gform_validation_container  = HONEYPOT. Brez display:none je vaba VIDNA
                                    ("Phone" + opis) in jo ljudje izpolnijo.
     .hidden_label .gfield_label  = GF racuna, da to skrije njegov CSS.
     iframe[name^=gform_ajax]     = tarca AJAX oddaje.
   Ce se GF CSS kdaj vrne, ta pravila lahko ostanejo (so ista po pomenu).

   Dve okolji, ker obrazec zivi na dveh razlicnih podlagah:
     .conf-nl--footer            -> pas --band (temen v OBEH temah)  => L2b crnilo
     .conf-nl--block             -> ploskev strani (se obrne)        => L1 crnilo
   ======================================================= */

/* ---------- NOSILNA pravila (nadomescajo izklopljen GF CSS) ---------- */

/* Honeypot. Brez tega je vaba vidna. Nikoli ne brisi. */
.conf-nl .gform_validation_container {
    display: none !important;
}

/* GF "hidden_label" = oznaka je samo za bralnike zaslona. */
.conf-nl .hidden_label > .gfield_label,
.conf-nl .hidden_label > legend.gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Tarca AJAX oddaje (GF jo skrije z inline stilom; to je varovalka). */
.conf-nl iframe[name^="gform_ajax_frame"] {
    display: none;
    width: 0;
    height: 0;
    border: 0;
}

/* fieldset consent polja nima privzetega videza okvirja */
.conf-nl fieldset.gfield {
    margin: 0;
    padding: 0;
    border: 0;
}


/* ---------- Postavitev ---------- */

.conf-nl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
}

.conf-nl__intro {
    flex: 1 1 22rem;
    min-width: 0;
}

.conf-nl__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.conf-nl__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.conf-nl__form {
    flex: 1 1 26rem;
    min-width: 0;
}

/* Vrstica: polje raste, gumb ostane ob njem; soglasje se prelije pod polje.
   .gform-body drzi obe polji (e-posta + soglasje), .gform_footer je gumb. */
.conf-nl .gform_wrapper form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
}

.conf-nl .gform-body {
    flex: 1 1 15rem;
    min-width: 0;
}

.conf-nl .gform_footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.conf-nl .gform_fields {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.conf-nl .gfield {
    margin: 0;
    min-width: 0;
}


/* ---------- Polje za e-posto ---------- */

.conf-nl input[type="email"] {
    width: 100%;
    padding: 0.8rem 1.15rem;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--btn-radius);
    transition: border-color var(--transition), background var(--transition);
    outline: none;
}


/* ---------- Gumb ---------- */

.conf-nl .gform_button {
    display: inline-block;
    padding: 0.8rem 2rem;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.conf-nl .gform_button:disabled {
    opacity: 0.6;
    cursor: wait;
}


/* ---------- Soglasje ---------- */

.conf-nl .ginput_container_consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.conf-nl .ginput_container_consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0.15rem 0 0;
}

.conf-nl .gfield_consent_label {
    font-size: 0.76rem;
    line-height: 1.45;
    cursor: pointer;
}

.conf-nl .gfield_consent_label .gfield_required_text {
    font-size: 0.72rem;
    opacity: 0.75;
}

.conf-nl .gfield_consent_description {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    line-height: 1.45;
}

.conf-nl .gfield_consent_description a {
    text-decoration: underline;
}


/* ---------- Napake in potrditev ---------- */

.conf-nl .gfield_validation_message,
.conf-nl .validation_message,
.conf-nl .gform_validation_errors {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.conf-nl .gform_validation_errors > h2 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

.conf-nl .gform_confirmation_message,
.conf-nl .conf-nl-thanks {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
}


/* =======================================================
   OKOLJE A — obrazec NA PASU (noga, ali blok z background=band)
   Pas je temen v OBEH temah, zato izkljucno L2b crnilo (varovalka G2).
   ======================================================= */

.conf-nl--footer,
.conf-nl-section--band .conf-nl {
    /* Rdeca za napako iz L1 (--color-danger #c12f3d) je na navyju 2.1:1.
       Lokalna svetla razlicica: 6.89:1 na --band. Namenoma NI v :root —
       velja samo tu in ne sme postati splosen token. */
    --nl-danger: #ffb4bb;
    color: var(--on-band-soft);
}

.conf-nl--footer {
    padding-bottom: 2.75rem;
    margin-bottom: 2.75rem;
    border-bottom: 1px solid var(--divider-band);
}

.conf-nl--footer .conf-nl__heading,
.conf-nl-section--band .conf-nl__heading {
    font-size: 1.05rem;
    color: var(--on-band);
}

.conf-nl-section--band .conf-nl__heading {
    font-size: 1.75rem;
}

.conf-nl--footer .conf-nl__text,
.conf-nl-section--band .conf-nl__text {
    color: var(--on-band-muted);
}

.conf-nl--footer input[type="email"],
.conf-nl-section--band input[type="email"] {
    color: var(--on-band);
    background: var(--on-band-fill);
    border: 1px solid var(--on-band-border-ui);
}

.conf-nl--footer input[type="email"]::placeholder,
.conf-nl-section--band input[type="email"]::placeholder {
    color: var(--on-band-muted);
}

.conf-nl--footer input[type="email"]:focus,
.conf-nl-section--band input[type="email"]:focus {
    background: var(--on-band-fill-hover);
    border-color: var(--on-band);
}

/* Trdna bela tabletka — isti vzorec kot gumb Register v glavi in aktivni
   zavihek dneva na programu. --color-primary na navyju je 1.85:1. */
.conf-nl--footer .gform_button,
.conf-nl-section--band .gform_button {
    color: var(--on-band-btn-ink);
    background: var(--on-band-btn-fill);
}

.conf-nl--footer .gform_button:hover,
.conf-nl-section--band .gform_button:hover {
    background: var(--on-band-soft);
}

.conf-nl--footer .gfield_consent_label,
.conf-nl--footer .gfield_consent_description,
.conf-nl-section--band .gfield_consent_label,
.conf-nl-section--band .gfield_consent_description {
    color: var(--on-band-muted);
}

.conf-nl--footer .gfield_consent_description a,
.conf-nl-section--band .gfield_consent_description a {
    color: var(--on-band-link);
}

.conf-nl--footer input[type="checkbox"],
.conf-nl-section--band input[type="checkbox"] {
    accent-color: var(--on-band-link);
}

.conf-nl--footer .gfield_validation_message,
.conf-nl--footer .validation_message,
.conf-nl--footer .gform_validation_errors,
.conf-nl-section--band .gfield_validation_message,
.conf-nl-section--band .validation_message,
.conf-nl-section--band .gform_validation_errors {
    color: var(--nl-danger);
}

.conf-nl--footer .gform_confirmation_message,
.conf-nl-section--band .gform_confirmation_message {
    color: var(--on-band);
}

/* Nadomestna povezava, ko je obrazec ze izrisan v vsebini strani. */
.conf-nl--link {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--divider-band);
}

.conf-nl__jump {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--on-band-link);
    text-decoration: none;
}

.conf-nl__jump:hover {
    color: var(--gold);
}


/* =======================================================
   OKOLJE B — obrazec NA PLOSKVI STRANI (blok, svetlo ozadje)
   Tu se crnilo v temni temi obrne — uporabljamo L1 tokene.
   ======================================================= */

.conf-nl-section {
    padding: 4.5rem 0;
}

.conf-nl-section--sunken {
    background: var(--surface-sunken);
}

.conf-nl-section--band {
    background: var(--band);
}

.conf-nl--block .conf-nl__heading {
    font-size: 1.75rem;
    color: var(--color-heading);
}

.conf-nl--block .conf-nl__text {
    color: var(--color-text-subtle);
}

.conf-nl--block input[type="email"] {
    color: var(--field-text);
    background: var(--field-bg);
    border: 1px solid var(--border-ui);
}

.conf-nl--block input[type="email"]::placeholder {
    color: var(--field-placeholder);
}

.conf-nl--block input[type="email"]:focus {
    border-color: var(--color-emphasis);
}

.conf-nl--block .gform_button {
    color: var(--on-brand);
    background: var(--color-primary);
}

.conf-nl--block .gform_button:hover {
    background: var(--color-primary-hover);
}

.conf-nl--block .gfield_consent_label,
.conf-nl--block .gfield_consent_description {
    color: var(--color-text-faint);
}

.conf-nl--block .gfield_consent_description a {
    color: var(--color-primary);
}

.conf-nl--block input[type="checkbox"] {
    accent-color: var(--color-primary);
}

.conf-nl--block .gfield_validation_message,
.conf-nl--block .validation_message,
.conf-nl--block .gform_validation_errors {
    color: var(--color-danger);
}

.conf-nl--block .gform_confirmation_message {
    color: var(--color-success);
}


/* ---------- Fokus (dvobarven par iz :root — drzi na obeh podlagah) ---------- */

.conf-nl input[type="email"]:focus-visible,
.conf-nl input[type="checkbox"]:focus-visible,
.conf-nl .gform_button:focus-visible,
.conf-nl__jump:focus-visible {
    outline: 2px solid var(--focus-ring);
    box-shadow: 0 0 0 4px var(--focus-halo);
    outline-offset: 2px;
}


/* ---------- Ozji zasloni ---------- */

@media (max-width: 900px) {
    .conf-nl {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .conf-nl__intro,
    .conf-nl__form {
        flex: 1 1 auto;
    }
}

@media (max-width: 560px) {
    /* Gumb pod polje v polni sirini — pri 390px se "Sign Up" ob polju ne izide. */
    .conf-nl .gform-body,
    .conf-nl .gform_footer {
        flex: 1 1 100%;
    }

    .conf-nl .gform_button {
        width: 100%;
    }

    .conf-nl--footer {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .conf-nl-section {
        padding: 3rem 0;
    }

    .conf-nl-section--band .conf-nl__heading,
    .conf-nl--block .conf-nl__heading {
        font-size: 1.4rem;
    }
}


/* -------------------------------------------------------
   Popravki po vizualnem pregledu 13. 8. 2026
   ------------------------------------------------------- */

/* GF zlepi "(Required)" neposredno na konec stavka soglasja
   ("...at any time.(Required)") — bere se kot tipkarska napaka. */
.conf-nl .gfield_consent_label .gfield_required_text {
    margin-left: 0.3rem;
}

/* Blok znotraj vsebine strani NE more biti pas cez vso sirino: zivi v
   ozjem stolpcu .conf-page-container (800px), zato je bila siva ploskev
   videti kot zatavan pravokotnik sredi besedila. V tem okolju je KARTICA —
   bela ploskev, nevtralna 1px obroba in senca (vzorec "BREZ BARVNIH TRAKOV").
   Zunaj vsebine (homepage, kjer je blok sam svoja sekcija) ostane pas. */
.conf-page-content .conf-nl-section {
    margin: 2.5rem 0;
    padding: 2.25rem;
    background: var(--surface-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.conf-page-content .conf-nl-section--band {
    background: var(--band);
    border-color: var(--on-band-border);
}

/* Notranji .conf-container v kartici ne sme se enkrat omejevati sirine
   in dodajati 2rem odmika — kartica ima svoj padding. */
.conf-page-content .conf-nl-section .conf-container {
    max-width: none;
    padding: 0;
}

@media (max-width: 560px) {
    .conf-page-content .conf-nl-section {
        padding: 1.5rem;
        margin: 2rem 0;
    }
}


/* =======================================================
   NEWSLETTER — MODAL
   =======================================================
   Odpre ga hero gumb "Newsletter Signup" (sidro #conf-newsletter). Modal si obrazec
   SPOSODI iz noge (GF pri dveh izvodih istega obrazca izpise enake DOM ID-je), zato
   reza nosi razrede `conf-nl conf-nl--block conf-nl--modal` — brez njih bi preseljeni
   obrazec izgubil vse gnezdene stile. Glej newsletter-form.php.
   ======================================================= */

/* ---------- Modal ---------- */

.conf-nlm[hidden] {
    display: none;
}

.conf-nlm {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.conf-nlm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 13, 28, 0.72);   /* --ameu-abyss z alfo, ne cista crna */
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.26s ease;
}

.conf-nlm--open .conf-nlm__backdrop {
    opacity: 1;
}

.conf-nlm__dialog {
    position: relative;
    width: 100%;
    max-width: 30rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.25rem 2.25rem 2rem;
    background: var(--surface-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    /* Iztekajoca krivulja: hiter zacetek, mehak prihod. Z linearnim "ease" je
       gib pri 200 ms komaj opazen. */
    transition: opacity 0.26s ease-out,
                transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.conf-nlm--open .conf-nlm__dialog {
    opacity: 1;
    transform: none;
}

.conf-nlm__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-heading);
}

.conf-nlm__text {
    margin: 0 0 1.5rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-subtle);
}

/* Zapiralni gumb — duhasta tabletka iz :root (--btn-ghost-*), brez barve. */
.conf-nlm__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--btn-ghost-ink);
    background: var(--btn-ghost-bg);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.conf-nlm__close:hover {
    color: var(--on-brand);
    background: var(--btn-ghost-bg-hover);
}

.conf-nlm__close:focus-visible {
    outline: 2px solid var(--focus-ring);
    box-shadow: 0 0 0 4px var(--focus-halo);
    outline-offset: 2px;
}

/* Reza: obrazec je edini otrok, zato brez razmika in cez vso sirino. */
.conf-nlm__slot {
    gap: 0;
}

/* V ozkem modalu gumb pod polje — "Sign Up" ob polju bi stisnil e-posto
   na ~200px, kar je pri dolgih naslovih premalo. */
.conf-nl--modal .gform-body,
.conf-nl--modal .gform_footer {
    flex: 1 1 100%;
}

.conf-nl--modal .gform_button {
    width: 100%;
}

@media (max-width: 560px) {
    .conf-nlm {
        padding: 1rem;
    }

    .conf-nlm__dialog {
        padding: 2rem 1.5rem 1.5rem;
    }
}

/* Zmanjsano gibanje. WCAG 2.3.3 zahteva odpravo GIBANJA, ne vsakega prehoda —
   zato odpade premik (translate/scale), navzkrizni pojav pa OSTANE in je dovolj
   dolg, da ga clovek zares vidi. Prvotnih 0.12s je bilo prekratkih: uporabnik z
   izklopljenimi animacijami v Windows je porocal, da "animacije ni". */
@media (prefers-reduced-motion: reduce) {
    .conf-nlm__backdrop {
        transition: opacity 0.25s ease-out;
    }

    .conf-nlm__dialog {
        transform: none;
        transition: opacity 0.25s ease-out;
    }
}


/* =======================================================
   VODORAVNO PRELIVANJE — varovalka + mobilni reveal
   =======================================================

   Napaka, ki jo to odpravlja: na naslovnici se je stran med drsenjem premikala
   levo-desno (na mobilnem zelo motece). Vzrok NI bila vsebina, ampak scroll-reveal:
   `.conf-anim--right.conf-anim-hidden` postavi sekcijo 60px v DESNO, dokler se
   reveal ne sprozi. Sekcija je siroka cez cel zaslon, zato teh 60px ustvari
   vodoravno obmocje drsenja. Izmerjeno: scrollWidth 450 pri zaslonu 390
   (`#dates`, `#presenters` +60px; njuni `.conf-anim-child--right` se +28px).
   Napaka je PREHODNA — vidna samo, dokler sekcija ni razkrita, zato je meritev
   na vrhu strani ne ujame. Lovi jo `tools/qa/responsive-audit.js`.
   ======================================================= */

/* --- Plast 1: varovalka za vso stran --- */
/* `clip` in NE `hidden`: `hidden` naredi iz elementa drsni vsebnik in s tem podre
   `position: sticky` pri potomcih (lepljiva orodna vrstica na programu, dnevna
   vrstica). `clip` samo poreze, drsnega vsebnika NE ustvari.
   POZOR — pravilo mora biti na OBEH, `html` in `body`. Samo na `html` NE zadostuje:
   izmerjeno na tej strani je bil `getComputedStyle(html).overflowX === "clip"`,
   `window.scrollTo(500,0)` pa je vseeno premaknil pogled na `scrollX = 60`.
   Sele `body` dejansko poreze (izmerjeno `scrollX = 0`, header ostane `fixed`). */
html,
body {
    overflow-x: clip;
}

/* --- Plast 2: pod 1024px reveal sploh ne sme biti vodoraven --- */
/* Da mobilni prikaz ne visi na podpori za `overflow: clip` (Safari sele od 16),
   na ozkih zaslonih vodoravni zdrs odpravimo pri viru. Poleg tega je 60px na
   390px zaslonu 15 % sirine — zdrs je tam ionako prevelik. Zamenja ga dvig. */
@media (max-width: 1024px) {
    .conf-anim--left.conf-anim-hidden,
    .conf-anim--right.conf-anim-hidden {
        transform: translateY(28px);
    }

    .conf-anim--split .conf-anim-child--left,
    .conf-anim--split .conf-anim-child--right {
        transform: translateY(28px);
    }

    /* Vidno stanje mora ostati mocnejse od zgornjih dveh pravil. Brez tega bi
       ostala sekcija zamaknjena za vedno: `.conf-anim--right.conf-anim-hidden`
       (0,2,0) je enako specificen kot `.conf-anim-hidden.conf-anim-visible`
       (0,2,0), a stoji NIZJE v datoteki in bi zato zmagal. */
    .conf-anim-hidden.conf-anim-visible {
        transform: none;
    }

    .conf-anim-visible .conf-anim-child {
        transform: none;
    }

    /* Ista zgodba za starejsi par razredov (conf-scroll-*), ki ga uporabljajo
       skripte, vrinjene v nogo posameznih strani. Tu je `!important` nujen,
       ker ga ima izvirno pravilo; razred `conf-scroll-hide` skripta ob razkritju
       odstrani, zato se s `conf-scroll-show` ne prekrivata. */
    .conf-scroll-hide.conf-scroll--left,
    .conf-scroll-hide.conf-scroll--right {
        transform: translateY(28px) !important;
    }
}


/* =======================================================
   DOTIKALNE TARCE (mobilni / tablicni prikaz)
   =======================================================
   WCAG 2.5.8 (AA) zahteva 24x24 CSS px, priporocilo platform je 44x44.
   Izmerjeno z `tools/qa/responsive-audit.js`: hamburger 40x32, ikone druzbenih
   omrezij v nogi 20x28, zapiralni gumb modala govorca 35x35 — vse pod pragom.
   Vrstične povezave v odstavkih so IZVZETE (WCAG 2.5.8 "inline" izjema) in jih
   ne napihujemo, ker bi razbile vrstico besedila.
   ======================================================= */

/* Hamburger: bil 40x32. Tarca se poveca s prostorom okoli crt, ne s crtami samimi —
   te ostanejo 24px, sicer bi ikona zgledala okorno. */
.conf-menu-toggle {
    padding: 0.75rem 0.6rem;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

/* Ikone druzbenih omrezij v nogi: bile 20x28 (SVG je 20x20).
   Tarco raztegnemo z odmikom, razmik med njimi pa zmanjsamo, da vrsta ne zraste. */
.conf-footer-social {
    gap: 0.25rem;
    margin-left: -0.6rem;   /* poravnaj prvo ikono z besedilom nad njo */
}

.conf-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.conf-footer-social a:hover {
    background: var(--on-band-fill);
}

/* Zapiralni gumb modala govorca: bil 35x35. */
.cs-speaker-modal__close {
    width: 44px;
    height: 44px;
}

/* Preklopnik teme in "More info" v modalu govorca sta samostojni kontroli
   (ne vrstični povezavi v besedilu), zato zanju izjema iz WCAG 2.5.8 ne velja.
   Izmerjeno 23px oz. 22px visoko — pod minimumom 24px. Na dotikalnih sirinah
   ju podpremo z odmikom; na namizju ostaneta kompaktna, kot sta bila. */
@media (max-width: 820px) {
    .theme-switch__opt {
        min-height: 34px;
        padding-inline: 0.85rem;
    }

    .theme-switch {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cs-speaker-modal__link {
        display: inline-block;
        min-height: 34px;
        padding: 0.5rem 0;
    }

    /* "Back to top" v nogi je bil 78x22. */
    .conf-back-to-top {
        display: inline-block;
        min-height: 34px;
        padding: 0.5rem 0;
    }

    .conf-a11y-btn {
        min-height: 34px;
        padding: 0.5rem 0;
    }

    /* E-postna povezava v kontaktnem bloku je bila 210x20. Ni vrsticna povezava
       v odstavku (izjema WCAG 2.5.8), ampak samostojna vrstica v kontaktu —
       izjema zanjo ne velja. */
    .conf-contact-item a {
        display: inline-block;
        min-height: 34px;
        padding: 0.4rem 0;
    }
}


/* =======================================================
   OBRAZCI GRAVITY FORMS V VSEBINI STRANI  (.conf-form)
   =======================================================
   GF lasten CSS je na spletiscu IZKLOPLJEN (`rg_gforms_disable_css = 1`), ker
   ima stran svoj sistem. Za prijavo na novice so stili ze bili (`.conf-nl`),
   za obrazec v vsebini strani pa ne — obrazec Full Panel Proposal se je izrisal
   s privzetimi brskalnikovimi polji (Arial, 21 px visoka polja, <fieldset>
   okvirji okoli imen). Ta blok to uredi.

   Namenoma je vezan na razred `.conf-form`, ki ga ovoj doda v vsebini strani,
   IN NE na `.conf-page-content .gform_wrapper`: slednje bi s specificnostjo
   (0,3,0) povozilo pravila prijave na novice (`.conf-nl …`, 0,2,0), ce bi se
   blok z novicami znasel v vsebini strani.
   ======================================================= */

.conf-form .gform_wrapper {
    margin: 2rem 0 0;
}

/* Polja pod seboj, z enakomernim razmikom. */
.conf-form .gform_fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.conf-form .gfield_label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-body);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--color-heading);
}

.conf-form .gfield_required {
    color: var(--color-emphasis);
    margin-left: 0.15rem;
}

.conf-form input[type="text"],
.conf-form input[type="email"],
.conf-form input[type="url"],
.conf-form input[type="tel"],
.conf-form select,
.conf-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--color-text);
    background: var(--surface-card);
    /* --border-ui je obvezna meja za polja; okrasna --color-border je za polja
       premalo vidna (1.17:1) in bi jih zabrisala v podlago. */
    border: 1px solid var(--border-ui);
    border-radius: 8px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.conf-form input:focus,
.conf-form select:focus,
.conf-form textarea:focus {
    outline: none;
    border-color: var(--color-emphasis);
    box-shadow: 0 0 0 3px rgba(0, 97, 170, 0.15);
}

/* Sestavljeno polje "ime": prefiks, ime, priimek v eno vrsto, na ozkem eno pod drugim. */
.conf-form .ginput_complex {
    display: grid;
    grid-template-columns: minmax(90px, 0.4fr) repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.conf-form .ginput_complex > span {
    display: block;
    min-width: 0;
}

/* Podoznake (Address, First/Given Name …) so drugotne. */
.conf-form .ginput_complex label {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--fs-label);
    color: var(--color-text-subtle);
}

/* GF izrise <fieldset> okoli sestavljenih polj; privzeti okvir brskalnika
   ne sodi v podobo strani. */
.conf-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.conf-form .gfield--type-fieldset > legend.gfield_label {
    padding: 0;
}

/* Locnica med sklopi (Chair, Panelist 1 …). Lasnica, ne barvni trak. */
.conf-form .gsection {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.conf-form .gsection:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.conf-form .gsection_title:empty {
    display: none;
}

/* Oddaj: ista kapsula s kroznim znakom kot ostali gumbi na strani.
   Puscica je na ::before, zato mora biti gumb <button>, ne <input> — GF 3.0.2
   izrise <button class="gform_button">, kar to omogoca. */
.conf-form .gform_footer {
    margin-top: 2rem;
}

.conf-form .gform_button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 1.75rem 0.375rem 0.375rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-ui);
    line-height: 1.3;
    color: var(--on-band-btn-ink);
    background: var(--on-band-btn-fill);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all var(--transition);
}

.conf-form .gform_button::before {
    content: "";
    flex: 0 0 auto;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    background-image: var(--conf-arrow-light);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.125rem 1.125rem;
    transition: transform var(--transition);
}

.conf-form .gform_button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.conf-form .gform_button:hover::before {
    transform: translateX(3px);
}

.conf-form .gform_button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Napake pri preverjanju */
.conf-form .gfield_error input,
.conf-form .gfield_error select {
    border-color: var(--color-danger, #b32d2e);
}

.conf-form .gfield_validation_message,
.conf-form .validation_message {
    margin-top: 0.4rem;
    font-size: var(--fs-meta);
    color: var(--color-danger, #b32d2e);
}

.conf-form .gform_validation_errors {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--surface-sunken);
    box-shadow: var(--shadow-sm);
}

/* Honeypot: GF ga izrise kot navadno polje ("Phone"). Brez tega je vaba vidna. */
.conf-form .gform_validation_container {
    display: none !important;
}

/* Potrditveno sporocilo po oddaji */
.conf-form .gform_confirmation_message {
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--surface-card);
    box-shadow: var(--shadow-md);
}

@media (max-width: 600px) {
    .conf-form .ginput_complex {
        grid-template-columns: 1fr;
    }
}


/* Povezava NAZAJ: krog s puscico se obrne v levo in stopi pred besedilo.
   Prej je imela taka povezava v besedilu znak "←", gumb pa je dodal "→" —
   puscici sta si nasprotovali. Znak iz besedila je odstranjen, smer nosi krog. */
.conf-btn--back {
    flex-direction: row;
    --conf-btn-arrow: var(--conf-arrow-left-light);
}

.conf-btn--back:hover::before {
    transform: translateX(-3px);
}

.conf-btn--back.conf-btn--outline:hover {
    --conf-btn-arrow: var(--conf-arrow-left-light);
}