/*
 * Chaosbreaker Core – Mobile Portrait Guard
 * Defensive layout rules only. Desktop design remains untouched.
 */

html,
body {
    max-width: 100%;
}

img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
}

img,
video {
    height: auto;
}

@media (max-width: 782px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body * {
        box-sizing: border-box;
    }

    main,
    section,
    article,
    aside,
    nav,
    header,
    footer,
    form,
    fieldset,
    .wp-site-blocks,
    .site,
    .site-content,
    .entry-content,
    .wp-block-group,
    .wp-block-columns,
    .wp-block-column {
        min-width: 0;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    pre,
    code {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Backstage / Proberaum */
    .proberaum,
    .proberaum-scene,
    .proberaum-scene__image,
    .proberaum-mobile-nav {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .proberaum-mobile-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .proberaum-mobile-nav a {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Flightcase: catch both current and future theme class naming. */
    [class*="flightcase"][class*="grid"],
    [class*="flightcase"][class*="cards"],
    [class*="flightcase"][class*="list"],
    [class*="flightcase"][class*="wrap"],
    [class*="flightcase"][class*="container"],
    [class*="flightcase"][class*="content"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    [class*="flightcase"] > * {
        min-width: 0;
        max-width: 100%;
    }

    [class*="flightcase"] img,
    [class*="flightcase"] video,
    [class*="flightcase"] iframe {
        max-width: 100%;
        height: auto;
    }

    /* Known Chaosbreaker frontend modules */
    .cb-wire,
    .cb-wire-head,
    .cb-wire-layout,
    .cb-wire-channels,
    .cb-wire-thread,
    .cb-wire-thread__bar,
    .cb-wire-messages,
    .cb-wire-composer,
    .cb-event-access,
    .cb-event-access__card,
    .cb-memory-box,
    .cb-memory-grid,
    .cb-reg-shell,
    .cb-reg-layout,
    .cb-reg-card,
    .cb-welcome,
    .cb-progress-card,
    .cb-push-front,
    .cb-push-front--denied {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .cb-wire-layout {
        width: 100%;
    }

    .cb-wire-thread__bar,
    .cb-wire-message__meta,
    .cb-wire-admin-row,
    .cb-event-access__card {
        flex-wrap: wrap;
    }

    .cb-wire-message {
        max-width: 94%;
    }

    .cb-memory-box {
        margin-left: 0;
        margin-right: 0;
        padding-left: 18px;
        padding-right: 18px;
    }

    .cb-memory-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cb-reg-shell,
    .cb-push-front,
    .cb-push-front--denied {
        width: auto;
        margin-left: 12px;
        margin-right: 12px;
    }

    /* Generic Chaosbreaker cards/grids on frontend. */
    [class^="cb-"][class*="grid"],
    [class*=" cb-"][class*="grid"] {
        min-width: 0;
    }

    /* Long labels, addresses and URLs must wrap instead of widening the page. */
    .entry-content a,
    .cb-wire a,
    .cb-event-access a,
    .cb-reg-shell a,
    .cb-push-front a,
    [class*="flightcase"] a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 430px) {
    .cb-wire {
        padding-left: 0;
        padding-right: 0;
    }

    .cb-wire-head {
        margin-left: 14px;
        margin-right: 14px;
    }

    .cb-wire-thread__bar,
    .cb-wire-messages {
        padding-left: 14px;
        padding-right: 14px;
    }

    .cb-event-access {
        width: calc(100% - 20px);
    }

    .cb-memory-box {
        padding: 18px 14px;
    }

    .cb-push-front,
    .cb-push-front--denied,
    .cb-reg-shell {
        margin-left: 10px;
        margin-right: 10px;
    }
}


/*
 * 3.6.1 – Hardfix for real portrait devices (Galaxy S25 / iPhone).
 * Root cause visible in field screenshots: the Proberaum scene and top navigation
 * still inherit desktop-width / cover behaviour from the theme.
 */
@media (max-width: 782px) {

    /* Never allow the theme shell/header to establish a desktop canvas. */
    html,
    body,
    #page,
    .site,
    .site-content,
    .wp-site-blocks,
    main#main-content,
    .proberaum,
    .proberaum-scene {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: clip !important;
    }

    /* Theme navigation: wrap instead of cutting the right edge off. */
    header nav,
    .site-header nav,
    .main-navigation,
    .main-navigation > div,
    .main-navigation ul,
    .wp-block-navigation,
    .wp-block-navigation__container {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .main-navigation ul,
    .wp-block-navigation__container {
        flex-wrap: wrap !important;
    }

    /* The important fix:
       On desktop the room artwork may use background-size: cover, which crops
       the fifth Flightcase in portrait. In portrait we show the complete scene. */
    .proberaum-scene__image {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 13 !important;
        background-size: contain !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        overflow: hidden !important;
    }

    /* Any positioned hotspot must stay inside the visible scene. */
    .proberaum-hotspot {
        max-width: 22vw !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* The mobile room menu is the reliable navigation fallback.
       Force a single-column stack so no fifth item can sit outside the viewport. */
    .proberaum-mobile-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 12px 14px 22px !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .proberaum-mobile-nav > a {
        display: block !important;
        position: static !important;
        float: none !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    /* Flightcase pages themselves: no desktop grid may survive in portrait. */
    .flightcase,
    .flightcases,
    .flightcase-grid,
    .flightcase-list,
    .flightcase-wrap,
    .flightcase-wrapper,
    .flightcase-container,
    [class*="flightcase-grid"],
    [class*="flightcase-list"],
    [class*="flightcase-wrap"],
    [class*="flightcase-container"] {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    .flightcase > *,
    .flightcases > *,
    .flightcase-grid > *,
    .flightcase-list > *,
    [class*="flightcase-grid"] > *,
    [class*="flightcase-list"] > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
}

/* Very narrow iPhones / compact portrait phones */
@media (max-width: 430px) {
    .proberaum-scene__image {
        aspect-ratio: 16 / 14 !important;
    }

    .proberaum-mobile-nav {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/*
 * 3.6.2 – Membercard QR portrait correction
 *
 * The theme's tablet/smartphone rules move the QR parent from its calibrated
 * card position (left:50.1%; top:79.5%; width:9.2%) to 57.8% / 80.2% / 10.2%.
 * On real portrait devices this visibly shifts the QR to the right.
 * Restore the original card calibration in portrait while leaving desktop alone.
 */
@media (max-width: 782px) {
    .cb-member-card {
        position: relative !important;
    }

    .cb-member-card > .cb-qr,
    .cb-membercard-stage .cb-member-card > .cb-qr,
    .member-card-modal .cb-member-card > .cb-qr {
        width: 9.2% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        left: 50.1% !important;
        top: 79.5% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, 0) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cb-member-card > .cb-qr a,
    .cb-member-card > .cb-qr img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/*
 * 3.7.0 – Full Mobile Portrait Polish
 * Final defensive pass over all known Chaosbreaker frontend surfaces.
 * Only phone/tablet portrait breakpoints are touched.
 */

@media (max-width: 782px) {

    /* Universal width hygiene */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {
        overflow-x: hidden !important;
    }

    body > *,
    #page,
    .site,
    .site-content,
    .content-area,
    .entry-content,
    .wp-site-blocks,
    .wp-block-post-content,
    main,
    main > *,
    article,
    section {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Never let long content create a hidden desktop-width canvas. */
    h1,
    h2,
    h3,
    h4,
    p,
    li,
    a,
    span,
    strong,
    small,
    label {
        overflow-wrap: anywhere;
    }

    /* Header / Backstage Club navigation */
    .site-header,
    .site-header__inner,
    .header-inner,
    .main-header,
    .main-navigation,
    .main-navigation > div,
    .main-navigation ul,
    .wp-block-navigation,
    .wp-block-navigation__responsive-container,
    .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__container {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    .main-navigation ul,
    .wp-block-navigation__container {
        flex-wrap: wrap !important;
    }

    .main-navigation a,
    .wp-block-navigation a {
        min-width: 0 !important;
    }

    /* Membercard page */
    .cb-membercard-stage,
    .member-card-page,
    .membercard-page,
    .member-card-wrap,
    .membercard-wrap,
    .member-card-shell,
    .membercard-shell {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: clip !important;
    }

    .cb-member-card {
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .cb-membercard-actions,
    .member-card-actions,
    .membercard-actions,
    [class*="membercard"][class*="actions"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cb-membercard-actions > *,
    .member-card-actions > *,
    .membercard-actions > *,
    [class*="membercard"][class*="actions"] > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Registration / welcome */
    .cb-reg,
    .cb-reg-shell,
    .cb-reg-wrap,
    .cb-reg-top,
    .cb-reg-layout,
    .cb-reg-copy,
    .cb-reg-card,
    .cb-welcome,
    .cb-progress-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .cb-reg-shell {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .cb-reg-top {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    .cb-reg-copy h1,
    .cb-welcome h1 {
        max-width: 100% !important;
        font-size: clamp(2.45rem, 13vw, 4.1rem) !important;
        line-height: .98 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .cb-progress-list li {
        grid-template-columns: 30px minmax(0, 1fr) 22px !important;
        gap: 10px !important;
    }

    /* Push / doorbell */
    .cb-doorbell,
    .cb-push-front,
    .cb-push-front--denied {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .cb-doorbell {
        padding: 22px 16px !important;
    }

    .cb-doorbell-button {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    /* THE WIRE */
    .cb-wire,
    .cb-wire-head,
    .cb-wire-layout,
    .cb-wire-channels,
    .cb-wire-thread,
    .cb-wire-thread__bar,
    .cb-wire-messages,
    .cb-wire-composer,
    .cb-wire-admin-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .cb-wire-message {
        max-width: 94% !important;
        min-width: 0 !important;
    }

    .cb-wire-channel,
    .cb-wire-channel__copy,
    .cb-wire-message__body,
    .cb-wire-message__meta {
        min-width: 0 !important;
    }

    /* Event Lines / Memories */
    .cb-event-access,
    .cb-event-access__card,
    .cb-event-access__copy,
    .cb-event-access__countdown,
    .cb-memory-box,
    .cb-memory-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .cb-event-access__card {
        flex-wrap: wrap !important;
    }

    .cb-memory-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Bandtagebuch / generic content cards */
    [class*="bandtagebuch"],
    [class*="diary"],
    [class*="journal"],
    [class*="news-card"],
    [class*="post-card"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    [class*="bandtagebuch"][class*="grid"],
    [class*="diary"][class*="grid"],
    [class*="journal"][class*="grid"],
    [class*="news"][class*="grid"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Buttons / toolbars that otherwise drift off-screen */
    .cb-actions,
    .cb-toolbar,
    .cb-buttons,
    .button-group,
    .wp-block-buttons {
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .wp-block-button,
    .wp-block-button__link {
        max-width: 100% !important;
    }

    /* Embedded media */
    iframe,
    video,
    canvas,
    object,
    embed {
        max-width: 100% !important;
    }
}

@media (max-width: 430px) {

    /* Phone portrait: slightly tighter but still breathable. */
    .entry-content,
    .wp-block-post-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cb-member-card {
        max-width: calc(100vw - 18px) !important;
    }

    .cb-reg-shell {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .cb-reg-card,
    .cb-progress-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .cb-event-access {
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    .cb-doorbell,
    .cb-push-front,
    .cb-push-front--denied {
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}