/*
Theme Name:   AMS Hello Child
Theme URI:    https://dance-academy.almamater.si
Description:  Otroška tema za Hello Elementor – dance-academy.almamater.si.
              Global styles, brand paleta (burgundy akcent), Mulish self-hosted.
              Design inspired by iabarcelona.com: light bg, corporate-minimalist, burgundy accent.
Author:       Alma Mater Europaea – Akademija za ples
Author URI:   https://almamater.si
Template:     hello-elementor
Version:      0.3.0
Text Domain:  ams-hello-child
License:      Private (proprietary)
*/

/* ============================================================
   PRELOMNA TOČKA GLAVE (edino mesto, kjer je dokumentirana)
   ============================================================
   HEADER_BP = 1280 px  (drawer ≤1279.98, namizna navigacija ≥1280)

   Zgornja meja drawerja je 1279.98 px, NE 1279 px. Viewport ni nujno celo
   število (zoom, Windows skaliranje 125 %, subpixel): pri 1279.5 px ne bi
   veljal ne `max-width: 1279px` ne `min-width: 1280px` — burger skrit, meni v
   glavi z baznimi razmiki, CTA viden, torej natanko pokvarjena postavitev
   izpred 2026-08-13. .98 zapre režo (ostane le neuporabno okno < 0.02 px).

   Do 2026-08-13 je bila 1024 px. Razlog za dvig: pri --ams-container-max
   1280 px je proračun glave pri 1280 px viewportu 1088 px za logo + meni +
   jezik + CTA, meni sam pa je SL 772 px / EN 825 px. Pas 1025–1279 px je bil
   zato nevzdržen — logotip se je stisnil na 0×0 (izmerjeno pri 1100 px).

   CSS ne pozna spremenljivk v @media, zato je vrednost ročno prepisana.
   Ob spremembi popravi VSA ta mesta hkrati:
     style.css   :  @media (min-width: 1280px)  — desktop nav (2×: dropdown
                    section-header flyout, header spacing/CTA-hide)
                    @media (max-width: 1279.98px)  — drawer, nav-cta, search
                    FAB, lang switcher pin
     header.php  :  inline <style id="ams-lang-switcher-inline">
                    (1280 / 1279.98)
     footer.php  :  window.matchMedia('(min-width: 1280px)') (drawer JS —
                    isti pogoj kot CSS, zato se ne moreta razhajati; NE
                    primerjaj window.innerWidth s številko)
   Media query-ji, ki NISO glava (Elementor mreže, alumni vrstice, section
   padding, hero jubilej), ostajajo pri 1024 px — to je vsebinski tablet
   prelom in z navigacijo nima zveze.
   ============================================================ */

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
    --ams-burgundy-500: #8B0030;
    --ams-burgundy-700: #67000C;
    --ams-burgundy-100: #F5E0E6;

    --ams-white:     #FFFFFF;
    --ams-cream:     #FAF7F2;
    --ams-gray-100:  #EDE9E3;
    --ams-gray-300:  #C8C2B9;
    --ams-gray-500:  #8A847B;
    --ams-gray-700:  #3D3834;
    --ams-gray-900:  #1A1715;

    --ams-dark-900:  #1A1715;
    --ams-dark-700:  #2A2520;
    --ams-on-dark:   #FAF7F2;

    --ams-success: #2E7D5B;
    --ams-error:   #B91C1C;
    --ams-warning: #C17D2A;

    --ams-font-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --ams-fs-xs:    0.75rem;
    --ams-fs-sm:    0.875rem;
    --ams-fs-base:  1rem;
    --ams-fs-lg:    1.125rem;
    --ams-fs-xl:    1.375rem;
    --ams-fs-2xl:   1.75rem;
    --ams-fs-3xl:   2.25rem;
    --ams-fs-4xl:   3rem;
    --ams-fs-5xl:   4rem;
    --ams-fs-6xl:   5rem;

    --ams-lh-tight: 1.15;
    --ams-lh-base:  1.55;
    --ams-lh-loose: 1.75;

    --ams-fw-light:    300;
    --ams-fw-regular:  400;
    --ams-fw-semibold: 600;
    --ams-fw-bold:     700;

    --ams-letter-tight:  -0.02em;
    --ams-letter-normal:  0;
    --ams-letter-wide:    0.05em;

    --ams-container-max: 1280px;
    --ams-container-padding: clamp(1rem, 4vw, 2rem);

    --ams-space-1: 0.25rem;
    --ams-space-2: 0.5rem;
    --ams-space-3: 0.75rem;
    --ams-space-4: 1rem;
    --ams-space-6: 1.5rem;
    --ams-space-8: 2rem;
    --ams-space-12: 3rem;
    --ams-space-16: 4rem;
    --ams-space-20: 5rem;
    --ams-space-24: 6rem;

    --ams-radius-sm: 4px;
    --ams-radius-md: 8px;
    --ams-radius-lg: 16px;
    --ams-radius-full: 9999px;

    --ams-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ams-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
    --ams-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    --ams-header-h: 80px;
    /* Višina logotipa v glavi. Vezana na .ams-header__logo-link in
       .ams-header__logo. Atributa width/height na <img> v header.php sta ročna
       (brskalnik jih rabi pred CSS-om, da rezervira prostor) — ob spremembi
       tega tokena POPRAVI TUDI NJU: width = height × 4 (razmerje SVG 4:1). */
    --ams-logo-h: 56px;
    --ams-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--ams-font-sans);
    font-size: var(--ams-fs-base);
    line-height: var(--ams-lh-base);
    color: var(--ams-gray-900);
    background: var(--ams-white);
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ams-font-sans);
    font-weight: var(--ams-fw-semibold);
    line-height: var(--ams-lh-tight);
    letter-spacing: var(--ams-letter-tight);
    color: var(--ams-gray-900);
    margin: 0 0 var(--ams-space-4);
}

h1 { font-size: clamp(var(--ams-fs-4xl), 6vw, var(--ams-fs-6xl)); font-weight: var(--ams-fw-bold); }
h2 { font-size: clamp(var(--ams-fs-3xl), 4.5vw, var(--ams-fs-5xl)); }
h3 { font-size: clamp(var(--ams-fs-2xl), 3vw, var(--ams-fs-4xl)); }
h4 { font-size: var(--ams-fs-2xl); }
h5 { font-size: var(--ams-fs-xl); }
h6 {
    font-size: var(--ams-fs-sm);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    color: var(--ams-gray-500);
    font-weight: var(--ams-fw-semibold);
}

p { margin: 0 0 var(--ams-space-4); }

a {
    color: var(--ams-burgundy-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--ams-transition);
}
a:hover, a:focus-visible { color: var(--ams-burgundy-700); }

/* Accessibility: skip link */
.ams-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.ams-skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: var(--ams-space-3) var(--ams-space-4);
    background: var(--ams-gray-900);
    color: var(--ams-white);
    text-decoration: none;
    border-radius: var(--ams-radius-sm);
    z-index: 10000;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ams-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ams-space-2);
    padding: var(--ams-space-3) var(--ams-space-6);
    font-family: var(--ams-font-sans);
    font-size: var(--ams-fs-sm);
    font-weight: var(--ams-fw-semibold);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--ams-radius-sm);
    cursor: pointer;
    transition: all var(--ams-transition);
    white-space: nowrap;
}

/* a.ams-btn--* predpona je nujna: Elementor Kit nastavi
   `.elementor-kit-4 a { color: #8B0030 }` na <body>, kar ima
   specifičnost (0,1,1) in premaga golo `.ams-btn--primary` (0,1,0).
   Tie s `a.ams-btn--primary` (0,1,1) zmaga po order-u, ker se child
   CSS naloži za kit. */
a.ams-btn--primary,
button.ams-btn--primary,
.ams-btn--primary {
    background: var(--ams-burgundy-500);
    color: var(--ams-white);
    text-decoration: none;
}
a.ams-btn--primary:hover,
a.ams-btn--primary:focus-visible,
button.ams-btn--primary:hover,
button.ams-btn--primary:focus-visible,
.ams-btn--primary:hover,
.ams-btn--primary:focus-visible {
    background: var(--ams-burgundy-700);
    color: var(--ams-white);
    transform: translateY(-1px);
    box-shadow: var(--ams-shadow-md);
}

a.ams-btn--secondary,
button.ams-btn--secondary,
.ams-btn--secondary {
    background: transparent;
    color: var(--ams-gray-900);
    border-color: var(--ams-gray-900);
    text-decoration: none;
}
a.ams-btn--secondary:hover,
a.ams-btn--secondary:focus-visible,
button.ams-btn--secondary:hover,
button.ams-btn--secondary:focus-visible,
.ams-btn--secondary:hover,
.ams-btn--secondary:focus-visible {
    background: var(--ams-gray-900);
    color: var(--ams-white);
}

a.ams-btn--ghost,
.ams-btn--ghost {
    background: transparent;
    color: var(--ams-burgundy-500);
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
}
a.ams-btn--ghost:hover,
a.ams-btn--ghost:focus-visible,
.ams-btn--ghost:hover,
.ams-btn--ghost:focus-visible {
    color: var(--ams-burgundy-700);
    text-decoration: underline;
}

a.ams-btn--on-dark,
.ams-btn--on-dark {
    background: var(--ams-white);
    color: var(--ams-gray-900);
    text-decoration: none;
}
a.ams-btn--on-dark:hover,
.ams-btn--on-dark:hover {
    background: var(--ams-cream);
    color: var(--ams-gray-900);
    transform: translateY(-1px);
}

.ams-btn--lg { padding: var(--ams-space-4) var(--ams-space-8); font-size: var(--ams-fs-base); }
.ams-btn--sm { padding: var(--ams-space-2) var(--ams-space-4); font-size: var(--ams-fs-xs); }

/* Arrow indikator (na primer za "Preberi več →") */
.ams-btn--arrow::after {
    content: "→";
    font-weight: var(--ams-fw-bold);
    transition: transform var(--ams-transition);
}
.ams-btn--arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   HEADER
   ============================================================ */
.ams-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ams-white);
    border-bottom: 1px solid transparent;
    transition: border-color var(--ams-transition), box-shadow var(--ams-transition);
}
.ams-header--scrolled {
    border-bottom-color: var(--ams-gray-100);
    box-shadow: var(--ams-shadow-sm);
}

.ams-header__container {
    max-width: var(--ams-container-max);
    margin: 0 auto;
    padding: 0 var(--ams-container-padding);
    min-height: var(--ams-header-h);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--ams-space-8);
    align-items: center;
}

.ams-header__logo-link {
    display: inline-flex;
    align-items: center;
    height: var(--ams-logo-h);
    text-decoration: none;
}
/* Logotip ima LASTNO velikost.
   Do 2026-08-13 je to pravilo ciljalo `.ams-header__logo-link svg`, element v
   header.php pa je <img class="ams-header__logo"> — selektor je bil MRTEV.
   Posledica: na namizju za logotip ni bilo nobenega pravila o velikosti, njegov
   min-content prispevek v grid mreži je bil 0 in prva kolona se je stisnila do
   ničle (izmerjeno 0×0 pri 1100 px).
   `flex-shrink: 0` ščiti sliko znotraj inline-flex .ams-header__logo-link,
   `max-width: none` pa razveljavi globalni `img, svg { max-width: 100% }`. */
.ams-header__logo {
    height: var(--ams-logo-h);
    width: auto;
    max-width: none;
    flex-shrink: 0;
}
.ams-header__logo-text {
    font-weight: var(--ams-fw-bold);
    font-size: var(--ams-fs-lg);
    color: var(--ams-gray-900);
}

.ams-header__nav {
    grid-column: 3;
}
.ams-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--ams-space-6);
    align-items: center;
}
.ams-header__menu a {
    color: var(--ams-gray-900);
    text-decoration: none;
    font-size: var(--ams-fs-sm);
    font-weight: var(--ams-fw-semibold);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    padding: var(--ams-space-2) 0;
    position: relative;
    transition: color var(--ams-transition);
    white-space: nowrap;
}
.ams-header__menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--ams-burgundy-500);
    transition: width var(--ams-transition);
}
.ams-header__menu a:hover,
.ams-header__menu a:focus-visible,
.ams-header__menu .current-menu-item > a {
    color: var(--ams-burgundy-500);
}
.ams-header__menu a:hover::after,
.ams-header__menu .current-menu-item > a::after { width: 100%; }

/* ---------- Dropdown (WP sub-menu) – desktop ---------- */
.ams-header__menu .menu-item-has-children > a::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: 2px;
    transform-origin: center 30%;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover/open state: puščica obrnjena navzgor (chevron up). Sledi istemu hover triggeru kot dropdown,
   skupaj z 100ms intent delay-om, da hitri prehodi miške ne sprožijo animacije. */
.ams-header__menu > li.menu-item-has-children:hover > a::before,
.ams-header__menu > li.menu-item-has-children:focus-within > a::before {
    transform: rotate(180deg);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}

.ams-header__menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: var(--ams-space-3) 0;
    background: var(--ams-white);
    border: 1px solid var(--ams-gray-100);
    border-radius: var(--ams-radius-md);
    box-shadow: var(--ams-shadow-md);
    min-width: 260px;
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    /* pointer-events: none je KLJUČEN — section-header trick za L2 (programi seznam pod Dodiplomski/Podiplomski)
       force-overrida visibility na visible. Brez pointer-events:none bi bili ti L2 linki klikabilni
       tudi ko outer dropdown ni odprt (opacity:0 NE blokira pointer eventov). */
    pointer-events: none;
    transform: translateY(6px);
    /* Closing transition: 200ms fade out, potem visibility/pointer-events flip. */
    transition:
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 200ms,
        pointer-events 0s linear 200ms;
    z-index: 90;
}
.ams-header__menu > li {
    position: relative;
}
/* Hover-open z 100ms intent delay-om — hitri prehod miške čez Programi NE sproži odpiranja.
   :focus-within ohrani odprtost za keyboard a11y (Tab → fokus → odpre). */
.ams-header__menu > li:hover > .sub-menu,
.ams-header__menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
        visibility 0s linear 100ms,
        pointer-events 0s linear 100ms;
}
/* L2 sub-menu (force-visible inline list pod section-headerji v Programi dropdownu).
   Base rule `.ams-header__menu .sub-menu { pointer-events: none }` se applya tudi nanj
   (selektor matcha L1 IN L2). Hover override `> li:hover > .sub-menu` pa cilja samo
   L1 direct-child. Brez tega rulja so vsi programi (Balet, Sodobni ples, …) NE-klikabilni,
   čeprav so vidni. Tu povežemo pointer-events L2 z hover stanjem outerja. */
.ams-header__menu > li:hover > .sub-menu .sub-menu,
.ams-header__menu > li:focus-within > .sub-menu .sub-menu {
    pointer-events: auto;
}

/* Level 2 submenu (npr. programi pod Dodiplomski) */
.ams-header__menu .sub-menu .sub-menu {
    top: -1px;
    left: 100%;
    margin-left: 2px;
}

/*
 * Tretji nivo pri skrajno desnih zavihkih se razpre V LEVO.
 *
 * Izmerjeno 2026-08-13 pri 1280 px: panel 2. nivoja pod "Mednarodno sodelovanje"
 * konca pri x=1184, tretji nivo (ERASMUS+ -> mobilnosti) pa se iz njega razpre
 * se 260 px desno -> 1444 px. Stran je zato dobila vodoravni drsnik
 * (documentElement.scrollWidth 1445 proti clientWidth 1280), tretji nivo pa je
 * segal cez rob okna. Enako v EN (1434).
 *
 * Ker je "Mednarodno sodelovanje" po prestrukturiranju menija zadnji vrhnji
 * zavihek IN edini s tremi nivoji, flyout obrnemo pri zadnjih dveh postavkah —
 * dve zato, da poseg zdrzi se eno prihodnjo postavko na koncu menija.
 */
.ams-header__menu > li:nth-last-child(-n+2) .sub-menu .sub-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
}
.ams-header__menu .sub-menu li {
    position: relative;
}
.ams-header__menu .sub-menu li:hover > .sub-menu,
.ams-header__menu .sub-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sub-menu link styling: drugačno kot top-level (ni uppercase, normalne črke) */
.ams-header__menu .sub-menu a {
    display: block;
    padding: var(--ams-space-2) var(--ams-space-4);
    font-size: var(--ams-fs-sm);
    font-weight: var(--ams-fw-regular);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ams-gray-900);
    white-space: nowrap;
}
.ams-header__menu .sub-menu a::after {
    display: none;
}
.ams-header__menu .sub-menu a:hover,
.ams-header__menu .sub-menu a:focus-visible,
.ams-header__menu .sub-menu .current-menu-item > a {
    background: var(--ams-cream);
    color: var(--ams-burgundy-500);
}

