/**
 * Style własne szablonu.
 *
 * Wszystko, czego nie ma w arkuszach motywu z /konferencja/_wspolne/:
 * przyklejony pasek, nagłówek ze zdjęciem, kafle, bloki, sekcja VIP
 * i drobne poprawki tabel. Reszta wyglądu pochodzi z motywu.
 */

:root {
    --sz-czerwony: #ee312f;
    --sz-zolty: #fff000;
    --sz-zloto: #d9ad4a;
    --sz-czarny: #0d0d0d;
}

/* ------------------------------------------------------------------ */
/* Pasek górny                                                         */

.floating-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

.floating-header .logo {
    height: 40px;
    width: auto;
}

.floating-header .logo-link {
    display: inline-block;
    line-height: 0;
}

.floating-header .logo-link:hover .logo {
    opacity: .8;
    transition: opacity .3s ease;
}

.floating-header .navbar__list {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 28px;
}

/* block-list.min.css motywu stawia czerwoną kropkę i duży odstęp przy każdym
   <li> na stronie, także tutaj — a kropkę pasek rysuje już na odnośniku.
   Bez tego przy pozycjach menu widać dwie kropki obok siebie. */
.floating-header .navbar__list-item {
    margin: 0;
    padding: 0;
}

.floating-header .navbar__list-item::before {
    content: none;
}

.floating-header .navbar__list-link {
    position: relative;
    padding: 4px 0 4px 14px;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.floating-header .navbar__list-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background-color: var(--sz-czerwony);
}

.floating-header .navbar__list-link--active {
    border-bottom: 2px solid var(--sz-czerwony);
}

.rocketjobs-buy-button-top {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--sz-zolty);
    color: #000;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

.rocketjobs-buy-button-top:hover {
    color: #000;
    text-decoration: none;
    filter: brightness(.94);
}

