/* ==========================================================================
   Akademia WIPASZ — arkusz stylów wydarzenia
   Typografia: Bricolage Grotesque (nagłówki) + Archivo (tekst)
   Kolory marki: granat #0E2951, czerwień #E1121A, złoto (z belki tytułowej)
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokeny */
:root {
    --navy-950: #04101F;
    --navy-900: #071B31;
    --navy-800: #0A2244;
    --navy: #0E2951;
    --navy-600: #1B3F70;
    --navy-400: #3E6096;

    --red: #E1121A;
    --red-600: #B90D14;

    --gold-100: #F3E6C6;
    --gold: #D9BE84;
    --gold-600: #B2914B;

    --paper: #F7F5F1;
    --paper-2: #FDFCFA;
    --white: #FFFFFF;

    --ink: #0E2951;
    --ink-soft: #37486A;
    --muted: #54637E;

    --line: rgba(14, 41, 81, 0.14);
    --line-strong: rgba(14, 41, 81, 0.26);
    --line-light: rgba(255, 255, 255, 0.14);

    --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --display: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', Arial, sans-serif;

    --shadow-sm: 0 2px 10px -6px rgba(4, 16, 31, 0.35);
    --shadow-md: 0 24px 50px -34px rgba(4, 16, 31, 0.55);
    --shadow-lg: 0 46px 90px -52px rgba(4, 16, 31, 0.7);

    --ease: cubic-bezier(0.22, 0.7, 0.3, 1);

    --gutter: clamp(20px, 4vw, 48px);
    --section-y: clamp(72px, 8.5vw, 140px);

    /* delikatna ziarnistość dla ciemnych sekcji */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ 2. Baza */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    margin: 0;
    padding: 0;
    color: var(--ink);
    background: var(--paper);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: var(--navy);
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
    transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}

a:hover {
    color: var(--red);
    text-decoration-color: currentColor;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

p {
    margin: 0 0 1em;
}

::selection {
    background: var(--navy);
    color: var(--gold-100);
}

:focus-visible {
    outline: 2px solid var(--gold-600);
    outline-offset: 3px;
    border-radius: 2px;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ----------------------------------------------------- 3. Odsłanianie treści */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
}

html.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.75s var(--ease) var(--reveal-delay, 0ms),
        transform 0.75s var(--ease) var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js [data-reveal] { opacity: 1; transform: none; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------- 4. Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.topbar__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding: 14px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    width: auto;
    height: auto;
    text-align: center;
    padding: 0;
}

.logo img {
    height: 60px;
    width: auto;
    max-height: none;
    transition: transform 0.4s var(--ease);
}

.logo img:hover {
    transform: translateY(-1px) scale(1.02);
}

/* ----------------------------------------------------------------- 5. Hero */
.baner {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(480px, 72svh, 700px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: var(--navy-950);
}

.baner__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("/assets/images/baner.webp");
    background-position: center 62%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.07);
    animation: baner-in 2.8s var(--ease) forwards;
}

@keyframes baner-in {
    to { transform: scale(1); }
}

.baner__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 78% at 50% 44%, rgba(4, 16, 31, 0.12) 0%, rgba(4, 16, 31, 0.6) 74%, rgba(4, 16, 31, 0.86) 100%),
        linear-gradient(180deg, rgba(7, 27, 49, 0.8) 0%, rgba(7, 27, 49, 0.24) 34%, rgba(4, 16, 31, 0.7) 100%);
}

.baner__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.045;
}

.baner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1340px;
    padding-block: clamp(80px, 9vw, 120px);
}

.baner .location {
    text-align: center;
    color: var(--white);
    background: transparent;
}

.baner__title img {
    width: min(1160px, 100%);
    margin-inline: auto;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

.baner .date h5 {
    font-family: var(--sans);
    font-weight: 500;
    color: var(--gold);
    font-size: clamp(1.15rem, 2.1vw, 1.6rem);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-top: clamp(22px, 3vw, 34px);
}

.baner .line {
    width: 190px;
    max-width: 45%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: clamp(26px, 3.4vw, 40px) 0;
    border: 0;
}

.baner__place h5 {
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.1vw, 1.8rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--white);
    margin-bottom: 10px;
}