/* V L1 sub-menu (Dodiplomski / Podiplomski) želimo semibold weight + indikator puščice na desni če ima submenu */
.ams-header__menu .sub-menu .menu-item-has-children > a {
    font-weight: var(--ams-fw-semibold);
}
.ams-header__menu .sub-menu .menu-item-has-children > a::before {
    display: none;
}
.ams-header__menu .sub-menu .menu-item-has-children > a::after {
    content: "›";
    display: inline-block;
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    margin-left: var(--ams-space-2);
    float: right;
    font-size: var(--ams-fs-base);
    line-height: 1;
    color: var(--ams-gray-500);
    transition: none;
}

/* Section header (Dodiplomski / Podiplomski) — POUDARJENA burgundy "label" znotraj dropdowna.
   Ohranja uppercase karakter, doda burgundy bg za jasno vizualno hierarhijo med sekcijami.
   Ni klikabilen (pointer-events:none) — služi samo kot label. */
.ams-header__menu .sub-menu .menu-item-section-header > a {
    background: var(--ams-burgundy-500);
    color: var(--ams-white);
    font-size: var(--ams-fs-xs);
    font-weight: var(--ams-fw-bold);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    pointer-events: none;
    cursor: default;
    padding: var(--ams-space-2) var(--ams-space-4);
    margin: 0 var(--ams-space-3) var(--ams-space-1);
    border-radius: 6px;
}
/* Drugi section-header (Podiplomski) dobi top-margin za vizualno ločitev od prejšnje
   sekcije programov. Sibling-selector matcha samo neprvi section-header. */
.ams-header__menu .sub-menu .menu-item-section-header ~ .menu-item-section-header > a {
    margin-top: var(--ams-space-3);
}
.ams-header__menu .sub-menu .menu-item-section-header > a:hover,
.ams-header__menu .sub-menu .menu-item-section-header > a:focus-visible {
    background: var(--ams-burgundy-500);
    color: var(--ams-white);
}
.ams-header__menu .sub-menu .menu-item-section-header > a::after {
    display: none;
}
/* Desktop: flyout submenu pod section headerjem se prikaže "inline" — ne kot
   ločen flyout, ampak kar takoj pod, ker je section header ne-klikabilen.
   Override level-2-submenu pozicijo: prikaže se kot flat list znotraj parenta. */
/* HEADER_BP: namizna navigacija se začne pri 1280 px (prej 1025). */
@media (min-width: 1280px) {
    .ams-header__menu .sub-menu .menu-item-section-header > .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0;
        background: transparent;
        min-width: 0;
    }
    .ams-header__menu .sub-menu .menu-item-section-header > .sub-menu a {
        padding-left: var(--ams-space-4);
    }
}

/* CTA item v dropdownu ("Vsi programi →", "Vsi dogodki →") — burgundy + arrow */
.ams-header__menu .sub-menu .menu-item-cta > a {
    color: var(--ams-burgundy-500);
    font-weight: var(--ams-fw-semibold);
}
.ams-header__menu .sub-menu .menu-item-cta > a:hover,
.ams-header__menu .sub-menu .menu-item-cta > a:focus-visible {
    color: var(--ams-burgundy-700);
    background: var(--ams-cream);
}

/* .ams-header__cta NIMA grid-column.
   Do 2026-08-13 je imel `grid-column: 4`, kar je bilo smiselno pri 5-kolonski
   mreži (4 = CTA, 5 = jezik). Po skrčitvi na 4 kolone je 4 kolona jezikovnega
   preklopnika (glej inline <style> v header.php), zato bi si elementa lastila
   isto celico. Nedolžno le zato, ker je CTA skrit na VSEH širinah (≥1280 px
   preseljen v announce trak, ≤1279.98 px v drawer) — a to je mina za naslednjo
   spremembo mreže. Če gumb kdaj spet pokažeš v glavi, mu izrecno dodeli
   lastno kolono in razširi grid-template-columns. */

/* .ams-header__menu-toggle NIMA grid-column tukaj — dobi ga šele v mobilnem
   bloku (@media max-width: 1279.98px), kjer je edini vidni. Na namizju je
   `display: none`, torej sploh ni grid element.
   Do 2026-08-13 je bilo tu `grid-column: 4`, mobilna mreža pa je
   `auto 1fr auto` (3 kolone) — 4 je torej ustvarjala IMPLICITNO kolono.
   Izmerjeno pri 1024 px: grid-template-columns = `280px 588px 0px 44px`,
   tj. prazen 0 px track + odvečen 16 px gap. Ista mina kot pri
   .ams-header__cta (glej opombo nad tem pravilom). */
.ams-header__menu-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: var(--ams-space-2);
    cursor: pointer;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.ams-header__menu-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ams-gray-900);
    transition: transform var(--ams-transition), opacity var(--ams-transition);
}
.ams-header__menu-toggle[aria-expanded="true"] .ams-header__menu-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.ams-header__menu-toggle[aria-expanded="true"] .ams-header__menu-toggle-bar:nth-child(2) {
    opacity: 0;
}
.ams-header__menu-toggle[aria-expanded="true"] .ams-header__menu-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* .ams-submenu-toggle vstavi JS v vsak .menu-item-has-children na VSAKI širini.
   Na desktopu ga skrijemo, ker dropdown dela na hover (brez toggle-a).
   Selector `button.ams-submenu-toggle` je nujen da premaga Elementor Kit
   `.elementor-kit-N button { background: burgundy; ... }` (specifičnost 0,1,1).
   Brez tega bi browser narisal default burgundy gumb inline. */
button.ams-submenu-toggle,
.ams-submenu-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

/* ---------- Namizna glava: proračun širine (2026-08-13) ----------
   Pri 1280 px viewportu ima glava 1088 px uporabne širine (1280 − 64 padding
   − 4 razmiki). SL meni sam zasede 772 px, EN 825 px; z jezikovnim
   preklopnikom (62,5) in CTA gumbom (145 SL / 161 EN) zmanjka prostora za
   logotip (224 px).
   Trije posegi, vsi omejeni na namizje, da mobilnega drawerja ne premaknejo:
     1. meni gap  var(--ams-space-6)=24 → var(--ams-space-4)=16 px  (+40 px)
     2. container column-gap  var(--ams-space-8)=32 → var(--ams-space-6)=24 px
        (+32 px; row-gap ostane 32 px za morebiten prelom v dve vrstici)
     3. CTA "Avdicije" iz glave (preseljen v announce trak nad glavo)
   Globalnih --ams-space-6 / --ams-space-8 NE spreminjamo — uporablja ju ~15
   drugih mest v temi; tu ju samo uporabimo eno stopnjo nižje.
   Tokena sta rem-based (--ams-space-4 = 1rem = 16 px, --ams-space-6 = 1.5rem =
   24 px pri privzetih 16 px), zato se razmika povečata v načinu dostopnosti
   "Večja pisava" (html.ams-a11y-font-large { font-size: 125% }). To je pravilno:
   v tem načinu zraste tudi besedilo menija, razmiki pa mu morajo slediti. */
@media (min-width: 1280px) {
    .ams-header__menu {
        gap: var(--ams-space-4);
    }
    .ams-header__container {
        column-gap: var(--ams-space-6);
    }
    /* Markup gumba OSTANE v header.php — pod prelomno točko ga drawer
       (.ams-header__nav-cta) še vedno prikaže. Tu ga samo skrijemo, ker je na
       namizju preseljen v announce trak nad glavo. Inline <style> v header.php
       hkrati skrči mrežo na 4 kolone, da za skritim gumbom ne ostane prazen
       grid track z razmikom. */
    .ams-header__cta {
        display: none;
    }
}

/* HEADER_BP: drawer velja do 1279.98 px (prej 1024). */
@media (max-width: 1279.98px) {
    .ams-header__container {
        grid-template-columns: auto 1fr auto;
        gap: var(--ams-space-4);
    }
    /* Burger v ZADNJO OBSTOJEČO kolono (3), ne v 4 — mreža ima tu tri kolone.
       `grid-column: 3` in ne opuščena lastnost: gumb ima fiksno width: 44px,
       zato `justify-self: stretch` nanj nima učinka in bi ga auto-placement
       postavil na ZAČETEK 1fr kolone. Izmerjeno pri 1024 px:
         grid-column: 4  → cols `280px 588px 0px 44px`, gumb [948, 992]
         grid-column: 3  → cols `280px 604px 44px`,     gumb [948, 992]  ← isto
         brez lastnosti   → cols `280px 648px 0px`,      gumb [328, 372]  ← 620 px predaleč levo
       Izid je identičen pri 393 / 600 / 768 / 900 / 1024 px: 1fr kolona
       posrka natanko tistih 16 px, ki jih je prej pojedel prazen track z gapom. */
    .ams-header__menu-toggle {
        display: flex;
        grid-column: 3;
    }
    /* CTA gumb v headerju skrit na mobile — premaknjen v drawer footer (.ams-header__nav-cta) */
    .ams-header__cta { display: none; }

    /* Drawer = full-screen panel pod headerjem.
       Strukturirano kot column flex: scrollable menu + sticky footer CTA.

       top/height sta tu samo IZHODIŠČE za primer brez JS-a. Prava vrednost je
       spodnji rob glave, ki ni nujno --ams-header-h: glava je sticky top:0, nad
       njo pa je lahko announce pasica v toku (~49 px) — takrat je pri
       scrollY = 0 spodnji rob glave na ~129 px in drawer bi s top:80px prekril
       spodnjih ~49 px glave skupaj z burgerjem in jezikovnim preklopnikom.
       Zato footer.php ob odpiranju drawerja nastavi inline top/height iz
       header.getBoundingClientRect().bottom in ju osvežuje ob resize/scroll,
       ob zapiranju pa ju pobriše. */
    .ams-header__nav {
        position: fixed;
        top: var(--ams-header-h);
        right: 0;
        width: min(420px, 100%);
        height: calc(100vh - var(--ams-header-h));
        height: calc(100dvh - var(--ams-header-h));
        background: var(--ams-white);
        padding: 0;
        transform: translateX(100%);
        transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        border-left: 1px solid var(--ams-gray-100);
        display: flex;
        flex-direction: column;
        box-shadow: -16px 0 40px rgba(26, 23, 21, 0.08);
    }
    .ams-header__nav--open { transform: translateX(0); }

    .ams-header__menu {
        flex: 1;
        overflow-y: auto;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        width: 100%;
        padding: var(--ams-space-2) 0 var(--ams-space-8);
    }
    .ams-header__menu > li {
        width: 100%;
        border-bottom: 1px solid var(--ams-gray-100);
        position: relative;
    }
    .ams-header__menu > li:last-child { border-bottom: none; }

    .ams-header__menu > li > a {
        display: block;
        padding: var(--ams-space-4) var(--ams-container-padding);
        font-size: var(--ams-fs-base);
        font-weight: var(--ams-fw-semibold);
        letter-spacing: var(--ams-letter-wide);
        color: var(--ams-gray-900);
    }
    /* Hover/active brez underline animacije – samo color + bg */
    .ams-header__menu > li > a::after { display: none; }
    .ams-header__menu > li > a:hover,
    .ams-header__menu > li > a:focus-visible,
    .ams-header__menu > li.current-menu-item > a,
    .ams-header__menu > li.current-menu-ancestor > a {
        color: var(--ams-burgundy-500);
        background: var(--ams-cream);
    }

    /* Reset desktop dropdown puščice (::before) — nadomestimo s pravim button-om */
    .ams-header__menu .menu-item-has-children > a {
        padding-right: 56px;
    }
    .ams-header__menu .menu-item-has-children > a::before {
        display: none;
    }

    /* Submenu toggle button — vstavljen z JS-om.
       Selector `button.ams-submenu-toggle` (0,1,1) premaga
       Elementor Kit `.elementor-kit-N button {}` (0,1,1) po order-u
       (child CSS naložen za kit). */
    button.ams-submenu-toggle,
    .ams-submenu-toggle {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 56px;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: var(--ams-gray-500);
        align-items: center;
        justify-content: center;
        transition: color var(--ams-transition);
    }
    button.ams-submenu-toggle:hover,
    button.ams-submenu-toggle:focus-visible,
    .ams-submenu-toggle:hover,
    .ams-submenu-toggle:focus-visible {
        color: var(--ams-burgundy-500);
        background: transparent;
        outline: none;
    }
    button.ams-submenu-toggle:focus-visible,
    .ams-submenu-toggle:focus-visible {
        box-shadow: inset 0 0 0 2px var(--ams-burgundy-500);
        border-radius: var(--ams-radius-sm);
    }

    /* Chevron iz dveh diagonalnih črt (border-right + border-bottom).
       Bolj eleganten kot trikotnik iz border-top, ne izgleda kot črta. */
    .ams-submenu-toggle::before {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 200ms ease;
    }
    .ams-submenu-toggle[aria-expanded="true"]::before {
        transform: translateY(2px) rotate(-135deg);
    }

    /* Mobile submenu: accordion */
    .ams-header__menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: var(--ams-cream);
        border-radius: 0;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 280ms ease;
    }
    .ams-header__menu .sub-menu.is-open {
        max-height: 1200px;
    }
    /* Section headerjev podmeni (Balet, Sodobni ples ... pod Dodiplomski) NI accordion —
       prikazan je flat takoj ko se odpre starš (Programi). */
    .ams-header__menu .sub-menu .menu-item-section-header > .sub-menu {
        max-height: none;
        overflow: visible;
        background: transparent;
    }
    .ams-header__menu .menu-item-section-header > a {
        padding-right: var(--ams-container-padding) !important;
    }
    .ams-header__menu .sub-menu li {
        border-top: 1px solid var(--ams-gray-100);
    }
    .ams-header__menu .sub-menu a {
        padding: var(--ams-space-3) var(--ams-container-padding);
        font-size: 0.9375rem;
        font-weight: var(--ams-fw-regular);
        letter-spacing: 0;
        text-transform: none;
        color: var(--ams-gray-700);
        white-space: normal;
        display: block;
    }
    .ams-header__menu .sub-menu a:hover,
    .ams-header__menu .sub-menu a:focus-visible {
        color: var(--ams-burgundy-500);
        background: var(--ams-white);
    }
    /* Level 2 (programi) – dodatni indent + tanjši */
    .ams-header__menu .sub-menu .sub-menu a {
        padding-left: calc(var(--ams-container-padding) + 20px);
        font-size: 0.875rem;
        color: var(--ams-gray-700);
    }
    .ams-header__menu .sub-menu .sub-menu {
        background: var(--ams-white);
    }
    .ams-header__menu .sub-menu .menu-item-has-children > a::after {
        display: none;
    }

    /* Sticky CTA na dnu drawerja — vidno tudi ko se menu scrolla */
    .ams-header__nav-cta {
        flex-shrink: 0;
        padding: var(--ams-space-4) var(--ams-container-padding);
        border-top: 1px solid var(--ams-gray-100);
        background: var(--ams-white);
        display: flex;
        flex-direction: column;
        gap: var(--ams-space-3);
    }
    .ams-header__nav-cta .ams-btn {
        width: 100%;
        padding: var(--ams-space-4) var(--ams-space-6);
        font-size: var(--ams-fs-sm);
    }

    body.ams-body--menu-open { overflow: hidden; }
}

/* Drawer CTA section — vidna samo znotraj odprtega mobile drawerja.
   Element je v markup-u na vseh širinah, na desktopu skrit. */
.ams-header__nav-cta { display: none; }
/* HEADER_BP: 1279.98 (prej 1024) — drawer footer z obema CTA gumbom. */
@media (max-width: 1279.98px) {
    .ams-header__nav-cta { display: flex; }
}

/* ============================================================
   FOOTER
   ============================================================
   Stolpci so urejeni v 4-col grid (desktop) → 2-col (≤900px) →
   1-col (≤560px). Vsi razmiki so dovolj ozki, da na mobile-u ni
   razvlečenega praznega prostora med stolpci. */
