/* LEANN Design System — shared components
   Generated 2026-04-23. Consumes variables from tokens.css.
   In WP/Elementor: paste this into Theme Style / Global CSS after tokens.css. */

/* ============================================================
   btn-fly — chevron "fly" animation (Figma 4130:9916)
   Default: [text][chevron→right]
   Hover:   [chevron←left][text dojeżdża w prawo], chevron-out
            wylatuje w prawo poza overflow:hidden
   Three nested spans per button:
     .btn-fly__arrow--in   (absolute, off-canvas left by default)
     .btn-fly__text
     .btn-fly__arrow--out  (inline right, visible by default)
   Background color does NOT change on hover (decision 2026-04-23).
   ============================================================ */
.btn-fly {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-24);
    overflow: hidden;
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-button);
    line-height: var(--lh-heading);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-granatowy);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.btn-fly:focus-visible {
    outline: 2px solid var(--color-czerwony);
    outline-offset: 4px;
}
.btn-fly[disabled],
.btn-fly.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-fly__text {
    display: inline-block;
    transform: translateX(0);
    transition: transform var(--dur-base) var(--ease-inout);
}
.btn-fly__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform var(--dur-base) var(--ease-inout);
}
.btn-fly__arrow svg { width: 24px; height: 24px; display: block; }
.btn-fly__arrow--out { transform: translateX(0); }
.btn-fly__arrow--in {
    position: absolute;
    top: 50%;
    left: var(--space-24);
    transform: translate(calc(-100% - var(--space-24)), -50%);
}

.btn-fly:hover .btn-fly__arrow--out,
.btn-fly:focus-visible .btn-fly__arrow--out,
.btn-fly.is-hover .btn-fly__arrow--out {
    transform: translateX(calc(100% + var(--space-24)));
}
.btn-fly:hover .btn-fly__text,
.btn-fly:focus-visible .btn-fly__text,
.btn-fly.is-hover .btn-fly__text {
    transform: translateX(calc(24px + var(--space-16)));
}
.btn-fly:hover .btn-fly__arrow--in,
.btn-fly:focus-visible .btn-fly__arrow--in,
.btn-fly.is-hover .btn-fly__arrow--in {
    transform: translate(0, -50%);
}

/* Variants --------------------------------------------------- */
/* primary — red bg + white text + white chevrons (CTA main) */
.btn-fly--primary {
    background: var(--color-czerwony);
    color: var(--color-bialy);
    border-color: var(--color-czerwony);
}
.btn-fly--primary:focus-visible {
    outline-color: var(--color-granatowy);
}

/* primary-white — white bg + granatowy text (for dark sections) */
.btn-fly--primary-white {
    background: var(--color-bialy);
    color: var(--color-granatowy);
    border-color: var(--color-bialy);
}

/* secondary — transparent + granatowy border/text */
.btn-fly--secondary {
    background: transparent;
    color: var(--color-granatowy);
    border-color: var(--color-granatowy);
}
.btn-fly--secondary-white {
    background: transparent;
    color: var(--color-bialy);
    border-color: var(--color-bialy);
}

/* link — no border/padding, just text+chevron (card CTAs) */
.btn-fly--link {
    padding: 0;
    border: 0;
    gap: var(--space-8);
}
.btn-fly--link .btn-fly__arrow--in {
    left: 0;
    transform: translate(-100%, -50%);
}
.btn-fly--link:hover .btn-fly__arrow--out,
.btn-fly--link:focus-visible .btn-fly__arrow--out,
.btn-fly--link.is-hover .btn-fly__arrow--out {
    transform: translateX(calc(100% + var(--space-8)));
}
.btn-fly--link:hover .btn-fly__text,
.btn-fly--link:focus-visible .btn-fly__text,
.btn-fly--link.is-hover .btn-fly__text {
    transform: translateX(calc(24px + var(--space-8)));
}

/* nav — compact padding (header CTA, small surfaces) */
.btn-fly--nav { padding: var(--space-8) var(--space-16); gap: var(--space-8); }
.btn-fly--nav .btn-fly__arrow--in {
    left: var(--space-16);
    transform: translate(calc(-100% - var(--space-16)), -50%);
}
.btn-fly--nav:hover .btn-fly__arrow--out,
.btn-fly--nav:focus-visible .btn-fly__arrow--out,
.btn-fly--nav.is-hover .btn-fly__arrow--out {
    transform: translateX(calc(100% + var(--space-16)));
}
.btn-fly--nav:hover .btn-fly__text,
.btn-fly--nav:focus-visible .btn-fly__text,
.btn-fly--nav.is-hover .btn-fly__text {
    transform: translateX(calc(24px + var(--space-8)));
}