/* Menu i pasek CTA motywu dublowałyby się z paskiem powyżej. */
.szablon-konferencji .navbar,
.szablon-konferencji .button__wrap {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* Pełna szerokość                                                     */

/* site.css motywu celowo przycina .full-width do 100% (body ma
   overflow-x: hidden). Bloki na całą szerokość robimy więc tak samo,
   jak robi to pasek nagłówka motywu — własną klasą. */
.sz-pelna {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Nagłówek ze zdjęciem                                                */

.sz-hero {
    display: block;
    height: auto;
    min-height: 380px;
    padding: 0;
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: transparent;
}

.sz-hero--cienlekkie::before { background-color: rgba(0, 0, 0, .2); }
.sz-hero--ciensrednie::before { background-color: rgba(0, 0, 0, .4); }
.sz-hero--cienmocne::before { background-color: rgba(0, 0, 0, .6); }

.sz-hero .header-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    padding: 90px 15px 40px;
    text-align: center;
}

.sz-hero .header-logo {
    max-width: 320px;
    max-height: 110px;
    height: auto;
    margin-bottom: 14px;
}

.sz-hero .header-title {
    margin: 0 0 18px;
    color: #fff;
    font-size: 3rem;
    line-height: 1.1;
}

.sz-hero__wiersz {
    display: block;
}

.sz-hero__data {
    display: inline-block;
    padding: 4px 14px;
    background-color: var(--sz-czerwony);
    color: #fff;
    font-size: 2rem;
    line-height: 1.3;
}

.sz-hero__miasto {
    font-weight: 900;
}

.sz-hero__miasto + .sz-hero__dzien::before {
    content: " ";
}

/* Czerwony pasek z faktami */
.header-ilove__list-wrap {
    background-color: var(--sz-czerwony);
}

/* ------------------------------------------------------------------ */
/* Odliczanie — w projekcie napis jest żółty, nie czerwony             */

.szablon-konferencji .coutdown__title.bg-primary {
    background-color: var(--sz-zolty) !important;
    color: #000;
}

.szablon-konferencji .coutdown__btn {
    background-color: var(--sz-zolty);
    color: #000;
}

/* ------------------------------------------------------------------ */
/* Wstęp i bloki                                                       */

.sz-tresc p:last-child {
    margin-bottom: 0;
}

.sz-intro__obraz img,
.sz-blok__obraz img {
    width: 100%;
    height: auto;
    display: block;
}

.sz-blok {
    margin-bottom: 56px;
}

.sz-blok__ramka {
    position: relative;
    line-height: 0;
}

.sz-blok__plakietka {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 14px;
    background-color: var(--sz-czerwony);
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sz-blok__podpis {
    position: absolute;
    left: 50%;
    bottom: 34%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Kafle wydarzeń                                                      */

.sz-kafle__siatka {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 28px auto 0;
    max-width: 1100px;
}

.sz-kafel {
    position: relative;
    flex: 1 1 150px;
    /* Bez min-width kafel nie zejdzie poniżej szerokości swojego logo
       i pięć kafli nie zmieści się w jednym rzędzie. */
    min-width: 0;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 14px 20px;
    border: 1px solid #c9c9c9;
    background-color: #fff;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

a.sz-kafel:hover {
    border-color: var(--sz-czerwony);
    text-decoration: none;
}

.sz-kafel__plakietka {
    padding: 1px 10px;
    background-color: var(--sz-czerwony);
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sz-kafel__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
}

.sz-kafel__logo img {
    max-width: 100%;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sz-kafel__podpis {
    font-family: Lato, sans-serif;
    font-size: 17px;
}

.sz-kafel__opis {
    font-family: Lato, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* Sekcja VIP                                                          */

.sz-vip {
    margin-top: 60px;
    padding: 70px 0 60px;
    background-color: var(--sz-czarny);
    color: #fff;
}

.sz-vip__tytul {
    margin: 0 0 18px;
    color: var(--sz-zloto);
    font-size: 3rem;
}

.sz-vip__wstep,
.sz-vip__wstep p {
    color: #e9e9e9;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.sz-vip__podtytul {
    margin: 26px 0 12px;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.sz-vip__lista {
    border: 1px solid var(--sz-zloto);
}

.sz-vip__pozycja + .sz-vip__pozycja {
    border-top: 1px solid var(--sz-zloto);
}

.sz-vip__naglowek {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: none;
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.sz-vip__naglowek:not([disabled]) {
    cursor: pointer;
}

.sz-vip__ikona {
    flex: 0 0 72px;
    line-height: 0;
}

.sz-vip__ikona img {
    width: 72px;
    height: 44px;
    object-fit: cover;
}

.sz-vip__nazwa {
    flex: 1 1 auto;
}

.sz-vip__strzalka {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform .25s;
}

.sz-vip__pozycja.jest-otwarta .sz-vip__strzalka {
    transform: rotate(-135deg);
}

.sz-vip__tresc {
    display: none;
    padding: 0 16px 16px 104px;
    color: #d8d8d8;
    font-family: Lato, sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

.sz-vip__pozycja.jest-otwarta .sz-vip__tresc {
    display: block;
}

.sz-vip__grafika {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 24px;
}

.sz-vip__cta {
    margin: 40px 0 0;
    text-align: center;
}

.sz-vip__przycisk {
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--sz-zloto);
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.sz-vip__przycisk:hover {
    color: #000;
    text-decoration: none;
    filter: brightness(1.07);
}

/* ------------------------------------------------------------------ */
/* Dni i ścieżki                                                       */

/* Karuzela motywu pokazuje pięć kolumn. Przy trzech dniach zostawiłaby
   dwie puste na prawo, więc na desktopie rozkładamy kolumny równo.

   Kolumna dostaje górny limit szerokości. Bez niego jeden dzień rozciągnąłby
   swój kafel na całą szerokość strony — a kafel ma stałe 64 px wysokości,
   więc logo robiło się absurdalnie szerokie. 300 px to tyle, ile wychodzi
   kolumnie przy pełnej siatce trzech dni w kontenerze 910 px. */
@media (min-width: 992px) {
    .sz-dni .swiper-agenda .swiper-wrapper {
        display: flex;
        justify-content: center;
        transform: none !important;
    }

    .sz-dni .swiper-agenda .swiper-slide {
        flex: 1 1 0;
        max-width: 300px;
        width: auto !important;
        margin-right: 0 !important;
    }
}

/* Przy jednym dniu nie ma czego przewijać. Karuzela i tak nadaje slajdowi
   szerokość w stylu elementu (piąta część kontenera na desktopie, cała
   szerokość na telefonie), więc przejmujemy ją na sztywno i stawiamy
   kolumnę na środku — inaczej kafel wisi przy lewej krawędzi. */
.sz-dni[data-dni="1"] .swiper-agenda .swiper-wrapper {
    display: flex;
    justify-content: center;
    transform: none !important;
}

.sz-dni[data-dni="1"] .swiper-agenda .swiper-slide {
    flex: 0 0 auto;
    width: 300px !important;
    max-width: 100%;
    margin: 0 auto !important;
}

.sz-dni .event-group {
    position: relative;
    margin-bottom: 12px;
    padding: 0 8px;
}

.sz-dni .event-label-above {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    padding: 0 12px;
    background-color: var(--sz-czerwony);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sz-dni .image-special {
    width: 100%;
    height: auto;
}

.sz-dni__tresc {
    padding-top: 24px;
}

/* ------------------------------------------------------------------ */
/* Bilety                                                              */

.sz-bilety__naglowek {
    margin: 0;
    padding: 14px 20px;
    background-color: var(--sz-czerwony);
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.gr-border-bottom {
    border-bottom: 8px solid var(--sz-czerwony);
}

/* ------------------------------------------------------------------ */
/* Bonusy                                                              */

.sz-bonusy .bonuses__brak {
    display: inline-block;
    width: 34px;
    height: 6px;
    margin: 0 auto;
    border-radius: 3px;
    background-color: #d8d8d8;
}

.sz-bonusy .bonuses__text span {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    background-color: var(--sz-czerwony);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Dlaczego warto                                                      */

.sz-powod {
    margin-bottom: 44px;
}

.sz-powod__media img,
.sz-powod__media video {
    width: 100%;
    height: auto;
}

.sz-powod__ramka {
    position: relative;
    padding-top: 100%;
}

.sz-powod__ramka iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------------ */
/* Telefon                                                             */

@media (max-width: 991px) {
    .floating-header .floating-menu {
        display: none !important;
    }

    .sz-hero .header-content {
        min-height: 300px;
        padding-top: 80px;
    }

    .sz-hero .header-title {
        font-size: 2.2rem;
    }

    .sz-hero__data {
        font-size: 1.5rem;
    }

    .sz-vip__tresc {
        padding-left: 16px;
    }

    .sz-blok__podpis {
        font-size: 1.4rem;
    }
}

@media (min-width: 992px) {
    .floating-header {
        padding-left: 6%;
        padding-right: 6%;
    }

    .sz-hero .header-title {
        font-size: 4.2rem;
    }

    .sz-hero__data {
        font-size: 2.6rem;
    }

    .sz-hero .header-logo {
        max-width: 420px;
        max-height: 130px;
    }
}

/* ------------------------------------------------------------------ */
/* Atuty pod wstępem                                                   */

/* Tyle kolumn, ile atutów — mają stać obok siebie, a nie zawijać się
   po jednym na wiersz. Zwężają się razem z ekranem aż do progu telefonu. */
.sz-atuty {
    display: grid;
    grid-template-columns: repeat(var(--sz-atutow, 3), minmax(0, 1fr));
    gap: 0;
    margin-top: 36px;
    background-color: #f7f7f8;
}

.sz-atuty[data-atuty="1"] { --sz-atutow: 1; }
.sz-atuty[data-atuty="2"] { --sz-atutow: 2; }
.sz-atuty[data-atuty="4"] { --sz-atutow: 4; }

.sz-atut {
    padding: 22px 20px;
}

/* Cienka kreska między kolumnami — tylko tam, gdzie kolumny sąsiadują. */
.sz-atut + .sz-atut {
    border-left: 1px solid #e2e3e6;
}

.sz-atut__ikona {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    object-fit: contain;
}

.sz-atut__tytul {
    margin: 0 0 8px;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.sz-atut__opis {
    margin: 0;
    color: #4a4d52;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

/* Poniżej progu telefonu trzy wąskie kolumny robią się nieczytelne,
   więc stają jedna pod drugą — i kreska przenosi się z boku na górę. */
@media (max-width: 575px) {
    .sz-atuty,
    .sz-atuty[data-atuty="2"],
    .sz-atuty[data-atuty="4"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sz-atut + .sz-atut {
        border-left: 0;
        border-top: 1px solid #e2e3e6;
    }
}

/* ------------------------------------------------------------------ */
/* Miejsce wydarzenia i mozaika zdjęć                                  */

.sz-miejsce {
    margin: 56px 0;
}

.sz-miejsce__tresc {
    margin-bottom: 24px;
}

/**
 * Mozaika: pierwsze zdjęcie zajmuje lewą połowę i całą wysokość rzędu,
 * pozostałe układają się po prawej. Przy jednym zdjęciu siatka ma jedną
 * kolumnę, przy dwóch — dwie równe, dopiero od trzech robi się mozaika.
 */
.sz-mozaika {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.sz-mozaika[data-zdjec="1"] {
    grid-template-columns: 1fr;
}

.sz-mozaika[data-zdjec="3"],
.sz-mozaika[data-zdjec="4"],
.sz-mozaika[data-zdjec="wiele"] {
    grid-template-columns: 1fr 1fr 1fr;
}

.sz-mozaika[data-zdjec="3"] .sz-mozaika__kadr--duzy,
.sz-mozaika[data-zdjec="4"] .sz-mozaika__kadr--duzy,
.sz-mozaika[data-zdjec="wiele"] .sz-mozaika__kadr--duzy {
    grid-column: span 2;
    grid-row: span 2;
}

.sz-mozaika__kadr {
    position: relative;
    margin: 0;
    overflow: hidden;
    background-color: #f2f2f3;
}

.sz-mozaika__kadr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sz-mozaika__podpis {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 100%;
    padding: 5px 12px;
    background-color: rgba(255, 255, 255, .88);
    color: #1c1f24;
    font-family: Lato, sans-serif;
    font-size: 12px;
    line-height: 1.3;
}

/* Trzy kolumny na telefonie zrobiłyby ze zdjęć znaczki pocztowe. */
@media (max-width: 767px) {
    .sz-mozaika,
    .sz-mozaika[data-zdjec="3"],
    .sz-mozaika[data-zdjec="4"],
    .sz-mozaika[data-zdjec="wiele"] {
        grid-template-columns: 1fr 1fr;
    }

    .sz-mozaika__kadr--duzy {
        grid-column: span 2 !important;
        grid-row: auto !important;
    }
}

/* ------------------------------------------------------------------ */
/* Prowadzący                                                          */

.sz-prowadzacy {
    margin: 56px 0;
}

.sz-prowadzacy__zdjecie img {
    display: block;
    width: 100%;
    height: auto;
}

.sz-prowadzacy__plakietka {
    display: inline-block;
    margin: 0 0 18px;
    padding: 4px 14px;
    background-color: var(--sz-czerwony);
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 400;
}

.sz-prowadzacy__tytul {
    margin: 0 0 20px;
    font-size: 34px;
    line-height: 1.15;
}

.sz-prowadzacy__imie {
    margin: 24px 0 2px;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.sz-prowadzacy__rola {
    margin: 0;
    color: #6b6e74;
    font-family: Lato, sans-serif;
    font-size: 16px;
    line-height: 1.35;
}

/* Na telefonie zdjęcie idzie nad tekst, więc potrzebuje odstępu pod sobą. */
@media (max-width: 767px) {
    .sz-prowadzacy__zdjecie {
        margin-bottom: 22px;
    }

    .sz-prowadzacy__tytul {
        font-size: 27px;
    }
}

/* ------------------------------------------------------------------ */
/* Prelegenci                                                          */

/* Projekt pokazuje zdjęcia prelegentów w okrągłym kadrze z czerwoną
   obwódką. Motyw daje sam kwadrat bez ramki, więc kształt dokładamy tu. */
.sz-prelegenci .agenda__thumb {
    width: 110px;
    height: 110px;
    max-width: 110px;
    border: 3px solid var(--sz-czerwony);
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .sz-prelegenci .agenda__thumb {
        width: 84px;
        height: 84px;
        max-width: 84px;
    }
}

/* ------------------------------------------------------------------ */
/* Żółte podświetlenie w nagłówkach                                    */

/**
 * Treść z panelu podświetla słowa wklejonym z WordPressa
 * `background-color:#FFFF00`, które maluje cały prostokąt wiersza.
 * Projekt chce paska pod literami, więc podmieniamy tło na gradient.
 * Selektor łapie wszystkie cztery zapisy, jakie potrafi wstawić edytor;
 * `sz-podkreslenie` jest dla treści pisanych od zera.
 */
[style*="background-color:#FFFF00"],
[style*="background-color: #FFFF00"],
[style*="background-color:#ffff00"],
[style*="background-color: #ffff00"],
.sz-podkreslenie {
    background: linear-gradient(
        transparent 55%,
        #ffff00 55%,
        #ffff00 92%,
        transparent 92%
    ) !important;
    padding: 0 .06em;
}