.ams-footer {
    background: var(--ams-dark-900);
    color: var(--ams-on-dark);
    padding: var(--ams-space-16) 0 0;
    margin-top: var(--ams-space-20);
}
.ams-footer__container {
    max-width: var(--ams-container-max);
    margin: 0 auto;
    padding: 0 var(--ams-container-padding);
    display: grid;
    /* 3 stolpci (2026-08-07) — 4. stolpec "Uporabne povezave" je odstranjen
       2026-05-29, mreža pa je ostala 4-track (1.1fr 1.1fr 1fr 1fr). Posledica:
       ~300 px mrtvega prostora na desni in vsebina, stisnjena v levi 3/4 širine.
       Zdaj se trije stolpci enakomerno razporedijo po celotni širini containerja,
       tako da desni rob 3. stolpca sedi na istem robu kot vsebina zgoraj. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ams-space-8) var(--ams-space-12);
    align-items: start;
}
@media (max-width: 900px) {
    .ams-footer {
        padding-top: var(--ams-space-12);
        margin-top: var(--ams-space-12);
    }
    .ams-footer__container {
        grid-template-columns: 1fr 1fr;
        gap: var(--ams-space-8) var(--ams-space-6);
    }
}
@media (max-width: 560px) {
    .ams-footer { padding-top: var(--ams-space-8); }
    .ams-footer__container {
        grid-template-columns: 1fr;
        gap: var(--ams-space-6);
    }
}

.ams-footer__col {
    min-width: 0; /* prepreči overflow zaradi dolgega IBAN/email niza */
}

/* Specifičnost: `.ams-footer h3.ams-footer__heading` (0,2,1) je nujna — Elementor
   Kit nastavi `.elementor-kit-N h3 { color: gray-900; font-size: clamp(...) }`
   (specifičnost 0,1,1), kar bi sicer naredilo headings 36px dark gray na temnem
   bg = nevidno. Enak gotcha kot ams-btn. */
.ams-footer h3.ams-footer__heading,
.ams-footer .ams-footer__heading {
    color: var(--ams-on-dark);
    font-size: var(--ams-fs-xs);
    line-height: 1.4;
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    margin: 0 0 var(--ams-space-3);
    font-weight: var(--ams-fw-bold);
}
.ams-footer h3.ams-footer__heading--small,
.ams-footer .ams-footer__heading--small {
    margin-top: var(--ams-space-5, 1.25rem);
    font-size: 0.6875rem;
}

/* WP-generiran <ul class="ams-footer__list"> ima v <li> WP "menu-item" classe;
   ti naši stili veljajo enako za fallback PHP rendered <ul> in za wp_nav_menu output. */
.ams-footer__list,
.ams-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ams-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--ams-space-2);
}
.ams-footer__list li,
.ams-footer__legal li {
    margin: 0;
    padding: 0;
}
.ams-footer__list a,
.ams-footer__address a {
    color: var(--ams-gray-300);
    text-decoration: none;
    font-size: var(--ams-fs-sm);
    line-height: 1.5;
    transition: color var(--ams-transition);
    display: inline-block;
    word-break: break-word;
}
.ams-footer__list a:hover,
.ams-footer__list a:focus-visible,
.ams-footer__address a:hover,
.ams-footer__address a:focus-visible {
    color: var(--ams-burgundy-100);
    text-decoration: underline;
}

.ams-footer__address {
    font-style: normal;
    font-size: var(--ams-fs-sm);
    color: var(--ams-gray-300);
    line-height: var(--ams-lh-loose);
    margin: 0 0 var(--ams-space-3);
}

/* Podatkovne vrstice (Davčna/IBAN/SWIFT, E:/T:) — oznaka in vrednost v ISTI vrstici,
   obe poravnani na levi rob stolpca.
   Pred 2026-08-07: `display:grid` z `auto minmax(0,1fr)`. Ker je širina prvega stolpca
   določala najdaljša oznaka ("Davčna št.:"), so se vrednosti zamaknile 84 px v desno
   (v 2. stolpcu 23 px) — nobena ni bila poravnana z naslovom in naslovom nad njo, oba
   stolpca pa sta bila zamaknjena drugače. Zato flex vrstice: vsak par dt+dd je v
   ovoju .ams-footer__data-row (footer.php), gap je enak v obeh stolpcih.
   `align-items:center` je nujen, ker imata mailto/tel povezavi min-height 44 px
   (tap target, P1.5) — brez tega oznaka "E:" visi nad vrednostjo. */
.ams-footer__data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 var(--ams-space-3);
    font-size: var(--ams-fs-sm);
    color: var(--ams-gray-300);
    line-height: 1.45;
}
.ams-footer__data-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--ams-space-2);
    min-width: 0;
}
.ams-footer__data dt {
    color: var(--ams-gray-500);
    font-weight: var(--ams-fw-regular);
    white-space: nowrap;
}
.ams-footer__data dd {
    margin: 0;
    color: var(--ams-gray-300);
    overflow-wrap: anywhere;
    min-width: 0;
}
.ams-footer__data dd a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--ams-transition), border-color var(--ams-transition);
}
.ams-footer__data dd a:hover,
.ams-footer__data dd a:focus-visible {
    color: var(--ams-burgundy-100);
    border-bottom-color: var(--ams-burgundy-100);
}

.ams-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ams-space-2);
}
.ams-footer__social li { margin: 0; }
.ams-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ams-radius-full);
    background: var(--ams-dark-700);
    color: var(--ams-on-dark);
    text-decoration: none;
    transition: background var(--ams-transition), color var(--ams-transition), transform var(--ams-transition);
}
.ams-footer__social a:hover,
.ams-footer__social a:focus-visible {
    background: var(--ams-burgundy-500);
    color: var(--ams-white);
    transform: translateY(-1px);
}
.ams-footer__social svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Bottom bar — copyright + pravne povezave */
.ams-footer__bottom {
    margin-top: var(--ams-space-12);
    border-top: 1px solid var(--ams-dark-700);
    padding: var(--ams-space-5, 1.25rem) 0;
}
@media (max-width: 900px) {
    .ams-footer__bottom { margin-top: var(--ams-space-8); }
}
/* Fiksna FAB gumba (kontaktni spodaj levo, iskalni spodaj desno) sta pripeta na
   viewport, zato ob scrollu do konca strani prekrijeta spodnjo letvico: pri 900 px
   kontaktni FAB pokrije "© 2026 …", iskalni pa odreže gumb "Piškotki".
   Prekrivanja ni šele, ko je viewport dovolj širok, da vsebina containerja začne
   desno od FAB-a — to je nad ~1376 px ((1376−1280)/2 + 32 = 80 = desni rob FAB-a).
   Pod tem rezerviramo pas višine FAB-a (56 px + 24 px odmika), da letvica ostane
   poravnana z mrežo zgoraj, namesto da bi jo stiskali z vodoravnim paddingom. */
@media (max-width: 1376px) {
    .ams-footer__bottom { padding-bottom: calc(var(--ams-space-5, 1.25rem) + 80px); }
}
.ams-footer__bottom-inner {
    max-width: var(--ams-container-max);
    margin: 0 auto;
    padding: 0 var(--ams-container-padding);
    display: flex;
    /* Pred 2026-08-07 `space-between` s tremi otroki: pravne povezave so obvisele
       na sredini (x≈704) brez poravnave s čimerkoli. Zdaj se držijo copyrighta,
       gumba Dostopnost/Piškotki pa gresta na desni rob prek margin-left:auto. */
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ams-space-3) var(--ams-space-6);
}
.ams-footer__bottom-inner .ams-footer__utilities {
    margin-left: auto;
}
@media (max-width: 600px) {
    .ams-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ams-space-3);
    }
}
.ams-footer__copyright {
    margin: 0;
    color: var(--ams-gray-500);
    font-size: var(--ams-fs-xs);
    line-height: 1.5;
}
.ams-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ams-space-2) var(--ams-space-5, 1.25rem);
}
.ams-footer__legal a {
    color: var(--ams-gray-500);
    text-decoration: none;
    font-size: var(--ams-fs-xs);
    transition: color var(--ams-transition);
}
.ams-footer__legal a:hover,
.ams-footer__legal a:focus-visible { color: var(--ams-on-dark); }

/* Footer bottom utilities — Dostopnost + Piškotki bližnjici */
.ams-footer__utilities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ams-space-3);
    align-items: center;
}
.ams-footer__a11y-link {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(250, 247, 242, 0.18);
    color: var(--ams-on-dark);
    font-family: inherit;
    font-size: var(--ams-fs-xs);
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--ams-transition), border-color var(--ams-transition), color var(--ams-transition);
}
.ams-footer__a11y-link:hover,
.ams-footer__a11y-link:focus-visible {
    background: var(--ams-burgundy-500);
    border-color: var(--ams-burgundy-500);
    color: #fff;
    outline: none;
}
.ams-footer__a11y-link svg { flex-shrink: 0; }
.ams-footer__a11y-shortcut {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(250, 247, 242, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.ams-footer__a11y-link:hover .ams-footer__a11y-shortcut,
.ams-footer__a11y-link:focus-visible .ams-footer__a11y-shortcut {
    background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 600px) {
    .ams-footer__utilities {
        width: 100%;
    }
}

/* ============================================================
   SECTIONS (reusable patterns)
   ============================================================ */
.ams-section {
    padding: var(--ams-space-20) 0;
}
.ams-section--tight { padding: var(--ams-space-12) 0; }
.ams-section--cream { background: var(--ams-cream); }
.ams-section--dark { background: var(--ams-dark-900); color: var(--ams-on-dark); }
.ams-section--dark h1,
.ams-section--dark h2,
.ams-section--dark h3,
.ams-section--dark h4 { color: var(--ams-on-dark); }

.ams-container {
    max-width: var(--ams-container-max);
    margin: 0 auto;
    padding: 0 var(--ams-container-padding);
}

.ams-eyebrow {
    display: inline-block;
    font-size: var(--ams-fs-xs);
    font-weight: var(--ams-fw-bold);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    color: var(--ams-burgundy-500);
    margin-bottom: var(--ams-space-3);
}
.ams-section--dark .ams-eyebrow { color: var(--ams-burgundy-100); }

.ams-section__header {
    max-width: 720px;
    margin-bottom: var(--ams-space-12);
}
.ams-section__lead {
    font-size: var(--ams-fs-lg);
    color: var(--ams-gray-700);
    line-height: var(--ams-lh-loose);
    margin-top: var(--ams-space-4);
}
.ams-section--dark .ams-section__lead { color: var(--ams-gray-300); }

/* ============================================================
   HERO
   ============================================================ */
.ams-hero {
    position: relative;
    min-height: clamp(520px, 75vh, 780px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ams-dark-900);
    color: var(--ams-on-dark);
}
.ams-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, rgba(26,23,21,0.85) 0%, rgba(139,0,48,0.45) 100%);
    pointer-events: none;
    z-index: 1;
}
.ams-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ams-hero__media img,
.ams-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ams-hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--ams-container-max);
    margin: 0 auto;
    padding: var(--ams-space-16) var(--ams-container-padding);
    width: 100%;
}
.ams-hero__badge {
    display: inline-block;
    padding: var(--ams-space-2) var(--ams-space-4);
    border: 1px solid var(--ams-burgundy-100);
    border-radius: var(--ams-radius-full);
    font-size: var(--ams-fs-xs);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    color: var(--ams-burgundy-100);
    margin-bottom: var(--ams-space-6);
}
.ams-hero__title {
    font-size: clamp(var(--ams-fs-4xl), 7vw, var(--ams-fs-6xl));
    color: var(--ams-on-dark);
    max-width: 900px;
    line-height: 1.1;
    margin: 0 0 var(--ams-space-6);
}
/* Hero je dark bg + image + gradient overlay; Elementor heading/text widgeti znotraj
   morajo biti light. Specifičnost: tag.X mora premagati `.elementor-kit-N h1` (0,1,1).
   Velja za vse hero variante: .ams-hero (homepage), .ams-program-hero (programi). */
.ams-hero h1.elementor-heading-title,
.ams-hero h2.elementor-heading-title,
.ams-hero h3.elementor-heading-title,
.ams-hero .elementor-widget-heading .elementor-heading-title,
.ams-program-hero h1.elementor-heading-title,
.ams-program-hero h2.elementor-heading-title,
.ams-program-hero h3.elementor-heading-title,
.ams-program-hero .elementor-widget-heading .elementor-heading-title {
    color: #FFFFFF;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.ams-hero .elementor-widget-text-editor,
.ams-hero .elementor-widget-text-editor p,
.ams-hero .elementor-widget-text-editor li,
.ams-program-hero .elementor-widget-text-editor,
.ams-program-hero .elementor-widget-text-editor p,
.ams-program-hero .elementor-widget-text-editor li {
    color: var(--ams-gray-100, #EDE9E3);
}

/* Program hero container — bg image MORA biti cover/center + min-height,
   da slika balerine fillajo celoten hero in da je tekst dovolj scena. */
.ams-program-hero {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: clamp(360px, 50vh, 560px);
    position: relative;
}
/* Subtle gradient overlay — dovolj, da je white tekst čitljiv (z text-shadow),
   ampak ne zatre hero slike (npr. balerina na /balet/, ki je dark scena).
   Prvotni 0.78/0.45 alpha je preveč skril Balet sliko. */
.ams-program-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.40) 100%);
    pointer-events: none;
    z-index: 1;
}
.ams-program-hero > * {
    position: relative;
    z-index: 2;
}
/* Hero buttons — Elementor inline style (1,0,0) zmaga čez navadne CSS rules (0,3,0),
   zato MORAMO uporabiti !important. Prvi gumb = primary burgundy filled,
   drugi = secondary outlined white (nad dark image).
   Velja za .ams-hero (homepage) + .ams-program-hero (program landing strani). */