@media (prefers-reduced-motion: reduce) {
    .btn-fly__text,
    .btn-fly__arrow { transition: none; }
    .btn-fly:hover .btn-fly__arrow--out,
    .btn-fly:hover .btn-fly__text,
    .btn-fly:hover .btn-fly__arrow--in,
    .btn-fly.is-hover .btn-fly__arrow--out,
    .btn-fly.is-hover .btn-fly__text,
    .btn-fly.is-hover .btn-fly__arrow--in { transform: none; }
    .btn-fly--link.is-hover .btn-fly__arrow--in,
    .btn-fly--link:hover .btn-fly__arrow--in { transform: translate(-100%, -50%); }
    .btn-fly__arrow--in { transform: translate(calc(-100% - var(--space-24)), -50%); }
    .btn-fly--nav .btn-fly__arrow--in { transform: translate(calc(-100% - var(--space-16)), -50%); }
}

/* Chevron SVG helper — paste `<svg class="btn-fly__chev" …>` inside __arrow */

/* ============================================================
   Typography utilities — Mona Sans width axis (wdth)
   Mona Sans is one variable font; "Expanded" is wdth=125, not
   a separate family. Apply these to non-heading elements that
   need the Expanded width (e.g. Figma exports using
   `font-['Mona_Sans_Expanded']` on a <div> or <span>).
   ============================================================ */
.font-mona-expanded,
[class*="font-['Mona_Sans_Expanded']"] {
    font-family: var(--font-heading);
    font-stretch: var(--font-stretch-expanded);
}
.font-mona-normal {
    font-family: var(--font-body);
    font-stretch: var(--font-stretch-normal);
}

/* ============================================================
   box-file — "box plik do pobrania" (Figma 4842:16877)
   Biały box z granatowym borderem 1px i diagonalnymi cutoutami
   40×48 w narożnikach TR i BL. Używany w: news-article, akcjonariat,
   sektor obronny, energia (każde miejsce gdzie potrzeba listy
   plików do pobrania).
   Struktura:
     <a class="box-file" href="..." download>
       <div class="box-file__head">
         <svg class="box-file__icon"> ikona spinacza </svg>
         <h3 class="box-file__name"> Nazwa pliku </h3>
       </div>
       <div class="box-file__foot">
         <span class="box-file__meta">.pdf / 2 mb</span>
         <span class="box-file__cta">Pobierz plik <svg/></span>
       </div>
     </a>
   ============================================================ */
.box-file {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-48);
    background: var(--color-bialy);
    border: 1px solid var(--color-granatowy);
    color: var(--color-granatowy);
    text-decoration: none;
    clip-path: polygon(
        0 0,
        calc(100% - 40px) 0,
        100% 48px,
        100% 100%,
        40px 100%,
        0 calc(100% - 48px)
    );
    transition: background-color var(--dur-base) var(--ease-out);
}
.box-file:hover { background: var(--color-granatowy-10); }
.box-file:focus-visible {
    outline: 2px solid var(--color-czerwony);
    outline-offset: 4px;
}
/* Diagonalne kreski w narożnikach TR/BL — clip-path obcina border,
   więc dorysowujemy 1px line przez linear-gradient w pseudo-elementach. */
.box-file::before,
.box-file::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 48px;
    pointer-events: none;
}
.box-file::before {
    top: 0;
    right: 0;
    background: linear-gradient(
        to bottom left,
        transparent calc(50% - 0.5px),
        var(--color-granatowy) calc(50% - 0.5px),
        var(--color-granatowy) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}
.box-file::after {
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 0.5px),
        var(--color-granatowy) calc(50% - 0.5px),
        var(--color-granatowy) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}
.box-file__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}
.box-file__icon {
    width: 24px;
    height: 24px;
    color: var(--color-granatowy);
}
.box-file__name {
    font-family: var(--font-heading);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    font-stretch: var(--font-stretch-expanded);
    line-height: var(--lh-heading);
    letter-spacing: -0.01em;
    color: var(--color-granatowy);
    margin: 0;
}
.box-file__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}
.box-file__meta {
    font-size: var(--fs-p);
    line-height: var(--lh-body);
    color: var(--color-granatowy);
    display: flex;
    gap: var(--space-4);
    align-items: center;
}
.box-file__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-family: var(--font-body);
    font-size: var(--fs-button);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--color-granatowy);
}
.box-file__cta svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .box-file { padding: var(--space-24); }
    .box-file__foot { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
}
/* Mobile (≤600px) — Figma 5028:35568 "box plik do pobrania mobile"
   312×auto, p-24, gap-24; head gap-16; foot wraca do row z justify-between
   (meta po lewej, CTA po prawej); narożniki 20×24. */
