/*
 * lts14-compat.css — nghf.dk: keep the LTS 12 look on TYPO3 14 (bootstrap_package 16, basesite 14).
 * Included after the site's own style.css (page.includeCSS.lts14compat). Never edit style.css for this:
 * a file sync from live overwrites it. Values measured on www.nghf.dk 2026-10-20 at 1366/1920.
 * Template: VidensDeling AI/Skills/update-site/templates/lts14-compat.css
 */

/* hero (carousel_2026): its buttons are nowrap + flex-shrink 0, so .carousel-text shrank to the button row
   (812px at 1366). Live: text box = its text width up to the 70% max-width, buttons share it equally
   (956 / 1212px box, 209 / 273px buttons at 1366 / 1920). Below 1200 the addon has its own button sizes. */
.carousel-type-mp4 .carousel-text{
    width: max-content;
}
@media (min-width: 1201px){
    .carousel-type-mp4 .slider-buttons a{
        flex: 1 1 0;
    }
}

/* hero titles: carousel_2026 adds a text-shadow on h1 — live has none */
.carousel .carousel-item h1, .carousel .carousel-item .h1{
    text-shadow: none;
}

/* mobile: live leaves a 24px white band between header and the first content (#page-content padding 181 vs
   header bottom 157 at 375); 14 starts the hero right under the header. Footer side gutter 20px vs 15px. */
@media (max-width: 991.98px){
    #page-content > .top-container:first-child{
        margin-top: 24px;
    }
    #page-footer .footer-container{
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* centred frames: .frame-center-item .frame-container is a centring flexbox, and on 14 .frame-inner shrinks
   to its content (1100px) — live filled the container (1326px at 1366) */
.frame-center-item .frame-container > .frame-inner{
    width: 100%;
}

/* cards: idefa_bootstrap_card_extender 14 = gap 16px, no item padding; live = gap 0, items padded 10px.
   BP16's width formula with a fixed 16px gives live's widths exactly (655 / 298px card body at 1366) */
.card-group-element[class*="card-group-element-columns-"]{
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.card-group-element[class*="card-group-element-columns-"] > .card-group-element-item{
    box-sizing: border-box;
    width: calc((100% / var(--cardgroup-columns)) - (16px * (var(--cardgroup-columns) - 1)) / var(--cardgroup-columns));
    padding: 10px;
}

/* card titles: card_extender 14 sets them to 600 / 20px (design change); live 300, 21.6px from 1200 and 20px below */
.card-group-element.card-layout-2 .card-title{
    font-weight: 300;
    font-size: 1.25rem;
}
@media (min-width: 1200px){
    .card-group-element.card-layout-2 .card-title{
        font-size: 1.35rem;
    }
}

/* linked cards: 14 gives .card-text its own grey (#313131); live inherited the link colour (#004c7b) */
.card-group-element .card-body a .card-text,
.card-group-element .card-body a .card-text p{
    color: inherit !important;
}

/* form submit button: style.css makes it white with a primary border; BS5 .btn-primary keeps white text
   → white on white. Live showed the text in primary */
.form-navigation button{
    color: var(--primary);
}