/* ------------------------------------------------------------ OPEN DAY PAGE
   Styles for layouts/open-day.htm. Scoped to .od-* so nothing here reaches
   the rest of the theme. Section backgrounds reuse the site's own section--*
   classes; colours and the triangle marker echo the anniversary dialog. */

.open-day main { overflow: hidden; }

/* The sticky header is ~72px tall: anchors (#prijava, #o-dogodku) stop short
   of it so the section heading is not hidden underneath. */
.open-day main section[id] { scroll-margin-top: 96px; }
@media (max-width: 900px) { .open-day main section[id] { scroll-margin-top: 84px; } }

.od-h2 {
    margin: 0 0 18px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
}

/* Shared button, same inversion on hover as every other button on the site. */
.od-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    background: var(--njorka-light-blue, #56c9f4);
    color: #fff;
    border: 1px solid transparent;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.od-btn i { font-size: 1.1rem; line-height: 1; transition: transform .3s var(--ease-standard, ease); }
.od-btn:hover, .od-btn:focus-visible {
    background: #fff;
    border-color: var(--njorka-light-blue, #56c9f4);
    color: var(--njorka-light-blue, #56c9f4);
    text-decoration: none;
}
.od-btn:hover i { transform: translateX(4px); }
.od-btn:disabled { opacity: .6; pointer-events: none; }
.od-btn.is-loading i { animation: od-spin .8s linear infinite; }
@keyframes od-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- HERO */
.od-hero { padding: 96px 24px 80px; }
.od-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.od-hero__eyebrow {
    margin: 0 0 14px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--njorka-light-blue, #56c9f4);
}
.od-hero__title {
    margin: 0;
    font-size: clamp(2.3rem, 5.2vw, 3.6rem);
    line-height: 1.05;
    text-transform: uppercase;
}
.od-hero__lead {
    margin: 22px 0 0;
    max-width: 560px;
    font-size: 1.15rem;
    line-height: 1.65;
    opacity: .9;
}
.od-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 32px; }
.od-hero__more { color: rgba(255, 255, 255, .8); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.od-hero__more:hover { color: #fff; border-color: #fff; }

/* The fact card: date, place, free entry, under a big "20 let". */
.od-hero__card {
    padding: 28px 30px 26px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(2px);
}
.od-years { display: flex; align-items: baseline; gap: 12px; line-height: .85; margin-bottom: 22px; }
.od-years__num {
    font-size: 88px;
    font-weight: 700;
    letter-spacing: -.04em;
    background: linear-gradient(160deg, #fff 0%, var(--njorka-light-blue, #56c9f4) 55%, #f9a72b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .06em;
}
.od-years__let { font-size: 22px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--njorka-light-blue, #56c9f4); }
.od-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.od-facts li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.od-facts i { font-size: 1.4rem; line-height: 1; color: var(--njorka-light-blue, #56c9f4); margin-top: 2px; }
.od-facts strong { display: block; font-weight: 600; line-height: 1.35; color: #fff; }
.od-facts span { display: block; font-size: .92rem; line-height: 1.45; opacity: .78; }

/* ---------------------------------------------------------------- ABOUT */
.od-about { padding: 80px 24px; }
.od-about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
}
.od-about__col--card {
    padding: 36px 40px;
    background: var(--color-surface, #f8f9fa);
    border-left: 3px solid var(--njorka-light-blue, #56c9f4);
}
.od-checks { margin: 0; padding: 0; list-style: none; }
.od-checks li {
    position: relative;
    padding: 14px 0 14px 36px;
    border-top: 1px solid var(--njorka-light-gray, #e0e1e1);
    font-size: 1.05rem;
    line-height: 1.55;
}
.od-checks li:last-child { border-bottom: 1px solid var(--njorka-light-gray, #e0e1e1); }
/* The same triangle marker the careers page and the dialog use. */
.od-checks li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 24px;
    width: 0;
    height: 0;
    border-left: 7px solid var(--njorka-light-blue, #56c9f4);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.od-prose { font-size: 1.05rem; line-height: 1.7; }
.od-prose p { margin: 0 0 14px; }
.od-prose p:last-child { margin-bottom: 0; }
.od-prose--why { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--njorka-light-gray, #e0e1e1); color: #46586c; }

/* --------------------------------------------------------------- SLOTS */
.od-slots { padding: 80px 24px; text-align: center; }
.od-slots__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.od-slots__text { max-width: 640px; margin: 0 auto 36px; font-size: 1.08rem; line-height: 1.65; color: #46586c; }
/* Dark brand ground like the hero and the dialog: the triangles stay faint
   (the theme's section--triangles-dark runs them at 20%), copy is white, and
   the two white cards carry the times. */
.od-slots .od-slots__text, .od-slots .od-slots__program { color: rgba(255, 255, 255, .85); }
.od-slot { border-color: transparent; }
.od-slots__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.od-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 30px 32px;
    background: #fff;
    border: 1px solid var(--njorka-light-gray, #e0e1e1);
    border-top: 4px solid var(--njorka-light-blue, #56c9f4);
    color: var(--njorka-dark-blue, #0e2032);
    text-align: left;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(14, 32, 50, .06);
    transition: transform .3s var(--ease-standard, ease), box-shadow .3s ease;
}
/* The dark section forces white text on everything inside it (!important), so
   the white cards pin their own colours, on hover too, instead of inheriting. */
.od-slots .od-slot, .od-slots .od-slot:hover, .od-slots .od-slot:focus-visible { color: var(--njorka-dark-blue, #0e2032) !important; }
.od-slots .od-slot__time, .od-slots .od-slot__name { color: var(--njorka-dark-blue, #0e2032) !important; }
.od-slots .od-slot__cta { color: var(--njorka-light-blue, #56c9f4) !important; }
.od-slot:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14, 32, 50, .12); text-decoration: none; }
.od-slot__time { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.od-slot__name { font-size: 1.05rem; font-weight: 600; }
.od-slot__cta { margin-top: 10px; font-size: .95rem; color: var(--njorka-light-blue, #56c9f4); }
/* Seats left under the session name; turns amber when few remain, grey "Zasedeno" when none. */
.od-slot__seats { font-size: .9rem; font-weight: 600; color: #3a9c6b !important; }
.od-slot__seats--low { color: #c47a00 !important; }
.od-slot__seats--full { color: #8a97a4 !important; margin-top: 10px; }
.od-slot--full { cursor: default; opacity: .72; border-top-color: #b8c2cc; }
.od-slot--full:hover { transform: none; box-shadow: 0 10px 30px rgba(14, 32, 50, .06); }
.od-slot--full .od-slot__time { text-decoration: line-through; text-decoration-color: #b8c2cc; text-decoration-thickness: 2px; }
.od-slots__program { max-width: 640px; margin: 32px auto 0; font-size: 1rem; line-height: 1.6; color: #46586c; }

/* ---------------------------------------------------------------- FORM */
.od-form { padding: 80px 24px 96px; }
.od-form__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 56px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}
.od-form__intro p { font-size: 1.05rem; line-height: 1.65; color: #46586c; }
.od-form__contact { padding-top: 16px; border-top: 1px solid var(--njorka-light-gray, #e0e1e1); font-size: .95rem; }

.od-reg {
    padding: 36px;
    background: #fff;
    border: 1px solid var(--njorka-light-gray, #e0e1e1);
    box-shadow: 0 16px 48px rgba(14, 32, 50, .08);
}
/* The spam decoy from the shared guard partial: off-screen, never display:none. */
.od-reg .lead-magnet__decoy { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.od-reg { position: relative; }
.od-reg__group { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.od-reg__legend { padding: 0; margin: 0 0 10px; font-size: .95rem; font-weight: 600; }
.od-reg__legend em, .od-reg__field em { font-style: normal; font-weight: 400; color: #8a97a4; }

.od-reg__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.od-reg__slot { position: relative; display: block; cursor: pointer; }
.od-reg__slot input { position: absolute; opacity: 0; inset: 0; }
/* Reads as a choice, not a label: cursor, hover lift, and the picked one
   outlined and tinted blue with a check mark. */
.od-reg__slot span {
    position: relative;
    display: block;
    padding: 14px 44px 14px 16px;
    border: 1px solid var(--njorka-light-gray, #e0e1e1);
    background: #fff;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.od-reg__slot:hover span { border-color: var(--njorka-light-blue, #56c9f4); box-shadow: 0 6px 18px rgba(14, 32, 50, .08); transform: translateY(-1px); }
.od-reg__slot strong { display: block; font-weight: 600; }
.od-reg__slot small { display: block; margin-top: 2px; font-size: .85rem; color: #8a97a4; }
.od-reg__seats { display: block; margin-top: 6px; font-size: .82rem; font-style: normal; font-weight: 600; color: #3a9c6b; }
.od-reg__seats--low { color: #c47a00; }
.od-reg__seats--full { color: #8a97a4; }
.od-reg__slot--full { cursor: not-allowed; }
.od-reg__slot--full span { background: var(--color-surface, #f8f9fa); color: #8a97a4; }
.od-reg__slot--full:hover span { border-color: var(--njorka-light-gray, #e0e1e1); box-shadow: none; transform: none; }
.od-reg__slot--full strong { text-decoration: line-through; }
.od-reg__slot input:checked + span { border-color: var(--njorka-light-blue, #56c9f4); background: rgba(86, 201, 244, .08); box-shadow: inset 0 0 0 1px var(--njorka-light-blue, #56c9f4); }
.od-reg__slot input:checked + span::after {
    content: "\2713";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--njorka-light-blue, #56c9f4);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}
.od-reg__slot input:focus-visible + span { outline: 2px solid var(--njorka-light-blue, #56c9f4); outline-offset: 2px; }

.od-reg__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.od-reg__field { display: block; }
.od-reg__field > span { display: block; margin-bottom: 6px; font-size: .95rem; font-weight: 600; }
.od-reg__field input, .od-reg__field textarea {
    width: 100%;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--njorka-light-gray, #e0e1e1);
    font: inherit;
    font-size: 1rem;
    background: #fff;
    color: inherit;
}
.od-reg__field textarea { resize: vertical; }
.od-reg__field input:focus, .od-reg__field textarea:focus { outline: none; border-color: var(--njorka-light-blue, #56c9f4); }
.od-reg__field + .od-reg__group, .od-reg__row + .od-reg__group { margin-top: 22px; }

.od-reg__modules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.od-reg__check { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.4; cursor: pointer; }
.od-reg__check input { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--njorka-light-blue, #56c9f4); cursor: pointer; }

.od-reg__consent { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; font-size: .95rem; line-height: 1.5; cursor: pointer; }
.od-reg__consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--njorka-light-blue, #56c9f4); }
.od-reg__consent a { color: var(--njorka-light-blue, #56c9f4); text-decoration: underline; }
.od-reg__recaptcha { margin: 18px 0 0; }

.od-reg__error { margin: 18px 0 0; padding: 12px 14px; background: #fdecea; color: #b3261e; font-size: .95rem; }
.od-reg .is-invalid input, .od-reg .is-invalid textarea, .od-reg .is-invalid .od-reg__slot span { border-color: #d9534f; }
.od-reg__actions { margin-top: 24px; }

.od-reg__success, .od-reg__closed { text-align: center; padding: 56px 36px; }
.od-reg__success i { font-size: 3rem; color: var(--njorka-light-blue, #56c9f4); }
.od-reg__success h3, .od-reg__closed h3 { margin: 14px 0 10px; font-size: 1.5rem; }
.od-reg__success p, .od-reg__closed p { margin: 0 auto; max-width: 440px; font-size: 1.05rem; line-height: 1.6; color: #46586c; }
.od-reg__warning { margin-top: 14px !important; color: #b3261e !important; font-size: .95rem !important; }

/* --------------------------------------------------------------- PHONES */
@media (max-width: 900px) {
    .od-hero { padding: 72px 20px 56px; }
    .od-hero__inner, .od-about__inner, .od-form__inner { grid-template-columns: 1fr; gap: 32px; }
    .od-hero__card { padding: 22px 22px 20px; }
    .od-years__num { font-size: 68px; }
    .od-about, .od-slots, .od-form { padding: 56px 20px; }
    .od-about__col--card { padding: 26px 24px; }
    .od-slots__grid { grid-template-columns: 1fr; }
    .od-slot { padding: 22px 24px; }
    .od-slot__time { font-size: 2.1rem; }
    .od-reg { padding: 24px 20px; }
    .od-reg__row, .od-reg__slots, .od-reg__modules { grid-template-columns: 1fr; }
    .od-btn--submit { width: 100%; justify-content: center; }
}