.ams-hero .elementor-widget-button .elementor-button-link.elementor-button,
.ams-hero .elementor-widget-button a.elementor-button,
.ams-program-hero .elementor-widget-button .elementor-button-link.elementor-button,
.ams-program-hero .elementor-widget-button a.elementor-button {
    background-color: var(--ams-burgundy-500, #8B0030) !important;
    color: #FFFFFF !important;
    border: 1.5px solid var(--ams-burgundy-500, #8B0030) !important;
    border-radius: 6px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: background-color 180ms ease, border-color 180ms ease, transform 150ms ease, box-shadow 180ms ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
}
.ams-hero .elementor-widget-button .elementor-button-link.elementor-button:hover,
.ams-hero .elementor-widget-button .elementor-button-link.elementor-button:focus-visible,
.ams-program-hero .elementor-widget-button .elementor-button-link.elementor-button:hover,
.ams-program-hero .elementor-widget-button .elementor-button-link.elementor-button:focus-visible {
    background-color: var(--ams-burgundy-700, #5A001F) !important;
    border-color: var(--ams-burgundy-700, #5A001F) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.28) !important;
}

/* === SPLOŠNI Elementor button override za VSE notranje strani ===
   Elementor data je gradnjena s default button stylom (gray #69727D, 4px radius).
   Brand zahteva burgundy primary povsod na notranjih (Elementor) straneh.
   `main.ams-elementor-page` zajame vse Elementor strani razen homepage (`main.ams-home`).
   Za light-on-dark hero variante ostane specifičnejša `.ams-hero` / `.ams-program-hero`
   rule, ki to splošno pravilo override-a (kasnejša + enaka specifičnost). */
main.ams-elementor-page .elementor-widget-button .elementor-button-link.elementor-button,
main.ams-elementor-page .elementor-widget-button a.elementor-button {
    background-color: var(--ams-burgundy-500, #8B0030) !important;
    color: #FFFFFF !important;
    border: 1.5px solid var(--ams-burgundy-500, #8B0030) !important;
    border-radius: 6px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: background-color 180ms ease, border-color 180ms ease, transform 150ms ease, box-shadow 180ms ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
main.ams-elementor-page .elementor-widget-button .elementor-button-link.elementor-button:hover,
main.ams-elementor-page .elementor-widget-button .elementor-button-link.elementor-button:focus-visible {
    background-color: var(--ams-burgundy-700, #5A001F) !important;
    border-color: var(--ams-burgundy-700, #5A001F) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.22) !important;
}
/* Drugi button-widget v hero kontejnerju → outlined white (secondary nad dark image) */
.ams-hero .elementor-widget-button + .elementor-widget-button .elementor-button-link.elementor-button,
.ams-hero .elementor-widget-button + .elementor-widget-button a.elementor-button,
.ams-program-hero .elementor-widget-button + .elementor-widget-button .elementor-button-link.elementor-button,
.ams-program-hero .elementor-widget-button + .elementor-widget-button a.elementor-button {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.75) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.ams-hero .elementor-widget-button + .elementor-widget-button .elementor-button-link.elementor-button:hover,
.ams-hero .elementor-widget-button + .elementor-widget-button .elementor-button-link.elementor-button:focus-visible,
.ams-program-hero .elementor-widget-button + .elementor-widget-button .elementor-button-link.elementor-button:hover,
.ams-program-hero .elementor-widget-button + .elementor-widget-button .elementor-button-link.elementor-button:focus-visible {
    background-color: rgba(255,255,255,0.12) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}
/* Mobile: stack buttoni, ne forsiraj fix-width */
@media (max-width: 600px) {
    .ams-hero .elementor-widget-button .elementor-button-link.elementor-button,
    .ams-program-hero .elementor-widget-button .elementor-button-link.elementor-button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
}

/* === Elementor 4.x .e-con-full GLOBAL fix ===
   BUG: Po 3.x→4.x upgrade-u VSI .e-con-full containerji legacy 3.x Elementor data-i
   imajo computed `display: inline` namesto pričakovanega `flex`. To zlomi:
   - hero bg image rendering (inline element nima visual area)
   - 2-col layouts (e.g. "O programu" + "Naziv/Trajanje/Lokacija" info card)
   - vse flex-direction:row / column-row hibridne strukture
   Fix MORA biti splošen — Elementor's spec is `display: flex` (default) na vse e-con.
   ZADRŽKI:
   - .ams-grid--3 (program cards carousel) ima svoj override (display:flex + flex-row)
   - .ams-grid--4 (Erasmus/onas grid) ima svoj override
   Te grid override-i so kasneje (specifičnejši) v style.css in zato delajo.
   `!important` ker je Elementor inline-style ali specific kit rule premočan. */
.e-con-full {
    display: flex !important;
    box-sizing: border-box;
}
/* Hero containerji + njihovi direktni potomci morajo biti vidni kot blok */
.ams-program-hero,
.ams-program-hero > .e-con-full,
.ams-program-hero > .e-con-full > .e-con-full {
    display: flex !important;
    box-sizing: border-box;
}

/* === 2-col intro layout na program straneh ===
   `.ams-program-intro-row` ima v Elementor data nastavljen `flex_direction: row` z 2
   columnu (O programu opis + info card desno). Po 4.x upgrade-u flex-direction je
   bil reset na column → 2 cols stack vertikalno. Force row + gap. */
.ams-program-intro-row {
    flex-direction: row !important;
    gap: 32px;
    align-items: flex-start;
}
.ams-program-intro-row > .e-con-full:first-child {
    flex: 1 1 58%;
    min-width: 0;
}
.ams-program-intro-row > .e-con-full:last-child {
    flex: 0 1 380px;
    min-width: 280px;
}
@media (max-width: 900px) {
    .ams-program-intro-row {
        flex-direction: column !important;
        gap: 24px;
    }
    .ams-program-intro-row > .e-con-full:first-child,
    .ams-program-intro-row > .e-con-full:last-child {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* === Container side-gutter — samo mobile ===
   Top-level .e-parent MORA imeti min 16px horizontal padding na mobile.
   Edinstven izjem: .e-con-full ki vsebuje .ams-grid--3 — tam SI želimo edge bleed
   desno (carousel peek), zato pr:0. */
@media (max-width: 600px) {
    main > .elementor > .e-con-full.e-parent,
    main .elementor-section,
    body > .elementor > section.elementor-section.elementor-top-section {
        padding-left: max(16px, var(--padding-left, 16px));
        padding-right: max(16px, var(--padding-right, 16px));
    }
    /* Program cards section: NE nižamo več parent paddinga na desni.
       Do 2026-08-07 je bilo tu `padding-right: 0`, da je carousel lahko tekel
       čez desni rob. Posledica: containing block ni bil simetričen (10px levo,
       0 desno), zato `calc(50% - 50vw)` ni padel točno na rob zaslona in
       simetričnega bleeda na obe strani ni bilo mogoče izračunati.
       Bleed zdaj naredi grid sam z negativnim margin-inline (glej blok
       "PROGRAM SLIDER (mobile)" na koncu datoteke). */
}
.ams-hero__subtitle {
    font-size: var(--ams-fs-lg);
    color: var(--ams-gray-300);
    max-width: 640px;
    line-height: var(--ams-lh-loose);
    margin: 0 0 var(--ams-space-8);
}
.ams-hero__actions {
    display: flex;
    gap: var(--ams-space-4);
    flex-wrap: wrap;
}

/* Decorativen pattern fallback če ni fotografije */
.ams-hero__media--pattern {
    background:
        radial-gradient(ellipse at top left, rgba(139,0,48,0.15), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(193,125,42,0.12), transparent 50%),
        var(--ams-dark-900);
}

/* ============================================================
   CARDS
   ============================================================ */
.ams-card {
    display: flex;
    flex-direction: column;
    background: var(--ams-white);
    border: 1px solid var(--ams-gray-100);
    border-radius: var(--ams-radius-md);
    overflow: hidden;
    transition: transform var(--ams-transition), box-shadow var(--ams-transition), border-color var(--ams-transition);
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.ams-card:hover,
.ams-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--ams-shadow-lg);
    border-color: var(--ams-burgundy-100);
}
.ams-card__media {
    aspect-ratio: 4 / 3;
    background: var(--ams-gray-100);
    overflow: hidden;
}
.ams-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.ams-card:hover .ams-card__media img { transform: scale(1.04); }

.ams-card__body {
    padding: var(--ams-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ams-space-3);
    flex: 1;
}
.ams-card__eyebrow {
    font-size: var(--ams-fs-xs);
    font-weight: var(--ams-fw-bold);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    color: var(--ams-burgundy-500);
}
.ams-card__title {
    font-size: var(--ams-fs-xl);
    margin: 0;
    color: var(--ams-gray-900);
}
.ams-card__excerpt {
    font-size: var(--ams-fs-sm);
    color: var(--ams-gray-700);
    line-height: var(--ams-lh-loose);
    margin: 0;
    flex: 1;
}
.ams-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--ams-space-3);
    padding-top: var(--ams-space-3);
    border-top: 1px solid var(--ams-gray-100);
    font-size: var(--ams-fs-sm);
    color: var(--ams-burgundy-500);
    font-weight: var(--ams-fw-semibold);
}

/* Program card = specializirana verzija */
.ams-card--program .ams-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ams-burgundy-500), var(--ams-burgundy-700));
    color: var(--ams-on-dark);
    font-size: 3rem;
    font-weight: var(--ams-fw-bold);
    font-family: var(--ams-font-sans);
    letter-spacing: var(--ams-letter-tight);
}

/* ============================================================
   PROGRAM CARD BODY – "Bachelor degrees" style
   Struktura: title → ● status → trajanje/ECTS → arrow CTA
   ============================================================ */

/* Status badge "● Avdicije 2026/27" – amber dot via ::before pseudo */
.elementor-widget.ams-card__status .elementor-widget-container {
    display: flex;
    align-items: center;
}
.elementor-widget.ams-card__status .elementor-widget-container::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #C17D2A; /* --ams-warning */
    flex-shrink: 0;
}

/* Data line (trajanje · ECTS) – subtle gray */
.elementor-widget.ams-card__data .elementor-heading-title {
    /* ECTS middot ločilo – avtomatsko kerning */
}

/* Arrow CTA "→ Več o programu" – hover premik puščice */
.elementor-widget.ams-card__cta {
    margin-top: auto;
}
.elementor-widget.ams-card__cta .elementor-heading-title {
    transition: transform var(--ams-transition);
    display: inline-block;
}
.e-con.ams-card--program:hover .elementor-widget.ams-card__cta .elementor-heading-title {
    transform: translateX(4px);
}

/* Program card body poravnava – CTA potisnjen na dno */
.e-con.ams-card--program .e-con.ams-card__body {
    flex: 1 !important;
    justify-content: flex-start !important;
}

/* ============================================================
   SECTION HEADER Z HORIZONTAL RULE ("BACHELOR DEGREES" stil)
   ============================================================ */
.e-con.ams-section-header--rule {
    border-bottom: 1px solid var(--ams-gray-300);
    width: 100%;
}

/* ============================================================
   GRID
   ============================================================ */
.ams-grid {
    display: grid;
    gap: var(--ams-space-6);
}
.ams-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ams-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ams-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ams-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 900px) {
    .ams-grid--3, .ams-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ams-grid--2, .ams-grid--3, .ams-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.ams-cta-banner {
    background: var(--ams-burgundy-500);
    color: var(--ams-on-dark);
    padding: var(--ams-space-16) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ams-cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(255,255,255,0.08), transparent 60%);
    pointer-events: none;
}
.ams-cta-banner__container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--ams-container-padding);
}
.ams-cta-banner h2 {
    color: var(--ams-on-dark);
    margin-bottom: var(--ams-space-4);
}
.ams-cta-banner p {
    font-size: var(--ams-fs-lg);
    color: var(--ams-burgundy-100);
    margin-bottom: var(--ams-space-8);
}

/* ============================================================
   DEFAULT PAGE TEMPLATE (fallback for pages without Elementor content)
   ============================================================ */
.ams-page {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--ams-space-16) var(--ams-container-padding);
}
/* Poudarek nosita tipografija in prostor, NE barvna črtica pod naslovom.
   Do 2026-08-13 je bilo tu `border-bottom: 2px solid var(--ams-burgundy-500)`
   (+ `display: inline-block`, da se je črta ustavila na koncu besedila).
   Nadomestne črte ne dodajamo — ostane samo prazen prostor pod naslovom. */
.ams-page h1 {
    margin-bottom: var(--ams-space-8);
}
.ams-page__breadcrumbs {
    font-size: var(--ams-fs-xs);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    color: var(--ams-gray-500);
    margin-bottom: var(--ams-space-4);
}
.ams-page__breadcrumbs a { color: var(--ams-gray-500); text-decoration: none; }
.ams-page__breadcrumbs a:hover { color: var(--ams-burgundy-500); }

/* ============================================================
   BREADCRUMBS (global – Elementor + default strani)
   ============================================================
   Izrisane v page.php nad vsebino (pod header, nad hero). Na
   Elementor straneh dobijo svoj cream strip, na default straneh
   inline nad h1. */
.ams-breadcrumbs {
    background: var(--ams-cream);
    border-bottom: 1px solid var(--ams-gray-100);
}
.ams-breadcrumbs__inner {
    max-width: var(--ams-container-max);
    margin: 0 auto;
    padding: var(--ams-space-3) var(--ams-container-padding);
    font-size: var(--ams-fs-xs);
    letter-spacing: var(--ams-letter-wide);
    text-transform: uppercase;
    color: var(--ams-gray-500);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ams-space-2);
}
/* Mobile bump: 12px uppercase + letter-spacing je naporno za branje na malih ekranih;
   13px ohrani micro-label karakter brez break-anja line-heighta. */
@media (max-width: 600px) {
    .ams-breadcrumbs__inner {
        font-size: 0.8125rem;
        gap: 6px;
    }
    .ams-breadcrumbs__inner a,
    .ams-breadcrumbs__inner [aria-current="page"] {
        padding: 4px 0;
        min-height: 28px;
        display: inline-flex;
        align-items: center;
    }
}
a.ams-breadcrumbs__inner a,
.ams-breadcrumbs__inner a {
    color: var(--ams-gray-500);
    text-decoration: none;
    transition: color var(--ams-transition);
}
.ams-breadcrumbs__inner a:hover,
.ams-breadcrumbs__inner a:focus-visible {
    color: var(--ams-burgundy-500);
}
.ams-breadcrumbs__sep {
    color: var(--ams-gray-300);
}
.ams-breadcrumbs__inner [aria-current="page"] {
    color: var(--ams-gray-900);
    font-weight: var(--ams-fw-semibold);
}
/* Na default (ne-Elementor) straneh je breadcrumb že del ams-page wrapperja;
   naj ne zavzema celotne širine s cream strip-om, ampak se umesti tik nad h1. */
.ams-page > .ams-breadcrumbs {
    background: transparent;
    border-bottom: none;
}
.ams-page > .ams-breadcrumbs .ams-breadcrumbs__inner {
    padding: 0;
    margin-bottom: var(--ams-space-4);
}

/* ============================================================
   HELLO ELEMENTOR OVERRIDES
   ============================================================ */
.site-footer .copyright,
.site-footer--credits { display: none !important; }

/* Hide Hello Elementor default header if our header is present */
.site-header { display: none; }

/* ============================================================
   ELEMENTOR BRIDGE – minimalen
   ============================================================
   Barve, fonti, padding so zdaj NASTAVLJENI DIREKTNO na
   Elementor widget settings (title_color, typography_*, text_color,
   button_text_color, _padding, background_color, …). To pomeni,
   da jih Miha lahko ureja v Elementor UI in Elementor sam
   generira per-widget CSS v post-6.css.

   Tu ostaja samo:
     1) Grid 3-col za program kartice (Elementor tega nima iz škatle).
     2) Card hover efekt (globalni za .ams-card--program).
     3) About 2-col responsive fallback.
   ============================================================ */

/* --- Grid 3-col (programi) ---
   align-items: stretch naredi vse kartice enako visoke (grid default).
   V kombinaciji s flex:1 na body-ju in margin-top:auto na CTA: body se
   razteza, CTA ostane poravnan na dno vseh kartic. */
.e-con.ams-grid.ams-grid--3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch !important;
    width: 100%;
}
@media (max-width: 900px) {
    .e-con.ams-grid.ams-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    /* Mobile: horizontal scroll carousel. Levi rob KARTIC se ujema z naslovom
       sekcije (parent Elementor section padding), DESNO se container razteguje
       do roba viewporta da peek naslednje kartice signalizira swipe. */
    .e-con.ams-grid.ams-grid--3 {
        grid-template-columns: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px !important;
        /* Levo: NORMAL (sledi parent section padding — heading-aligned).
           Desno: full-bleed do roba viewporta (margin-right negative). */
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* prostor za box-shadow spodaj */
        padding-bottom: 24px;
    }
    .e-con.ams-grid.ams-grid--3::-webkit-scrollbar {
        display: none;
    }
    .e-con.ams-grid.ams-grid--3 > .e-con.ams-card.ams-card--program {
        /* Karta = 84% viewport (ne container, sicer full-bleed razteg karte poveča).
           Peek naslednje kartice je ~16% viewporta + 16px gap. */
        flex: 0 0 84vw !important;
        max-width: 84vw !important;
        min-width: 0;
        scroll-snap-align: start;
    }
}

/* --- Grid stack modifier: na listing strani (vse programe) ne delamo
       horizontal swipe carousela, ampak navpični seznam kartic. Uporablja
       se samo na straneh, kjer ima uporabnik namen pregledati vse programe.
*/
@media (max-width: 560px) {
    .e-con.ams-grid.ams-grid--3.ams-grid--stack {
        grid-template-columns: 1fr !important;
        display: grid !important;
        flex-direction: initial !important;
        flex-wrap: initial !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        gap: 20px !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important;
    }
    .e-con.ams-grid.ams-grid--3.ams-grid--stack > .e-con.ams-card.ams-card--program {
        flex: initial;
        max-width: 100%;
        min-width: 0;
    }
}

/* --- Stats 2-col grid --- */
.e-con.ams-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}
@media (max-width: 560px) {
    .e-con.ams-stats-grid { grid-template-columns: 1fr; }
}

/* --- About 2-col responsive --- */
@media (max-width: 900px) {
    .e-con.ams-about-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* --- Program card: naravna višina, ne raztegovanje ---
   Bachelor-degrees stil: mehka senca + večji zaobljeni robovi, brez vidne obrobe.
   Elementor widget ima radius=8 nastavljen v scripti, CSS tu dvigne na 16px. */
.e-con.ams-card.ams-card--program {
    transition: transform var(--ams-transition), box-shadow var(--ams-transition), border-color var(--ams-transition);
    text-decoration: none;
    align-self: stretch;
    gap: 0 !important;
    border-radius: 16px !important;
    border-color: transparent !important;
    box-shadow: 0 4px 10px rgba(26, 23, 21, 0.08), 0 14px 32px rgba(26, 23, 21, 0.08);
}
.e-con.ams-card.ams-card--program:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(26, 23, 21, 0.12), 0 24px 48px rgba(26, 23, 21, 0.14);
    border-color: transparent !important;
}