.baner__place > div:last-child {
    font-size: 0.92rem;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.66);
    text-transform: uppercase;
}

.baner__soon {
    margin-top: clamp(36px, 5vw, 60px);
}

.baner__soon h5 {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-100);
    border: 1px solid rgba(217, 190, 132, 0.45);
    border-radius: 999px;
    padding: 12px 26px;
    background: rgba(217, 190, 132, 0.07);
    backdrop-filter: blur(4px);
    margin: 0;
}

/* licznik (pozostaje w kodzie, ukryty w markupie) */
.baner .counter {
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(1.6rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.04em;
}

.baner .counter span {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 6. Sekcje / nav */
section {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: var(--section-y) 0;
}

.bg-blue {
    background-color: var(--navy);
    color: var(--white);
    isolation: isolate;
}

.bg-blue::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 60% at 15% 0%, rgba(62, 96, 150, 0.28) 0%, transparent 62%),
        radial-gradient(70% 60% at 100% 100%, rgba(178, 145, 75, 0.14) 0%, transparent 60%);
    pointer-events: none;
}

.bg-blue::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--grain);
    opacity: 0.035;
    pointer-events: none;
}

h1 {
    font-weight: 600;
    letter-spacing: -0.03em;
}

h2 {
    font-weight: 400;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.75rem, 3.6vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.02;
}

.section-head {
    margin-bottom: clamp(40px, 5vw, 72px);
}

.section-head::before {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--red);
    margin-bottom: 22px;
}

.bg-blue .section-head::before {
    background: var(--gold);
}

.bg-blue .section-head {
    text-align: right;
}

.bg-blue .section-head::before {
    margin-left: auto;
}

/* --------------------------------------------------- 7. Śródtytuł / manifest */
.title {
    margin: 0;
    padding: clamp(76px, 9vw, 132px) 0 clamp(64px, 7vw, 108px);
    background: var(--paper);
}

.title * {
    text-align: center;
}

.title h1 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(1.8rem, 4.2vw, 3.3rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: 21ch;
    text-wrap: balance;
}

.title .line {
    width: 64px;
    max-width: 40%;
    height: 2px;
    background: var(--red);
    margin: clamp(26px, 3vw, 38px) 0;
}

.title h2 {
    font-family: var(--sans);
    font-size: clamp(1.05rem, 1.65vw, 1.35rem);
    font-weight: 500;
    line-height: 1.62;
    color: var(--ink-soft);
    letter-spacing: 0.005em;
    max-width: 46ch;
}

/* --------------------------------------------------------------- 8. Agenda */
.agenda__day + .agenda__day {
    margin-top: clamp(56px, 6vw, 96px);
}

.day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: clamp(14px, 2vw, 28px);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line-light);
}

.day-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
    flex: 0 0 100%;
    margin-bottom: 6px;
}

.day {
    display: flex;
    align-items: baseline;
    gap: clamp(12px, 1.6vw, 22px);
}

.agenda .day div:first-child {
    font-family: var(--display);
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    border-bottom: 0;
    display: block;
    color: var(--white);
}

.agenda .day div:last-child {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: var(--gold);
    text-transform: uppercase;
}

.agenda .list {
    margin-top: 0;
    font-size: 1rem;
}

.ag-item {
    display: grid;
    grid-template-columns: minmax(150px, 190px) 1fr;
    gap: clamp(18px, 3vw, 44px);
    padding: clamp(18px, 2.2vw, 26px) clamp(10px, 1.4vw, 18px);
    margin-inline: clamp(-10px, -1.4vw, -18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 3px;
    transition: background-color 0.35s var(--ease);
}

.ag-item:hover {
    background: rgba(255, 255, 255, 0.045);
}

.ag-time {
    position: relative;
    padding-left: 20px;
}

.ag-time::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
}

