/* ==========================================================================
   Lab² website — main.css
   Structuur:
   1) Shared/base
   2) Page chrome (header & footer)
   3) Home page (.home)
   4) Programme page (.programme)
   5) Practical info page (.practical-info)
   6) Contact page (.contact)
   7) Dark mode + animaties
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
h1, h2, h3 {
    color: #212121;
}
a {
    border-bottom: none;
}
a:hover {
    border-bottom: 1px solid #1E64C8;
}
.standalone-link {
    display: inline !important;
}

/* Breadcrumbs — UGent link style; overrides screen.css */
.breadcrumb a {
    color: #1E64C8;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus {
    color: #1E64C8;
    border-bottom-color: #1E64C8;
}
.breadcrumb > li.active,
.breadcrumb > li.active span,
.breadcrumb > .active {
    color: #202020;
    border-bottom: none;
    cursor: default;
}
.breadcrumb > li:after,
.breadcrumb > li + li:after {
    color: #202020;
}

.btn {
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.btn:hover {
    border: none;
}
.hr-section-header {
    width: 100%;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/* --------------------------------------------------------------------------
   Page chrome (header & footer)
   -------------------------------------------------------------------------- */
.pageheader h1 {
    font-size: 32px;
    margin-top: 20px;
}
.pageheader h1 a {
    color: #fff;
}
.pageheader .page-logo svg path {
    fill: #1E64C8;
}
@media (max-width: 767px) {
    .pageheader h1 {
        display: none;
    }
}

.page-footer .bg-primary {
    padding: 25px 25px 50px 25px;
}

/* ==========================================================================
   Home page (.home)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home — shared
   -------------------------------------------------------------------------- */
.home .photo-row {
    padding: 85px 15px;
}
.home .illustration {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: none;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.1);
}

.home .mobile-site-title {
    display: none;
}
@media (max-width: 767px) {
    .home .mobile-site-title {
        display: block;
        margin-top: 15px;
        background-color: #1E64C8;
        color: #ffffff;
        font-size: 32px;
        padding: 20px 25px;
        border-bottom: 1px solid #eeeeee;
        font-family: 'PannoTextMedium', Arial, sans-serif;
    }
}

/* Content sections: mission, goals, programme, where, when, registration */
.home .mission,
.home .what-to-expect,
.home .programme,
.home .where,
.home .when,
.home .registration {
    padding: 25px 0 25px 50px;
}
.home .when,
.home .registration {
    padding-top: 50px;
}
.home .mission .content,
.home .what-to-expect .content,
.home .programme .content,
.home .where .content,
.home .when .content,
.home .registration .content {
    font-size: 24px;
}
.home .mission .content .label-wrap,
.home .what-to-expect .content .label-wrap,
.home .programme .content .label-wrap,
.home .where .content .label-wrap,
.home .when .content .label-wrap,
.home .registration .content .label-wrap {
    margin-bottom: 15px;
}
.home .mission .content .label-wrap span,
.home .what-to-expect .content .label-wrap span,
.home .programme .content .label-wrap span,
.home .where .content .label-wrap span,
.home .when .content .label-wrap span,
.home .registration .content .label-wrap span,
.home .organizing-committee .label-wrap span {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 3px;
    background-color: #2D8CA8;
    color: #ffffff;
    font-size: 15px;
    padding: 5px 10px;
}
.home .mission .content p,
.home .what-to-expect .content p,
.home .programme .content p,
.home .where .content p,
.home .when .content > p,
.home .registration .content p {
    text-wrap: pretty;
    margin-bottom: 25px;
}
.home .mission .content p.accent,
.home .what-to-expect .content p.accent,
.home .programme .content p.accent,
.home .where .content p.accent {
    font-family: 'PannoTextSemiBold', Arial, sans-serif;
    color: #6a6a6a;
}

.home .organizing-committee .read-more {
    font-size: 24px;
}

/* --------------------------------------------------------------------------
   Home — responsive section width (phone & tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .home .what-to-expect,
    .home .programme,
    .home .where,
    .home .when,
    .home .registration {
        margin-top: 50px;
    }
    .home .mission,
    .home .what-to-expect,
    .home .programme,
    .home .where,
    .home .when,
    .home .registration,
    .home .programme-highlights,
    .home .organizing-committee {
        padding-left: 10px;
        padding-right: 10px;
    }
    .home .organizing-committee {
        margin-left: 10px;
        margin-right: 10px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .home .mission,
    .home .what-to-expect,
    .home .programme,
    .home .where,
    .home .when,
    .home .registration,
    .home .programme-highlights,
    .home .organizing-committee {
        padding-left: 25px;
        padding-right: 25px;
    }
    .home .organizing-committee {
        margin-left: 25px;
        margin-right: 25px;
    }
}
@media (max-width: 991px) {
    .home .photo-row {
        display: none;
    }
    .home .what-to-expect > .row > .col-md-6,
    .home .programme > .row > .col-md-6,
    .home .where > .row > .col-md-6,
    .home .when > .row > .col-md-6,
    .home .registration > .row > .col-md-5:not(.content) {
        display: flex;
        justify-content: center;
        padding-left: 15px;
        padding-right: 15px;
    }
    .home .registration > .row > .col-md-1,
    .home .programme > .row > .col-md-1,
    .home .where > .row > .col-md-1,
    .home .when > .row > .col-md-1 {
        display: none;
    }
    .home .programme > .row > .col-md-6 {
        margin-top: 50px;
    }
    .home .where > .row > .col-md-6:first-child,
    .home .when > .row > .col-md-6:first-child {
        margin-bottom: 50px;
    }
    .home .when .content,
    .home .registration .content {
        padding-right: 0;
    }
    .home .registration > .row > .col-md-5:not(.content) {
        margin-top: 50px;
    }
    .home .when .when-details .row > .col {
        margin-bottom: 25px;
    }
    .home .when .when-details .row > .col:last-child {
        margin-bottom: 0;
    }
    .home .what-to-expect .illustration,
    .home .programme .illustration,
    .home .where .illustration,
    .home .when .illustration,
    .home .registration .illustration {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --------------------------------------------------------------------------
   Home — hero
   -------------------------------------------------------------------------- */
.home .hero .bg-tertiary {
    background-color: #2D8CA8;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}
.home .hero .bg-tertiary .img-wrap {
    min-height: 450px;
}
.home .hero .bg-tertiary .img-wrap img {
    width: 95%;
    height: auto;
}
.home .hero .bg-tertiary .content-wrap {
    padding: 15px 25px;
}
.home .hero .bg-tertiary .content-wrap .subtitle {
    margin-top: 25px;
    color: #ffffff;
    font-size: 20px;
}
.home .hero .bg-tertiary .content-wrap .date-wrap {
    margin: 50px 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 105%;
}

.home .hero-register-btn.btn.btn-default {
    background-color: #246f86;
    border-color: #246f86;
    color: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.home .hero-register-btn.btn.btn-default .panno-arrow-right,
.home .hero-register-btn.btn.btn-default .panno-arrow-right:before {
    color: #ffffff;
    background-color: transparent !important;
}
.home .hero-register-btn.btn.btn-default:hover,
.home .hero-register-btn.btn.btn-default:focus,
.home .hero-register-btn.btn.btn-default:active,
.home .hero-register-btn.btn.btn-default:active:hover,
.home .hero-register-btn.btn.btn-default:active:focus {
    background-color: #1d5b6e;
    border-color: #1d5b6e;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.home .hero-register-btn.btn.btn-default:hover .panno-arrow-right,
.home .hero-register-btn.btn.btn-default:focus .panno-arrow-right,
.home .hero-register-btn.btn.btn-default:active .panno-arrow-right,
.home .hero-register-btn.btn.btn-default:hover .panno-arrow-right:before,
.home .hero-register-btn.btn.btn-default:focus .panno-arrow-right:before,
.home .hero-register-btn.btn.btn-default:active .panno-arrow-right:before,
.home .hero-register-btn.btn.btn-default .panno-arrow-right:hover,
.home .hero-register-btn.btn.btn-default .panno-arrow-right:hover:before {
    color: #ffffff;
    background-color: transparent !important;
}
.home .hero-register-btn.btn.btn-default.disabled,
.home .hero-register-btn.btn.btn-default[disabled],
.home .hero-register-btn.btn.btn-default[aria-disabled="true"] {
    background-color: #7fa9b7;
    border-color: #7fa9b7;
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}

.home .hero .display {
    background-color: #2D8CA8;
}
.home .hero .display a {
    color: #ffffff;
}
.home .hero .display a:hover {
    border-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Home — mission
   -------------------------------------------------------------------------- */
.home .mission .logo-wrap img {
    margin-left: 25px;
    width: 80%;
    height: auto;
}
@media (max-width: 991px) {
    .home .mission .logo-wrap {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Home — programme highlights
   -------------------------------------------------------------------------- */
.home .programme-highlights {
    margin: 50px 0;
    padding: 0 25px;
}
.home .programme-highlights .box {
    border: 1px solid rgba(30, 100, 200, 0.18);
    font-size: 20px;
    line-height: 1.2;
    border-radius: 10px;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    padding: 35px 25px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.home .programme-highlights .box h3 {
    margin: 0 0 10px 0;
    color: #2D8CA8;
    font-size: 22px;
    line-height: 1.15;
}
@media (min-width: 992px) {
    .home .programme-highlights .row {
        display: flex;
        flex-wrap: wrap;
    }
    .home .programme-highlights .row > .col {
        display: flex;
    }
    .home .programme-highlights .row > .col .box {
        width: 100%;
        height: 100%;
    }
}
@media (max-width: 991px) {
    .home .programme-highlights .row > .col {
        margin-bottom: 25px;
    }
    .home .programme-highlights .row > .col:last-child {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Home — when
   -------------------------------------------------------------------------- */
.home .when .content {
    padding-right: 50px;
}
.home .when .when-details {
    margin-top: 30px;
    margin-bottom: 15px;
}
.home .when .when-details .box {
    border: 1px solid rgba(30, 100, 200, 0.18);
    font-size: 20px;
    line-height: 1.2;
    border-radius: 10px;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    padding: 20px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    margin-bottom: 15px;
}
.home .when .when-details .box h3 {
    margin: 0 0 10px 0;
    color: #2D8CA8;
    font-size: 22px;
    line-height: 1.15;
}
.home .when .when-details .box p {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}
@media (min-width: 992px) {
    .home .when .when-details .row {
        display: flex;
        flex-wrap: wrap;
    }
    .home .when .when-details .row > .col {
        display: flex;
    }
    .home .when .when-details .row > .col .box {
        width: 100%;
        height: 100%;
        margin-bottom: 0;
    }
}
@media (max-width: 991px) {
    .home .when .when-details .box {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Home — registration
   -------------------------------------------------------------------------- */
.home .registration .content {
    padding-right: 50px;
}
.home .registration .content p.faded {
    color: #888888;
}

/* --------------------------------------------------------------------------
   Home — organizing committee
   -------------------------------------------------------------------------- */
.home .organizing-committee {
    margin: 50px 25px 50px;
    padding: 50px 25px 25px;
    text-align: center;
}
.home .organizing-committee .centered-label {
    margin-bottom: 50px;
    text-align: center;
}
.home .organizing-committee-wrap {
    margin-top: 10px;
}
.home .organizing-committee-wrap .col-md-4 {
    text-align: center;
    padding: 0 15px;
}
.home .organizing-committee-wrap .col-md-4 .img-wrap {
    padding: 15px 40px;
}
.home .organizing-committee-wrap .col-md-4 img {
    width: 175px;
    height: 175px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.home .organizing-committee-wrap .col-md-4 .name {
    font-size: 24px;
    margin-top: 15px;
}
.home .organizing-committee-wrap .col-md-4 .role {
    font-size: 20px;
    color: #888888;
}
.home .organizing-committee .contact-btn-wrap {
    margin-top: 25px;
    text-align: center;
    padding: 40px 0 25px;
}
.home .organizing-committee .btn-tertiary i {
    color: #ffffff;
}
.home .organizing-committee .btn-tertiary:hover {
    color: #ffffff;
    background-color: #174e9b;
}
.home .organizing-committee .hr-section-header.oc {
    margin: 50px 0 0 0;
}

/* ==========================================================================
   Programme page (.programme)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Programme — intro
   -------------------------------------------------------------------------- */
.programme .intro {
    font-size: 24px;
    margin-bottom: 50px;
}
.programme .intro .label-wrap {
    margin-bottom: 15px;
}
.programme .intro .label-wrap span {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 3px;
    background-color: #2D8CA8;
    color: #ffffff;
    font-size: 15px;
    padding: 5px 10px;
}
.programme .intro h2 {
    font-size: 28px;
}
.programme .hr-section-header {
    margin: 65px 0;
}

/* --------------------------------------------------------------------------
   Programme — when-details
   -------------------------------------------------------------------------- */
.programme .when-details {
    margin-top: 30px;
    margin-bottom: 15px;
}
.programme .when-details .box {
    border: 1px solid rgba(30, 100, 200, 0.18);
    font-size: 20px;
    line-height: 1.2;
    border-radius: 10px;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    padding: 20px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    margin-bottom: 15px;
}
.programme .when-details .box h3 {
    margin: 0 0 10px 0;
    color: #2D8CA8;
    font-size: 22px;
    line-height: 1.15;
}
.programme .when-details .box p {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
}
@media (min-width: 992px) {
    .programme .when-details .row {
        display: flex;
        flex-wrap: wrap;
    }
    .programme .when-details .row > .col {
        display: flex;
    }
    .programme .when-details .row > .col .box {
        width: 100%;
        height: 100%;
        margin-bottom: 0;
    }
}
@media (max-width: 991px) {
    .programme .when-details .box {
        margin-bottom: 0;
    }
    .programme .when-details .row > .col {
        margin-bottom: 25px;
    }
    .programme .when-details .row > .col:last-child {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Programme — schedule
   -------------------------------------------------------------------------- */
.programme .schedule {
    padding: 0;
}
.programme .schedule-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 25px;
    margin-bottom: 28px;
}
.programme .schedule-time {
    flex: 0 0 140px;
    font-family: 'PannoTextLight', Arial, sans-serif;
    font-size: 42px;
    padding-top: 20px;
}
.programme .schedule-item .box {
    flex: 1 1 280px;
    min-width: 0;
    border: 1px solid rgba(30, 100, 200, 0.18);
    font-size: 20px;
    line-height: 1.35;
    border-radius: 10px;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    padding: 28px 30px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.programme .schedule-item .box h3 {
    margin: 0 0 8px 0;
    color: #2D8CA8;
    font-size: 28px;
    line-height: 1.2;
}
.programme .schedule-item .box > p,
.programme .schedule-item .box .box-content > p {
    margin: 0;
    font-size: 20px;
}
.programme .schedule-item .box.box--speaker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: start;
    column-gap: 16px;
}
.programme .schedule-item .box.box--speaker .box-content {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    min-width: 0;
}
.programme .schedule-item .box.box--speaker .box-content h3,
.programme .schedule-item .box.box--speaker .box-content p {
    margin-top: 0;
    padding-top: 0;
}
.programme .schedule-item .box.box--speaker .box-content p {
    margin-bottom: 0;
    font-size: 24px;
}
.programme .schedule-speaker-photo {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0;
}
.programme .schedule-speaker-photo img {
    display: block;
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(45, 140, 168, 0.4);
    box-shadow: rgba(45, 140, 168, 0.25) 0px 6px 18px, rgba(60, 64, 67, 0.12) 0px 2px 6px;
}
.programme .schedule-note {
    margin: 0 0 12px 0 !important;
    color: #6a6a6a;
    font-size: 18px !important;
}
.programme .schedule-sublist {
    margin: 25px 0;
    padding: 0;
    list-style: none;
    font-size: 20px;
}
.programme .schedule-sublist li {
    margin-bottom: 15px;
    margin-left: 25px;
    font-size: 22px;
}
.programme .schedule-sublist li:last-child {
    margin-bottom: 0;
}
.programme .schedule-keynotes {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 20px;
}
.programme .schedule-keynotes li {
    margin-bottom: 16px;
}
.programme .schedule-keynotes li:last-child {
    margin-bottom: 0;
}
.programme .schedule-keynotes p {
    margin: 6px 0 0 0;
    color: #6a6a6a;
    font-size: 22px;
}
.programme .schedule-item .more-wrap {
    margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Programme — add-to-calendar
   -------------------------------------------------------------------------- */
.programme .add-to-calendar {
    margin: 50px 0 100px 0;
}
.programme .add-to-calendar p {
    font-size: 22px;
    padding: 15px 0;
}

/* --------------------------------------------------------------------------
   Programme — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .programme .intro,
    .programme .schedule,
    .programme .programme-page-footer {
        padding-left: 10px;
        padding-right: 10px;
    }
    .programme .schedule > .intro {
        padding-left: 0;
        padding-right: 0;
    }
    .programme .schedule-time {
        flex: 0 0 100%;
        padding-top: 0;
        margin-bottom: 4px;
    }
    .programme .schedule-item .box.box--speaker {
        column-gap: 12px;
        padding: 20px;
    }
    .programme .schedule-speaker-photo img {
        width: 64px;
        height: 64px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .programme .intro,
    .programme .schedule,
    .programme .programme-page-footer {
        padding-left: 25px;
        padding-right: 25px;
    }
    .programme .schedule > .intro {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   Practical info page (.practical-info)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Practical info — intro
   -------------------------------------------------------------------------- */
.practical-info .intro {
    font-size: 24px;
    margin-bottom: 35px;
}
.practical-info .intro .label-wrap {
    margin-bottom: 15px;
}
.practical-info .intro .label-wrap span {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 3px;
    background-color: #2D8CA8;
    color: #ffffff;
    font-size: 15px;
    padding: 5px 10px;
}
.practical-info .intro h2,
.practical-info .location h2 {
    font-size: 28px;
    margin-top: 25px;
}
.practical-info .intro .content p.accent {
    font-family: 'PannoTextSemiBold', Arial, sans-serif;
    color: #6a6a6a;
    text-wrap: pretty;
    margin-bottom: 25px;
}
.practical-info .intro .note {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 22px;
}
.practical-info .hr-section-header {
    margin: 65px 0;
}

/* --------------------------------------------------------------------------
   Practical info — when-details
   -------------------------------------------------------------------------- */
.practical-info .when-details {
    margin-top: 30px;
    margin-bottom: 15px;
}
.practical-info .when-details .box {
    border: 1px solid rgba(30, 100, 200, 0.18);
    font-size: 20px;
    line-height: 1.2;
    border-radius: 10px;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    padding: 20px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    margin-bottom: 15px;
}
.practical-info .when-details .box h3 {
    margin: 0 0 10px 0;
    color: #2D8CA8;
    font-size: 22px;
    line-height: 1.15;
}
.practical-info .when-details .box p {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
}
@media (min-width: 992px) {
    .practical-info .when-details .row {
        display: flex;
        flex-wrap: wrap;
    }
    .practical-info .when-details .row > .col {
        display: flex;
    }
    .practical-info .when-details .row > .col .box {
        width: 100%;
        height: 100%;
        margin-bottom: 0;
    }
}
@media (max-width: 991px) {
    .practical-info .when-details .box {
        margin-bottom: 0;
    }
    .practical-info .when-details .row > .col {
        margin-bottom: 25px;
    }
    .practical-info .when-details .row > .col:last-child {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Practical info — add-to-calendar
   -------------------------------------------------------------------------- */
.practical-info .add-to-calendar {
    margin: 0 0 50px 0;
}
.practical-info .add-to-calendar p {
    font-size: 22px;
    padding: 15px 0;
}

/* --------------------------------------------------------------------------
   Practical info — photo galleries
   -------------------------------------------------------------------------- */
.practical-info .photo-row.campus-gallery {
    padding: 0 25px 50px 50px;
}
.practical-info .photo-row.practical-gallery-main {
    padding: 75px 25px;
}
.practical-info .photo-row.practical-gallery-main .illustration,
.practical-info .photo-row.campus-gallery .illustration {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: none;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.1);
}
.practical-info .photo-row.campus-gallery--secondary {
    padding-top: 0;
}
@media (max-width: 991px) {
    .practical-info .photo-row {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Practical info — venue-highlight
   -------------------------------------------------------------------------- */
.practical-info .venue-highlight {
    padding: 10px 0 25px 0;
}
.practical-info .venue-box {
    border: 1px solid rgba(30, 100, 200, 0.18);
    font-size: 20px;
    line-height: 1.4;
    border-radius: 10px;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    text-align: center;
    overflow: hidden;
}
.practical-info .venue-box-content {
    padding: 36px 40px 22px 40px;
}
.practical-info .venue-box h3 {
    margin: 0 0 12px 0;
    font-size: 36px;
    line-height: 1.2;
}
.practical-info .venue-address {
    margin: 0 0 20px 0;
    font-size: 24px;
    line-height: 1.25;
}
.practical-info .venue-map-embed {
    width: 100%;
    line-height: 0;
}
.practical-info .venue-map-embed iframe {
    display: block;
    width: 100%;
    height: 66.67vh;
}

/* --------------------------------------------------------------------------
   Practical info — transport-options
   -------------------------------------------------------------------------- */
.practical-info .transport-options {
    padding: 0 25px 25px 50px;
}
.practical-info .transport-grid {
    margin-top: 10px;
}
.practical-info .transport-box {
    border: 1px solid rgba(30, 100, 200, 0.18);
    font-size: 20px;
    line-height: 1.4;
    border-radius: 10px;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    padding: 35px 25px 50px 25px;
    height: 100%;
    margin-bottom: 25px;
}
.practical-info .transport-box h3 {
    margin: 12px 0 14px 0;
    color: #2D8CA8;
    font-size: 22px;
    line-height: 1.15;
}
.practical-info .transport-box p {
    margin: 0 0 12px 0;
    font-size: 20px;
    line-height: 1.25;
}
.practical-info .transport-box p:last-child {
    margin-bottom: 0;
}
.practical-info .transport-box a {
    color: #1E64C8;
    border-bottom-color: transparent;
}
.practical-info .transport-box a:hover,
.practical-info .transport-box a:focus {
    color: #1E64C8;
    border-bottom-color: #1E64C8;
}
.practical-info .transport-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(45, 140, 168, 0.12);
}
.practical-info .transport-icon svg {
    width: 28px;
    height: 28px;
}
.practical-info .transport-icon svg path {
    fill: #2D8CA8;
}
@media (min-width: 992px) {
    .practical-info .transport-grid {
        display: flex;
        flex-wrap: wrap;
    }
    .practical-info .transport-grid > .col {
        display: flex;
    }
    .practical-info .transport-grid > .col .transport-box {
        width: 100%;
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Practical info — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .practical-info .intro,
    .practical-info .venue-highlight,
    .practical-info .transport-options,
    .practical-info .photo-row.campus-gallery,
    .practical-info .photo-row.practical-gallery-main {
        padding-left: 10px;
        padding-right: 10px;
    }
    .practical-info .venue-box {
        border-radius: 10px;
    }
    .practical-info .venue-box-content {
        padding: 28px 22px 18px 22px;
    }
    .practical-info .venue-map-embed iframe {
        height: 66.67vh;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .practical-info .intro,
    .practical-info .venue-highlight,
    .practical-info .transport-options,
    .practical-info .photo-row.campus-gallery,
    .practical-info .photo-row.practical-gallery-main {
        padding-left: 25px;
        padding-right: 25px;
    }
}

/* ==========================================================================
   Contact page (.contact)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contact — page intro & email
   -------------------------------------------------------------------------- */
.contact .page-intro {
    padding: 25px 0 0 0;
}
.contact .intro {
    font-size: 24px;
}
.contact hr.hr-section-header {
    margin: 35px 0;
}
.contact .email {
    padding: 25px 0 100px 0;
}
.contact .email h2 {
    margin-bottom: 20px;
    font-size: 32px;
}
.contact .email p {
    font-size: 24px;
}
.contact .content p.accent {
    font-family: 'PannoTextSemiBold', Arial, sans-serif;
    color: #6a6a6a;
    text-wrap: pretty;
    margin-bottom: 25px;
}
.contact .page-intro .label-wrap {
    margin-bottom: 15px;
}
.contact .page-intro .label-wrap span,
.contact .page-contact .label-wrap span,
.contact .committee-header .label-wrap span {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 3px;
    background-color: #2D8CA8;
    color: #ffffff;
    font-size: 15px;
    padding: 5px 10px;
}
.contact .email p.faded {
    margin-top: 35px;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Contact — page-contact & email button
   -------------------------------------------------------------------------- */
.contact .page-contact {
    padding: 10px 0 35px 0;
}
.contact .page-contact > .row {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.contact .page-contact .content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 32px;
    color: #212121;
}
.contact .page-contact .content .label-wrap {
    display: none;
}
.contact .page-contact .content p {
    font-size: 20px;
    line-height: 1.45;
    margin-bottom: 20px;
    text-wrap: pretty;
}
.contact .contact-email-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}
.contact .contact-email-wrap .email-btn-wrap {
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: center;
    background: transparent;
    box-shadow: none;
}
.contact .contact-email-wrap .arrow-wrap {
    width: 120px;
    height: 50px;
    margin-bottom: 10px;
}
.contact .contact-email-wrap .email-btn {
    display: inline-block;
    font-family: 'PannoTextSemiBold', Arial, sans-serif;
    font-size: 26px;
    color: #ffffff;
    background-color: #1E64C8;
    padding: 18px 32px;
    border-radius: 8px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 2px 6px 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact .contact-email-wrap .email-btn:hover,
.contact .contact-email-wrap .email-btn:focus {
    background-color: #174e9b;
    color: #ffffff;
    border-bottom: none;
    transform: translateY(-2px);
    box-shadow: rgba(60, 64, 67, 0.35) 0px 3px 8px 2px;
}

/* --------------------------------------------------------------------------
   Contact — committee
   -------------------------------------------------------------------------- */
.contact .committee-section {
    padding: 25px 25px 60px 50px;
}
.contact .committee-header {
    margin-bottom: 30px;
}
.contact .committee-header h2 {
    margin: 0 0 12px 0;
    font-size: 32px;
    color: #212121;
}
.contact .committee-header p.accent {
    font-family: 'PannoTextSemiBold', Arial, sans-serif;
    color: #6a6a6a;
    font-size: 20px;
    margin: 0;
    text-wrap: pretty;
}
.contact .committee-cards > .col-xs-12 {
    margin-bottom: 20px;
}
.contact .committee-card {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    padding: 22px 24px;
    border: 1px solid rgba(30, 100, 200, 0.18);
    border-radius: 12px;
    background-image: linear-gradient(135deg, #ffffff 0%, #e8f1f8 100%);
    box-shadow: rgba(60, 64, 67, 0.25) 0px 2px 6px 0px, rgba(60, 64, 67, 0.12) 0px 4px 12px 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact .committee-card:hover {
    transform: translateY(-3px);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 4px 10px 0px, rgba(60, 64, 67, 0.18) 0px 8px 20px 4px;
}
.contact .committee-card-photo {
    flex: 0 0 96px;
}
.contact .committee-card-photo img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid rgba(45, 140, 168, 0.35);
    box-shadow: rgba(45, 140, 168, 0.2) 0px 4px 12px;
}
.contact .committee-card-body {
    min-width: 0;
}
.contact .committee-card-body h3 {
    margin: 0 0 6px 0;
    font-size: 22px;
    line-height: 1.2;
    color: #2D8CA8;
}
.contact .committee-card-body p {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    color: #6a6a6a;
}
.contact .committee-footer {
    margin-top: 35px;
    text-align: center;
}
.contact .committee-footer .btn-default {
    font-family: 'PannoTextSemiBold', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Contact — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .contact .page-intro,
    .contact .page-contact,
    .contact .committee-section {
        padding-left: 0;
        padding-right: 0;
    }
    .contact .committee-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
    .contact .committee-card-photo {
        flex: 0 0 auto;
    }
    .contact .committee-card-photo img {
        width: 120px;
        height: 120px;
    }
    .contact .contact-email-wrap .email-btn {
        font-size: 20px;
        padding: 14px 22px;
        word-break: break-all;
        text-align: center;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .contact .page-intro,
    .contact .page-contact,
    .contact .committee-section {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (min-width: 992px) {
    .contact .committee-cards {
        display: flex;
        flex-wrap: wrap;
    }
    .contact .committee-cards > .col-xs-12 {
        display: flex;
        margin-bottom: 0;
    }
    .contact .committee-cards > .col-xs-12 .committee-card {
        width: 100%;
    }
}

/* ==========================================================================
   Dark mode
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    body {
        background-color: #11151d;
        color: #d9e1ef;
    }
    .content-wrap {
        background-color: transparent;
        color: #d9e1ef;
    }
    a {
        color: #3B82F6;
        text-decoration: none;
    }
    a:hover,
    a:focus {
        color: #3B82F6;
        border-bottom: 1px solid #3B82F6;
        text-decoration: none;
    }

    .standalone-link:hover,
    .standalone-link:focus {
        border-bottom: 1px solid #3B82F6;
        text-decoration: none;
    }
    .standalone-link:hover span,
    .standalone-link:focus span {
        border-bottom-color: #3B82F6;
    }

    .breadcrumb a {
        color: #3B82F6;
        border-bottom-color: transparent;
    }
    .breadcrumb a:hover,
    .breadcrumb a:focus {
        color: #3B82F6;
        border-bottom-color: #3B82F6;
    }
    .breadcrumb > li.active,
    .breadcrumb > li.active span,
    .breadcrumb > .active {
        color: #a8b4c8;
    }
    .breadcrumb > li:after,
    .breadcrumb > li + li:after {
        color: #7e8aa3;
    }

    /* --------------------------------------------------------------------------
       Dark mode — home page
       -------------------------------------------------------------------------- */
    .home .mission,
    .home .what-to-expect,
    .home .programme,
    .home .where,
    .home .when,
    .home .registration {
        color: #d9e1ef;
    }
    .home .mission h1,
    .home .what-to-expect h1,
    .home .programme h1,
    .home .where h1,
    .home .when h1,
    .home .registration h1 {
        color: #f3f8ff;
    }
    .home .mission .content p.accent,
    .home .what-to-expect .content p.accent,
    .home .programme .content p.accent,
    .home .where .content p.accent {
        color: #7e8aa3;
    }
    .home .registration .content p.faded,
    .home .organizing-committee-wrap .col-md-4 .role {
        color: #a8b4c8;
    }
    .home .programme-highlights .box,
    .home .when .when-details .box {
        background-image:
            radial-gradient(ellipse 120% 80% at 100% 0%, rgba(45, 140, 168, 0.14) 0%, transparent 55%),
            linear-gradient(155deg, #141e2c 0%, #1c2d40 48%, #1a3545 100%);
        border-color: rgba(45, 140, 168, 0.28);
        color: #e7eefc;
        box-shadow: rgba(0, 0, 0, 0.45) 0px 1px 2px 0px, rgba(0, 0, 0, 0.3) 0px 2px 8px 2px;
    }
    .home .programme-highlights .box h3,
    .home .when .when-details .box h3 {
        color: #68c5df;
    }
    .home .programme-highlights .box p,
    .home .when .when-details .box p {
        color: #a8b4c8;
    }
    .home .organizing-committee .hr-section-header.oc {
        background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.45),
            rgba(255, 255, 255, 0)
        );
    }
    .home .illustration {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
    }

    /* --------------------------------------------------------------------------
       Dark mode — programme page
       -------------------------------------------------------------------------- */
    .programme .intro,
    .programme .programme-page-footer {
        color: #d9e1ef;
    }
    .programme .intro h1,
    .programme .intro h2 {
        color: #f3f8ff;
    }
    .programme .intro p.accent {
        color: #7e8aa3;
    }
    .programme .when-details .box,
    .programme .schedule-item .box {
        background-image:
            radial-gradient(ellipse 120% 80% at 100% 0%, rgba(45, 140, 168, 0.14) 0%, transparent 55%),
            linear-gradient(155deg, #141e2c 0%, #1c2d40 48%, #1a3545 100%);
        border-color: rgba(45, 140, 168, 0.28);
        color: #e7eefc;
        box-shadow: rgba(0, 0, 0, 0.45) 0px 1px 2px 0px, rgba(0, 0, 0, 0.3) 0px 2px 8px 2px;
    }
    .programme .when-details .box h3,
    .programme .schedule-item .box h3 {
        color: #68c5df;
    }
    .programme .when-details .box p,
    .programme .schedule-item .box > p,
    .programme .schedule-item .box .box-content > p,
    .programme .schedule-keynotes p {
        color: #a8b4c8;
    }
    .programme .schedule-time {
        color: #f3f8ff;
    }
    .programme .schedule-note {
        color: #7e8aa3 !important;
    }
    .programme .hr-section-header {
        background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.45),
            rgba(255, 255, 255, 0)
        );
    }

    /* --------------------------------------------------------------------------
       Dark mode — practical info page
       -------------------------------------------------------------------------- */
    .practical-info .intro {
        color: #d9e1ef;
    }
    .practical-info .intro h1,
    .practical-info h2 {
        color: #f3f8ff;
    }
    .practical-info .intro p.accent {
        color: #7e8aa3;
    }
    .practical-info .when-details .box {
        background-image:
            radial-gradient(ellipse 120% 80% at 100% 0%, rgba(45, 140, 168, 0.14) 0%, transparent 55%),
            linear-gradient(155deg, #141e2c 0%, #1c2d40 48%, #1a3545 100%);
        border-color: rgba(45, 140, 168, 0.28);
        color: #e7eefc;
        box-shadow: rgba(0, 0, 0, 0.45) 0px 1px 2px 0px, rgba(0, 0, 0, 0.3) 0px 2px 8px 2px;
    }
    .practical-info .when-details .box h3 {
        color: #68c5df;
    }
    .practical-info .when-details .box p {
        color: #a8b4c8;
    }
    .practical-info .add-to-calendar p {
        color: #a8b4c8;
    }
    .practical-info .transport-box {
        background-image:
            radial-gradient(ellipse 120% 80% at 100% 0%, rgba(45, 140, 168, 0.14) 0%, transparent 55%),
            linear-gradient(155deg, #141e2c 0%, #1c2d40 48%, #1a3545 100%);
        border-color: rgba(45, 140, 168, 0.28);
        color: #e7eefc;
        box-shadow: rgba(0, 0, 0, 0.45) 0px 1px 2px 0px, rgba(0, 0, 0, 0.3) 0px 2px 8px 2px;
    }
    .practical-info .transport-box h3 {
        color: #68c5df;
    }
    .practical-info .transport-box p {
        color: #a8b4c8;
    }
    .practical-info .transport-box a {
        color: #3B82F6;
        border-bottom-color: transparent;
    }
    .practical-info .transport-box a:hover,
    .practical-info .transport-box a:focus {
        color: #3B82F6;
        border-bottom-color: #3B82F6;
    }
    .practical-info .transport-icon {
        background: rgba(45, 140, 168, 0.22);
    }
    .practical-info .transport-icon svg path {
        fill: #68c5df;
    }
    .practical-info .venue-box {
        background-image:
            radial-gradient(ellipse 120% 80% at 100% 0%, rgba(45, 140, 168, 0.14) 0%, transparent 55%),
            linear-gradient(155deg, #141e2c 0%, #1c2d40 48%, #1a3545 100%);
        border-color: rgba(45, 140, 168, 0.28);
        color: #e7eefc;
        box-shadow: rgba(0, 0, 0, 0.45) 0px 1px 2px 0px, rgba(0, 0, 0, 0.3) 0px 2px 8px 2px;
    }
    .practical-info .venue-box h3 {
        color: #68c5df;
    }
    .practical-info .venue-address {
        color: #a8b4c8;
    }
    .practical-info .hr-section-header {
        background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.45),
            rgba(255, 255, 255, 0)
        );
    }

    /* --------------------------------------------------------------------------
       Dark mode — contact page
       -------------------------------------------------------------------------- */
    .contact .intro,
    .contact .email,
    .contact .committee-section {
        color: #d9e1ef;
    }
    .contact .intro h1,
    .contact .email h2,
    .contact .committee-header h2 {
        color: #f3f8ff;
    }
    .contact .intro p.accent,
    .contact .committee-header p.accent {
        color: #7e8aa3;
    }
    .contact .email p.faded {
        color: #a8b4c8;
    }
    .contact hr.hr-section-header {
        background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.45),
            rgba(255, 255, 255, 0)
        );
    }
    .contact .contact-email-wrap .arrow-wrap svg g {
        stroke: #68c5df;
    }
    .contact .contact-email-wrap .email-btn {
        background-color: #1E64C8;
    }
    .contact .contact-email-wrap .email-btn:hover,
    .contact .contact-email-wrap .email-btn:focus {
        background-color: #255db4;
    }
    .contact .contact-email-wrap .email-btn-wrap {
        background: transparent;
        border-color: transparent;
    }
    .contact .committee-card {
        background-image:
            radial-gradient(ellipse 100% 80% at 0% 0%, rgba(45, 140, 168, 0.12) 0%, transparent 50%),
            linear-gradient(155deg, #141e2c 0%, #1c2d40 48%, #1a3545 100%);
        border-color: rgba(45, 140, 168, 0.28);
        color: #e7eefc;
    }
    .contact .committee-card-body h3 {
        color: #68c5df;
    }
    .contact .committee-card-body p {
        color: #a8b4c8;
    }
    .contact .committee-card-photo img {
        border-color: rgba(104, 197, 223, 0.45);
    }

    .pageheader {
        .page-logo {
            background-color: #11151d;
            svg path {
                fill: #3B82F6;
            }
        }
        .bg-primary {
            color: #3B82F6;
        }
        #navbar {
            background-color: #11151d;
        }
        .nav-primary li a span {
            color: #3B82F6;
        }
        @media screen and (max-width: 767px) {
            #navbar .mobile {
                background-color: #1E64C8;
            }
            .nav-primary li a span {
                color: #ffffff;
            }
        }
    }
}

/* --------------------------------------------------------------------------
   Scroll-driven reveal animations (home)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .scroll-reveal {
            view-timeline-name: --reveal;
            view-timeline-axis: block;
            animation: cubic-bezier(0.33, 1, 0.68, 1) forwards;
            animation-timeline: --reveal;
            animation-range: entry 5% cover 35%;
            opacity: 0;
        }

        .from-left { --start-x: -100px; --start-y: 0; animation-name: slide-in; }
        .from-right { --start-x: 100px; --start-y: 0; animation-name: slide-in; }
        .from-bottom {
            --start-x: 0;
            --start-y: 100px;
            animation-name: slide-in;
            animation-range: entry 5% cover 22%;
        }

        .extreme-left { --start-x: -100vw; --start-y: 0; animation-name: slide-in; animation-range: entry 0% cover 40%; }
        .extreme-right { --start-x: 100vw; --start-y: 0; animation-name: slide-in; animation-range: entry 0% cover 40%; }

        .zoom-in { animation-name: zoom-in; }
        .rotate-in { animation-name: rotate-in; }

        @keyframes slide-in {
            from { opacity: 0; transform: translate(var(--start-x), var(--start-y)); }
            to { opacity: 1; transform: translate(0, 0); }
        }

        @keyframes zoom-in {
            from { opacity: 0; transform: scale(0.3) translateY(100px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        @keyframes rotate-in {
            from { opacity: 0; transform: rotate(-15deg) scale(0.8) translateY(100px); }
            to { opacity: 1; transform: rotate(0) scale(1) translateY(0); }
        }
    }
}