/* --- Program card media: CSS background driven by Featured Image ---
   .ams-card__media ima privzet placeholder preko CSS spremenljivke
   --bg-image. functions.php wp_head hook injecta override na
   .ams-program-card-media-<slug> preko --bg-image. S tem urednik
   nastavi Featured Image v WP admin → takoj se pokaže na homepage-u
   brez rebuild-a.
*/
.e-con.ams-card__media {
    --bg-image: url('/wp-content/uploads/2026/04/placeholder-program.png');
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    min-height: 0 !important;
    padding: 0 !important;
}
.e-con.ams-card__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    transition: transform 400ms ease;
    pointer-events: none;
}
.e-con.ams-card--program:hover .e-con.ams-card__media::before {
    transform: scale(1.04);
}

/* ============================================================
   PROGRAM PAGE (Balet, Sodobni ples, ...) — specifični stili
   ============================================================ */

/* 2-col intro: responsive collapse na mobitelu */
@media (max-width: 900px) {
    .e-con.ams-program-intro-row,
    .e-con.ams-onas-row {
        flex-direction: column !important;
        gap: 32px !important;
    }
}

/* Kartica s praktičnimi podatki (naslov, odpiralni čas, kontakt) gre na telefonu
   PRED besedilo — obiskovalec na Knjižnici najpogosteje išče prav te podatke.
   Modifikator se doda na posamezno stran, ne na vse ams-onas-sidebar. */
@media (max-width: 900px) {
    .e-con.ams-onas-sidebar--first {
        order: -1;
    }
}

/* O nas sidebar stack: sticky kot celota, vsebuje Vodstvo + Katedre kartici. */
@media (min-width: 901px) {
    .e-con.ams-onas-sidebar-stack {
        position: sticky;
        top: 96px;
    }
}

/* O nas info kartice (Vodstvo, Katedre) — subtil hover, ujema se z
   ostalimi onas-teaser karticami. */
.e-con.ams-card--onas-info {
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.e-con.ams-card--onas-info:hover {
    border-color: var(--ams-burgundy-300, #C9919A) !important;
    box-shadow: 0 6px 18px rgba(26, 23, 21, 0.06);
}

/* O nas teaser cards: subtil hover */
.e-con.ams-card--onas-teaser {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.e-con.ams-card--onas-teaser:hover {
    transform: translateY(-2px);
    border-color: var(--ams-burgundy-500) !important;
    box-shadow: 0 8px 24px rgba(26, 23, 21, 0.08);
}

/* Curriculum table (znotraj Accordion tab vsebine) */
.ams-curriculum-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ams-font-sans);
    font-size: 14px;
    margin: 0.5rem 0;
}
.ams-curriculum-table th,
.ams-curriculum-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ams-gray-100);
    vertical-align: top;
}
.ams-curriculum-table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ams-gray-500);
    border-bottom: 2px solid var(--ams-gray-300);
}
.ams-curriculum-table th.num,
.ams-curriculum-table td.num {
    width: 40px;
    color: var(--ams-gray-500);
    font-variant-numeric: tabular-nums;
}
.ams-curriculum-table th.ects,
.ams-curriculum-table td.ects {
    width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ams-curriculum-table tfoot td {
    border-top: 2px solid var(--ams-gray-300);
    border-bottom: none;
    padding-top: 12px;
    color: var(--ams-gray-900);
}
.ams-curriculum-table tbody tr:hover {
    background: var(--ams-cream);
}

/* Accordion widget styling refinements */
.elementor-accordion .elementor-accordion-item {
    border: 1px solid var(--ams-gray-100) !important;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}
.elementor-accordion .elementor-tab-title {
    padding: 16px 20px !important;
    background: var(--ams-white);
}
.elementor-accordion .elementor-tab-title.elementor-active {
    background: var(--ams-cream);
}
.elementor-accordion .elementor-tab-content {
    padding: 20px !important;
    background: var(--ams-white);
    border-top: 1px solid var(--ams-gray-100);
}

/* Vpis stran – step kartice (IAB Barcelona pattern: oversized number + title + body + CTA) */
.e-con.ams-step {
    position: relative;
    background: var(--ams-white);
    border: 1px solid var(--ams-gray-100);
    border-radius: 12px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.e-con.ams-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(26, 23, 21, .08);
    border-color: var(--ams-burgundy-100);
}
.elementor-widget.ams-step__num .elementor-heading-title {
    font-feature-settings: "tnum" 1;
    line-height: 1 !important;
    color: var(--ams-burgundy-500);
}
.elementor-widget.ams-step__eyebrow .elementor-heading-title {
    color: var(--ams-gray-500);
}

/* Vpis stran – roki (deadline) kartice.
   Do 2026-08-13 je kartico poudarjal `border-top: 4px solid burgundy` — barvni
   trak ob robu bloka. Poudarek zdaj nosita globina in prostor: bela podlaga,
   nevtralna 1 px obroba in izrazitejša senca. Barva ostane samo tam, kjer nosi
   pomen (številka roka .ams-deadline__round). */
.e-con.ams-deadline {
    background: var(--ams-white);
    border: 1px solid var(--ams-gray-100);
    border-radius: 12px;
    box-shadow: var(--ams-shadow-md);
}
.elementor-widget.ams-deadline__round .elementor-heading-title {
    color: var(--ams-burgundy-500);
}

/* Vpis stran – payment plan kartica */
.e-con.ams-pay {
    background: var(--ams-white);
    border: 1px solid var(--ams-gray-100);
    border-radius: 8px;
}
.e-con.ams-pay--featured {
    border: 2px solid var(--ams-burgundy-500);
}
.elementor-widget.ams-pay__label .elementor-heading-title {
    color: var(--ams-gray-500);
}

/* Erasmus stran – ams-grid--2 (mobility/dokument kartice) responsive */
.e-con.ams-grid.ams-grid--2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch !important;
    width: 100%;
}
@media (max-width: 768px) {
    .e-con.ams-grid.ams-grid--2 { grid-template-columns: 1fr; }
}

/* Vpis stran – ams-grid--4 (steps) responsive */
.e-con.ams-grid.ams-grid--4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch !important;
    width: 100%;
}
@media (max-width: 1024px) {
    .e-con.ams-grid.ams-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    /* Mobile: isti slider kot program kartice. Bleed na obe strani naredi blok
       "PROGRAM SLIDER (mobile)" na koncu datoteke — tu samo flex/scroll osnova.
       Do 2026-08-07 je bilo tu `margin-right: calc(50% - 50vw)` brez `width:100vw`:
       negativni margin škatle ni razširil (width:100% jo je pripel na containing
       block), zato je bil scrollport ožji od kartice (333 px proti 330 px + gap)
       in peek naslednje kartice se SPLOH ni videl — na /vpis/avdicije/ ni bilo
       nobenega znaka, da so termini štirje. */
    .e-con.ams-grid.ams-grid--4:not(.ams-grid--stack) {
        grid-template-columns: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px !important;
        padding-bottom: 24px;
    }
    .e-con.ams-grid.ams-grid--4:not(.ams-grid--stack)::-webkit-scrollbar { display: none; }
    .e-con.ams-grid.ams-grid--4:not(.ams-grid--stack) > .e-con {
        flex: 0 0 84vw !important;
        max-width: 84vw !important;
        min-width: 0;
        scroll-snap-align: start;
    }
    /* Razširi --3 carousel na vse vrste vpis kartic, ne samo .ams-card--program.
       84vw (ne 88 % containerja) — enaka širina kartice kot na homepage in v --4,
       da je peek povsod enak. */
    .e-con.ams-grid.ams-grid--3:not(.ams-grid--stack) > .e-con.ams-step,
    .e-con.ams-grid.ams-grid--3:not(.ams-grid--stack) > .e-con.ams-deadline,
    .e-con.ams-grid.ams-grid--3:not(.ams-grid--stack) > .e-con.ams-pay {
        flex: 0 0 84vw !important;
        max-width: 84vw !important;
        min-width: 0;
        scroll-snap-align: start;
    }
}

/* Anchor-link nudge: poskrbi, da fixed header ne pokrije naslova sekcije.
   Brez tega naslov pristane pod lepljivo glavo (65 px) — izmerjeno 11. 9. 2026
   na #podiplomski: naslov na top -6, torej skrit. */
.e-con[id^="vpis-"],
.e-con#dodiplomski,
.e-con#podiplomski,
.e-con#predmetnik {
    scroll-margin-top: 100px;
}

/* Hero shortcut pills – squared style kot homepage hero CTA-ji */
.e-con.ams-hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.e-con.ams-hero-pills .elementor-button {
    border-radius: 6px !important;
}

/* ============================================================
   ALUMNI – landscape member kartice (build-alumni-page.php)
   ============================================================
   DOM vrstni red je VEDNO [photo, text] zaradi mobile konsistence
   (foto → naziv → ime za VSE člane). Desktop alternation pa preko
   row-reverse na vsaki drugi kartici. */
@media (min-width: 1025px) {
    .e-con.ams-alumni-row--reverse {
        flex-direction: row-reverse !important;
    }
}
@media (max-width: 1024px) {
    .e-con.ams-alumni-row,
    .e-con.ams-alumni-row--reverse {
        flex-direction: column !important;
    }
}

/* Erasmus stran – kartice (mobility links + PDF dokumenti) */
.e-con.ams-erasmus-card {
    background: var(--ams-cream);
    border: 1px solid var(--ams-gray-100);
    border-radius: 12px;
    transition: border-color var(--ams-transition), transform var(--ams-transition);
}
.e-con.ams-erasmus-card:hover {
    border-color: var(--ams-burgundy-500);
    transform: translateY(-2px);
}

/* Mobile (≤560px): erasmus kartice MORAJO stackat se vertikalno.
   `.e-con.ams-grid.ams-grid--3` ima specifično mobile pravilo, ki naredi
   horizontal scroll carousel s `flex: 0 0 88%` — ampak to cilja samo
   .ams-card--program. Brez specifičnega override-a se ams-erasmus-card
   stisnejo v 4-stolpčni row brez stack/scroll.
   Modifier `ams-grid--stack` (postavljen v build-erasmus-studente/osebje
   skripti) reset-a v 1-col grid; tu samo razširimo selector, da ujame
   tudi ams-erasmus-card child (ne samo ams-card--program). */
@media (max-width: 560px) {
    .e-con.ams-grid.ams-grid--3.ams-grid--stack > .e-con.ams-erasmus-card,
    .e-con.ams-grid.ams-grid--2.ams-grid--stack > .e-con.ams-erasmus-card {
        flex: initial;
        max-width: 100%;
        min-width: 0;
    }
    /* Brez stack modifier-ja: vseeno fallback v 1-col, da preprečimo squish.
       Bypass-amo carousel logiko z grid-template-columns reset. */
    .e-con.ams-grid.ams-grid--3:not(.ams-grid--stack):has(.ams-erasmus-card),
    .e-con.ams-grid.ams-grid--2:not(.ams-grid--stack):has(.ams-erasmus-card) {
        grid-template-columns: 1fr !important;
        display: grid !important;
        flex-direction: initial !important;
        flex-wrap: initial !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        gap: 20px !important;
        padding-right: 0 !important;
    }
}

/* Tables znotraj text-editor widget-ov (Avada migrirana vsebina, npr.
   /erasmus/.../partnerske-institucije/) lahko presežejo viewport. Ovijemo
   v scrollable wrapper na mobile. */
.elementor-widget-text-editor table {
    width: 100%;
    border-collapse: collapse;
}
.elementor-widget-text-editor table th,
.elementor-widget-text-editor table td {
    padding: 8px 12px;
    border: 1px solid var(--ams-gray-100);
    vertical-align: top;
}
@media (max-width: 767px) {
    /* Tabele v Avada-migrirani vsebini imajo lahko 10+ stolpcev (npr.
       Partnerske institucije). word-break: break-word jih stisne v
       neberljivo obliko. Boljši pattern: ohrani naravno širino tabele
       in scrollaj horizontalno znotraj widget container-ja.
       overflow-x: auto na widget-u + min-width na tabeli + smooth touch scroll. */
    .elementor-widget-text-editor {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .elementor-widget-text-editor table {
        font-size: 13px;
        min-width: 720px;
        width: max-content;
    }
    .elementor-widget-text-editor table th,
    .elementor-widget-text-editor table td {
        padding: 6px 8px;
    }
}

/* ============================================================
   ELEMENTOR SECTION VERTICAL PADDING – RESPONSIVE OVERRIDE
   ============================================================
   Build skripte (build-vpis-page.php, build-balet-page.php, …)
   nastavijo vsaki top-level sekciji `padding-top/bottom: 64-96px`
   v desktop Elementor settings-ih, BREZ mobile/tablet override-a.
   Posledica: na 390px viewportu sosednji `pb=80 + pt=80` ustvarijo
   160px čistega belega prostora med dvema sekcijama.
   To skalirano zmanjša razmake na tablet (~70%) in mobile (~50%).
   Override je preko Elementor CSS custom propertijev (--padding-top,
   --padding-bottom), ki jih frontend.css aplicira na .e-con.
   Specifičnost: `.elementor-element.elementor-element.e-con.e-parent`
   je (0,4,0), kar premaga post-N.css per-page rule (0,2,1).
   `!important` ne uporabljen — če Miha v Elementor UI nastavi specific
   mobile padding, naj ga ohrani. */

/* Tablet (≤1024px): rahla redukcija */
@media (max-width: 1024px) {
    .elementor-element.elementor-element.e-con.e-parent {
        --padding-top: 56px;
        --padding-bottom: 56px;
    }
}

/* Mobile (≤767px): bolj agresivna redukcija */
@media (max-width: 767px) {
    .elementor-element.elementor-element.e-con.e-parent {
        --padding-top: 40px;
        --padding-bottom: 40px;
        --padding-left: 20px;
        --padding-right: 20px;
    }
    /* Hero / prva sekcija (zgornja) — rahlo več prostora za vizualni impact;
       cilja na sekcije s temnim bg-jem (hero pattern). Še vedno bistveno manj
       od desktop 96px. */
    .elementor-element.elementor-element.e-con.e-parent:first-child {
        --padding-top: 56px;
        --padding-bottom: 56px;
    }
}

/* ============================================================
   PAGE LOADER — full-screen preloader (samo homepage)
   Cream background, logo, burgundy progress bar.
   ============================================================ */
.ams-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ams-cream);
    transition: opacity 500ms ease, visibility 0s linear 500ms;
    opacity: 1;
    visibility: visible;
}
.ams-loader--hide {
    opacity: 0;
    visibility: hidden;
}
.ams-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 24px;
    text-align: center;
}
.ams-loader__logo {
    width: clamp(180px, 30vw, 260px);
    height: auto;
    animation: ams-loader-pulse 1.6s ease-in-out infinite;
}
.ams-loader__bar {
    position: relative;
    width: clamp(180px, 30vw, 260px);
    height: 3px;
    background: rgba(139, 0, 48, 0.12);
    border-radius: 999px;
    overflow: hidden;
}
.ams-loader__bar-fill {
    position: absolute;
    inset: 0;
    width: 35%;
    background: var(--ams-burgundy-500);
    border-radius: 999px;
    animation: ams-loader-slide 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ams-loader-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.97); }
}
@keyframes ams-loader-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(285%); }
}
/* Body lock med loaderjem */
body.ams-loading {
    overflow: hidden;
}
/* Animacije nalagalnika ustavi SAMO gradnik dostopnosti na strani (CTRL+U).
   Sistemske nastavitve (Windows »Animation effects«, macOS »Reduce motion«) ne
   upoštevamo — odločitev 2026-09-03: pri obiskovalcih je pogosto izklopljena
   zaradi zmogljivostnih nastavitev, ne zaradi potrebe po manj gibanja.
   `ams-a11y.css` že postavi animation-duration na 0 s; tu samo poskrbimo, da
   trak ne obvisi prazen, ampak je poln. */
html.ams-a11y-no-anim .ams-loader__bar-fill {
    width: 100%;
    transform: none;
}

/* ============================================================
   PROGRAM CARD — animirana burgundy črta okrog kartice na hover.
   SVG <rect> stroke-dasharray + dashoffset animacija = burgundy "snake"
   ki potuje okrog kartice. Deluje v vseh brskalnikih (brez @property
   odvisnosti). SVG inject prek ams-card-stroke.js, dimenzije sledijo
   karticam preko ResizeObserver.
   ============================================================ */

.e-con.ams-card.ams-card--program {
    isolation: isolate;
}

.ams-card-stroke {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 220ms ease;
    overflow: visible;
}

.ams-card-stroke rect {
    fill: none;
    stroke: var(--ams-burgundy-500);
    stroke-width: 3;
    stroke-linecap: round;
    /* dasharray = full perimeter, gap = full perimeter — z animacijo
       dashoffset-a nariše/zbriše točno en obhod, brez ponovitve. */
    stroke-dasharray: 100 100;
    stroke-dashoffset: -100;
    filter: drop-shadow(0 0 4px rgba(139, 0, 48, 0.35));
}