.ag-time b {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--gold-100);
    white-space: nowrap;
}

.ag-desc {
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.62;
    font-size: clamp(0.98rem, 1.05vw, 1.06rem);
}

.agenda__info {
    margin-top: clamp(40px, 5vw, 64px);
    text-align: center;
}

.agenda__info p {
    display: inline-block;
    margin: 0;
    padding: 16px 30px;
    border: 1px solid rgba(217, 190, 132, 0.36);
    border-radius: 999px;
    background: rgba(217, 190, 132, 0.07);
    color: var(--gold-100);
    font-size: 0.95rem;
}

.agenda__info strong {
    font-weight: 600;
}

/* ------------------------------------------------------------ 9. Lokalizacja */
section.location {
    background: var(--paper);
}

.loc-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(36px, 6vw, 88px);
    align-items: start;
}

.loc-text h5 {
    font-family: var(--display);
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0;
}

.loc-text h5::before {
    content: "";
    display: block;
    width: 3px;
    height: 100%;
    position: absolute;
}

.loc-text > h5 {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid var(--red);
}

.loc-text h4 {
    font-family: var(--sans);
    margin-top: clamp(34px, 4vw, 52px);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--red);
}

.loc-steps {
    margin-top: 22px;
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.loc-steps p {
    position: relative;
    font-size: clamp(0.98rem, 1.1vw, 1.06rem);
    line-height: 1.66;
    color: var(--ink-soft);
    margin: 0;
    padding: 16px 0;
}

.loc-steps p + p {
    border-top: 1px solid var(--line);
}

.loc-steps p::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 1.5em;
    width: 9px;
    height: 1px;
    background: var(--line-strong);
}

.loc-steps b {
    font-weight: 700;
    color: var(--ink);
}

.loc-map {
    position: sticky;
    top: 110px;
}

.map {
    position: relative;
}

.map img {
    width: 100%;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

.map::after {
    content: "";
    position: absolute;
    inset: -14px;
    border: 1px solid var(--line);
    border-radius: 50%;
    pointer-events: none;
}

/* ----------------------------------------------------------- 10. Prelegenci */
.speakers .list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    gap: clamp(18px, 2vw, 26px);
}

.speaker {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: clamp(18px, 2vw, 26px);
    align-items: start;
    padding: clamp(22px, 2.4vw, 30px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.speaker:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(217, 190, 132, 0.34);
    transform: translateY(-3px);
}

.speaker__photo img {
    width: 118px;
    height: 118px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(217, 190, 132, 0.4);
    background: var(--navy-800);
}

.speakers .list h4 {
    font-family: var(--display);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gold);
    margin-bottom: 10px;
}

.speakers .list p {
    font-size: 0.94rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.74);
    margin: 0;
}

/* ---------------------------------------------------------- 11. Rejestracja */
#register {
    background: var(--paper);
}

#register-section h3 {
    color: var(--ink);
}

.form-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: clamp(24px, 4vw, 60px);
    box-shadow: var(--shadow-md);
}

.form-card--message {
    text-align: center;
}

.form-card--message h5 {
    font-family: var(--sans);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0;
}

.form-note {
    border: 1px solid rgba(178, 145, 75, 0.4);
    background: rgba(217, 190, 132, 0.12);
    border-radius: 4px;
    padding: clamp(20px, 3vw, 32px);
}

.form-note h5 {
    font-family: var(--sans);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--ink);
    margin: 0;
}

/* siatka formularza */
.f-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2.4vw, 30px);
    row-gap: clamp(20px, 2.4vw, 30px);
    align-items: start;
}

.f-grid--nested {
    grid-column: 1 / -1;
    row-gap: clamp(14px, 2vw, 22px);
}

.f-12 { grid-column: span 12; }
.f-6  { grid-column: span 6; }
.f-4  { grid-column: span 4; }

.form-subhead {
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--red);
    margin: clamp(20px, 3vw, 34px) 0 6px;
    padding-top: clamp(22px, 3vw, 34px);
    border-top: 1px solid var(--line);
}

