/* Layout measured from the 1440px design (ref.png, exported at 2x). */

/* ================= 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;
}

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 jest opisana w pikselach projektu 1440px i skalowana przez --s
 * (1px przy szerokości 1440px i więcej). Kompozycja jest wyśrodkowana względem
 * 50% szerokości, a zdjęcie na szerszych ekranach dochodzi do lewej krawędzi.
 */
.hero {
    position: relative;
    container-type: inline-size;
    background-color: #ffffff;
    overflow: hidden;
    --s: min(calc(100cqw / 1440), 1px);
    --hp-blue: #024ad8;
}

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

.hero-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% + 112 * var(--s));
    height: 100%;
    clip-path: polygon(0 0, 100% 0, calc(100% - 200 * var(--s)) 100%, 0 100%);
}

/* Kotwiczenie tła od górnej krawędzi, by nie obcinać góry kadru */
.hero-photo .sliced-container .slice {
    background-position: top left !important;
}

.hero-slash {
    position: absolute;
    top: 0;
    display: block;
    background-color: var(--hp-blue);
}

.hero-slash--short {
    left: calc(50% + 110 * var(--s));
    width: calc(253 * var(--s));
    height: calc(301 * var(--s));
    clip-path: polygon(43.08% 0, 100% 0, 56.52% 100%, 0 100%);
}

.hero-slash--long {
    left: calc(50% + 223 * var(--s));
    width: calc(392 * var(--s));
    height: calc(683 * var(--s));
    clip-path: polygon(63.27% 0, 100% 0, 36.48% 100%, 0 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    padding-bottom: calc(10 * var(--s));
}

.hero-logo {
    display: block;
    width: max(120px, 240 * var(--s));
    height: auto;
    margin: calc(79 * var(--s)) 0 0 -2px;
}

/* Wysokość wersalików HP Forma = 0.7em */
.hero-title {
    margin: max(20px, 43 * var(--s)) 0 0 -0.053em;
    font-size: max(150 * var(--s), min(12cqw, 3.5rem));
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    color: #000000;
}

.hero-subtitle {
    display: block;
    margin: 0.16em 0 0 0.16em;
    font-size: max(0.333em, 1.125rem);
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
}

.hero-date {
    margin: calc(14 * var(--s)) 0 0 0.1em;
    font-size: max(30 * var(--s), 1rem);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: #000000;
}

/* Link wyglądający jak .btn-submit – wyśrodkowanie tekstu przy stałej wysokości */
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: max(16px, 28 * var(--s)) 0 0 0.1em;
}

/* ================= PRELEGENCI ================= */
.speakers {
    padding-top: 4.25rem;
}

.speakers-grid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 3.5rem;
}

@media (min-width: 992px) {
    .speakers-grid {
        --bs-gutter-x: 3.75rem;
        --bs-gutter-y: 5rem;
    }
}

.speaker-img {
    width: 177px;
    height: 177px;
    object-fit: cover;
    border-radius: 5px;
    margin: 0 0 1.25rem;
}

.speaker-body {
    max-width: 24.5rem;
}

.speaker-name {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 0;
}

.speaker-role {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.speaker-bio p {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 1.25rem;
}

.speaker-bio p:last-child {
    margin-bottom: 0;
}

.speaker-bio sup {
    font-size: 0.55em;
}

@media (min-width: 576px) {
    .speaker-img {
        margin: 0 2.5rem 0 0;
    }
}

/* ================= 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;
}

/* Radio: Uczestnik / Dieta */
.choice-groups {
    padding-top: 0.75rem;
}

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

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

.choice-group .form-check-inline:first-of-type {
    min-width: 188px;
    margin-right: 0;
}

.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.5px;
    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 {
    display: block;
    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 {
    max-width: 58rem;
    padding: 2.2rem 0 2.5rem;
}

.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;
}

.footer-slash-bg {
    position: absolute;
    bottom: 0;
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    width: 270px;
    z-index: 0;
}

@media (max-width: 991.98px) {
    .footer-slash-bg {
        width: 150px;
        opacity: 0.3;
    }
}

/* ================= 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); }