@media (max-width: 600px) {
    .box-file {
        gap: var(--space-24);
        clip-path: polygon(
            0 0,
            calc(100% - 20px) 0,
            100% 24px,
            100% 100%,
            20px 100%,
            0 calc(100% - 24px)
        );
    }
    .box-file::before,
    .box-file::after {
        width: 20px;
        height: 24px;
    }
    .box-file__head { gap: var(--space-16); }
    .box-file__foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-16);
    }
    .box-file__name { font-size: 20px; }
}

/* Variant: grey — szare tło boxa (Figma "box plik do pobrania grey").
   Używany w sekcjach na tle granatowy-10 (np. ESG raport), gdzie
   biały box wyglądałby jak naklejka — szary box stapia się z tłem
   sekcji, a granatowy border + diagonals pozostają widoczne. */
.box-file--grey { background: var(--color-granatowy-10); }
.box-file--grey:hover { background: var(--color-bialy); }

/* =========================================================================
   Scroll-reveal motion (global, single source of truth)
   ─────────────────────────────────────────────────────────────────────────
   Element z atrybutem [data-animate="scroll-reveal"] startuje niewidoczny
   (opacity 0, translate Y), pojawia się gdy js/scroll-reveal.js dorzuca
   klasę .is-visible (na podstawie IntersectionObserver). Stagger animacji
   przez [data-delay="1..8"]. respekt prefers-reduced-motion.

   Wcześniej blok ten był zduplikowany w ~37 partialach. Po refactorze
   wszystkie partials mogą polegać na tym jednym źródle z components.css.
   ========================================================================= */
[data-animate="scroll-reveal"] {
    opacity: 0;
    transform: translateY(var(--space-24));
    transition:
        opacity var(--dur-slow, 600ms) var(--ease-out, ease-out),
        transform var(--dur-slow, 600ms) var(--ease-out, ease-out);
}
[data-animate="scroll-reveal"].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-animate="scroll-reveal"][data-delay="1"] { transition-delay: 80ms; }
[data-animate="scroll-reveal"][data-delay="2"] { transition-delay: 160ms; }
[data-animate="scroll-reveal"][data-delay="3"] { transition-delay: 240ms; }
[data-animate="scroll-reveal"][data-delay="4"] { transition-delay: 320ms; }
[data-animate="scroll-reveal"][data-delay="5"] { transition-delay: 400ms; }
[data-animate="scroll-reveal"][data-delay="6"] { transition-delay: 480ms; }
[data-animate="scroll-reveal"][data-delay="7"] { transition-delay: 560ms; }
[data-animate="scroll-reveal"][data-delay="8"] { transition-delay: 640ms; }

@media (prefers-reduced-motion: reduce) {
    [data-animate="scroll-reveal"] {
        transition: none;
        transform: none;
    }
}

/* ============================================================
   field__select — custom dropdown (progressive enhancement)
   Native <select> stays in DOM for form submission. Wrapper +
   button + listbox provide the visual layer. JS: custom-select.js.
   ============================================================ */
.field__select-wrap {
    position: relative;
    width: 100%;
}
.field__select--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}
.field__select-button {
    width: 100%;
    height: 48px;
    padding: var(--space-8) var(--space-16);
    background: var(--color-bialy);
    border: 1px solid var(--color-granatowy-40);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: var(--fs-p);
    line-height: var(--lh-body);
    color: var(--color-granatowy);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}
.field__select-button:focus-visible {
    outline: none;
    border-color: var(--color-granatowy);
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(7, 42, 106, 0.08));
}
.field__select-wrap[data-state="open"] .field__select-button {
    border-color: var(--color-granatowy);
}
.field__select-button-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.field__select-button-text.is-placeholder {
    color: var(--color-granatowy-40);
}
.field__select-button-chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-granatowy);
    transition: transform var(--dur-fast) var(--ease-out);
}
.field__select-wrap[data-state="open"] .field__select-button-chevron {
    transform: rotate(180deg);
}
.field__select-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: var(--space-4) 0;
    background: var(--color-bialy);
    border: 1px solid var(--color-granatowy);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(7, 42, 106, 0.12));
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    display: none;
}
.field__select-wrap[data-state="open"] .field__select-list {
    display: block;
}
.field__select-option {
    padding: var(--space-8) var(--space-16);
    font-family: var(--font-body);
    font-size: var(--fs-p);
    line-height: var(--lh-body);
    color: var(--color-granatowy);
    cursor: pointer;
    user-select: none;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.field__select-option.is-active {
    background: var(--color-granatowy-10);
}
.field__select-option[aria-selected="true"] {
    background: var(--color-granatowy);
    color: var(--color-bialy);
    font-weight: var(--fw-semibold);
}
.field__select-option[aria-disabled="true"] {
    color: var(--color-granatowy-40);
    cursor: not-allowed;
    background: transparent;
}
.field.is-invalid .field__select-button {
    border-color: var(--color-czerwony);
}