.e-con.ams-card.ams-card--program:hover .ams-card-stroke,
.e-con.ams-card.ams-card--program:focus-within .ams-card-stroke {
    opacity: 1;
}

/* Draw effect: ko hover, se črta v obratni smeri (counter-clockwise)
   nariše okrog kartice in ostane vidna, dokler hover traja. */
.e-con.ams-card.ams-card--program:hover .ams-card-stroke rect,
.e-con.ams-card.ams-card--program:focus-within .ams-card-stroke rect {
    animation: ams-card-draw 1.4s ease-out forwards !important;
}

@keyframes ams-card-draw {
    from { stroke-dashoffset: -100; }
    to   { stroke-dashoffset: 0; }
}

/* prefers-reduced-motion override je namerno opuščen — uporabnik lahko
   izklopi animacijo preko a11y widget-a "Onemogoči animacije" (CTRL+U). */

/* ============================================================
   AVDICIJE — Posebnosti smeri kartice (brez levega accent roba)
   /vpis/avdicije/  +  /en/enrolment/auditions/
   Anchor IDs deljeni med SL in EN.
   ============================================================ */

.e-con.e-parent#avd-balet,
.e-con.e-parent#avd-sodobni,
.e-con.e-parent#avd-urban,
.e-con.e-parent#avd-tekmovalni,
.e-con.e-parent#avd-jazz {
    max-width: var(--ams-container-max, 1280px);
    margin-inline: auto;
    margin-block: var(--ams-space-6, 1.5rem);
    padding-block: clamp(2rem, 4vw, 3rem);
    padding-inline: 0; /* horizontalni padding gre na neposrednega .e-child (Elementor child stretcha čez border-box) */
    border-radius: var(--ams-radius-lg, 16px);
    border: 1px solid var(--ams-gray-100, #EDE9E3);
    box-shadow:
        0 1px 2px rgba(26, 23, 21, 0.04),
        0 8px 24px rgba(26, 23, 21, 0.04);
    background-color: var(--ams-white, #fff);
    overflow: hidden; /* da rounded corners ne porežejo bg sosednjega childa */
}

/* Elementor e-child uporablja width:1280px namesto content-box → padding na parentu
   ne stoji. Padding-inline aplicirajmo na neposrednega .e-child. */
.e-con.e-parent#avd-balet > .e-con,
.e-con.e-parent#avd-sodobni > .e-con,
.e-con.e-parent#avd-urban > .e-con,
.e-con.e-parent#avd-tekmovalni > .e-con,
.e-con.e-parent#avd-jazz > .e-con {
    padding-inline: clamp(2rem, 6vw, 4.5rem);
    box-sizing: border-box;
    max-width: 100%;
}

/* Izmenjajoča barva ozadja (1, 3, 5 = cream;  2, 4 = white) */
.e-con.e-parent#avd-balet,
.e-con.e-parent#avd-urban,
.e-con.e-parent#avd-jazz {
    background-color: var(--ams-cream, #FAF7F2);
}

.e-con.e-parent#avd-sodobni,
.e-con.e-parent#avd-tekmovalni {
    background-color: var(--ams-white, #fff);
}

/* "Smer X" eyebrow — diskreten gray label */
.e-con.e-parent#avd-balet  span.elementor-heading-title,
.e-con.e-parent#avd-sodobni span.elementor-heading-title,
.e-con.e-parent#avd-urban  span.elementor-heading-title,
.e-con.e-parent#avd-tekmovalni span.elementor-heading-title,
.e-con.e-parent#avd-jazz  span.elementor-heading-title {
    display: inline-block;
    font-size: var(--ams-fs-sm, 0.875rem);
    font-weight: var(--ams-fw-regular, 400);
    letter-spacing: var(--ams-letter-wide, 0.05em);
    text-transform: uppercase;
    color: var(--ams-gray-500, #8A847B);
    margin-bottom: var(--ams-space-3, 0.75rem);
}

/* H2 reset margin (eyebrow že prevzame zgornji razmak) */
.e-con.e-parent#avd-balet  h2.elementor-heading-title,
.e-con.e-parent#avd-sodobni h2.elementor-heading-title,
.e-con.e-parent#avd-urban  h2.elementor-heading-title,
.e-con.e-parent#avd-tekmovalni h2.elementor-heading-title,
.e-con.e-parent#avd-jazz  h2.elementor-heading-title {
    margin-top: 0;
    margin-bottom: var(--ams-space-6, 1.5rem);
}

/* Mobile: skrči padding in dodaj horizontalne margin-e */
@media (max-width: 720px) {
    .e-con.e-parent#avd-balet,
    .e-con.e-parent#avd-sodobni,
    .e-con.e-parent#avd-urban,
    .e-con.e-parent#avd-tekmovalni,
    .e-con.e-parent#avd-jazz {
        /* Elementor da .e-con `width: var(--width)` = 100%. Skupaj z margin-inline
           16px je bila škatla 100% ŠIRINE + 32px margin → 16px vodoravnega
           overflowa na celotni strani (izmerjeno 2026-08-07: layout viewport se
           je s 393 raztegnil na 409 px, stran se je dala vleči vstran, vsi
           vw-based izračuni — tudi peek slider kartic — pa so računali z napačno
           širino). `width: auto` pusti margin-e znotraj razpoložljive širine. */
        width: auto !important;
        margin-inline: var(--ams-space-4, 1rem);
        padding-block: clamp(1.5rem, 5vw, 2rem);
        padding-inline: 0;
        border-radius: var(--ams-radius-md, 8px);
    }
    .e-con.e-parent#avd-balet > .e-con,
    .e-con.e-parent#avd-sodobni > .e-con,
    .e-con.e-parent#avd-urban > .e-con,
    .e-con.e-parent#avd-tekmovalni > .e-con,
    .e-con.e-parent#avd-jazz > .e-con {
        padding-inline: clamp(1.5rem, 6vw, 2.25rem);
    }
}

/* ============================================================
   MOBILE AUDIT 2026-05-28 — Paket A
   Sitewide a11y + tap-target + in-text link fixes.
   Source: 01_plan/mobile-audit-2026-05-28.md
   Scope-specific overrides (no token bump) so dark footer stays intact.
   ============================================================ */

/* P1.2 Breadcrumb contrast on cream bg (#FAF7F2): 3.46:1 -> 4.6:1 */
.ams-breadcrumbs__inner a,
a.ams-breadcrumbs__inner a {
    color: #5A544C;
}

/* P1.4 Breadcrumb tap target 44px (Apple HIG / WCAG 2.5.5) */
.ams-breadcrumbs__inner a {
    min-height: 44px;
    padding-block: 10px;
    display: inline-flex;
    align-items: center;
}
@media (max-width: 600px) {
    .ams-breadcrumbs__inner a,
    .ams-breadcrumbs__inner [aria-current="page"] {
        padding: 10px 0;
        min-height: 44px;
    }
}

/* P1.10 Curriculum table contrast on white bg */
.ams-curriculum-table thead th,
.ams-curriculum-table th.num,
.ams-curriculum-table td.num,
.ams-curriculum-table th.ects,
.ams-curriculum-table td.ects {
    color: #3D3834;
}
@media (max-width: 560px) {
    .ams-curriculum-table thead th {
        font-size: 0.8125rem;
        letter-spacing: 0.04em;
    }
}

/* P1.3 Header CTA + drawer pills 48px on mobile (border-radius:6px ostane) */
@media (max-width: 768px) {
    .ams-header__cta,
    body a.ams-btn,
    .ams-header__menu .menu-item-section-header > a {
        min-height: 48px;
        padding-block: 12px;
    }
    /* Drawer menu links + highlighted Avdicije pill (#primary-menu items) */
    .ams-header__menu li > a,
    .ams-header__nav a.ams-btn {
        min-height: 44px;
        padding-block: 10px;
    }
}

/* P1.5b Footer __legal fine-print links (GDPR, Kontakt) — 44px tap target */
.ams-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
}

/* P0.3 JotForm iframe scroll containment (pages /vpis/avdicije/, /vpis/stipendije/)
   docScrollWidth was 409/461 on 393 viewport. Force iframe to 100% + max-width. */
