/*
 * Camp Displays — Pool page overrides (FullHD portrait, 1080 x 1920).
 *
 * Loaded ONLY on pool pages (backend layout = pagets__campDisplayPool).
 * Layered on top of site_package's full CSS so layouts and components
 * keep their proportions. Goals:
 *   1. hide site chrome (header / nav / breadcrumb / footer / cookie / backdrop)
 *   2. let main content take the full viewport
 *   3. punctual tuning for FullHD-portrait (1080x1920) viewing
 *
 * Body class on pool pages: .display.display--portrait
 */

html,
body.display.display--portrait {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
 * Hide chrome (matches site_package's actual markup)
 * --------------------------------------------------------------------------*/
/* Keep .header visible (logo + branding banner) but hide navigation,
   burger menu, and aside-nav inside it. */
body.display.display--portrait .container.navigation,
body.display.display--portrait .header .burger,
body.display.display--portrait .header .nav-aside,
body.display.display--portrait nav.breadcrumb,
body.display.display--portrait .container.container--legal,
body.display.display--portrait .page__footer,
body.display.display--portrait .skip-link,
body.display.display--portrait .backdrop,
body.display.display--portrait .cookie,
body.display.display--portrait #cookieconsent {
    display: none !important;
}

/* Per-page opt-in: hide the entire .header (logo + branding banner)
   when tx_campdisplays_hide_header is set on the pool page. */
body.display.display--no-header .header {
    display: none !important;
}

/* No layout overrides — site_package handles content layout (incl. .pagebox
   centering). Only the html/body get sized to fill the iframe viewport. */

/* --------------------------------------------------------------------------
 * Optional per-page alignment (TCA field tx_campdisplays_align):
 *   ""        → no class added — default left alignment
 *   "center"  → body gets .display--align-center
 *   "right"   → body gets .display--align-right
 *
 * The selectors below center/right-align typical block-level content. Add
 * more specific selectors here if a particular component needs custom logic.
 * --------------------------------------------------------------------------*/
body.display--align-center main#content,
body.display--align-center .ce-bodytext,
body.display--align-center .pagebox {
    text-align: center;
}
body.display--align-center main#content > *,
body.display--align-center .pagebox > * {
    margin-left: auto;
    margin-right: auto;
}

/* Headlines and other capped-width blocks (e.g. .hl with max-width:
   var(--text-max-width-wide)) are not direct children of main#content,
   so the rule above doesn't reach them. Center their boxes explicitly so
   the visible text — which is already text-align:center — sits centered
   in the viewport instead of flush-left within its capped box. */
body.display--align-center :is(h1, h2, h3, h4, h5, h6, .hl, .h1, .h2, .h3, .h4, .h5, .h6) {
    margin-left: auto;
    margin-right: auto;
}

body.display--align-right main#content,
body.display--align-right .ce-bodytext,
body.display--align-right .pagebox {
    text-align: right;
}

/* --------------------------------------------------------------------------
 * Bild-Modul (images_only) full-bleed when header is hidden.
 * Neutralises .page__content's horizontal padding (var(--pbp)) via negative
 * margin so the CE spans the full iframe width.
 * --------------------------------------------------------------------------*/
body.display.display--portrait.display--no-header .images_only {
    margin: 0 calc(var(--pbp) * -1);
}
body.display.display--portrait.display--no-header .images_only .images,
body.display.display--portrait.display--no-header .images_only .images > *,
body.display.display--portrait.display--no-header .images_only figure {
    margin-top: 0;
}
body.display.display--portrait.display--no-header .images_only img {
    max-width: none;
}

/* --------------------------------------------------------------------------
 * FullHD-portrait Sessionplaner tuning (1080x1920)
 * Triggers on the viewport size of the iframe / display device.
 * --------------------------------------------------------------------------*/
@media screen and (max-width: 1080px) and (min-height: 1800px) {

    .sessionplaner {
        margin-top: 50px !important;
        overflow: hidden !important;
    }

    .sessionplaner .sessionplaner-day + .sessionplaner-day {
        margin-top: 60px !important;
    }

    .sessionplaner .sessionplaner-day-header {
        margin-bottom: 20px !important;
    }

    .sessionplaner .sessionplaner-day-title {
        font-size: 68px !important;
        line-height: 1.1 !important;
    }

    .sessionplaner .sessionplaner-day-date {
        font-size: 20px !important;
        margin-top: 6px !important;
    }

    .sessionplaner .sessionplaner-room-header-title {
        font-size: 16px !important;
    }

    .sessionplaner .sessionplaner-session-title {
        font-size: 15px !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
    }

    .sessionplaner .sessionplaner-track-description {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .sessionplaner .sessionplaner-slot-track-break {
        font-size: 18px !important;
    }

    .sessionplaner .sessionplaner-slot-time {
        font-size: 15px !important;
        padding: 20px 16px !important;
    }

    .sessionplaner .sessionplaner-slot-track {
        padding: 18px 10px !important;
        overflow: hidden !important;
        min-width: 0 !important;
    }

    .sessionplaner .sessionplaner-track-sessions,
    .sessionplaner .sessionplaner-sessionbox {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .sessionplaner .sessionplaner-slot-header {
        padding: 14px 0 !important;
    }

    .sessionplaner .sessionplaner-slot {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        overflow: hidden !important;
    }
}