/* pola tekstowe z etykietą pływającą */
.form-group {
    position: relative;
    margin-top: 0;
    padding-top: 4px;
}

.form-group > input[type="text"],
.form-group > select {
    width: 100%;
    border: 0;
    border-bottom: 1.5px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    padding: 26px 2px 10px;
    transition: border-color 0.28s var(--ease), background-color 0.28s var(--ease);
}

.form-group > input[type="text"]::placeholder {
    color: transparent;
}

.form-group > input[type="text"]:hover,
.form-group > select:hover {
    border-bottom-color: var(--navy-400);
}

.form-group > input[type="text"]:focus,
.form-group > select:focus {
    outline: none;
    border-bottom-color: var(--navy);
    background: rgba(14, 41, 81, 0.025);
}

.form-group > input[type="text"][readonly] {
    color: var(--muted);
    border-bottom-style: dashed;
}

.form-group > label:not(.label) {
    position: absolute;
    left: 2px;
    top: 30px;
    font-size: 1rem;
    line-height: 1;
    color: var(--muted);
    pointer-events: none;
    transform-origin: 0 50%;
    transition: transform 0.24s var(--ease), color 0.24s var(--ease);
    max-width: calc(100% - 4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-group > input[type="text"]:focus + label,
.form-group > input[type="text"]:not(:placeholder-shown) + label {
    transform: translateY(-22px) scale(0.75);
    color: var(--navy-400);
}

.form-group > input[type="text"]:focus + label {
    color: var(--navy);
}

/* lista rozwijana */
.form-group > select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 14px 34px 12px 2px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230E2951' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.form-group > select:focus {
    background-color: rgba(14, 41, 81, 0.025);
}

/* etykiety statyczne */
.label {
    display: block;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 8px 0 14px;
}

/* wybór jednokrotny */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--sans);
    color: var(--ink);
    align-items: stretch;
    margin: 0;
}

.radio-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.radio-group--inline > label {
    flex: 0 1 auto;
    min-width: 140px;
}

.radio-group-vertical {
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
}

.radio-group label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.5;
    padding: 15px 20px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper-2);
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.radio-group label:hover {
    border-color: var(--navy-400);
    background: var(--white);
}

.radio-group label:has(input:checked) {
    border-color: var(--navy);
    background: rgba(14, 41, 81, 0.045);
    box-shadow: inset 0 0 0 1px var(--navy);
}

.radio-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 19px;
    height: 19px;
    min-width: 19px;
    flex: 0 0 19px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    margin: 2px 0 0;
    cursor: pointer;
    position: relative;
    background: var(--white);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.radio-group input[type="radio"]:checked {
    border-color: var(--navy);
}

.radio-group input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    inset: 3.5px;
    background: var(--navy);
    border-radius: 50%;
}

/* wybór wielokrotny / zgody */
.checkbox-group {
    display: block;
    font-family: var(--sans);
    color: var(--ink-soft);
    margin: 0;
}

.checkbox-group label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.62;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper-2);
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
    margin: 0;
}

.checkbox-group label:hover {
    border-color: var(--navy-400);
    background: var(--white);
}

.checkbox-group label:has(input:checked) {
    border-color: var(--navy);
    background: rgba(14, 41, 81, 0.035);
    box-shadow: inset 0 0 0 1px var(--navy);
}

.checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 19px;
    height: 19px;
    min-width: 19px;
    flex: 0 0 19px;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    margin: 2px 0 0;
    cursor: pointer;
    position: relative;
    top: 0;
    aspect-ratio: 1;
    background: var(--white);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.checkbox-group input[type="checkbox"]:checked {
    background: var(--navy);
    border-color: var(--navy);
}

.checkbox-group input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    border-radius: 1px;
    transform: rotate(45deg);
    background: none;
}

.checkbox-group a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
}

.checkbox-group a:hover {
    color: var(--red);
}

