/*
 * "Formularz 2 kolumny" page layout (Figma: ULA-REDES-PRES-1, node 722:761).
 * Everything is scoped under .form-split so other layouts stay untouched.
 * Lexend is self-hosted (SIL Open Font License 1.1).
 */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('../Fonts/Lexend/lexend-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('../Fonts/Lexend/lexend-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.form-split {
    --fs-navy: #003052;
    --fs-black: #0a0a0a;
    --fs-gray-04: #4f5b67;
    --fs-gray-03: #7b8794;
    --fs-white: #f5f5f5;
    --fs-red: #e40100;
    --fs-field-bg: rgba(255, 255, 255, 0.75);

    /* Body text and consent labels. Larger than the Figma file (14px/1.2,
       12px): editors kept enlarging them with inline <style> elements
       (WEiZ, ACAMS, Investment Lab), which also broke the dark palette. */
    --fs-body-size: 16px;
    --fs-body-line-height: 1.5;
    --fs-check-size: 14px;
    --fs-check-line-height: 1.5;
    /* bootstrap_package frames take their text colour from this; resolves
       per colour scheme because --fs-gray-04 does */
    --frame-color: var(--fs-gray-04);

    display: flex;
    min-height: 100vh;
    background: #fff;
    color: var(--fs-black);
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
}

/* Adaptacja (lazarski_adaptacja_sitepackage) reuses this file and was laid
   out at the original sizes; keep them there. unset = inherit, which is how
   --frame-color behaved before .form-split set it. */
.form-split--adaptacja {
    --fs-body-size: 14px;
    --fs-body-line-height: 1.2;
    --fs-check-size: 12px;
    --fs-check-line-height: 1.4;
    --frame-color: unset;
}

/* --- Left panel ------------------------------------------------------- */

.form-split__panel {
    position: relative;
    display: flex;
    flex: 0 0 50%;
    flex-direction: column;
    justify-content: space-between;
    max-width: 50%;
    padding: 64px 128px;
    overflow: hidden;
    background: #fff;
}

.form-split__content {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 64px;
    padding-bottom: 12px;
}

/* not the popup: a modal <dialog> must keep the UA's position: fixed, or
   showModal() focuses the close button at the top of the page and scrolls there */
.form-split__content > :not(.form-split__decor, .form-split__popup) {
    position: relative;
    z-index: 1;
}

.form-split__decor {
    position: absolute;
    inset: -25.21% -155.26% -147.44% -24.01%;
    z-index: 0;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.form-split__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-split__language {
    display: flex;
    justify-content: flex-end;
    min-height: 1px;
}

.form-split__language-link {
    padding: 8px 24px;
    border: 1px solid var(--fs-navy);
    border-radius: 4px;
    background: var(--fs-field-bg);
    color: var(--fs-navy);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.form-split__language-link:hover,
.form-split__language-link:focus-visible {
    background: var(--fs-navy);
    color: var(--fs-white);
}

.form-split__logo {
    display: block;
    width: 200px;
    height: auto;
}

/* --- Content column (text + powermail) -------------------------------- */

.form-split__main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 24px;
}

.form-split__main .section,
.form-split__main .frame,
.form-split__main .frame-group-container,
.form-split__main .frame-group-inner,
.form-split__main .frame-container,
.form-split__main .frame-inner,
.form-split__main .tx-powermail .container-fluid {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
}

.form-split__main .frame + .frame {
    margin-top: 24px;
}

.form-split__main h1,
.form-split__main h2,
.form-split__main h3,
.form-split__main h4 {
    margin: 0 0 12px;
    color: var(--fs-black);
    font-family: inherit;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
}

/* headings inside body text step down from the 28px page title */
.form-split__main h2 {
    font-size: 20px;
    line-height: 1.2;
}

.form-split__main h3 {
    font-size: 17px;
    line-height: 1.25;
}

.form-split__main h4 {
    font-size: 15px;
    line-height: 1.3;
}

.form-split__main :is(p, ul, ol) + :is(h2, h3, h4) {
    margin-top: 20px;
}

/* RTE often wraps a whole heading in <strong>; keep the heading weight */
.form-split__main :is(h1, h2, h3, h4) :is(strong, b) {
    font-weight: inherit;
}

/* body-text lists only: lists with a class are components (e.g. the
   adaptacja programme cards) and set their own spacing */
.form-split__main p,
.form-split__main :is(ul, ol):not([class]) {
    margin: 0 0 12px;
    color: var(--fs-gray-04);
    font-size: var(--fs-body-size);
    line-height: var(--fs-body-line-height);
}

.form-split__main :is(ul, ol):not([class]) {
    padding-left: 20px;
}

.form-split__main :is(ul, ol):not([class]) > li + li {
    margin-top: 6px;
}

.form-split__main a {
    color: var(--fs-navy);
}

/* bootstrap_package colours plain links in content frames via
   .frame a:not([class]) (higher specificity); feed it the layout colour */
.form-split__main .frame {
    --frame-link-color: var(--fs-navy);
    --frame-link-hover-color: var(--fs-navy);
}

/* thank-you page (powermail create action): no fields left, so no note */
.form-split__content:not(:has(.powermail_form)) .form-split__required {
    display: none;
}

/* powermail: flatten its rows/break spacers into one two-column flex row */
.form-split .powermail_form > h3,
.form-split .powermail_legend {
    display: none;
}

.form-split .powermail_fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-split .powermail_fieldset > .row {
    display: contents;
}

/* two per row: half the row minus half the 24px gap (else the input's
   intrinsic ~200px width decides) */
.form-split .powermail_fieldwrap {
    flex: 0 0 calc(50% - 12px);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.form-split .powermail_fieldwrap_type_check,
.form-split .powermail_fieldwrap_type_radio,
.form-split .powermail_fieldwrap_type_submit,
.form-split .powermail_fieldwrap_type_textarea,
.form-split .powermail_fieldwrap_type_text,
.form-split .powermail_fieldwrap_type_content,
.form-split .powermail_fieldwrap_type_file,
.form-split .powermail_fieldwrap.col-md-12 {
    flex-basis: 100%;
}

.form-split .powermail_label {
    margin-bottom: 4px;
    color: var(--fs-gray-04);
    font-size: 14px;
    font-weight: 300;
}

.form-split .powermail_label .mandatory,
.form-split__required span {
    color: var(--fs-red);
}

.form-split .form-control,
.form-split .form-select {
    width: 100%;
    min-height: 0;
    padding: 12px 16px;
    border: 1px solid var(--fs-navy);
    border-radius: 4px;
    background-color: var(--fs-field-bg);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: none;
    color: var(--fs-black);
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

.form-split select.form-control {
    padding-right: 40px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23003052' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}

.form-split select.form-control.is-placeholder {
    color: var(--fs-gray-04);
}

.form-split .form-control::placeholder {
    color: var(--fs-gray-04);
    opacity: 1;
}

.form-split .form-control:focus {
    border-color: var(--fs-navy);
    outline: 2px solid var(--fs-navy);
    outline-offset: 1px;
    box-shadow: none;
}

/* locked by student-prefill.js (values from the university login) */
.form-split .form-control[readonly] {
    border-style: dashed;
    color: var(--fs-gray-04);
    cursor: default;
}

/* label moved into the field by form-split.js; kept for screen readers.
   File inputs have no placeholder, so their label stays visible. */
.form-split .form-split--inline-labels .powermail_fieldwrap:not(.powermail_fieldwrap_type_check):not(.powermail_fieldwrap_type_radio):not(.powermail_fieldwrap_type_file) > .powermail_field > .powermail_label,
.form-split .form-split--inline-labels .powermail_fieldwrap_type_check > .powermail_field > .powermail_label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-split .form-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}

.form-split .form-check-input {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 3px 0 0;
    border: 1px solid var(--fs-navy);
    border-radius: 2px;
    background-color: #e9e9e9;
}

.form-split .form-check-input:checked {
    background-color: var(--fs-navy);
}

.form-split .form-check-label {
    color: var(--fs-black);
    font-size: var(--fs-check-size);
    line-height: var(--fs-check-line-height);
}

.form-split .powermail_fieldwrap_type_submit .btn,
.form-split .powermail_fieldwrap_type_submit input[type='submit'] {
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 4px;
    background: var(--fs-navy);
    color: var(--fs-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}

.form-split .powermail_fieldwrap_type_submit .btn:hover,
.form-split .powermail_fieldwrap_type_submit .btn:focus-visible {
    background: #00223a;
}

.form-split .powermail_field_error_container,
.form-split .invalid-feedback,
.form-split .powermail-errors-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: var(--fs-red);
    font-size: 12px;
    line-height: 1.4;
}

.form-split .form-control.powermail_field_error {
    border-color: var(--fs-red);
}

/* powermail_limits info box ("Obowiązuje limit zgłoszeń"). Bootstrap's alert
   tints are fixed light colours, unreadable under the dark palette, so draw it
   like a field. Editors may put the whole message into the header label and
   blank the rest via _LOCAL_LANG; the empty tags would leave gaps. */
.form-split .powermail_fieldset_limit {
    /* own fieldset before the form's; the 24px gap only works inside one */
    margin-bottom: 24px;
}

.form-split .powermail_fieldset_limit .alert {
    flex-basis: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--fs-navy);
    border-radius: 4px;
    background: var(--fs-field-bg);
    color: var(--fs-black);
}

/* limit reached: waiting list only, or closed */
.form-split .powermail_fieldset_limit .alert-danger {
    border-color: var(--fs-red);
}

.form-split .powermail_fieldset_limit .alert :is(h2, p) {
    margin: 0;
    color: inherit;
    font-size: var(--fs-body-size);
    line-height: var(--fs-body-line-height);
}

.form-split .powermail_fieldset_limit .alert h2 {
    font-weight: 600;
}

.form-split .powermail_fieldset_limit .alert > :is(h2, p) + :is(h2, p) {
    margin-top: 8px;
}

.form-split .powermail_fieldset_limit .alert :is(h2, p):empty {
    display: none;
}

/* --- Meta + footer ------------------------------------------------------ */

.form-split__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.form-split__meta p {
    margin: 0;
}

.form-split__privacy a {
    color: var(--fs-navy);
    font-weight: 500;
    text-decoration: none;
}

.form-split__privacy a:hover {
    text-decoration: underline;
}

.form-split__footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fs-gray-03);
}

.form-split__address {
    margin: 0;
    font-size: 14px;
    font-style: normal;
    line-height: 1.4;
}

.form-split__address strong {
    font-size: 16px;
    font-weight: 600;
}

.form-split__www {
    color: var(--fs-navy);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

/* --- Right photo ------------------------------------------------------- */

.form-split__media {
    position: sticky;
    top: 0;
    flex: 0 0 50%;
    height: 100vh;
    overflow: hidden;
    background: #7b7b7b;
}

/* crop box taken from Figma (frame 960x1080); cover keeps other viewport ratios undistorted */
.form-split__photo {
    position: absolute;
    top: -67.78%;
    left: -32.26%;
    display: block;
    width: 133.76%;
    max-width: none;
    height: 178.77%;
    object-fit: cover;
}

.form-split__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* --- Smaller screens ---------------------------------------------------- */

.form-split__footer-logo {
    display: none;
}

@media (max-width: 1399.98px) {
    .form-split__panel {
        padding: 48px 64px;
    }
}

/* Mobile (Figma: ULA-REDES-PRES-1, node 722:827, 400px frame) */
@media (max-width: 991.98px) {
    .form-split {
        display: block;
    }

    .form-split__panel {
        max-width: none;
        padding: 0 0 24px;
    }

    .form-split__content {
        gap: 24px;
        padding-bottom: 24px;
    }

    .form-split__decor,
    .form-split__media {
        display: none;
    }

    /* header becomes the photo band; same photo URL as the desktop <img> */
    .form-split__header {
        padding: 24px;
        background:
            linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
            var(--fs-photo) 100% 50% / 133.75% auto no-repeat,
            #7b7b7b;
    }

    /* sits on the dark photo band: fixed brand colours, also in dark mode */
    .form-split .form-split__language-link {
        padding: 6px 18px;
        border-color: #003052;
        background: #f5f5f5;
        color: #003052;
        font-size: 14px;
    }

    .form-split .form-split__language-link:hover,
    .form-split .form-split__language-link:focus-visible {
        background: #003052;
        color: #f5f5f5;
    }

    .form-split__logo {
        width: 180px;
    }

    .form-split__main,
    .form-split__meta {
        padding: 0 24px;
    }

    .form-split .powermail_fieldwrap {
        flex-basis: 100%;
    }

    /* solid white fields; the dark-mode block later in this file overrides the variable */
    .form-split {
        --fs-field-bg: #fff;
    }

    .form-split .form-control {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .form-split__footer {
        gap: 24px;
        margin: 0 24px;
        padding-top: 24px;
    }

    .form-split__footer-logo {
        display: block;
    }

    .form-split__footer-logo img {
        display: block;
        width: 164px;
        height: auto;
    }
}

/* --- Privacy popup (layout column "Popup", colPos 50) -------------------- */

.form-split__popup-open {
    padding: 0;
    border: 0;
    background: none;
    color: var(--fs-navy);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.form-split__popup-open:hover,
.form-split__popup-open:focus-visible {
    text-decoration: underline;
}

.form-split__popup {
    --fs-navy: #003052;
    --fs-black: #0a0a0a;
    --fs-gray-04: #4f5b67;

    width: min(720px, calc(100vw - 32px));
    max-height: min(80vh, 900px);
    padding: 0;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
    color: var(--fs-black);
    font-family: 'Lexend', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
}

.form-split__popup::backdrop {
    background: rgba(0, 48, 82, 0.6);
}

.form-split__popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--fs-navy);
    border-radius: 4px;
    background: #fff;
    color: var(--fs-navy);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.form-split__popup-close:hover,
.form-split__popup-close:focus-visible {
    background: var(--fs-navy);
    color: #fff;
}

.form-split__popup-body {
    padding: 48px 40px 40px;
}

.form-split__popup-body .frame,
.form-split__popup-body .frame-container,
.form-split__popup-body .frame-inner,
.form-split__popup-body .frame-group-container,
.form-split__popup-body .frame-group-inner {
    max-width: none;
    margin: 0;
    padding: 0;
}

.form-split__popup-body h1,
.form-split__popup-body h2,
.form-split__popup-body h3 {
    margin: 0 0 16px;
    color: var(--fs-black);
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.form-split__popup-body a {
    color: var(--fs-navy);
}

@media (max-width: 575.98px) {
    .form-split__popup-body {
        padding: 48px 20px 24px;
    }
}
/* --- Views: description / form (frame "Widok: opis" / "Widok: formularz") -- */
/* The form view opens first; form-split.js sets data-view="description" when a
   link leads to the other view. Only on pages that have form-view elements. */
.form-split:has(.frame-view-form):not([data-view="description"]) .frame-view-description,
.form-split[data-view="description"] .frame-view-form {
    display: none;
}

/* --- Dark mode (follows the system setting) ----------------------------- */

@media (prefers-color-scheme: dark) {
    .form-split,
    .form-split__popup {
        --fs-bg: #0b1d2b;
        --fs-navy: #8ec5ee;          /* accent: light tint of brand navy, 9:1 on bg */
        --fs-black: #f5f5f5;         /* body text */
        --fs-gray-04: #b4c0cc;       /* secondary text, placeholders */
        --fs-gray-03: #3d5468;       /* dividers */
        --fs-red: #ff7a6e;           /* required star, errors; #e40100 is too dark on navy */
        --fs-field-bg: rgba(255, 255, 255, 0.04);

        color-scheme: dark;          /* native select lists, checkbox, scrollbars */
    }

    .form-split,
    .form-split__panel {
        background: var(--fs-bg);
    }

    /* the decor shape is navy at 3% opacity: invisible on navy, so lighten it */
    .form-split__decor {
        filter: invert(1);
        opacity: 0.6;
    }

    .form-split__language-link:hover,
    .form-split__language-link:focus-visible {
        background: var(--fs-navy);
        color: var(--fs-bg);
    }

    /* submit: inverted brand colours instead of navy-on-navy */
    .form-split .powermail_fieldwrap_type_submit .btn,
    .form-split .powermail_fieldwrap_type_submit input[type='submit'] {
        background: #f5f5f5;
        color: #003052;
    }

    .form-split .powermail_fieldwrap_type_submit .btn:hover,
    .form-split .powermail_fieldwrap_type_submit .btn:focus-visible {
        background: var(--fs-navy);
        color: var(--fs-bg);
    }

    .form-split .form-check-input {
        background-color: transparent;
    }

    .form-split .form-check-input:checked {
        background-color: var(--fs-navy);
    }

    .form-split select.form-control {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238ec5ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    .form-split select.form-control option {
        background: var(--fs-bg);
        color: var(--fs-black);
    }

    /* photo: a bit darker so the seam to the panel is softer */
    .form-split__media::after {
        background: rgba(0, 0, 0, 0.6);
    }

    .form-split__popup {
        background: #102637;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    }

    .form-split__popup::backdrop {
        background: rgba(0, 0, 0, 0.7);
    }

    .form-split__popup-close {
        background: transparent;
    }

    .form-split__popup-close:hover,
    .form-split__popup-close:focus-visible {
        background: var(--fs-navy);
        color: var(--fs-bg);
    }
}