/*
 * miroburn.pl na FRAME: tokeny i klocki z PROJEKTY/AIBIZNESLAB/assets/css/frame.css
 * Kwadratowe rogi, cienkie linie, bez cieni i gradientów, fiolet tylko na działaniach.
 */

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-latin-ext-bd9fc9d8.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist-latin-79e7a99c.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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;
}

:root {
    --frame-canvas: oklch(98.2% 0.006 295);
    --frame-ink: oklch(14% 0.014 295);
    --frame-violet: oklch(63% 0.245 295);
    --frame-error: oklch(47% 0.19 28);
    --frame-success: oklch(45% 0.12 148);
    --frame-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --frame-shell: 92rem;
    --frame-gutter: clamp(1rem, 3.2vw, 3rem);
    --frame-section-space: clamp(3rem, 6vw, 5.5rem);
    --frame-heading-grid: minmax(0, 8fr) minmax(18rem, 4fr);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body.frame-page {
    margin: 0;
    min-width: 20rem;
    overflow-x: hidden;
    background: var(--frame-canvas);
    color: var(--frame-ink);
    font-family: var(--frame-font);
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.frame-page a {
    color: inherit;
}

.frame-page button,
.frame-page input {
    font: inherit;
}

.frame-page ::selection {
    background: var(--frame-violet);
    color: var(--frame-ink);
}

.frame-page :focus-visible {
    outline: 3px solid var(--frame-violet);
    outline-offset: 4px;
}

.frame-skip {
    position: fixed;
    inset: 0 auto auto 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--frame-ink);
    color: var(--frame-canvas) !important;
    transform: translateY(-120%);
}

.frame-skip:focus {
    transform: translateY(0.75rem);
}

.frame-shell {
    width: min(100%, var(--frame-shell));
    margin-inline: auto;
}

.frame-frame {
    border-inline: 1px solid var(--frame-ink);
}

.frame-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--frame-ink);
    background: var(--frame-canvas);
}

.frame-nav-shell {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    padding-inline: var(--frame-gutter);
}

.frame-wordmark {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    text-decoration: none;
}

.frame-display {
    margin: 0;
    font-size: clamp(3.5rem, 9.6vw, 9rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.92;
    text-transform: uppercase;
}

.frame-display span {
    display: block;
}

.frame-button {
    display: inline-flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--frame-ink);
    border-radius: 0;
    background: var(--frame-violet);
    color: var(--frame-ink);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.frame-button:hover {
    background: var(--frame-ink);
    color: var(--frame-canvas);
}

.frame-button:disabled {
    cursor: wait;
    opacity: 0.6;
}

/* Hero: tekst po lewej, zdjęcie po prawej */
.mb-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--frame-ink);
}

.mb-hero-tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: var(--frame-section-space) var(--frame-gutter);
}

.mb-hero-lead {
    margin: 0;
    max-width: 34rem;
    font-size: clamp(1.25rem, 2.1vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.mb-hero-zdjecie {
    position: relative;
    margin: 0;
    background: var(--frame-ink);
}

.mb-hero-zdjecie img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}

/* Sekcje: siatka nagłówka FRAME, tytuł w lewej kolumnie, Ori w prawej */
.mb-sekcja {
    display: grid;
    grid-template-columns: var(--frame-heading-grid);
    align-items: end;
    border-bottom: 1px solid var(--frame-ink);
}

.mb-sekcja > h2 {
    margin: 0;
    padding: var(--frame-section-space) 0 clamp(1.5rem, 3vw, 2.5rem) var(--frame-gutter); /* WHY: tytuł ma w jednej linii całą myśl, prawy margines daje kolumna Ori */
    font-size: clamp(2.25rem, 5.4vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.mb-sekcja > h2 span {
    display: block;
}

.mb-ori {
    display: block;
    justify-self: end;
    width: clamp(10rem, 21vw, 20rem);
    height: auto;
    margin: 1rem var(--frame-gutter) -0.5rem 0; /* WHY: rycina ma własny margines na płótnie, stopy stoją blisko linii */
}

/* Lista: dwie kolumny wierszy z cienką linią */
.mb-lista {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--frame-gutter);
    margin: 0;
    padding: 0 var(--frame-gutter) clamp(1.5rem, 3vw, 2.5rem);
    list-style: none;
}

.mb-lista li {
    padding-block: 1rem;
    border-top: 1px solid var(--frame-ink);
    font-size: 1.125rem;
    line-height: 1.35;
    text-wrap: balance;
}

/* Media: trzy kolumny w ramie */
.mb-media {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--frame-ink);
}

.mb-medium {
    padding: clamp(1.5rem, 3vw, 2.5rem) var(--frame-gutter);
}

.mb-medium + .mb-medium {
    border-left: 1px solid var(--frame-ink);
}

.mb-medium h3 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.mb-medium p {
    margin: 0 0 1.5rem;
    font-size: 1.125rem;
    line-height: 1.35;
}

.mb-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    text-underline-offset: 0.25em;
}