/* --------------------------------------------------------------- 12. Button */
.button {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: clamp(32px, 4vw, 48px);
}

.btn-primary,
.btn-primary:first-child:active {
    background: var(--navy);
    border: 0;
    border-radius: 3px;
    color: var(--white);
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 19px 46px;
    margin: 0;
    box-shadow: 0 18px 34px -24px rgba(14, 41, 81, 0.9);
    transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--navy-800);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 26px 46px -26px rgba(14, 41, 81, 0.95);
}

.btn-primary:active {
    transform: translateY(0);
}

/* --------------------------------------------------- 13. Walidacja / stany */
.hide,
.error:empty {
    display: none;
}

.error {
    color: var(--red);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    margin-top: 8px;
}

.radio-group > .error,
.radio-group--inline > .error {
    flex: 1 0 100%;
    width: 100%;
}

input.has-error,
select.has-error {
    border-bottom-color: var(--red) !important;
}

/* ---------------------------------------------------- 14. Strony komunikatów */
.page-message {
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(220px, 40vh, 440px);
}

#404-section h1 {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    letter-spacing: -0.035em;
}

#404-section p {
    color: var(--muted);
    font-size: 1.05rem;
    margin-top: 14px;
}

/* --------------------------------------------------------------- 15. Stopka */
footer {
    width: 100%;
    background: var(--white);
    border-top: 1px solid var(--line);
    padding-top: clamp(40px, 5vw, 64px);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

.footer__brand img {
    height: 40px;
    width: auto;
}

.footer__pay {
    display: flex;
    justify-content: flex-end;
}

.footer__pay img {
    height: 30px;
    width: auto;
    opacity: 0.8;
}

footer .link {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
}

footer .link a {
    display: inline-block;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
}

footer .link a:hover {
    color: var(--red);
}

footer a {
    color: var(--navy);
    margin-left: 3px;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer hr {
    margin: clamp(32px, 4vw, 48px) 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    opacity: 1;
}

.myevent {
    text-align: center;
    padding: 22px 0 26px;
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.myevent a {
    color: var(--muted);
}

/* ------------------------------------------------------------- 16. Nawigacja */
nav {
    width: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

nav a {
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    padding: 22px 4px;
    display: inline-block;
    position: relative;
    transition: color 0.3s var(--ease);
}

nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    height: 1px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}

nav a:hover {
    color: var(--red);
}

nav a:hover::after {
    transform: scaleX(1);
}

/* ------------------------------------------------------------ 17. Responsive */
@media (max-width: 1100px) {
    .loc-grid {
        grid-template-columns: 1fr;
    }

    .loc-map {
        position: static;
        max-width: 460px;
        margin-inline: auto;
    }

    .speakers .list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    body {
        font-size: 16px;
    }

    .f-6,
    .f-4 {
        grid-column: span 12;
    }

    .ag-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bg-blue .section-head {
        text-align: left;
    }

    .bg-blue .section-head::before {
        margin-left: 0;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .footer__pay {
        justify-content: center;
    }

    .footer__brand img {
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .logo img {
        height: 49px;
    }

    .baner {
        min-height: clamp(440px, 70svh, 600px);
    }

    .baner__place h5 {
        font-size: 1.15rem;
    }

    .baner__place > div:last-child {
        font-size: 0.74rem;
        letter-spacing: 0.13em;
    }

    .baner .date h5 {
        letter-spacing: 0.18em;
    }

    .baner__media {
        background-position: 62% center;
    }

    .speaker {
        grid-template-columns: 1fr;
        justify-items: start;
        text-align: left;
        gap: 18px;
    }

    .speaker__photo img {
        width: 96px;
        height: 96px;
    }

    .radio-group--inline > label {
        flex: 1 1 100%;
    }

    .button {
        justify-content: stretch;
    }

    .btn-primary {
        width: 100%;
    }

    .map::after {
        inset: -8px;
    }
}

/* Reguła musi pozostać na końcu — steruje polami warunkowymi formularza. */
.hide {
    display: none !important;
}