/* Final theme-level adjustments for native Contao modules. */

/* Keep element headlines on the same centered content axis as their components. */
body.b2sme-theme main .mod_article > [class*="content-b2sme"] > :is(h1,h2,h3,h4,h5,h6),
body.b2sme-theme main .mod_article > :is(.content-download,.content-downloads,.content-image,.content-gallery,.content-hyperlink,.content-module) > :is(h1,h2,h3,h4,h5,h6) {
    width: min(100% - 2rem, var(--b2sme-content));
    max-width: var(--b2sme-content);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* A native text element already defines the content column itself. Its
   headline therefore must not be centered again inside that column. */
body.b2sme-theme main .mod_article > .content-text > :is(h1,h2,h3,h4,h5,h6) {
    width: 100%;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Native FAQ modules must use the same content grid as the rest of the page. */
body.b2sme-theme main .mod_article .mod_faqpage,
body.b2sme-theme main .mod_article .mod_faqlist,
body.b2sme-theme main .mod_article .mod_faqreader {
    width: min(100% - 2rem, var(--b2sme-content));
    max-width: var(--b2sme-content);
    margin-left: auto;
    margin-right: auto;
}

/* Native news/event readers use the regular theme content column, not the viewport edge. */
body.b2sme-theme main .mod_article .mod_newsreader .layout_full,
body.b2sme-theme main .mod_article .mod_eventreader .event,
body.b2sme-theme main .mod_article .mod_newsreader > .back,
body.b2sme-theme main .mod_article .mod_eventreader > .back,
body.b2sme-theme main .b2sme-reader-detail {
    width: min(100% - 2rem, var(--b2sme-content));
    max-width: var(--b2sme-content);
    margin-left: auto;
    margin-right: auto;
}

/* Keep reader back links visually attached to the reader content. */
body.b2sme-theme main .mod_article .mod_newsreader > .back,
body.b2sme-theme main .mod_article .mod_eventreader > .back {
    margin-top: 2rem;
}

/* Reader images stay inside the content column and remain editorial landscape images. */
body.b2sme-theme .mod_newsreader .layout_full figure,
body.b2sme-theme .mod_eventreader .event figure,
body.b2sme-theme .b2sme-reader-detail figure {
    width: min(100%, 56rem);
    margin: 1.5rem 0 2rem;
}
body.b2sme-theme .mod_newsreader .layout_full figure img,
body.b2sme-theme .mod_eventreader .event figure img,
body.b2sme-theme .b2sme-reader-detail figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--b2sme-radius);
}

/* Native Contao breadcrumb lives in the page layout, before the article content. */
body.b2sme-theme main > .mod_breadcrumb,
body.b2sme-theme #main > .inside > .mod_breadcrumb {
    width: min(100% - 2rem, var(--b2sme-content));
    margin: 0 auto clamp(2rem, 4vw, 4rem);
    padding-top: clamp(1rem, 2vw, 2rem);
}
body.b2sme-theme .mod_breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.b2sme-theme .mod_breadcrumb li {
    max-width: none;
    color: var(--b2sme-muted);
}
body.b2sme-theme .mod_breadcrumb li + li::before {
    content: "/";
    margin-right: .4rem;
    color: var(--b2sme-muted);
}
body.b2sme-theme .mod_breadcrumb a {
    color: var(--b2sme-primary);
    text-decoration-thickness: .08em;
    text-underline-offset: .15em;
}


/* The homepage is the root URL. Hide its redundant breadcrumb there only. */
body.b2sme-theme.b2sme-homepage .mod_breadcrumb {
    display: none;
}

/* Native Contao forms follow the normal page content width. */
body.b2sme-theme main .mod_article > .ce_form,
body.b2sme-theme main .mod_article .content-form,
body.b2sme-theme main .mod_article .content-form > .ce_form {
    width: min(100% - 2rem, var(--b2sme-content));
    max-width: var(--b2sme-content);
    margin-left: auto;
    margin-right: auto;
}

body.b2sme-theme main .ce_form fieldset,
body.b2sme-theme main .content-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Compact editorial cards for native news and event lists. */
body.b2sme-theme main .mod_article .mod_newslist,
body.b2sme-theme main .mod_article .mod_eventlist {
    display: grid;
    width: min(100% - 2rem, var(--b2sme-content));
    max-width: var(--b2sme-content);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem;
}

body.b2sme-theme main .mod_article .mod_newslist > .b2sme-list-card,
body.b2sme-theme main .mod_article .mod_eventlist > .b2sme-list-card {
    width: 100%;
    max-width: none;
    min-width: 0;
}

body.b2sme-theme .mod_newslist .b2sme-list-card,
body.b2sme-theme .mod_eventlist .b2sme-list-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr) 3rem;
    gap: clamp(1rem, 2vw, 1.75rem);
    align-items: center;
    min-height: 12rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--b2sme-secondary) 12%, transparent);
    border-radius: var(--b2sme-radius);
    background: #fff;
}

body.b2sme-theme .b2sme-list-card__media,
body.b2sme-theme .b2sme-list-card__media figure {
    width: 100%;
    height: 100%;
    min-height: 10rem;
    margin: 0;
}

body.b2sme-theme .b2sme-list-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 10rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: calc(var(--b2sme-radius) * .75);
}

body.b2sme-theme .b2sme-list-card__content {
    min-width: 0;
}

body.b2sme-theme .b2sme-list-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .65rem;
    color: var(--b2sme-muted);
    font-size: .9rem;
}

body.b2sme-theme .b2sme-list-card__title {
    margin: 0 0 .7rem;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.02;
}

body.b2sme-theme .b2sme-list-card__title a {
    color: inherit;
    text-decoration: none;
}

body.b2sme-theme .b2sme-list-card__teaser,
body.b2sme-theme .b2sme-list-card__teaser p {
    margin: 0;
    color: var(--b2sme-muted);
}

body.b2sme-theme .b2sme-list-card__action {
    justify-self: center;
    font-size: 2rem;
    line-height: 1;
}

body.b2sme-theme .b2sme-list-card__more {
    position: absolute;
    inset: 0;
    margin: 0;
}

body.b2sme-theme .b2sme-list-card__more a {
    position: absolute;
    inset: 0;
    overflow: hidden;
    text-indent: -9999px;
    z-index: 2;
}

body.b2sme-theme .b2sme-list-card:has(.b2sme-list-card__more):hover {
    box-shadow: 0 .7rem 2rem rgba(23, 32, 51, .08);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    body.b2sme-theme .mod_newslist .b2sme-list-card,
    body.b2sme-theme .mod_eventlist .b2sme-list-card {
        grid-template-columns: 1fr 2.5rem;
        padding: .85rem;
    }

    body.b2sme-theme .b2sme-list-card__media {
        grid-column: 1 / -1;
    }

    body.b2sme-theme .b2sme-list-card__content {
        grid-column: 1;
    }

    body.b2sme-theme .b2sme-list-card__action {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Keep product teaser CTAs on one baseline even when titles/teasers wrap differently. */
body.b2sme-theme .b2sme-products--cards .b2sme-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
body.b2sme-theme .b2sme-products--cards .b2sme-product-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
}
body.b2sme-theme .b2sme-products--cards .b2sme-product-card__meta {
    margin-top: auto;
}
body.b2sme-theme .b2sme-products--cards .b2sme-product-card__content .b2sme-button {
    align-self: flex-start;
}