/**
 * ABC Yii3 / T3Pack Bridge
 * 26.05.28.22 SEO-first inline rendering with hardened ABC3/T3 grid spacing.
 *
 * Important:
 * - No iframe.
 * - No DOM grid rebuild.
 * - The ABC3/T3 body is printed into the HumHub page source for SEO/search.
 * - This CSS carries the standalone ABC3 look into HumHub/CleanTheme and
 *   neutralizes conflicting .panel/.card/.container defaults only inside the bridge.
 */

.abcyii3-bridge-body,
.abc3-embedded-body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* The standalone ABC3 nav is not needed inside a Space/User information page. */
.abcyii3-bridge-body .t3-navbar,
.abcyii3-bridge-body .abc3-navbar,
.abcyii3-bridge-body .abc3-standalone-menu,
.abcyii3-bridge-body .t3-standalone-menu,
.abcyii3-bridge-body .abc3-sidecar-menu,
.abcyii3-bridge-body .t3-sidecar-menu,
.abcyii3-bridge-body .abc3-fallback-menu,
.abcyii3-bridge-body .t3-fallback-menu,
.abcyii3-bridge-body .abcyii3-bridge-shell,
.abcyii3-bridge-body .abcyii3-bridge-heading {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Let the HumHub content column define the width. */
.abcyii3-bridge-body .container,
.abcyii3-bridge-body .t3-container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
}