.mb-link:hover {
    color: var(--frame-violet);
}

/* Formularz newslettera */
.mb-pola {
    display: grid;
    gap: 0.75rem;
}

.mb-pole label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.mb-pole input {
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--frame-ink);
    border-radius: 0;
    background: transparent;
    color: var(--frame-ink);
}

.mb-zgody {
    display: grid;
    gap: 0.5rem;
    margin-block: 1rem;
    font-size: 0.875rem;
    line-height: 1.35;
}

.mb-zgody label {
    display: grid;
    grid-template-columns: 1.125rem minmax(0, 1fr);
    gap: 0.5rem;
    cursor: pointer;
    text-wrap: balance;
}

.mb-zgody input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.0625rem 0 0;
    accent-color: var(--frame-violet);
}

.mb-formularz .frame-button {
    width: 100%;
}

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--frame-error);
}

.form-status[data-type="success"] {
    color: var(--frame-success);
}

/* Komunikat po zapisie: wstawia go script-v2.js w miejsce formularza */
.success-icon {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--frame-success);
}

.success-message h2 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.success-message p {
    margin: 0;
    font-size: 1rem;
    text-wrap: pretty;
}

/* Baner zgody: klasy z consent-manager.js, wygląd FRAME tylko na tej stronie */
.frame-page .mb-cookie-banner {
    background: var(--frame-canvas);
    color: var(--frame-ink);
    border: 1px solid var(--frame-ink);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--frame-font);
}

.frame-page .mb-cookie-btn {
    min-height: 2.75rem;
    border: 1px solid var(--frame-ink);
    border-radius: 0;
    font-weight: 600;
}

.frame-page .mb-cookie-btn-primary {
    background: var(--frame-violet);
    color: var(--frame-ink);
}

.frame-page .mb-cookie-btn-secondary {
    background: transparent;
    color: var(--frame-ink);
}

/* Stopka */
.mb-stopka-rama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.5rem var(--frame-gutter);
}

.mb-stopka-marka {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    font-size: 0.875rem;
}

.mb-stopka-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    font-size: 0.875rem;
}

.mb-stopka-nav a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    text-underline-offset: 0.25em;
}

@media (max-width: 62rem) {
    .mb-media {
        grid-template-columns: minmax(0, 1fr);
    }

    .mb-medium + .mb-medium {
        border-top: 1px solid var(--frame-ink);
        border-left: 0;
    }
}

@media (max-width: 56rem) {
    .mb-sekcja > h2 {
        text-wrap: balance;
    }

    .mb-sekcja > h2 span {
        display: inline;
    }
}

@media (max-width: 48rem) {
    .mb-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .frame-display {
        font-size: min(21vw, 7.5rem);
    }

    .mb-hero-zdjecie {
        aspect-ratio: 1;
    }

    .mb-hero-lead {
        font-size: 1.375rem;
    }

    .frame-page .mb-hero-tekst .frame-button {
        width: 100%;
    }

    .mb-sekcja {
        grid-template-columns: minmax(0, 1fr);
    }

    .mb-sekcja > h2 {
        padding-right: var(--frame-gutter);
        padding-bottom: 0.5rem;
    }

    .mb-ori {
        width: 9rem;
        margin: 0 var(--frame-gutter) 0.5rem 0;
    }

    .mb-lista {
        grid-template-columns: minmax(0, 1fr);
    }
}