/* Layout measured from the 1440px design (docs/projekt.png). */

/* ================= FONT HP ================= */
@font-face {
    font-family: 'HP Forma DJR';
    src: url('../HP_FONT/HPFormaDJROffice-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HP Forma DJR';
    src: url('../HP_FONT/HPFormaDJROffice-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --hp-blue: #024ad8;
}

body {
    font-family: 'HP Forma DJR', Arial, sans-serif;
    color: #1a1a1a;
    background-color: #ffffff;
    overflow-x: hidden;
}

/* 1280px content width, i.e. 80px side margins at 1440px */
@media (min-width: 1400px) {
    .container {
        max-width: 1304px;
    }
}

.text-hp {
    color: #568393;
}

.section-title {
    font-size: clamp(1.75rem, 3.47vw, 3.125rem);
    line-height: 1.2;
    font-weight: 500;
}

/* ================= HERO ================= */
/*
 * Grafika hero opisana w pikselach projektu 1440px i skalowana przez --s
 * (1px przy szerokości 1440px). Niebieski blok przylega do lewej krawędzi
 * hero, zdjęcie do prawej.
 */
/* Powyżej 1440px kompozycja nie rozjeżdża się na boki, tylko zostaje wyśrodkowana. */
.hero {
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
    container-type: inline-size;
    background-color: #ffffff;
    overflow: hidden;
    --s: min(calc(100cqw / 1440), 1px);
}

.hero-art {
    position: relative;
    height: calc(570 * var(--s));
}

.hero-block {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(557 * var(--s));
    height: calc(312 * var(--s));
    background-color: var(--hp-blue);
    clip-path: polygon(0 0, 100% 0, calc(100% - 113 * var(--s)) 100%, 0 100%);
}

/* Zdjęcie ma już wycięty biały skos po lewej stronie */
.hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(816 * var(--s));
    height: calc(570 * var(--s));
}

.hero-logos {
    position: absolute;
    top: calc(408 * var(--s));
    left: 0;
    right: 0;
    z-index: 1;
}

/*
 * Wiersz logotypów (299 + 83 + 168 = 550 w projekcie) zaczyna się przy lewej
 * krawędzi kontenera, która zmienia się skokowo na progach Bootstrapa, a zdjęcie
 * skaluje się płynnie. Szerokość wiersza jest więc ograniczona miejscem do
 * widocznej krawędzi zdjęcia na wysokości dołu logotypów (783 od prawej, czyli
 * 816 minus biały klin), z odstępem 24:
 *   lewa krawędź treści kontenera = (100cqw - 100%) / 2
 *   dostępne miejsce = 100cqw - 783s - 24s - (100cqw - 100%) / 2
 */
.hero-logos-row {
    display: flex;
    align-items: center;
    width: min(550 * var(--s), (100cqw + 100%) / 2 - 807 * var(--s));
}

.hero-logo-hp {
    width: 54.36%;
    height: auto;
}

.hero-logo-ab {
    width: 30.55%;
    height: auto;
    margin-left: 15.09%;
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* Wysokość wersalików HP Forma = 0.7em */
.hero-title {
    margin: max(24px, 58 * var(--s)) 0 0 -0.05em;
    font-size: max(114 * var(--s), 3rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #000000;
}

.hero-subtitle {
    margin: max(12px, 22 * var(--s)) 0 0;
    font-size: max(36 * var(--s), 1.25rem);
    line-height: 1.2;
    font-weight: 500;
    color: #000000;
}

/*
 * Telefon: kompozycja w siatce 1000 jednostek szerokości. Zdjęcie (816) przy
 * prawej krawędzi, niebieski blok nad jego białym klinem. Skos bloku jest
 * równoległy do klina (nachylenie 0.364), więc przerwa ma stałą szerokość.
 * Logotypy pod zdjęciem.
 */
@media (max-width: 767.98px) {
    .hero {
        --m: calc(100cqw / 1000);
    }

    .hero-art {
        height: auto;
        padding-top: calc(570 * var(--m));
    }

    .hero-block {
        width: calc(300 * var(--m));
        height: calc(312 * var(--m));
        clip-path: polygon(0 0, 100% 0, calc(100% - 113 * var(--m)) 100%, 0 100%);
        z-index: 1;
    }

    .hero-photo {
        width: calc(816 * var(--m));
        height: calc(570 * var(--m));
    }

    .hero-logos {
        position: static;
        padding-top: 28px;
    }

    .hero-logos-row {
        width: min(282px, 100%);
    }
}

/* ================= AGENDA ================= */
.agenda {
    padding-top: 6rem;
}

.agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #1a1a1a;
}

.agenda-item {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid #1a1a1a;
}

.agenda-time {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 500;
    /* color: #568393; */
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.agenda-title {
    font-size: clamp(1.25rem, 1.74vw, 1.5625rem);
    line-height: 1.25;
    font-weight: 500;
    margin-bottom: 0;
}



.agenda-lang {
    font-size: 1rem;
    line-height: 1.25;
    color: #6b6b6b;
    margin: 0.35rem 0 0;
}

.agenda-speakers {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0.75rem 0 0;
}

.agenda-item--break {
    padding: 1rem 0;
    background-color: #f2f2f2;
}

.agenda-item--break .agenda-time,
.agenda-item--break .agenda-title {
    color: #6b6b6b;
    font-weight: 400;
}

.agenda-item--break .agenda-time,
.agenda-item--break .agenda-title {
    font-size: 1.125rem;
}

@media (max-width: 767.98px) {
    .agenda-item--break {
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    }
}

@media (min-width: 768px) {
    .agenda-item {
        grid-template-columns: 11rem minmax(0, 1fr);
        column-gap: 2.5rem;
        padding: 2rem 0;
    }

    /* Kolumna czasu pomniejszona o padding, by tytuły przerw trzymały oś pozostałych wierszy */
    .agenda-item--break {
        --agenda-inset: 1.25rem;
        grid-template-columns: calc(11rem - var(--agenda-inset)) minmax(0, 1fr);
        padding: 1.125rem var(--agenda-inset);
        margin: 0;
    }

    .agenda-time {
        padding-top: 0.125rem;
    }
}

@media (min-width: 992px) {
    .agenda-item {
        grid-template-columns: 13rem minmax(0, 1fr);
        column-gap: 3.75rem;
    }

    .agenda-item--break {
        grid-template-columns: calc(13rem - var(--agenda-inset)) minmax(0, 1fr);
    }

    .agenda-body {
        max-width: 52rem;
    }
}

/* ================= FORMULARZ ================= */
.registration-section {
    padding-top: 4.5rem;
}

.form-subtitle {
    font-size: clamp(1.375rem, 2.08vw, 1.875rem);
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 3rem;
}

.registration-form {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

@media (min-width: 992px) {
    .registration-form {
        --bs-gutter-x: 6.5rem;
    }
}

.registration-form .form-label {
    font-size: 1.125rem;
    line-height: 1.2;
    margin-bottom: 6px;
}

.registration-form .form-control {
    height: 45px;
    background-color: #e6e6e6;
    border: 0;
    border-radius: 4px;
    padding: 10px 15px;
}

.registration-form .form-control:focus {
    background-color: #e6e6e6;
    box-shadow: 0 0 0 0.2rem rgba(86, 131, 147, 0.3);
}

.registration-form .form-control.is-invalid {
    box-shadow: inset 0 -2px 0 #dc3545;
}

/* Opcjonalne pola i infobox przy pseudonimie */
.form-optional {
    color: #6b6b6b;
}

.field-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: #4a4a4a;
}

.field-info a {
    color: #568393;
}

.field-info-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: #568393;
}

.field-counter {
    margin-left: auto;
    padding-left: 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #6b6b6b;
}

/* Radio: Pobyt / Rozmiar / Dieta / Wysyłka */
.choice-groups {
    padding-top: 0.75rem;
}

.choice-group {
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-group + .choice-group {
    margin-top: 1.2rem;
}

.choice-group legend {
    float: none;
    width: auto;
    padding: 0;
}

.choice-group .form-check-inline {
    margin-right: 57px;
    padding-left: 25px;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .choice-group .form-check-inline {
        margin-right: 28px;
    }
}

/* Adres do wysyłki / paczkomat */
.delivery-panel {
    --bs-gutter-y: 1.5rem;
    margin-top: 0;
    padding-top: 0.25rem;
}

.locker-card {
    margin-bottom: 1rem;
    padding: 14px 18px;
    background-color: #f2f2f2;
    border-left: 4px solid #568393;
    font-size: 1rem;
    line-height: 1.35;
}

.btn-locker {
    height: 45px;
    padding: 0 1.5rem;
    font-size: 1rem;
    color: #1a1a1a;
    background-color: #e6e6e6;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
}

.btn-locker:hover,
.btn-locker:focus {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
}

.locker-code-input {
    max-width: 330px;
}

.locker-map {
    height: 75vh;
}

@media (max-width: 767.98px) {
    .locker-map {
        height: auto;
    }
}

.choice-group .form-check-label {
    font-size: 1.125rem;
    line-height: 1.35;
}

.registration-form .form-check-input {
    width: 14px;
    height: 14px;
    margin-left: -25px;
    margin-top: 0.3em;
    border: 1px solid #1a1a1a;
    background-color: #ffffff;
    box-shadow: none;
}

.registration-form .form-check-input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-left: -27px;
    margin-top: 0;
    border-radius: 0;
}

.registration-form .form-check-input:focus {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 0.2rem rgba(86, 131, 147, 0.3);
}

.registration-form .form-check-input[type="radio"]:checked {
    background-color: #ffffff;
    border-color: #1a1a1a;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%231a1a1a'/%3e%3c/svg%3e");
}

.registration-form .form-check-input[type="checkbox"]:checked {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

.registration-form .form-check-input.is-invalid {
    border-color: #dc3545;
}

/* Zgody */
.consents {
    padding-top: 0.75rem;
}

.consent {
    padding-left: 27px;
    margin-bottom: 0.875rem;
}

.consent .form-check-label {
    font-size: 0.75rem;
    line-height: 14px;
    text-align: justify;
    color: #1a1a1a;
}

.form-note {
    font-size: 0.75rem;
    margin: 1.25rem 0 0;
}

.btn-submit {
    min-width: 196px;
    height: 40px;
    margin-top: 0.75rem;
    padding: 0 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #000000;
    border: 0;
    border-radius: 2px;
}

.btn-submit:hover,
.btn-submit:focus {
    color: #ffffff;
    background-color: #333333;
}

.deadline-note {
    font-size: 1.125rem;
    margin: 0.75rem 0 0;
}

.form-hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.registration-success {
    border-left: 4px solid #568393;
    background-color: #f2f2f2;
    padding: 1.5rem 2rem;
}

/* ================= STOPKA ================= */
.site-footer {
    padding: 2.2rem 0 9rem;
}

.site-footer hr {
    margin: 0 0 2.4rem;
    border-top: 1px solid #1a1a1a;
    opacity: 1;
}

.site-footer .copyright {
    font-size: 0.6875rem;
    margin-bottom: 0.8rem;
}

.site-footer .operator {
    font-size: 0.6875rem;
    line-height: 15px;
    margin-bottom: 0;
}

/* Niebieski skos w prawym dolnym rogu strony */
.registration-section {
    position: relative;
}

.footer-block {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 407px;
    height: 111px;
    background-color: var(--hp-blue);
    clip-path: polygon(39px 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 767.98px) {
    .site-footer {
        padding-bottom: 5rem;
    }

    .footer-block {
        width: 180px;
        height: 50px;
        clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ================= SILNIK ANIMACJI PASKOWYCH ================= */
[data-animate] {
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.7s ease-out;
    will-change: transform, opacity;
}

/* Model: fade-in */
[data-animate="fade-in"] {
    opacity: 0;
    transform: translateY(20px);
}
[data-animate="fade-in"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pocięte kontenery (sliced-container) */
.sliced-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.sliced-container .slice {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Directional moves - Poziome (horizontal) */
.sliced-container[data-animate="sliced-from-left"] .slice { transform: translateX(-100%); }
.sliced-container[data-animate="sliced-from-left"].is-visible .slice { transform: translateX(0); }

.sliced-container[data-animate="sliced-from-right"] .slice { transform: translateX(100%); }
.sliced-container[data-animate="sliced-from-right"].is-visible .slice { transform: translateX(0); }

.sliced-container[data-animate="sliced-to-left"] .slice { transform: translateX(0); }
.sliced-container[data-animate="sliced-to-left"].is-visible .slice { transform: translateX(-100%); }

/* Directional moves - Pionowe (vertical) */
.sliced-container[data-animate="sliced-from-bottom"] .slice { transform: translateY(100%); }
.sliced-container[data-animate="sliced-from-bottom"].is-visible .slice { transform: translateY(0); }

.sliced-container[data-animate="sliced-from-top"] .slice { transform: translateY(-100%); }
.sliced-container[data-animate="sliced-from-top"].is-visible .slice { transform: translateY(0); }