.ams-jotform-wrap,
.elementor-widget-html [data-jf-iframe],
.elementor-widget-shortcode iframe[src*="jotform"],
iframe[src*="jotform"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
.ams-jotform-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* P0.4 Hide visible TODO blocks (.ams-todo) for anonymous visitors.
   Pages /vpis/pogoji-vpis/ + /kontakt/ have 3+1 visible Phase-7 TODO asides.
   Editors can still see them via wp-admin or with .show-todos body class. */
.ams-todo {
    display: none !important;
}
body.show-todos .ams-todo {
    display: revert !important;
}

/* P1.14 Section eyebrow #C17D2A on white = 3.36:1 → bump to #A26519 (4.6:1).
   Audit found this on homepage + studijski-programi sub-labels. */
.ams-section__eyebrow,
.ams-eyebrow,
.elementor-heading-title.is-eyebrow {
    color: #A26519;
}

/* P1.15 Predavatelji filter chips 44px tap target on mobile */
@media (max-width: 768px) {
    .ams-pred-filters button,
    .ams-pred-filters .ams-btn,
    .ams-pred-filter,
    .ams-predavatelji-filters button {
        min-height: 44px;
        padding-block: 10px;
    }
}

/* P1.19b Heading hierarchy — auto-hide footer if next sibling is empty.
   No CSS-only fix for H1→H3 jump; left as content/template fix. */

/* ============================================================
   MOBILE UX FEEDBACK 2026-05-29
   - Drawer open: hide floating FAB + a11y trigger (drawer has own search)
   - Drawer search button: lupa + besedilo v eno vrstico
   - Lang switcher: top-right on mobile, above drawer z-index
   - /vpis/ ams-hero-pills: stack vertically + left-align padding
   ============================================================ */

/* Hide floating search FAB + a11y trigger when mobile drawer is open */
/* HEADER_BP: 1279.98 (prej 1024) — velja, dokler obstaja drawer. */
@media (max-width: 1279.98px) {
    body.ams-body--menu-open .ams-search-fab,
    body.ams-body--menu-open .ams-a11y-trigger {
        display: none !important;
    }
}

/* Drawer search button: enforce single-line flex layout, full width like
   sibling CTA pills. Drawer button uses .ams-search-trigger--in-drawer. */
.ams-search-trigger.ams-search-trigger--in-drawer {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: var(--ams-burgundy-500, #8B0030);
    font-family: inherit;
    font-size: var(--ams-fs-base, 1rem);
    font-weight: var(--ams-fw-semibold, 600);
    cursor: pointer;
    line-height: 1;
}
.ams-search-trigger.ams-search-trigger--in-drawer:hover,
.ams-search-trigger.ams-search-trigger--in-drawer:focus-visible {
    background: var(--ams-burgundy-500, #8B0030);
    color: #fff;
}
.ams-search-trigger.ams-search-trigger--in-drawer svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.ams-search-trigger.ams-search-trigger--in-drawer .ams-search-trigger__label {
    line-height: 1;
}

/* Language switcher on mobile: pin top-right, visible above drawer overlay.
   Also shrink logo on mobile so SL/EN doesn't overlap the wordmark. */
/* HEADER_BP: 1279.98 (prej 1024) — preklopnik je pripet, dokler je aktiven drawer. */
@media (max-width: 1279.98px) {
    .ams-header__container {
        position: relative;
    }
    /* --- Odmik preklopnika od burgerja (popravljeno 2026-08-13) ---
       Preklopnik je izven toka (absolute/fixed), zato ga grid `gap` NE zadene —
       razmik do burgerja mora biti izračunan iz istih količin, kot jih ima
       mreža: desni padding vsebnika + širina burgerja + želeni razmik.
       Burger sega od (rob − padding − 44 px) do (rob − padding).

       Prej je pisalo `right: 64px` in header.php je zraven dodal
       `margin-right: 10px` → skupni odmik 74 px. Potreben minimum je
       padding + 44; pri --ams-container-padding = 2rem je to 76 px, torej sta
       se elementa PREKRIVALA za 2 px. Izmerjeno (lang.right − toggle.left):
         393 px → −14   600 px → −6   768 px → +0,72   900 px → +2   1024 px → +2
       Pod ~750 px je bilo videti v redu le zato, ker padding pada s
       clamp(1rem, 4vw, 2rem) in je 74 px slučajno zadoščalo.
       Po popravku je razmik konstantnih 8 px na VSEH izmerjenih širinah
       (393 / 600 / 768 / 900 / 1024), tako z zaprtim kot z odprtim drawerjem.

       SPECIFIČNOST 0,2,0 je nujna: inline <style id="ams-lang-switcher-inline">
       v header.php ima `.ams-header__lang { margin-right: 10px }` (0,1,0), a je
       v <head> ZA to datoteko in bi pri enaki specifičnosti zmagal. Z
       `.ams-header__container` predpono je vrednost tu edini vir resnice.

       `position: fixed` (odprt drawer) meri od viewporta, ne od vsebnika —
       izid je isti, ker je --ams-container-max 1280 px in je vsebnik pod
       prelomno točko vedno čez celo širino. */
    .ams-header__container .ams-header__lang {
        position: absolute;
        top: 50%;
        right: calc(var(--ams-container-padding) + 44px + var(--ams-space-2));
        transform: translateY(-50%);
        margin-right: 0;
        z-index: 10001; /* above drawer (drawer is around 999) */
    }
    /* Ensure both SL + EN remain interactive even when drawer translates over */
    body.ams-body--menu-open .ams-header__container .ams-header__lang {
        position: fixed;
        top: 18px;
        right: calc(var(--ams-container-padding) + 44px + var(--ams-space-2));
        margin-right: 0;
        transform: none;
    }
}
@media (max-width: 600px) {
    /* Logotip je na namizju 224×56 px; na 393 px viewportu ne pusti prostora
       za pripet SL/EN preklopnik. Skrčimo ga.
       SPECIFIČNOST: to pravilo je `.ams-header__logo` (0,1,0) — enako kot novo
       namizno pravilo v sekciji HEADER. Zmaga, ker je v datoteki KASNEJE.
       Ne prestavljaj ga nad sekcijo HEADER.
       Vizualno je izid nespremenjen: `object-fit: contain` uporabi pravo
       razmerje SVG-ja (4:1), zato je logotip 170×42,5 px tako pri starih
       atributih 280×56 kot pri novih 224×56. */
    .ams-header__logo {
        max-width: 170px;
        width: auto;
        height: 48px;
        object-fit: contain;
        object-position: left center;
    }
    .ams-header__logo-link {
        height: var(--ams-logo-h);
    }
}

/* Footer link density on mobile — 52 px per link was too sparse under
   "VPIS NA AKADEMIJO ZA PLES". Tightens gap + shrinks min-height slightly
   while still hitting WCAG 2.5.5 tap target with help of vertical padding. */
@media (max-width: 768px) {
    .ams-footer__list {
        gap: 0;
    }
    .ams-footer__list a {
        min-height: 40px;
        padding-block: 8px;
    }

    /* Mobile UX 2026-06-01 → prenovljeno 2026-08-07.
       Prej: dl je bil na desktopu grid `auto minmax(0,1fr)`, kar je puščalo velike
       vodoravne vrzeli med kratko oznako ("E:") in vrednostjo, zato je bila na
       mobile-u uporabljena block-stack rešitev (oznaka kot eyebrow nad vrednostjo).
       Zdaj so pari flex vrstice, poravnane na levi rob že na vseh širinah, zato
       stack ni več potreben — footer je tudi krajši, kar je bila Mihina zahteva.
       Ostane samo malenkost tesnejši ritem vrstic. */
    .ams-footer__data {
        gap: 4px;
        margin-block: 0 var(--ams-space-3);
    }
    .ams-footer__data dd {
        font-size: var(--ams-fs-sm);
    }
}

/* /vpis/ hero pill row — stack vertically + left-align on mobile.
   User feedback: many CTAs in header (Pogoji za vpis / Prijavni postopek / Roki / Dokazila)
   need to be left-aligned, padded, and stacked instead of horizontal off-screen overflow. */
@media (max-width: 768px) {
    .ams-hero-pills {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
        padding-inline: clamp(16px, 5vw, 24px);
    }
    .ams-hero-pills .elementor-widget-button {
        width: 100%;
    }
    .ams-hero-pills .elementor-button-wrapper {
        width: 100%;
        text-align: left;
    }
    .ams-hero-pills .elementor-button {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding-inline: 18px;
    }
}

/* P1.8 REVERTED 2026-05-29 per user request — hero video should play on mobile.
   Keep elementor-background-video-container visible on all viewports. */

/* P1.5 Footer link rows + email/tel CTAs 44px on dark footer */
.ams-footer__list a,
.ams-footer__col a[href^="mailto:"],
.ams-footer__col a[href^="tel:"],
.ams-footer a[href^="mailto:"],
.ams-footer a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
    line-height: 1.4;
}

/* P1.6 Footer social icons 44x44 (was 40x40) */
.ams-footer__social a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* P1.12 In-text content links: visible underline (WCAG 1.4.1)
   Scope: only paragraph/list/heading anchors inside .ams-page__content + Elementor text/heading widgets.
   Excluded: btn pills, nav, footer (chrome-styled, not body-text). */
.ams-page__content p a,
.ams-page__content li a,
.ams-page__content td a,
.elementor-widget-text-editor p a,
.elementor-widget-text-editor li a,
.elementor-widget-heading h2 a,
.elementor-widget-heading h3 a,
.elementor-widget-heading h4 a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ams-page__content .ams-btn,
.ams-page__content .elementor-button,
.elementor-icon-list-item a,
.ams-header a,
.ams-footer a,
.ams-page__content nav a {
    text-decoration: none;
}

/* ============================================================
   PROGRAM KARTICE — 2×2 mreža za dodiplomski študij (2026-08-06)
   ============================================================
   Po ukinitvi Družabnega in Tekmovalnega plesa so 4 dodiplomski programi.
   Miha: dodiplomske kartice morajo biti VEČJE od podiplomskih (te ostanejo
   .ams-grid--3), zato 2×2 na desktopu — in ne 4 v vrsto.

   Zakaj nov modifier in ne obstoječi .ams-grid--2: tega uporablja Erasmus
   stran (mobility/dokument kartice), kjer pade na 1 stolpec že pri 768px in
   NIMA mobilnega carousela. Program kartice pa morajo obdržati carousel z
   right-bleed peek efektom (mobile audit 2026-05-28).

   Mobile pattern je identičen .ams-grid--3 / --4: levi rob kartic poravnan z
   naslovom sekcije, desno full-bleed do roba viewporta.
   Media blok je NA KONCU datoteke — pravilo #11 iz PROGRESS.md. */
.e-con.ams-grid.ams-grid--2wide {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch !important;
    width: 100%;
}
@media (max-width: 560px) {
    .e-con.ams-grid.ams-grid--2wide {
        grid-template-columns: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 24px;
    }
    .e-con.ams-grid.ams-grid--2wide::-webkit-scrollbar { display: none; }
    .e-con.ams-grid.ams-grid--2wide > .e-con.ams-card.ams-card--program {
        flex: 0 0 84vw !important;
        max-width: 84vw !important;
        min-width: 0;
        scroll-snap-align: start;
    }
}
/* ============================================================
   PROGRAM SLIDER (mobile) — simetričen bleed levo in desno (2026-08-07)
   ============================================================
   Miha: "Na desni sedaj gre čez rob, na levi pa ima nek margin … da ko scrolaš,
   da gre tudi v levi rob. Da ob scrolanju ni razlik med levo in desno."

   Prej: scroll container je imel samo `margin-right: calc(50% - 50vw)`, levi rob
   pa je ostal na robu vsebine (izmerjeno x=40 pri 393 px viewportu). Kartice so
   zato IZGINJALE 40 px od levega roba zaslona, na desni pa tekle do roba —
   vidna asimetrija med scrollanjem v levo in desno.

   Zdaj: scroll container se razširi na CEL viewport (negativni margin na obeh
   straneh), notranji padding pa ohrani prvo in zadnjo kartico poravnani z
   naslovom sekcije:
       margin-inline:  calc(50% - 50vw)   = −X  (percentage → containing block)
       padding-inline: var(--ams-slider-inset) = +X
   X = zamik vsebine od roba zaslona = 40 px (30 px padding sekcije + 10 px
   notranjega containerja). Izmerjeno enako pri 320 / 360 / 393 / 430 / 540 px na
   homepage IN na /studijski-programi/, ker sta oba paddinga fiksna v px.

   Zakaj fiksna vrednost in ne `calc(50vw - 50%)` tudi za padding: `scroll-padding`
   mora imeti ISTO vrednost, sicer scroll-snap prvo kartico potisne na x=0 namesto
   pod naslov — pri `scroll-padding` pa se odstotki po specifikaciji nanašajo na
   scrollport (ne na containing block), zato se `calc(50vw - 50%)` tam izniči v 0.
   Ena spremenljivka za oboje = padding in snap ostaneta usklajena.

   Ta blok pokriva mreže s PROGRAM karticami (inset 40 px). Vpis/alumni mreže
   (`--4`, `--3` s koraki/termini/plačili) imajo drugačen inset — glej blok
   "VPIS/ALUMNI SLIDER" takoj spodaj. */
@media (max-width: 560px) {
    .e-con.ams-grid.ams-grid--2wide,
    .e-con.ams-grid.ams-grid--3:has(> .e-con.ams-card--program) {
        /* Širina mora biti EKSPLICITNA (100vw), ne `100%` in ne `auto`:
             - `width: 100%` pripne škatlo na containing block (313 px) in negativni
               margin je ne razširi → desni rob obvisi 80 px pred robom zaslona;
             - `width: auto` pa tu ne pomeni "izračunaj iz margin", ker je grid
               FLEX ITEM v Elementor containerju → auto = max-content, torej širina
               vseh štirih kartic skupaj (izmerjeno 1448 px). To je pognalo
               vodoravni overflow in ker je 84vw/50vw vezano na layout viewport,
               še povratno zanko (mobile browser zoom-out).
           flex: 0 0 auto prepreči, da bi flex-shrink stisnil 100vw nazaj na 313 px. */
        --ams-slider-inset: 40px;
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 auto !important;
        margin-inline: calc(50% - 50vw) !important;
        padding-inline: var(--ams-slider-inset) !important;
        scroll-padding-inline: var(--ams-slider-inset);
    }
}

/* ============================================================
   VPIS/ALUMNI SLIDER (mobile) — isti slider kot program kartice (2026-08-07)
   ============================================================
   Miha: "Pri /vpis/avdicije je isti problem s scrolom kartic … trenutno niti ne
   vidim, da je več terminov avdicij, ker naslednja ni vidna dokler ne premaknem."

   Prej: `.ams-grid--4` je imel samo `margin-right: calc(50% - 50vw)` in
   `width: 100%`. Negativni margin škatle NI razširil (width:100% jo pripne na
   containing block), zato je bil scrollport 333 px, kartica pa 84vw = 330 px —
   za peek naslednje kartice je ostalo 3 px. Vizualno: en sam termin, brez
   kakršnegakoli namiga, da so štirje. Poleg tega je grid ob nalaganju razširil
   layout viewport s 393 na 409 px (isti overflow feedback loop kot pri program
   karticah), kar je stran narahlo pomanjšalo.

   Zdaj enak vzorec kot program slider zgoraj — razlaga mehanike (zakaj 100vw,
   zakaj fiksen inset in ne `calc(50vw - 50%)`) je tam, tu samo razlika:

   INSET = 30 px, ne 40 px. Program mreže na homepage / /studijski-programi/ so
   za en container globlje (30 px padding sekcije + 10 px notranjega), vpis in
   alumni mreže pa visijo neposredno v sekciji → 30 px. Izmerjeno enako na
   /vpis/, /vpis/avdicije/ in /alumni/ pri 320 / 360 / 393 / 430 / 540 px
   (paddingi so fiksni v px, zato vrednost ne pleše s širino zaslona).

   Zajete mreže: `--4` (koraki prijave, plačilni načrti, termini avdicij, alumni
   ugodnosti) in `--3` s koraki/termini/plačili. `--card--program` je namenoma
   izpuščen (drug inset), `--stack` prav tako (navpičen seznam, ne carousel). */
@media (max-width: 560px) {
    .e-con.ams-grid.ams-grid--4:not(.ams-grid--stack),
    .e-con.ams-grid.ams-grid--3:not(.ams-grid--stack):has(> .e-con.ams-step),
    .e-con.ams-grid.ams-grid--3:not(.ams-grid--stack):has(> .e-con.ams-deadline),
    .e-con.ams-grid.ams-grid--3:not(.ams-grid--stack):has(> .e-con.ams-pay) {
        --ams-slider-inset: 30px;
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 auto !important;
        margin-inline: calc(50% - 50vw) !important;
        padding-inline: var(--ams-slider-inset) !important;
        scroll-padding-inline: var(--ams-slider-inset);
    }
}

/* ==========================================================================
   JUBILEJ — plošča "10 LET / 2016–2026" v spodnjem desnem kotu heroja
   Dodano 2026-08-07, 2026-08-07 predelano iz kroga v zaobljen pravokotnik
   (radius-md = 8px, enako kot .ams-card — brand uporablja pravokotnike).
   Video ozadje ostane nedotaknjeno; plošča je Elementor container
   (.ams-hero__jubilee), da ostane urejljiva v Elementor UI.
   Contact FAB je spodaj LEVO, zato je desni kot prost.
   ========================================================================== */
.ams-hero__jubilee {
    position: absolute !important;
    right: clamp(20px, 4vw, 64px) !important;
    bottom: clamp(20px, 4vh, 56px) !important;
    z-index: 2;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    border: 1px solid rgba(245, 224, 230, 0.45) !important;
    border-radius: var(--ams-radius-md, 8px) !important;
    background: rgba(26, 23, 21, 0.32) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: none;
    animation: ams-jubilee-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both;
}
.ams-hero__jubilee > .elementor-widget { width: auto !important; margin: 0 !important; }
.ams-hero__jubilee .elementor-heading-title { margin: 0; white-space: nowrap; }

/* desni stolpec z ločnico — plošča se bere kot lockup, ne kot gumb */
.ams-hero__jubilee .ams-jubilee-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    width: auto !important;
    max-width: none !important;
    padding: 2px 0 2px 14px !important;
    border-left: 1px solid rgba(245, 224, 230, 0.30) !important;
    background: transparent !important;
}

@keyframes ams-jubilee-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
    .ams-hero__jubilee {
        gap: 12px !important;
        padding: 12px 16px !important;
    }
    .ams-hero__jubilee .ams-jubilee-meta { padding-left: 12px !important; }
    .ams-hero__jubilee .ams-jubilee-num .elementor-heading-title { font-size: 34px !important; }
    .ams-hero__jubilee .ams-jubilee-lbl .elementor-heading-title { font-size: 9px !important; }
    .ams-hero__jubilee .ams-jubilee-years .elementor-heading-title { font-size: 10px !important; }
}
/* Na mobilnem hero diha po robu — ploščo skrijemo, jubilej ostane v pillu. */
@media (max-width: 767px) {
    .ams-hero__jubilee { display: none !important; }
}
/* Vstop jubilejne plošče ustavi samo gradnik dostopnosti (glej opombo pri nalagalniku). */
html.ams-a11y-no-anim .ams-hero__jubilee { animation: none; }

/* ==========================================================================
   JUBILEJNI TRAK S ŠTEVILKAMI (.ams-jubilee-stats) — pod herojem na domači strani
   Dodano 2026-08-07. Številke odštevajo ob scrollu (assets/js/ams-stats-counter.js);
   končna vrednost je v HTML-ju, zato brez JS ali ob izklopu animacij v gradniku dostopnosti
   takoj piše prava številka.
   ========================================================================== */