.abcyii3-bridge-body .abc3-biz-page,
.abcyii3-bridge-body .t3-biz-page,
.abcyii3-bridge-body .t3-biz-view,
.abcyii3-bridge-body .abc3-profile-page,
.abcyii3-bridge-body .t3-profile-page,
.abcyii3-bridge-body .abc3-info-page,
.abcyii3-bridge-body .t3-info-page {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Exact ABC3 starter look, strengthened for HumHub/CleanTheme. */
.abcyii3-bridge-body .abc3-page-header,
.abcyii3-bridge-body .t3-page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 16px !important;
    padding: 18px 20px !important;
    border-radius: 8px !important;
    background: var(--bs-card-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, #ddd) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

.abcyii3-bridge-body .abc3-page-header h1,
.abcyii3-bridge-body .t3-page-header h1 {
    margin: 0 0 6px !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

.abcyii3-bridge-body .abc3-page-header p,
.abcyii3-bridge-body .t3-page-header p {
    margin: 0 !important;
    color: var(--bs-secondary-color, #667085) !important;
}

.abcyii3-bridge-body .abc3-page-badges,
.abcyii3-bridge-body .t3-page-badges,
.abcyii3-bridge-body .abc3-tags,
.abcyii3-bridge-body .t3-tags,
.abcyii3-bridge-body .t3-info-tags,
.abcyii3-bridge-body .t3-profile-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    max-width: 45% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.abcyii3-bridge-body .abc3-page-badges span,
.abcyii3-bridge-body .t3-page-badges span,
.abcyii3-bridge-body .abc3-tags span,
.abcyii3-bridge-body .t3-tags span,
.abcyii3-bridge-body .t3-info-tags span,
.abcyii3-bridge-body .t3-profile-tags span,
.abcyii3-bridge-body .abc3-info-tag,
.abcyii3-bridge-body .t3-info-tag {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: var(--bs-secondary-bg, #eef1f5) !important;
    color: var(--bs-body-color, #344054) !important;
    border: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Top row: Information Map 2/3 + Quick overview 1/3. */
.abcyii3-bridge-body .abc3-top-grid,
.abcyii3-bridge-body .t3-info-top,
.abcyii3-bridge-body .t3-top-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr) !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin: 0 0 20px !important;
    width: 100% !important;
}

.abcyii3-bridge-body .abc3-two-col-grid,
.abcyii3-bridge-body .t3-two-col-grid,
.abcyii3-bridge-body .t3-info-row,
.abcyii3-bridge-body .t3-info-grid-2,
.abcyii3-bridge-body .t3-two-column-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin: 0 0 20px !important;
    width: 100% !important;
}

.abcyii3-bridge-body .abc3-fullwidth-stack,
.abcyii3-bridge-body .t3-fullwidth-stack,
.abcyii3-bridge-body .t3-full-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    width: 100% !important;
}

.abcyii3-bridge-body .abc3-top-grid > *,
.abcyii3-bridge-body .abc3-two-col-grid > *,
.abcyii3-bridge-body .abc3-fullwidth-stack > *,
.abcyii3-bridge-body .t3-info-top > *,
.abcyii3-bridge-body .t3-info-row > *,
.abcyii3-bridge-body .t3-fullwidth-stack > * {
    min-width: 0 !important;
}

.abcyii3-bridge-body .abc3-card,
.abcyii3-bridge-body .t3-info-card,
.abcyii3-bridge-body .t3-card,
.abcyii3-bridge-body .abcmap-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--bs-border-color, #ddd) !important;
    border-radius: 8px !important;
    background: var(--bs-card-bg, #fff) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

.abcyii3-bridge-body .abc3-card-header,
.abcyii3-bridge-body .t3-card-header,
.abcyii3-bridge-body .t3-info-card-header,
.abcyii3-bridge-body .abcmap-card-title {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb) !important;
    background: var(--bs-tertiary-bg, #f8f9fa) !important;
}

.abcyii3-bridge-body .abc3-card-header h2,
.abcyii3-bridge-body .t3-card-header h2,
.abcyii3-bridge-body .t3-info-card-header h2,
.abcyii3-bridge-body .abcmap-card-title,
.abcyii3-bridge-body .abc3-card-title,
.abcyii3-bridge-body .t3-card-title {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

.abcyii3-bridge-body .abc3-card-body,
.abcyii3-bridge-body .t3-card-body,
.abcyii3-bridge-body .t3-info-card-body,
.abcyii3-bridge-body .abcmap-card-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 16px !important;
    background: transparent !important;
}

.abcyii3-bridge-body .abc3-map-card .abc3-card-body,
.abcyii3-bridge-body .t3-map-card .t3-card-body,
.abcyii3-bridge-body .t3-map-card .t3-info-card-body,
.abcyii3-bridge-body .abcmap-map-card .abcmap-card-body {
    padding: 0 !important;
}

.abcyii3-bridge-body .abc3-map-frame,
.abcyii3-bridge-body .t3-map-frame,
.abcyii3-bridge-body .abcmap-map-frame,
.abcyii3-bridge-body iframe[src*="openstreetmap.org"] {
    display: block !important;
    width: 100% !important;
    min-height: 420px !important;
    height: 420px !important;
    border: 0 !important;
    background: #eef1f5 !important;
}

.abcyii3-bridge-body .abc3-map-empty,
.abcyii3-bridge-body .t3-map-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 420px !important;
    color: var(--bs-secondary-color, #667085) !important;
    background: #eef1f5 !important;
}

.abcyii3-bridge-body .abc3-map-card .abc3-actions,
.abcyii3-bridge-body .abc3-map-card .abc3-address,
.abcyii3-bridge-body .t3-map-card .t3-actions,
.abcyii3-bridge-body .t3-map-card .t3-address,
.abcyii3-bridge-body .abcmap-map-card .abcmap-actions,
.abcyii3-bridge-body .abcmap-map-card .abcmap-address {
    padding: 16px !important;
}

.abcyii3-bridge-body .abc3-actions,
.abcyii3-bridge-body .t3-actions,
.abcyii3-bridge-body .abcmap-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    border-top: 1px solid var(--bs-border-color, #e5e7eb) !important;
}

.abcyii3-bridge-body .abc3-address,
.abcyii3-bridge-body .t3-address,
.abcyii3-bridge-body .abcmap-address {
    border-top: 1px solid var(--bs-border-color, #e5e7eb) !important;
}

.abcyii3-bridge-body .abc3-address h3,
.abcyii3-bridge-body .t3-address h3,
.abcyii3-bridge-body .abcmap-address h3,
.abcyii3-bridge-body .abc3-legal-block h3,
.abcyii3-bridge-body .t3-legal-block h3 {
    margin: 0 0 8px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

.abcyii3-bridge-body .abc3-address address,
.abcyii3-bridge-body .t3-address address,
.abcyii3-bridge-body .abcmap-address address {
    margin: 0 !important;
    line-height: 1.55 !important;
}

.abcyii3-bridge-body .abc3-definition-list,
.abcyii3-bridge-body .t3-definition-list,
.abcyii3-bridge-body .abcmap-definition-list,
.abcyii3-bridge-body dl {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
}

.abcyii3-bridge-body .abc3-field,
.abcyii3-bridge-body .t3-field,
.abcyii3-bridge-body .abcmap-field {
    display: grid !important;
    grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: baseline !important;
    margin: 0 !important;
}

.abcyii3-bridge-body .abc3-field dt,
.abcyii3-bridge-body .t3-field dt,
.abcyii3-bridge-body .abcmap-field dt,
.abcyii3-bridge-body dt {
    margin: 0 !important;
    color: var(--bs-secondary-color, #667085) !important;
    font-weight: 600 !important;
}

.abcyii3-bridge-body .abc3-field dd,
.abcyii3-bridge-body .t3-field dd,
.abcyii3-bridge-body .abcmap-field dd,
.abcyii3-bridge-body dd {
    margin: 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.abcyii3-bridge-body .abc3-field-value,
.abcyii3-bridge-body .t3-field-value,
.abcyii3-bridge-body .abcmap-field-value {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.abcyii3-bridge-body .abc3-overview-card .abc3-field,
.abcyii3-bridge-body .t3-overview-card .t3-field,
.abcyii3-bridge-body .abcmap-overview-card .abcmap-field {
    padding: 10px 12px !important;
    border: 1px solid var(--bs-border-color, #e5e7eb) !important;
    border-radius: 6px !important;
    background: var(--bs-secondary-bg, #f8f9fa) !important;
}

.abcyii3-bridge-body .abc3-copy-btn,
.abcyii3-bridge-body .abcmap-copy-btn,
.abcyii3-bridge-body .t3-copy-btn,
.abcyii3-bridge-body .abcyii3-address-copy-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 28px !important;
    min-height: 24px !important;
    padding: 2px 7px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    border-radius: 4px !important;
    background: rgba(0,0,0,.06) !important;
    color: inherit !important;
    cursor: pointer !important;
}

.abcyii3-bridge-body .abcyii3-address-copy-btn {
    margin-top: 8px !important;
}

.abcyii3-bridge-body .abc3-copy-btn:hover,
.abcyii3-bridge-body .abcmap-copy-btn:hover,
.abcyii3-bridge-body .t3-copy-btn:hover,
.abcyii3-bridge-body .abcyii3-address-copy-btn:hover {
    background: rgba(0,0,0,.12) !important;
}

.abcyii3-bridge-body .abc3-copy-done {
    background: rgba(25,135,84,.12) !important;
    border-color: rgba(25,135,84,.35) !important;
}

.abcyii3-bridge-body .abc3-muted,
.abcyii3-bridge-body .t3-muted,
.abcyii3-bridge-body .abcmap-muted {
    color: var(--bs-secondary-color, #667085) !important;
}

.abcyii3-bridge-body .abc3-link-list,
.abcyii3-bridge-body .t3-link-list,
.abcyii3-bridge-body .abcmap-link-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.abcyii3-bridge-body .abc3-link-list a,
.abcyii3-bridge-body .t3-link-list a,
.abcyii3-bridge-body .abcmap-link-list a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: var(--bs-secondary-bg, #eef1f5) !important;
    text-decoration: none !important;
}

.abcyii3-bridge-body .abc3-richtext,
.abcyii3-bridge-body .t3-richtext,
.abcyii3-bridge-body .abcmap-richtext {
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
}

.abcyii3-bridge-body .abc3-richtext > :first-child,
.abcyii3-bridge-body .t3-richtext > :first-child,
.abcyii3-bridge-body .abcmap-richtext > :first-child {
    margin-top: 0 !important;
}

.abcyii3-bridge-body .abc3-richtext > :last-child,
.abcyii3-bridge-body .t3-richtext > :last-child,
.abcyii3-bridge-body .abcmap-richtext > :last-child {
    margin-bottom: 0 !important;
}

/* SEO rows are clickable copy targets, but do not get bulky button boxes. */
.abcyii3-bridge-body .abcyii3-click-copy-target {
    cursor: copy !important;
}

.abcyii3-bridge-body .abcyii3-click-copy-target:hover td,
.abcyii3-bridge-body .abcyii3-click-copy-target:hover th,
.abcyii3-bridge-body .abcyii3-click-copy-target:hover {
    background: rgba(0,0,0,.025) !important;
}

.abcyii3-bridge-body .abcyii3-copy-inline-indicator {
    float: right !important;
    margin-left: 8px !important;
    opacity: .55 !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.abcyii3-render-error {
    margin: 15px 0 !important;
}

@media (max-width: 991.98px) {
    .abcyii3-bridge-body .abc3-page-header,
    .abcyii3-bridge-body .t3-page-header {
        display: block !important;
    }

    .abcyii3-bridge-body .abc3-page-badges,
    .abcyii3-bridge-body .t3-page-badges,
    .abcyii3-bridge-body .abc3-tags,
    .abcyii3-bridge-body .t3-tags,
    .abcyii3-bridge-body .t3-info-tags,
    .abcyii3-bridge-body .t3-profile-tags {
        justify-content: flex-start !important;
        max-width: none !important;
        margin-top: 12px !important;
    }

    .abcyii3-bridge-body .abc3-top-grid,
    .abcyii3-bridge-body .abc3-two-col-grid,
    .abcyii3-bridge-body .t3-info-top,
    .abcyii3-bridge-body .t3-info-row,
    .abcyii3-bridge-body .t3-two-col-grid,
    .abcyii3-bridge-body .t3-info-grid-2,
    .abcyii3-bridge-body .t3-two-column-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .abcyii3-bridge-body .abc3-map-frame,
    .abcyii3-bridge-body .t3-map-frame,
    .abcyii3-bridge-body .abcmap-map-frame,
    .abcyii3-bridge-body iframe[src*="openstreetmap.org"],
    .abcyii3-bridge-body .abc3-map-empty,
    .abcyii3-bridge-body .t3-map-empty {
        min-height: 320px !important;
        height: 320px !important;
    }
}

@media (max-width: 575.98px) {
    .abcyii3-bridge-body .abc3-page-header,
    .abcyii3-bridge-body .t3-page-header {
        padding: 14px !important;
    }

    .abcyii3-bridge-body .abc3-page-header h1,
    .abcyii3-bridge-body .t3-page-header h1 {
        font-size: 23px !important;
    }

    .abcyii3-bridge-body .abc3-card-body,
    .abcyii3-bridge-body .t3-card-body,
    .abcyii3-bridge-body .t3-info-card-body,
    .abcyii3-bridge-body .abcmap-card-body,
    .abcyii3-bridge-body .abc3-map-card .abc3-actions,
    .abcyii3-bridge-body .abc3-map-card .abc3-address,
    .abcyii3-bridge-body .t3-map-card .t3-actions,
    .abcyii3-bridge-body .t3-map-card .t3-address {
        padding: 14px !important;
    }

    .abcyii3-bridge-body .abc3-field,
    .abcyii3-bridge-body .t3-field,
    .abcyii3-bridge-body .abcmap-field {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2px !important;
    }

    .abcyii3-bridge-body .abc3-field dd,
    .abcyii3-bridge-body .t3-field dd,
    .abcyii3-bridge-body .abcmap-field dd {
        align-items: flex-start !important;
    }
}


/* 26.05.28.22: Harden the real inline ABC3/T3 grid inside HumHub.
   Keep SEO-safe inline HTML, but neutralize Bootstrap row/column gutters and
   old sidecar column widths that can override the standalone 2/3 + 1/3 layout. */
.abcyii3-bridge-body {
    --abcyii3-grid-gap: 20px;
}

.abcyii3-bridge-body .abc3-page-header,
.abcyii3-bridge-body .t3-page-header {
    margin: 0 0 var(--abcyii3-grid-gap) 0 !important;
}

.abcyii3-bridge-body .abc3-top-grid,
.abcyii3-bridge-body .t3-info-top,
.abcyii3-bridge-body .t3-top-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    row-gap: var(--abcyii3-grid-gap) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--abcyii3-grid-gap) 0 !important;
    padding: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.abcyii3-bridge-body .abc3-two-col-grid,
.abcyii3-bridge-body .t3-two-col-grid,
.abcyii3-bridge-body .t3-info-row,
.abcyii3-bridge-body .t3-info-grid-2,
.abcyii3-bridge-body .t3-two-column-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    row-gap: var(--abcyii3-grid-gap) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--abcyii3-grid-gap) 0 !important;
    padding: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.abcyii3-bridge-body .abc3-fullwidth-stack,
.abcyii3-bridge-body .t3-fullwidth-stack,
.abcyii3-bridge-body .t3-full-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--abcyii3-grid-gap) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

/* Reset Bootstrap .row/.col behavior only inside the ABC3/T3 bridge grids. */
.abcyii3-bridge-body .abc3-top-grid.row,
.abcyii3-bridge-body .t3-info-top.row,
.abcyii3-bridge-body .t3-top-grid.row,
.abcyii3-bridge-body .abc3-two-col-grid.row,
.abcyii3-bridge-body .t3-info-row.row,
.abcyii3-bridge-body .t3-two-col-grid.row,
.abcyii3-bridge-body .t3-info-grid-2.row,
.abcyii3-bridge-body .t3-two-column-grid.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.abcyii3-bridge-body .abc3-top-grid > *,
.abcyii3-bridge-body .t3-info-top > *,
.abcyii3-bridge-body .t3-top-grid > *,
.abcyii3-bridge-body .abc3-two-col-grid > *,
.abcyii3-bridge-body .t3-info-row > *,
.abcyii3-bridge-body .t3-two-col-grid > *,
.abcyii3-bridge-body .t3-info-grid-2 > *,
.abcyii3-bridge-body .t3-two-column-grid > *,
.abcyii3-bridge-body .abc3-fullwidth-stack > *,
.abcyii3-bridge-body .t3-fullwidth-stack > *,
.abcyii3-bridge-body .t3-full-stack > * {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    flex-basis: auto !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.abcyii3-bridge-body .abc3-top-grid > *,
.abcyii3-bridge-body .t3-info-top > *,
.abcyii3-bridge-body .t3-top-grid > *,
.abcyii3-bridge-body .abc3-two-col-grid > *,
.abcyii3-bridge-body .t3-info-row > *,
.abcyii3-bridge-body .t3-two-col-grid > *,
.abcyii3-bridge-body .t3-info-grid-2 > *,
.abcyii3-bridge-body .t3-two-column-grid > * {
    display: flex !important;
    align-self: stretch !important;
}

.abcyii3-bridge-body .abc3-top-grid > * > .abc3-card,
.abcyii3-bridge-body .abc3-top-grid > * > .t3-info-card,
.abcyii3-bridge-body .abc3-top-grid > * > .t3-card,
.abcyii3-bridge-body .t3-info-top > * > .abc3-card,
.abcyii3-bridge-body .t3-info-top > * > .t3-info-card,
.abcyii3-bridge-body .t3-info-top > * > .t3-card,
.abcyii3-bridge-body .t3-top-grid > * > .abc3-card,
.abcyii3-bridge-body .t3-top-grid > * > .t3-info-card,
.abcyii3-bridge-body .t3-top-grid > * > .t3-card,
.abcyii3-bridge-body .abc3-two-col-grid > * > .abc3-card,
.abcyii3-bridge-body .t3-info-row > * > .t3-info-card,
.abcyii3-bridge-body .t3-two-col-grid > * > .t3-info-card,
.abcyii3-bridge-body .t3-info-grid-2 > * > .t3-info-card,
.abcyii3-bridge-body .t3-two-column-grid > * > .t3-info-card {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 100% !important;
}

/* If the standalone page renders cards directly as grid children, keep them equal height. */
.abcyii3-bridge-body .abc3-top-grid > .abc3-card,
.abcyii3-bridge-body .t3-info-top > .t3-info-card,
.abcyii3-bridge-body .t3-top-grid > .t3-card,
.abcyii3-bridge-body .abc3-two-col-grid > .abc3-card,
.abcyii3-bridge-body .t3-info-row > .t3-info-card,
.abcyii3-bridge-body .t3-two-col-grid > .t3-info-card,
.abcyii3-bridge-body .t3-info-grid-2 > .t3-info-card,
.abcyii3-bridge-body .t3-two-column-grid > .t3-info-card {
    height: auto !important;
    min-height: 100% !important;
}

/* Map must fill the whole 2/3 card, including Leaflet-based maps. */
.abcyii3-bridge-body .abc3-map-card .leaflet-container,
.abcyii3-bridge-body .t3-map-card .leaflet-container,
.abcyii3-bridge-body .abcmap-map-card .leaflet-container,
.abcyii3-bridge-body .abc3-map-card [id*="map"],
.abcyii3-bridge-body .t3-map-card [id*="map"],
.abcyii3-bridge-body .abcmap-map-card [id*="map"],
.abcyii3-bridge-body .abc3-map-frame,
.abcyii3-bridge-body .t3-map-frame,
.abcyii3-bridge-body .abcmap-map-frame,
.abcyii3-bridge-body iframe[src*="openstreetmap.org"] {
    width: 100% !important;
    max-width: none !important;
    height: 420px !important;
    min-height: 420px !important;
}

@media (max-width: 991.98px) {
    .abcyii3-bridge-body .abc3-top-grid,
    .abcyii3-bridge-body .t3-info-top,
    .abcyii3-bridge-body .t3-top-grid,
    .abcyii3-bridge-body .abc3-two-col-grid,
    .abcyii3-bridge-body .t3-two-col-grid,
    .abcyii3-bridge-body .t3-info-row,
    .abcyii3-bridge-body .t3-info-grid-2,
    .abcyii3-bridge-body .t3-two-column-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--abcyii3-grid-gap) !important;
        margin-bottom: var(--abcyii3-grid-gap) !important;
    }
}

/* 26.05.28.16: HumHub/CleanTheme panel variable alignment.
   Keep the ABC3/T3 inline HTML SEO-safe, but let HumHub/CleanTheme variables
   control panel backgrounds, heading colours, borders, and inner well blocks. */
.abcyii3-bridge-body {
    --abcyii3-panel-bg: var(--hh-background-color-main, var(--bs-card-bg, #fff));
    --abcyii3-page-bg: transparent;
    --abcyii3-panel-border-color: var(--hh-ct-panel-border-color, var(--hh-border-color, var(--bs-border-color, #ddd)));
    --abcyii3-panel-border-radius: var(--hh-ct-panel-border-radius, var(--bs-border-radius, 4px));
    --abcyii3-panel-shadow: var(--hh-ct-panel-box-shadow, 0 1px 2px rgba(0,0,0,.04));
    --abcyii3-panel-heading-bg: var(--hh-background-color-main, var(--bs-card-bg, #fff));
    --abcyii3-panel-heading-color: var(--hh-text-color-highlight, var(--hh-ct-text-color-heading, var(--bs-heading-color, #31414a)));
    --abcyii3-section-heading-bg: var(--hh-text-color-highlight, #31414a);
    --abcyii3-section-heading-color: var(--hh-text-color-contrast, #fff);
    --abcyii3-muted-bg: var(--hh-background-color-secondary, var(--bs-secondary-bg, #f8f9fa));
    --abcyii3-muted-text: var(--hh-text-color-secondary, var(--bs-secondary-color, #667085));
}

.abcyii3-bridge-body .abc3-biz-page,
.abcyii3-bridge-body .t3-biz-page,
.abcyii3-bridge-body .t3-biz-view,
.abcyii3-bridge-body .abc3-profile-page,
.abcyii3-bridge-body .t3-profile-page,
.abcyii3-bridge-body .abc3-info-page,
.abcyii3-bridge-body .t3-info-page {
    background: var(--abcyii3-page-bg) !important;
}

.abcyii3-bridge-body .panel,
.abcyii3-bridge-body .card,
.abcyii3-bridge-body .abc3-card,
.abcyii3-bridge-body .t3-info-card,
.abcyii3-bridge-body .t3-card,
.abcyii3-bridge-body .abcmap-card {
    background: var(--abcyii3-panel-bg) !important;
    border-color: var(--abcyii3-panel-border-color) !important;
    border-radius: var(--abcyii3-panel-border-radius) !important;
    box-shadow: var(--abcyii3-panel-shadow) !important;
}

.abcyii3-bridge-body .panel .panel-body,
.abcyii3-bridge-body .panel-body,
.abcyii3-bridge-body .card-body,
.abcyii3-bridge-body .abc3-card-body,
.abcyii3-bridge-body .t3-card-body,
.abcyii3-bridge-body .t3-info-card-body,
.abcyii3-bridge-body .abcmap-card-body {
    background: var(--abcyii3-panel-bg) !important;
    color: var(--hh-text-color-main, var(--bs-body-color, inherit)) !important;
}

.abcyii3-bridge-body .panel .panel-body,
.abcyii3-bridge-body .panel-body {
    padding: 10px !important;
    font-size: 13px !important;
}

.abcyii3-bridge-body .panel .panel-heading,
.abcyii3-bridge-body .panel-heading,
.abcyii3-bridge-body .card-header,
.abcyii3-bridge-body .abc3-card-header,
.abcyii3-bridge-body .t3-card-header,
.abcyii3-bridge-body .t3-info-card-header,
.abcyii3-bridge-body .abcmap-card-title {
    color: var(--abcyii3-panel-heading-color) !important;
    background-color: var(--abcyii3-panel-heading-bg) !important;
    border-color: var(--abcyii3-panel-border-color) !important;
    padding: 10px !important;
    border-radius: var(--abcyii3-panel-border-radius) var(--abcyii3-panel-border-radius) 0 0 !important;
}

/* Some old ABC/ABC Map outputs put the title directly in h2 instead of a panel-heading.
   Colour the full card heading area where possible, not only the text node. */
.abcyii3-bridge-body .panel > h2:first-child,
.abcyii3-bridge-body .panel > .h2:first-child,
.abcyii3-bridge-body .abc3-card > h2:first-child,
.abcyii3-bridge-body .t3-info-card > h2:first-child,
.abcyii3-bridge-body .t3-card > h2:first-child,
.abcyii3-bridge-body .abcmap-card > h2:first-child,
.abcyii3-bridge-body .abcmap-card-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    font-size: var(--hh-ct-h2-font-size, 16px) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--abcyii3-section-heading-color) !important;
    background: var(--abcyii3-section-heading-bg) !important;
    border-radius: var(--abcyii3-panel-border-radius) var(--abcyii3-panel-border-radius) 0 0 !important;
}

.abcyii3-bridge-body .well,
.abcyii3-bridge-body .abc3-overview-card .abc3-field,
.abcyii3-bridge-body .t3-overview-card .t3-field,
.abcyii3-bridge-body .abcmap-overview-card .abcmap-field {
    border: none !important;
    box-shadow: none !important;
    background-color: var(--abcyii3-muted-bg) !important;
    color: var(--hh-text-color-main, var(--bs-body-color, inherit)) !important;
    margin-top: 10px !important;
    margin-bottom: 1px !important;
    padding: 10px !important;
}

/* Bootstrap 5 adds margins/gutters to every .row > *; inside the bridge grid the
   20px spacing is controlled by CSS grid gap only. */
.abcyii3-bridge-body .row > * {
    margin-top: 0 !important;
}

/* 26.05.28.16: scoped HumHub/CleanTheme conformity hotfix.
   These rules stay inside .abcyii3-bridge-body so broad Custom CSS in
   HumHub Appearance is no longer required for this module. */
.abcyii3-bridge-body {
    --abcyii3-grid-gap: 20px;
    --abcyii3-panel-bg: var(--hh-background-color-main, var(--bs-card-bg, #fff));
    --abcyii3-panel-heading-bg: var(--hh-background-color-main, var(--bs-card-bg, #fff));
    --abcyii3-panel-heading-color: var(--hh-text-color-highlight, var(--bs-heading-color, #31414a));
    --abcyii3-section-heading-bg: var(--hh-background-color-highlight, var(--hh-text-color-highlight, #31414a));
    --abcyii3-section-heading-color: var(--hh-text-color-contrast, #fff);
    --abcyii3-panel-border-color: var(--hh-background3, var(--hh-border-color, var(--bs-border-color, #ddd)));
    --abcyii3-panel-border-radius: var(--hh-ct-panel-border-radius, var(--bs-border-radius, 4px));
    --abcyii3-panel-shadow: var(--hh-ct-panel-box-shadow, 0 0 3px var(--hh-background3, rgba(0,0,0,.12)));
    --abcyii3-muted-bg: var(--hh-background-color-secondary, var(--bs-secondary-bg, #f8f9fa));
}

.abcyii3-bridge-body .panel,
.abcyii3-bridge-body .card,
.abcyii3-bridge-body .abc3-card,
.abcyii3-bridge-body .t3-info-card,
.abcyii3-bridge-body .t3-card,
.abcyii3-bridge-body .abcmap-card {
    background-color: var(--abcyii3-panel-bg) !important;
    border: 1px solid var(--abcyii3-panel-border-color) !important;
    border-radius: var(--abcyii3-panel-border-radius) !important;
    box-shadow: var(--abcyii3-panel-shadow) !important;
    overflow: hidden !important;
}

.abcyii3-bridge-body .panel .panel-body,
.abcyii3-bridge-body .panel-body,
.abcyii3-bridge-body .card-body,
.abcyii3-bridge-body .abc3-card-body,
.abcyii3-bridge-body .t3-card-body,
.abcyii3-bridge-body .t3-info-card-body,
.abcyii3-bridge-body .abcmap-card-body {
    background-color: var(--abcyii3-panel-bg) !important;
    color: var(--hh-text-color-main, var(--bs-body-color, inherit)) !important;
}

.abcyii3-bridge-body .panel .panel-body,
.abcyii3-bridge-body .panel-body {
    padding: 10px !important;
    font-size: 13px !important;
}

.abcyii3-bridge-body .panel .panel-heading,
.abcyii3-bridge-body .panel-heading,
.abcyii3-bridge-body .card-header,
.abcyii3-bridge-body .abc3-card-header,
.abcyii3-bridge-body .t3-card-header,
.abcyii3-bridge-body .t3-info-card-header {
    color: var(--abcyii3-panel-heading-color) !important;
    background-color: var(--abcyii3-panel-heading-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--abcyii3-panel-border-color) !important;
    padding: 10px !important;
    border-radius: var(--abcyii3-panel-border-radius) var(--abcyii3-panel-border-radius) 0 0 !important;
}

/* ABC Map/legacy output often uses h2 or .abcmap-card-title directly as the
   visible panel header. Paint the full title bar, not only the text. */
.abcyii3-bridge-body .abcmap-card-title,
.abcyii3-bridge-body .panel > h2:first-child,
.abcyii3-bridge-body .panel > .h2:first-child,
.abcyii3-bridge-body .abc3-card > h2:first-child,
.abcyii3-bridge-body .t3-info-card > h2:first-child,
.abcyii3-bridge-body .t3-card > h2:first-child,
.abcyii3-bridge-body .abcmap-card > h2:first-child {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    font-size: var(--hh-ct-h2-font-size, 16px) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--abcyii3-section-heading-color) !important;
    background-color: var(--abcyii3-section-heading-bg) !important;
    border-radius: var(--abcyii3-panel-border-radius) var(--abcyii3-panel-border-radius) 0 0 !important;
}

.abcyii3-bridge-body .panel h2,
.abcyii3-bridge-body .panel .h2 {
    font-size: var(--hh-ct-h2-font-size, 16px) !important;
    color: var(--abcyii3-section-heading-color) !important;
}

.abcyii3-bridge-body .well,
.abcyii3-bridge-body .abc3-overview-card .abc3-field,
.abcyii3-bridge-body .t3-overview-card .t3-field,
.abcyii3-bridge-body .abcmap-overview-card .abcmap-field {
    border: none !important;
    box-shadow: none !important;
    background-color: var(--abcyii3-muted-bg) !important;
    margin-top: 10px !important;
    margin-bottom: 1px !important;
    padding: 10px !important;
}

/* Keep table density compact, but only inside this bridge. */
.abcyii3-bridge-body .table > thead > tr > th,
.abcyii3-bridge-body .table > tbody > tr > th,
.abcyii3-bridge-body .table > tfoot > tr > th,
.abcyii3-bridge-body .table > thead > tr > td,
.abcyii3-bridge-body .table > tbody > tr > td,
.abcyii3-bridge-body .table > tfoot > tr > td,
.abcyii3-bridge-body table > thead > tr > th,
.abcyii3-bridge-body table > tbody > tr > th,
.abcyii3-bridge-body table > tfoot > tr > th,
.abcyii3-bridge-body table > thead > tr > td,
.abcyii3-bridge-body table > tbody > tr > td,
.abcyii3-bridge-body table > tfoot > tr > td {
    padding: 5px !important;
    vertical-align: top !important;
}

/* Bootstrap/HumHub row gutters must not create the spacing inside the bridge.
   Row spacing is controlled by the 20px grid gap and these direct sibling gaps. */
.abcyii3-bridge-body .row > * {
    margin-top: 0 !important;
}

.abcyii3-bridge-body .abc3-top-grid,
.abcyii3-bridge-body .t3-info-top,
.abcyii3-bridge-body .t3-top-grid,
.abcyii3-bridge-body .abc3-two-col-grid,
.abcyii3-bridge-body .t3-two-col-grid,
.abcyii3-bridge-body .t3-info-row,
.abcyii3-bridge-body .t3-info-grid-2,
.abcyii3-bridge-body .t3-two-column-grid,
.abcyii3-bridge-body .abc3-fullwidth-stack,
.abcyii3-bridge-body .t3-fullwidth-stack,
.abcyii3-bridge-body .t3-full-stack {
    gap: var(--abcyii3-grid-gap) !important;
    row-gap: var(--abcyii3-grid-gap) !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    margin-bottom: var(--abcyii3-grid-gap) !important;
}

.abcyii3-bridge-body .abc3-biz-page > .abc3-top-grid + *,
.abcyii3-bridge-body .abc3-biz-page > .t3-info-top + *,
.abcyii3-bridge-body .abc3-biz-page > .t3-top-grid + *,
.abcyii3-bridge-body .t3-biz-page > .abc3-top-grid + *,
.abcyii3-bridge-body .t3-biz-page > .t3-info-top + *,
.abcyii3-bridge-body .t3-biz-page > .t3-top-grid + *,
.abcyii3-bridge-body .t3-biz-view > .abc3-top-grid + *,
.abcyii3-bridge-body .t3-biz-view > .t3-info-top + *,
.abcyii3-bridge-body .t3-biz-view > .t3-top-grid + *,
.abcyii3-bridge-body .abc3-info-page > .abc3-top-grid + *,
.abcyii3-bridge-body .abc3-info-page > .t3-info-top + *,
.abcyii3-bridge-body .abc3-info-page > .t3-top-grid + *,
.abcyii3-bridge-body .t3-info-page > .abc3-top-grid + *,
.abcyii3-bridge-body .t3-info-page > .t3-info-top + *,
.abcyii3-bridge-body .t3-info-page > .t3-top-grid + *,
.abcyii3-bridge-body .abcmap-page > .abcmap-card + .abcmap-card,
.abcyii3-bridge-body .abcmap-card + .abcmap-card,
.abcyii3-bridge-body .panel + .panel,
.abcyii3-bridge-body .card + .card {
    margin-top: var(--abcyii3-grid-gap) !important;
}


/* 26.05.28.17: heading bar contrast fix.
   In 26.05.28.16 the heading text could become white while the panel heading
   background remained the normal HumHub panel background. Use HumHub/Bootstrap
   primary variables for a darker theme-controlled bar, scoped to abcyii3 only. */
.abcyii3-bridge-body {
    --abcyii3-heading-bar-bg: var(--bs-primary, var(--primary, #435f6f));
    --abcyii3-heading-bar-color: var(--hh-text-color-contrast, var(--bs-light, #ffffff));
    --abcyii3-panel-heading-bg: var(--abcyii3-heading-bar-bg);
    --abcyii3-panel-heading-color: var(--abcyii3-heading-bar-color);
    --abcyii3-section-heading-bg: var(--abcyii3-heading-bar-bg);
    --abcyii3-section-heading-color: var(--abcyii3-heading-bar-color);
}

.abcyii3-bridge-body .panel .panel-heading,
.abcyii3-bridge-body .panel-heading,
.abcyii3-bridge-body .card-header,
.abcyii3-bridge-body .abc3-card-header,
.abcyii3-bridge-body .t3-card-header,
.abcyii3-bridge-body .t3-info-card-header,
.abcyii3-bridge-body .abcmap-card-title,
.abcyii3-bridge-body .panel > h2:first-child,
.abcyii3-bridge-body .panel > .h2:first-child,
.abcyii3-bridge-body .abc3-card > h2:first-child,
.abcyii3-bridge-body .t3-info-card > h2:first-child,
.abcyii3-bridge-body .t3-card > h2:first-child,
.abcyii3-bridge-body .abcmap-card > h2:first-child {
    color: var(--abcyii3-heading-bar-color) !important;
    background: var(--abcyii3-heading-bar-bg) !important;
    background-color: var(--abcyii3-heading-bar-bg) !important;
    border-color: color-mix(in srgb, var(--abcyii3-heading-bar-bg) 88%, #000 12%) !important;
}

.abcyii3-bridge-body .panel .panel-heading a,
.abcyii3-bridge-body .panel-heading a,
.abcyii3-bridge-body .card-header a,
.abcyii3-bridge-body .abc3-card-header a,
.abcyii3-bridge-body .t3-card-header a,
.abcyii3-bridge-body .t3-info-card-header a,
.abcyii3-bridge-body .abcmap-card-title a {
    color: var(--abcyii3-heading-bar-color) !important;
}


/* 26.05.28.19: final scoped heading background fix.
   Use a dark HumHub-compatible heading bar inside abcyii3 only. This mirrors
   the working Custom CSS rule without touching global HumHub panels. */
.abcyii3-bridge-body {
    --abcyii3-heading-bar-bg: var(--hh-ct-heading-background-color, var(--hh-background-color-highlight, #242424));
    --abcyii3-heading-bar-color: var(--hh-text-color-contrast, #ffffff);
}

.abcyii3-bridge-body .panel .panel-heading,
.abcyii3-bridge-body .panel-heading,
.abcyii3-bridge-body .card-header,
.abcyii3-bridge-body .abc3-card-header,
.abcyii3-bridge-body .t3-card-header,
.abcyii3-bridge-body .t3-info-card-header,
.abcyii3-bridge-body .abcmap-card-title {
    color: var(--abcyii3-heading-bar-color) !important;
    background-color: var(--abcyii3-heading-bar-bg) !important;
    background: var(--abcyii3-heading-bar-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--abcyii3-panel-border-color, rgba(0,0,0,.12)) !important;
    padding: 5px 10px !important;
    border-radius: var(--abcyii3-panel-border-radius, 4px) var(--abcyii3-panel-border-radius, 4px) 0 0 !important;
    font-size: 11px !important;
}

.abcyii3-bridge-body .panel > h2:first-child,
.abcyii3-bridge-body .panel > .h2:first-child,
.abcyii3-bridge-body .abc3-card > h2:first-child,
.abcyii3-bridge-body .t3-info-card > h2:first-child,
.abcyii3-bridge-body .t3-card > h2:first-child,
.abcyii3-bridge-body .abcmap-card > h2:first-child {
    color: var(--abcyii3-heading-bar-color) !important;
    background-color: var(--abcyii3-heading-bar-bg) !important;
    background: var(--abcyii3-heading-bar-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--abcyii3-panel-border-color, rgba(0,0,0,.12)) !important;
    padding: 5px 10px !important;
    border-radius: var(--abcyii3-panel-border-radius, 4px) var(--abcyii3-panel-border-radius, 4px) 0 0 !important;
    font-size: var(--hh-ct-h2-font-size, 16px) !important;
}

.abcyii3-bridge-body .panel h2,
.abcyii3-bridge-body .panel .h2 {
    color: var(--abcyii3-heading-bar-color) !important;
}


/* 26.05.28.19: final scoped header-bar and row-gap correction.
   This deliberately mirrors the working HumHub Custom CSS, but is scoped to
   abcyii3 only. Keep it after all older bridge rules. */
.abcyii3-bridge-body {
    --abcyii3-grid-gap: 20px;
    --abcyii3-heading-bar-bg: #242424;
    --abcyii3-heading-bar-color: #ffffff;
    --abcyii3-panel-border-color: var(--hh-background3, var(--hh-border-color, var(--bs-border-color, rgba(0,0,0,.12))));
    --abcyii3-panel-border-radius: var(--hh-ct-panel-border-radius, var(--bs-border-radius, 4px));
}

.abcyii3-bridge-body .panel .panel-heading,
.abcyii3-bridge-body .panel-heading,
.abcyii3-bridge-body .card-header,
.abcyii3-bridge-body .abc3-card-header,
.abcyii3-bridge-body .t3-card-header,
.abcyii3-bridge-body .t3-info-card-header,
.abcyii3-bridge-body .abcmap-card-title,
.abcyii3-bridge-body .panel > h2:first-child,
.abcyii3-bridge-body .panel > .h2:first-child,
.abcyii3-bridge-body .card > h2:first-child,
.abcyii3-bridge-body .card > .h2:first-child,
.abcyii3-bridge-body .abc3-card > h2:first-child,
.abcyii3-bridge-body .abc3-card > .h2:first-child,
.abcyii3-bridge-body .t3-info-card > h2:first-child,
.abcyii3-bridge-body .t3-info-card > .h2:first-child,
.abcyii3-bridge-body .t3-card > h2:first-child,
.abcyii3-bridge-body .t3-card > .h2:first-child,
.abcyii3-bridge-body .abcmap-card > h2:first-child,
.abcyii3-bridge-body .abcmap-card > .h2:first-child {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: var(--abcyii3-heading-bar-color) !important;
    background: var(--abcyii3-heading-bar-bg) !important;
    background-color: var(--abcyii3-heading-bar-bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--abcyii3-panel-border-color) !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    border-radius: var(--abcyii3-panel-border-radius) var(--abcyii3-panel-border-radius) 0 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.abcyii3-bridge-body .panel .panel-heading h1,
.abcyii3-bridge-body .panel .panel-heading h2,
.abcyii3-bridge-body .panel .panel-heading h3,
.abcyii3-bridge-body .panel-heading h1,
.abcyii3-bridge-body .panel-heading h2,
.abcyii3-bridge-body .panel-heading h3,
.abcyii3-bridge-body .card-header h1,
.abcyii3-bridge-body .card-header h2,
.abcyii3-bridge-body .card-header h3,
.abcyii3-bridge-body .abc3-card-header h1,
.abcyii3-bridge-body .abc3-card-header h2,
.abcyii3-bridge-body .abc3-card-header h3,
.abcyii3-bridge-body .t3-card-header h1,
.abcyii3-bridge-body .t3-card-header h2,
.abcyii3-bridge-body .t3-card-header h3,
.abcyii3-bridge-body .t3-info-card-header h1,
.abcyii3-bridge-body .t3-info-card-header h2,
.abcyii3-bridge-body .t3-info-card-header h3 {
    color: var(--abcyii3-heading-bar-color) !important;
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Row spacing must be controlled by abcyii3, not Bootstrap .row gutters. */
.abcyii3-bridge-body .abc3-top-grid,
.abcyii3-bridge-body .t3-info-top,
.abcyii3-bridge-body .t3-top-grid,
.abcyii3-bridge-body .abc3-two-col-grid,
.abcyii3-bridge-body .t3-two-col-grid,
.abcyii3-bridge-body .t3-info-row,
.abcyii3-bridge-body .t3-info-grid-2,
.abcyii3-bridge-body .t3-two-column-grid,
.abcyii3-bridge-body .abc3-fullwidth-stack,
.abcyii3-bridge-body .t3-fullwidth-stack,
.abcyii3-bridge-body .t3-full-stack,
.abcyii3-bridge-body .abcmap-grid,
.abcyii3-bridge-body .abcmap-row,
.abcyii3-bridge-body .abcmap-two-col,
.abcyii3-bridge-body .abcmap-two-column,
.abcyii3-bridge-body .row {
    gap: var(--abcyii3-grid-gap) !important;
    row-gap: var(--abcyii3-grid-gap) !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    --bs-gutter-x: 20px !important;
    --bs-gutter-y: 20px !important;
}

.abcyii3-bridge-body .row > * {
    margin-top: 0 !important;
}

.abcyii3-bridge-body .abc3-top-grid,
.abcyii3-bridge-body .t3-info-top,
.abcyii3-bridge-body .t3-top-grid,
.abcyii3-bridge-body .abcmap-top-grid,
.abcyii3-bridge-body .abcmap-info-top {
    margin-top: 0 !important;
    margin-bottom: var(--abcyii3-grid-gap) !important;
}

.abcyii3-bridge-body .abc3-two-col-grid,
.abcyii3-bridge-body .t3-two-col-grid,
.abcyii3-bridge-body .t3-info-row,
.abcyii3-bridge-body .t3-info-grid-2,
.abcyii3-bridge-body .t3-two-column-grid,
.abcyii3-bridge-body .abcmap-row,
.abcyii3-bridge-body .abcmap-two-col,
.abcyii3-bridge-body .abcmap-two-column {
    margin-top: var(--abcyii3-grid-gap) !important;
    margin-bottom: var(--abcyii3-grid-gap) !important;
}

.abcyii3-bridge-body .abc3-fullwidth-stack,
.abcyii3-bridge-body .t3-fullwidth-stack,
.abcyii3-bridge-body .t3-full-stack {
    margin-top: var(--abcyii3-grid-gap) !important;
}

.abcyii3-bridge-body .abcmap-section-full,
.abcyii3-bridge-body .abc3-section-full,
.abcyii3-bridge-body .t3-section-full,
.abcyii3-bridge-body .abcmap-card.abcmap-section-full,
.abcyii3-bridge-body .abc3-card.abc3-section-full,
.abcyii3-bridge-body .t3-info-card.t3-section-full {
    margin-top: var(--abcyii3-grid-gap) !important;
    margin-bottom: 0 !important;
}

.abcyii3-bridge-body .abcmap-card + .abcmap-card,
.abcyii3-bridge-body .abc3-card + .abc3-card,
.abcyii3-bridge-body .t3-info-card + .t3-info-card,
.abcyii3-bridge-body .panel + .panel,
.abcyii3-bridge-body .card + .card {
    margin-top: var(--abcyii3-grid-gap) !important;
}

/* 26.05.28.22: final scoped spacing cleanup.
   Keep the now good look, but make row/section spacing exactly 20px.
   Do not use CSS gap on Bootstrap .row because it doubles the middle gutter. */
.abcyii3-bridge-body {
    --abcyii3-grid-gap: 20px;
}

.abcyii3-bridge-body .abc3-top-grid,
.abcyii3-bridge-body .t3-info-top,
.abcyii3-bridge-body .t3-top-grid,
.abcyii3-bridge-body .abcmap-top-grid,
.abcyii3-bridge-body .abcmap-info-top {
    gap: var(--abcyii3-grid-gap) !important;
    row-gap: var(--abcyii3-grid-gap) !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    margin-top: 0 !important;
    margin-bottom: var(--abcyii3-grid-gap) !important;
}

.abcyii3-bridge-body .abc3-two-col-grid,
.abcyii3-bridge-body .t3-two-col-grid,
.abcyii3-bridge-body .t3-info-row,
.abcyii3-bridge-body .t3-info-grid-2,
.abcyii3-bridge-body .t3-two-column-grid,
.abcyii3-bridge-body .abcmap-grid,
.abcyii3-bridge-body .abcmap-row,
.abcyii3-bridge-body .abcmap-two-col,
.abcyii3-bridge-body .abcmap-two-column {
    gap: var(--abcyii3-grid-gap) !important;
    row-gap: var(--abcyii3-grid-gap) !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    margin-top: 0 !important;
    margin-bottom: var(--abcyii3-grid-gap) !important;
}

.abcyii3-bridge-body .abc3-fullwidth-stack,
.abcyii3-bridge-body .t3-fullwidth-stack,
.abcyii3-bridge-body .t3-full-stack {
    gap: var(--abcyii3-grid-gap) !important;
    row-gap: var(--abcyii3-grid-gap) !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Direct stacked cards/sections from the extracted ABC3 body also need 20px. */
.abcyii3-bridge-body .abc3-biz-page > .abcmap-card + .abcmap-card,
.abcyii3-bridge-body .abc3-biz-page > .abc3-card + .abc3-card,
.abcyii3-bridge-body .abc3-biz-page > .t3-info-card + .t3-info-card,
.abcyii3-bridge-body .t3-biz-page > .abcmap-card + .abcmap-card,
.abcyii3-bridge-body .t3-biz-page > .abc3-card + .abc3-card,
.abcyii3-bridge-body .t3-biz-page > .t3-info-card + .t3-info-card,
.abcyii3-bridge-body .t3-biz-view > .abcmap-card + .abcmap-card,
.abcyii3-bridge-body .t3-biz-view > .abc3-card + .abc3-card,
.abcyii3-bridge-body .t3-biz-view > .t3-info-card + .t3-info-card,
.abcyii3-bridge-body .abcmap-section-full,
.abcyii3-bridge-body .abc3-section-full,
.abcyii3-bridge-body .t3-section-full {
    margin-top: var(--abcyii3-grid-gap) !important;
}

/* Bootstrap row support: use gutters OR grid gap, not both. */
.abcyii3-bridge-body .row {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    --bs-gutter-x: var(--abcyii3-grid-gap) !important;
    --bs-gutter-y: 0 !important;
    margin-bottom: var(--abcyii3-grid-gap) !important;
}

.abcyii3-bridge-body .row > * {
    margin-top: 0 !important;
}

/* If the extracted body uses Bootstrap rows for the 2/3 + 1/3 and 50/50 blocks,
   the row itself provides the 20px bottom gap, while the inner columns stay clean. */
.abcyii3-bridge-body .row + .row,
.abcyii3-bridge-body .row + .abcmap-card,
.abcyii3-bridge-body .row + .abc3-card,
.abcyii3-bridge-body .row + .t3-info-card,
.abcyii3-bridge-body .abcmap-card + .row,
.abcyii3-bridge-body .abc3-card + .row,
.abcyii3-bridge-body .t3-info-card + .row {
    margin-top: 0 !important;
}



/* 26.05.28.22: final header actions, header tags, and 50/50 row fix.
   Keep the inline SEO rendering. Do not use iframe. Do not rebuild DOM. */
.abcyii3-bridge-body {
    --abcyii3-grid-gap: 20px;
}

/* Header block: title/description/tags on the left, page actions top-right. */
.abcyii3-bridge-body .abc3-page-header,
.abcyii3-bridge-body .t3-page-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    row-gap: 6px !important;
    margin: 0 0 var(--abcyii3-grid-gap) 0 !important;
}

.abcyii3-bridge-body .abc3-page-header > h1,
.abcyii3-bridge-body .t3-page-header > h1 {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.abcyii3-bridge-body .abc3-page-header > p,
.abcyii3-bridge-body .t3-page-header > p {
    grid-column: 1 !important;
}

.abcyii3-bridge-body .abcyii3-header-actions {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 360px !important;
    text-align: right !important;
}

.abcyii3-bridge-body .abcyii3-header-action-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 4px 10px !important;
    border-radius: var(--bs-border-radius, 4px) !important;
    border: 1px solid var(--hh-border-color, var(--bs-border-color, #ddd)) !important;
    background: var(--hh-background-color-main, var(--bs-body-bg, #fff)) !important;
    color: var(--hh-text-color-highlight, var(--bs-link-color, #337ab7)) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.abcyii3-bridge-body .abc3-page-badges,
.abcyii3-bridge-body .t3-page-badges,
.abcyii3-bridge-body .abc3-tags,
.abcyii3-bridge-body .t3-tags,
.abcyii3-bridge-body .t3-info-tags,
.abcyii3-bridge-body .t3-profile-tags {
    grid-column: 1 !important;
    justify-content: flex-start !important;
    max-width: none !important;
    margin-top: 4px !important;
}

/* Force old Bootstrap rows used by the ABC3 body into real 50/50 grids. */
.abcyii3-bridge-body .abc3-biz-page > .row,
.abcyii3-bridge-body .t3-biz-page > .row,
.abcyii3-bridge-body .t3-biz-view > .row,
.abcyii3-bridge-body .abc3-info-page > .row,
.abcyii3-bridge-body .t3-info-page > .row,
.abcyii3-bridge-body .abcmap-page > .row,
.abcyii3-bridge-body .abcmap-row,
.abcyii3-bridge-body .abcmap-two-col,
.abcyii3-bridge-body .abcmap-two-column,
.abcyii3-bridge-body .t3-info-row,
.abcyii3-bridge-body .t3-info-grid-2,
.abcyii3-bridge-body .t3-two-column-grid,
.abcyii3-bridge-body .abc3-two-col-grid,
.abcyii3-bridge-body .t3-two-col-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--abcyii3-grid-gap) !important;
    row-gap: var(--abcyii3-grid-gap) !important;
    column-gap: var(--abcyii3-grid-gap) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--abcyii3-grid-gap) 0 !important;
    padding: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.abcyii3-bridge-body .abc3-biz-page > .row > *,
.abcyii3-bridge-body .t3-biz-page > .row > *,
.abcyii3-bridge-body .t3-biz-view > .row > *,
.abcyii3-bridge-body .abc3-info-page > .row > *,
.abcyii3-bridge-body .t3-info-page > .row > *,
.abcyii3-bridge-body .abcmap-page > .row > *,
.abcyii3-bridge-body .abcmap-row > *,
.abcyii3-bridge-body .abcmap-two-col > *,
.abcyii3-bridge-body .abcmap-two-column > *,
.abcyii3-bridge-body .t3-info-row > *,
.abcyii3-bridge-body .t3-info-grid-2 > *,
.abcyii3-bridge-body .t3-two-column-grid > *,
.abcyii3-bridge-body .abc3-two-col-grid > *,
.abcyii3-bridge-body .t3-two-col-grid > * {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    flex-basis: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
}

.abcyii3-bridge-body .abc3-biz-page > .row > * > .panel,
.abcyii3-bridge-body .abc3-biz-page > .row > * > .card,
.abcyii3-bridge-body .abc3-biz-page > .row > * > .abcmap-card,
.abcyii3-bridge-body .abc3-biz-page > .row > * > .abc3-card,
.abcyii3-bridge-body .abc3-biz-page > .row > * > .t3-info-card,
.abcyii3-bridge-body .t3-biz-view > .row > * > .panel,
.abcyii3-bridge-body .t3-biz-view > .row > * > .card,
.abcyii3-bridge-body .t3-biz-view > .row > * > .abcmap-card,
.abcyii3-bridge-body .t3-biz-view > .row > * > .abc3-card,
.abcyii3-bridge-body .t3-biz-view > .row > * > .t3-info-card {
    height: 100% !important;
    min-height: 100% !important;
}

/* Full-width stacked sections must have exactly one 20px gap before them. */
.abcyii3-bridge-body .abcmap-section-full,
.abcyii3-bridge-body .abc3-section-full,
.abcyii3-bridge-body .t3-section-full,
.abcyii3-bridge-body .abcmap-card.abcmap-section-full,
.abcyii3-bridge-body .abc3-card.abc3-section-full,
.abcyii3-bridge-body .t3-info-card.t3-section-full {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 var(--abcyii3-grid-gap) 0 !important;
}

.abcyii3-bridge-body .abc3-top-grid,
.abcyii3-bridge-body .t3-info-top,
.abcyii3-bridge-body .t3-top-grid {
    margin-bottom: var(--abcyii3-grid-gap) !important;
}

@media (max-width: 991.98px) {
    .abcyii3-bridge-body .abc3-page-header,
    .abcyii3-bridge-body .t3-page-header,
    .abcyii3-bridge-body .abc3-biz-page > .row,
    .abcyii3-bridge-body .t3-biz-page > .row,
    .abcyii3-bridge-body .t3-biz-view > .row,
    .abcyii3-bridge-body .abc3-info-page > .row,
    .abcyii3-bridge-body .t3-info-page > .row,
    .abcyii3-bridge-body .abcmap-page > .row,
    .abcyii3-bridge-body .abcmap-row,
    .abcyii3-bridge-body .abcmap-two-col,
    .abcyii3-bridge-body .abcmap-two-column,
    .abcyii3-bridge-body .t3-info-row,
    .abcyii3-bridge-body .t3-info-grid-2,
    .abcyii3-bridge-body .t3-two-column-grid,
    .abcyii3-bridge-body .abc3-two-col-grid,
    .abcyii3-bridge-body .t3-two-col-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .abcyii3-bridge-body .abcyii3-header-actions {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-content: flex-start !important;
        max-width: none !important;
    }
}


/* 26.05.28.23: final scoped HumHub/CleanTheme compatibility fixes.
   Keep inline rendering. Do not use iframe. Do not rebuild the DOM. */
.abcyii3-bridge-body {
    --abcyii3-grid-gap: 20px;
}

/* Header action buttons belong at the visual top-right of the header block. */
.abcyii3-bridge-body .abc3-page-header,
.abcyii3-bridge-body .t3-page-header {
    position: relative !important;
    align-items: start !important;
}

@media (min-width: 992px) {
    .abcyii3-bridge-body .abcyii3-header-actions {
        grid-column: 2 !important;
        grid-row: 1 !important;
        place-self: start end !important;
        align-self: start !important;
        justify-self: end !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 360px !important;
        text-align: right !important;
        float: right !important;
    }
}

/* HumHub label fallback: when CleanTheme gives label-default the page background,
   force readable contrast text inside this bridge only. */
.abcyii3-bridge-body .label-default,
.abcyii3-bridge-body .label.label-default,
.abcyii3-bridge-body .abc3-page-badges .label-default,
.abcyii3-bridge-body .t3-page-badges .label-default,
.abcyii3-bridge-body .abc3-tags .label-default,
.abcyii3-bridge-body .t3-tags .label-default {
    color: var(--hh-text-color-contrast, #ffffff) !important;
}

/* Rich text areas must remain readable on the HumHub panel/body background. */
.abcyii3-bridge-body .abc3-richtext,
.abcyii3-bridge-body .t3-richtext,
.abcyii3-bridge-body .abcmap-richtext {
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
    color: var(--hh-text-color-main, var(--bs-body-color, #333333)) !important;
}

/* Bootstrap 50/50 fallback used by the extracted ABC3 body.
   Exact 50% plus a 20px CSS gap can overflow in older Bootstrap/flex rows;
   calc(50% - 10px) gives a real 20px middle gutter and keeps both blocks in one row. */
@media (min-width: 992px) {
    .abcyii3-bridge-body .row {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .abcyii3-bridge-body .row > .col-lg-6,
    .abcyii3-bridge-body .row > .col-md-6,
    .abcyii3-bridge-body .row > [class*="col-lg-6"],
    .abcyii3-bridge-body .row > [class*="col-md-6"] {
        flex: 0 0 calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
    }

    .abcyii3-bridge-body .row:has(> .col-lg-6),
    .abcyii3-bridge-body .row:has(> .col-md-6) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--abcyii3-grid-gap) !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: var(--abcyii3-grid-gap) !important;
        margin-bottom: var(--abcyii3-grid-gap) !important;
        width: 100% !important;
        max-width: none !important;
    }

    .abcyii3-bridge-body .row:has(> .col-lg-6) > .col-lg-6 > .panel,
    .abcyii3-bridge-body .row:has(> .col-md-6) > .col-md-6 > .panel,
    .abcyii3-bridge-body .row:has(> .col-lg-6) > .col-lg-6 > .card,
    .abcyii3-bridge-body .row:has(> .col-md-6) > .col-md-6 > .card,
    .abcyii3-bridge-body .row:has(> .col-lg-6) > .col-lg-6 > .abcmap-card,
    .abcyii3-bridge-body .row:has(> .col-md-6) > .col-md-6 > .abcmap-card,
    .abcyii3-bridge-body .row:has(> .col-lg-6) > .col-lg-6 > .abc3-card,
    .abcyii3-bridge-body .row:has(> .col-md-6) > .col-md-6 > .abc3-card,
    .abcyii3-bridge-body .row:has(> .col-lg-6) > .col-lg-6 > .t3-info-card,
    .abcyii3-bridge-body .row:has(> .col-md-6) > .col-md-6 > .t3-info-card {
        height: 100% !important;
        min-height: 100% !important;
    }
}

@media (max-width: 991.98px) {
    .abcyii3-bridge-body .row > .col-lg-6,
    .abcyii3-bridge-body .row > .col-md-6,
    .abcyii3-bridge-body .row > [class*="col-lg-6"],
    .abcyii3-bridge-body .row > [class*="col-md-6"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* JS-assisted fallback for browsers/themes where :has() or Bootstrap grid wins. */
@media (min-width: 992px) {
    .abcyii3-bridge-body .row.abcyii3-two-col-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--abcyii3-grid-gap) !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: var(--abcyii3-grid-gap) !important;
        margin-bottom: var(--abcyii3-grid-gap) !important;
        width: 100% !important;
        max-width: none !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .abcyii3-bridge-body .row.abcyii3-two-col-row > .abcyii3-two-col-cell {
        flex: 0 0 calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        align-self: stretch !important;
    }

    .abcyii3-bridge-body .row.abcyii3-two-col-row > .abcyii3-two-col-cell > .panel,
    .abcyii3-bridge-body .row.abcyii3-two-col-row > .abcyii3-two-col-cell > .card,
    .abcyii3-bridge-body .row.abcyii3-two-col-row > .abcyii3-two-col-cell > .abcmap-card,
    .abcyii3-bridge-body .row.abcyii3-two-col-row > .abcyii3-two-col-cell > .abc3-card,
    .abcyii3-bridge-body .row.abcyii3-two-col-row > .abcyii3-two-col-cell > .t3-info-card {
        height: 100% !important;
        min-height: 100% !important;
    }
}