.ams-jubilee-stats {
    border-bottom: 1px solid var(--ams-gray-100, #EDE9E3);
}
/* Elementor otrokom containerja privzeto da width:100% → brez tega se
   postavke zložijo ena pod drugo namesto v vrsto. */
.e-con.ams-jubilee-stats__row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.e-con.ams-jubilee-stat {
    position: relative;
    text-align: center;
    width: auto !important;
    flex: 1 1 160px !important;
    min-width: 0;
}
/* navpične ločnice med postavkami — ista govorica kot jubilejna plošča v heroju */
.e-con.ams-jubilee-stat + .e-con.ams-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 44px;
    background: var(--ams-gray-100, #EDE9E3);
}
.ams-jubilee-stat__num .elementor-heading-title {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

@media (max-width: 900px) {
    /* 5 postavk v dve vrsti (3 + 2) — ločnice bi se lomile, zato jih skrijemo */
    .e-con.ams-jubilee-stat + .e-con.ams-stat::before { display: none; }
    .e-con.ams-jubilee-stat { flex-basis: 30% !important; }
}
@media (max-width: 480px) {
    .e-con.ams-jubilee-stat { flex-basis: 44% !important; }
}

/* ==========================================================================
   GUMB NA BORDO PODLAGI (.ams-btn--onred)
   Dodano 2026-08-07. Zgoraj (vrstice ~1310) je krovno pravilo, ki VSAK
   Elementor gumb prebarva v bordo z !important — zato so avdicijski CTA gumbi
   v bordo sekcijah izginili (bordo na bordo). Nastavitve barv v Elementorju
   tega ne morejo prebiti, zato je potreben izjemni razred.
   Razred dodeli build-cta-button-contrast.php; v Elementorju je viden pod
   Advanced → CSS Classes, tako da ga urednik lahko doda tudi ročno.
   ========================================================================== */
main.ams-elementor-page .elementor-widget-button.ams-btn--onred .elementor-button-link.elementor-button,
main.ams-elementor-page .elementor-widget-button.ams-btn--onred a.elementor-button,
.ams-program-hero .elementor-widget-button.ams-btn--onred .elementor-button-link.elementor-button,
.ams-program-hero .elementor-widget-button.ams-btn--onred a.elementor-button,
.elementor-widget-button.ams-btn--onred a.elementor-button {
    background-color: #FFFFFF !important;
    color: var(--ams-burgundy-500, #8B0030) !important;
    border-color: #FFFFFF !important;
}
main.ams-elementor-page .elementor-widget-button.ams-btn--onred .elementor-button-link.elementor-button:hover,
main.ams-elementor-page .elementor-widget-button.ams-btn--onred a.elementor-button:hover,
main.ams-elementor-page .elementor-widget-button.ams-btn--onred a.elementor-button:focus-visible,
.ams-program-hero .elementor-widget-button.ams-btn--onred a.elementor-button:hover,
.ams-program-hero .elementor-widget-button.ams-btn--onred a.elementor-button:focus-visible,
.elementor-widget-button.ams-btn--onred a.elementor-button:hover,
.elementor-widget-button.ams-btn--onred a.elementor-button:focus-visible {
    background-color: var(--ams-dark-900, #1A1715) !important;
    color: #FFFFFF !important;
    border-color: var(--ams-dark-900, #1A1715) !important;
}

/* Sekundarni ("chip") gumb na bordo podlagi — ohrani hierarhijo: primarni CTA
   je poln bel (.ams-btn--onred), ti pa so prosojni z belo obrobo.
   Brez tega jih krovno pravilo iz vrstice ~1310 prebarva v bordo na bordo. */
main.ams-elementor-page .elementor-widget-button.ams-btn--onred-ghost .elementor-button-link.elementor-button,
main.ams-elementor-page .elementor-widget-button.ams-btn--onred-ghost a.elementor-button,
.ams-program-hero .elementor-widget-button.ams-btn--onred-ghost a.elementor-button,
.elementor-widget-button.ams-btn--onred-ghost a.elementor-button {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}
main.ams-elementor-page .elementor-widget-button.ams-btn--onred-ghost a.elementor-button:hover,
main.ams-elementor-page .elementor-widget-button.ams-btn--onred-ghost a.elementor-button:focus-visible,
.ams-program-hero .elementor-widget-button.ams-btn--onred-ghost a.elementor-button:hover,
.elementor-widget-button.ams-btn--onred-ghost a.elementor-button:hover,
.elementor-widget-button.ams-btn--onred-ghost a.elementor-button:focus-visible {
    background-color: #FFFFFF !important;
    color: var(--ams-burgundy-500, #8B0030) !important;
    border-color: #FFFFFF !important;
}

/* ==========================================================================
   FOOTER — poenoten navpični ritem (2026-08-10)
   Problem: tri različne višine vrstic v istem footerju —
     naslov (address)      24,5 px   (--ams-lh-loose 1.75)
     podatki 1. stolpec    22 px     (line-height 1.45 + gap 2px)
     e-pošta/tel + meni    52 px     (P1.5: min-height 44px + padding 10px + gap 8px)
   Vzrok tretjega je tap-target pravilo, ki je veljalo na VSEH napravah, ne le na dotik.

   Rešitev: ena vrstična škatla 24 px za vse besedilo v footerju. Na napravah
   z natančnim kazalcem (miška) povezave nimajo dodatnega paddinga — 24×24 px
   še vedno ustreza WCAG 2.5.8 AA. Na dotik (pointer: coarse) ostane 44 px.
   ========================================================================== */
.ams-footer {
    --ams-footer-line: 24px;
}
.ams-footer .ams-footer__address,
.ams-footer .ams-footer__data,
.ams-footer .ams-footer__data dt,
.ams-footer .ams-footer__data dd,
.ams-footer .ams-footer__list a,
.ams-footer .ams-footer__address a {
    font-size: var(--ams-fs-sm);
    line-height: var(--ams-footer-line);
}
/* vrstice tečejo v istem ritmu kot naslov — brez dodatnih vmesnih razmikov */
.ams-footer .ams-footer__data { gap: 0; }
.ams-footer .ams-footer__list { gap: 0; }

/* razmik med bloki = ena vrstica, da ritem ostane deljiv s 24 px */
.ams-footer .ams-footer__address,
.ams-footer .ams-footer__data {
    margin-bottom: var(--ams-footer-line);
}
.ams-footer .ams-footer__col > .ams-footer__data:last-child { margin-bottom: 0; }
.ams-footer h3.ams-footer__heading--small,
.ams-footer .ams-footer__heading--small {
    margin-top: var(--ams-footer-line);
}

/* Miška: brez 44 px tap targeta, ki je razbijal ritem (P1.5 velja naprej na dotik). */
@media (pointer: fine) {
    .ams-footer .ams-footer__list a,
    .ams-footer .ams-footer__col a[href^="mailto:"],
    .ams-footer .ams-footer__col a[href^="tel:"],
    .ams-footer a[href^="mailto:"],
    .ams-footer a[href^="tel:"] {
        display: inline-block;   /* inline-flex je dal 24,5 px vrstično škatlo */
        min-height: 0;
        padding-block: 0;
        line-height: var(--ams-footer-line);
        vertical-align: top;
    }
}
/* Dotik: tap target ostane 44 px, vrstice pa dobijo enak razmik v vseh stolpcih. */
@media (pointer: coarse) {
    .ams-footer .ams-footer__data,
    .ams-footer .ams-footer__list { gap: 4px; }
}
/* strut vrstice poenotimo tudi na ovojih (li podeduje 16px → line-box 25px) */
.ams-footer .ams-footer__data-row,
.ams-footer .ams-footer__list li {
    font-size: var(--ams-fs-sm);
    line-height: var(--ams-footer-line);
    min-height: var(--ams-footer-line);
}
/* Podčrtaj ob hover prek text-decoration namesto border-bottom: prozorna 1 px
   obroba je inline-block povezavi dodala 1 px in vrstica je merila 25 namesto 24. */
.ams-footer .ams-footer__data dd a {
    border-bottom: 0;
    text-decoration: none;
    text-underline-offset: 3px;
}
.ams-footer .ams-footer__data dd a:hover,
.ams-footer .ams-footer__data dd a:focus-visible {
    border-bottom: 0;
    text-decoration: underline;
}

/* ==========================================================================
   Galerija na programskih straneh — vodoravni drsnik namesto preloma v vrstico
   ==========================================================================
   Elementorjeva galerija (e-gallery) predmete postavlja ABSOLUTNO:

       .e-gallery-grid.e-gallery--animated .e-gallery-item {
           position: absolute; top: calc(…); width: var(--item-width);
       }

   Zato sam `display: flex` na vsebniku ne naredi nič — predmeti so izven toka.
   Vrniti jih je treba v tok: povoziti `position`, `top` in `width`.

   DVE PASTI, ki sta se pokazali pri meritvi (`scripts/_verify-galerija.mjs`):

   1. Razred `e-gallery--animated` knjižnica po končani animaciji ODSTRANI.
      Selektor, vezan nanj, potem neha ujemati in predmeti ostanejo brez širine
      (offsetWidth 0, galerija nevidna). Zato se vežemo na `.e-gallery-container.e-gallery-grid`,
      ki ostane — in je hkrati dovolj specifičen (0-4-0 proti 0-3-0).

   2. Širino nastavimo z `width`, ne s `flex-basis`: osnovno pravilo knjižnice je
      `flex-grow: 0; flex-shrink: 0`, otrok `.e-gallery-image` pa ima `width: 100%`.
      Ob `flex-basis: auto` se to sklene v krog in širina pade na 0.

   Pri ŠTIRIH slikah se ne pozna nič — natanko zapolnijo širino in drsnika ni.
   Drsnik se pojavi šele, ko slik ne gre več v vrsto.

   Razred `ams-gallery--scroll` je na widgetu (Elementor → Advanced → CSS Classes),
   da je poseg viden uredniku in ne velja za vse galerije na strani.               */

.ams-gallery--scroll .e-gallery-container.e-gallery-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    gap: 10px;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 23, 21, .28) transparent;
}

.ams-gallery--scroll .e-gallery-container.e-gallery-grid .e-gallery-item {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: calc((100% - 30px) / 4);
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .ams-gallery--scroll .e-gallery-container.e-gallery-grid .e-gallery-item {
        width: calc((100% - 10px) / 2);
    }
}

@media (max-width: 767px) {
    /* del naslednje slike ostane viden — namig, da se da drseti */
    .ams-gallery--scroll .e-gallery-container.e-gallery-grid .e-gallery-item {
        width: 82%;
    }
}

.ams-gallery--scroll .e-gallery-container.e-gallery-grid::-webkit-scrollbar {
    height: 6px;
}

.ams-gallery--scroll .e-gallery-container.e-gallery-grid::-webkit-scrollbar-track {
    background: transparent;
}

.ams-gallery--scroll .e-gallery-container.e-gallery-grid::-webkit-scrollbar-thumb {
    background: rgba(26, 23, 21, .28);
    border-radius: 999px;
}

/* ==========================================================================
   Elementor vsebniki: trda širina ne sme moleti čez okno
   ==========================================================================
   Vsebniki so bili zgrajeni z nastavitvijo Width = 1280 px, kar Elementor izpiše
   kot `width: 1280px` — trda širina, ki se pod 1280 px NE skrči. Posledica: v pasu
   768–1200 px je cela stran dobila vodoravni drsnik (npr. /vpis/ 1162 px pri oknu
   1024 px). Pravilna nastavitev bi bila Max Width, a je vgrajena v desetine
   vsebnikov na vseh straneh in v build skripte.

   `max-width: 100%` je varovalka: nad 1280 px ne spremeni ničesar (100 % starša je
   takrat širše od 1280), pod 1280 px pa vsebnik skrči na razpoložljivo širino.

   Merjeno z `scripts/_verify-sirine.mjs`.                                       */

.elementor .e-con,
.elementor .e-con-inner {
    max-width: 100%;
}

/* ==========================================================================
   Hero na naslovnici: vsebina v isti širini kot ostala stran
   ==========================================================================
   Notranji blok heroja ima v Elementorju `content_width: full`, zato shranjena
   nastavitev Width = 1280 px ne velja — blok se je raztegnil čez celo okno. Pri
   1900 px je odstavek meril 1740 px (predolga vrstica za branje), napis pa je
   visel ob levem robu, medtem ko se vse druge sekcije ustavijo pri 1280 px.

   Namesto omejevanja bloka širimo PADDING sekcije: video v ozadju ostane poln po
   širini okna, vsebina (napis, gumbi in značka „10 let") pa se poravna v isti
   1280 px stolpec kot preostala stran. Pod 1344 px se vrne na 32 px, torej se na
   prenosnikih in telefonih ne spremeni nič.

   `!important` je nujen: Elementor svoje `--padding-left/right` zapiše s
   selektorjem `.elementor-47 .elementor-element.elementor-element-c7795ab`
   (specifičnost 0-3-0), razred pa je 0-1-0. Brez tega se pravilo tiho ne prime —
   prva različica tega bloka se ni poznala in je to pokazala šele meritev.

   Izmerjeno s `scripts/_verify-hero.mjs`.                                      */

.ams-hero--boxed {
    --padding-left: max(32px, calc((100% - var(--ams-container-max)) / 2)) !important;
    --padding-right: max(32px, calc((100% - var(--ams-container-max)) / 2)) !important;
}

/* ==========================================================================
   RAZMIKI V BESEDILU IN KARTICAH AVDICIJ (2026-09-03)
   ==========================================================================
   Izmerjeno na /vpis/avdicije/ (in enako na /vpis/, /o-nas/):
   1) Seznam v besedilnem gradniku ima margin-bottom 0, naslednji odstavek pa
      margin-top 0 → „Prvi del preizkusa" se lepi na seznam nad njim, medtem ko
      imajo odstavki med sabo 16 px. Seznam, ki ni zadnji v gradniku, dobi isti
      razmik kot odstavek.
   2) V karticah „Posebnosti smeri" sta oznaka smeri in naslov v ugnezdenem
      vsebniku z Elementorjevim privzetim 10 px odmikom, besedilo pa je
      neposredni otrok → naslov je 10 px bolj desno od besedila (163 : 153).
   Brez media poizvedb — pravilo 11 (media bloki ostanejo na koncu) ne velja. */
.elementor-widget-text-editor ul:not(:last-child),
.elementor-widget-text-editor ol:not(:last-child) {
    margin-bottom: var(--ams-space-4, 1rem);
}
.e-con.e-parent[id^="avd-"] > .e-con > .e-con {
    padding-inline: 0 !important;
}

/* ==========================================================================
   ZAKLJUČEK ŠTUDIJA — plošče (2026-09-03), vzor almamater.si/zakljucna-dela
   ==========================================================================
   Mreža 2 stolpca (telefon 1), ploščica = naslov levo + puščica v krogu desno.
   Bela na kremni podlagi, nevtralna obroba, ob hoverju dvig in senca; barva
   samo na puščici (interaktivni element). Gradi build-studenti.php. */
.e-con.ams-tile-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}
@media (max-width: 640px) {
    .e-con.ams-tile-grid { grid-template-columns: 1fr; }
}
.e-con.ams-tile {
    flex-direction: row !important;
    flex-wrap: nowrap !important;      /* telefon: Elementor sicer dovoli prelom → puščica pade pod naslov */
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 96px;
    text-decoration: none;
    transition: transform var(--ams-transition), box-shadow var(--ams-transition);
}
.e-con.ams-tile:hover,
.e-con.ams-tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--ams-shadow-md);
}
.e-con.ams-tile > .elementor-widget { width: auto !important; margin: 0 !important; }
.e-con.ams-tile > .elementor-widget.ams-tile__title { flex: 1 1 0%; min-width: 0; }
.e-con.ams-tile > .elementor-widget.ams-tile__arrow { flex: 0 0 auto; }
.e-con.ams-tile .ams-tile__title .elementor-heading-title { margin: 0; }
.e-con.ams-tile .ams-tile__arrow .elementor-heading-title {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--ams-burgundy-500);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--ams-burgundy-500);
    transition: background-color var(--ams-transition), color var(--ams-transition);
}
.e-con.ams-tile:hover .ams-tile__arrow .elementor-heading-title,
.e-con.ams-tile:focus-visible .ams-tile__arrow .elementor-heading-title {
    background: var(--ams-burgundy-500);
    color: #FFFFFF;
}

/* ==========================================================================
   KAZALO RAZDELKOV (.ams-toc) — navodila za diplomiranje (2026-09-03)
   ==========================================================================
   Besedilni gradnik z <ul> povezav na sidra. Namesto podčrtanega seznama:
   ploščice v slogu vpisnih pill gumbov (radij 6 px, nevtralna obroba), z
   oštevilčenjem prek CSS števca; barva samo ob hoverju/fokusu. */
.elementor-widget.ams-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    counter-reset: ams-toc;
}
.elementor-widget.ams-toc li { margin: 0; padding: 0; }
.elementor-widget-text-editor.ams-toc li a,
.elementor-widget.ams-toc li a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--ams-gray-300);
    border-radius: 6px;
    background: var(--ams-white);
    color: var(--ams-gray-900);
    font-size: 0.875rem;
    font-weight: var(--ams-fw-semibold);
    line-height: 1.3;
    text-decoration: none;
    transition: border-color var(--ams-transition), color var(--ams-transition), background-color var(--ams-transition);
}
.elementor-widget.ams-toc li a::before {
    counter-increment: ams-toc;
    content: counter(ams-toc, decimal-leading-zero);
    font-size: 0.75rem;
    font-weight: var(--ams-fw-bold);
    color: var(--ams-gray-500);
    font-variant-numeric: tabular-nums;
}
.elementor-widget.ams-toc li a:hover,
.elementor-widget.ams-toc li a:focus-visible {
    border-color: var(--ams-burgundy-500);
    color: var(--ams-burgundy-500);
}
.elementor-widget.ams-toc li a:hover::before,
.elementor-widget.ams-toc li a:focus-visible::before { color: var(--ams-burgundy-500); }

/* ==========================================================================
   RAZDELKI NAVODIL V KARTICAH (.ams-card--section) — 2026-09-03
   ==========================================================================
   Vsak razdelek navodil za diplomiranje je samostojna bela kartica na kremni
   podlagi: nevtralna 1 px obroba, radij 14 px in izrazitejša senca s toplim
   podtonom; brez dviga ob hoverju (ni interaktivna). Gradi build-studenti.php. */
.e-con.ams-card.ams-card--section {
    border: 1px solid rgba(26, 23, 21, 0.06) !important;
    box-shadow:
        0 1px 2px rgba(26, 23, 21, 0.04),
        0 10px 30px rgba(26, 23, 21, 0.08),
        0 32px 56px -32px rgba(26, 23, 21, 0.16);
    overflow: visible;
}
.e-con.ams-card.ams-card--section:hover,
.e-con.ams-card.ams-card--section:focus-visible {
    transform: none;
    border-color: rgba(26, 23, 21, 0.06) !important;
    box-shadow:
        0 1px 2px rgba(26, 23, 21, 0.04),
        0 10px 30px rgba(26, 23, 21, 0.08),
        0 32px 56px -32px rgba(26, 23, 21, 0.16);
}
.e-con.ams-card--section .elementor-heading-title { margin: 0 0 4px; }
.e-con.ams-card--section h3 { font-size: 1.0625rem; margin: 1.25rem 0 0.5rem; }
.e-con.ams-card.ams-card--section { border-radius: 14px !important; }

/* ==========================================================================
   VPIS ZA OBSTOJEČE ŠTUDENTE — razdelki kot senčene kartice (2026-09-03)
   ==========================================================================
   Stran (SL #21, EN #14361; build-vpis-obstojeci-page.php) ima razdelke kot
   polnoširinske sekcije z izmenjujočim ozadjem in sidri obs-*. Za doslednost z
   navodili za diplomiranje jih CSS pretvori v bele kartice na kremni podlagi:
   isti radij, obroba in senca kot .ams-card--section. Elementor podatki ostanejo. */
main.ams-elementor-page:has(> .elementor > .e-parent[id^="obs-"]) { background: var(--ams-cream); }
main .e-con.e-parent[id^="obs-"] {
    width: min(100% - 32px, var(--ams-container-max)) !important;
    max-width: none;
    margin: 0 auto 20px !important;
    padding: 40px 40px !important;
    background: var(--ams-white) !important;
    border: 1px solid rgba(26, 23, 21, 0.06);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(26, 23, 21, 0.04),
        0 10px 30px rgba(26, 23, 21, 0.08),
        0 32px 56px -32px rgba(26, 23, 21, 0.16);
    scroll-margin-top: 96px;
}
main .e-con.e-parent[id^="obs-"]:first-of-type,
main .elementor > .ams-program-hero + .e-con.e-parent[id^="obs-"] { margin-top: 32px !important; }
main .e-con.e-parent[id^="obs-"]:last-of-type { margin-bottom: 40px !important; }
main .e-con.e-parent[id^="obs-"] > .e-con,
main .e-con.e-parent[id^="obs-"] > .e-con > .e-con { padding-inline: 0 !important; } /* ugnezden vsebnik naslova: brez privzetih 10 px */
@media (max-width: 767px) {
    main .e-con.e-parent[id^="obs-"] { padding: 24px 20px !important; margin-bottom: 14px !important; }
}