/*
 * The simple sections (Overskrift (H1), Tekst, Billede, Video) and the shared ones (Én platform, flere moduler,
 * Logobånd): loaded only on pages that use them (Views/Layout.cshtml) and in the backoffice previews
 * (appsettings.json, BlockPreview).
 */

/* Tekst: headings keep the site's own sizes; space above a heading that follows text. */
.bmg-text-section > :last-child { margin-bottom: 0; }
.bmg-text-section > * + h2, .bmg-text-section > * + h3, .bmg-text-section > * + h4,
.bmg-text-section > * + h5, .bmg-text-section > * + h6 { margin-top: 2rem; }
/* Lists get WordPress's markup (Text.Lists); only an item with several paragraphs keeps its <p>s. */
.bmg-text-section li > p { margin-bottom: .25rem; }
.bmg-text-section blockquote {
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 4px solid #c9d3dd;
    font-size: 1.15rem;
    font-style: italic;
}
.bmg-text-section blockquote > :last-child { margin-bottom: 0; }

/* Video: the play button until the visitor presses it (assets/bmg/sections.js). */
.bmg-video { background: #1f2a37; }
.bmg-video__play {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; padding: 0; border: 0;
    background: transparent; color: #fff; cursor: pointer;
}
.bmg-video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bmg-video__icon {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 4.5rem; height: 4.5rem; border-radius: 50%;
    background: rgba(0, 0, 0, .6); font-size: 1.6rem;
    transition: transform .15s ease, background-color .15s ease;
}
.bmg-video__play:hover .bmg-video__icon, .bmg-video__play:focus-visible .bmg-video__icon { transform: scale(1.08); background: rgba(0, 0, 0, .8); }
.bmg-video__service { position: absolute; right: .75rem; bottom: .5rem; opacity: .8; }
.bmg-video iframe { border: 0; }

/*
 * Én platform, flere moduler (Lea, 5 Oct 2026; D36): white cards on the grey band, a stripe in each module's colour
 * (--bmg-product, set by .bmg-product-<module> in child/style.css). The page's own module is filled with its colour,
 * and its category takes the colour too. The categories stand side by side from 1200 px, one above the other below
 * that; a category's cards stand side by side (--bmg-modules-n, set by the view), one per row on a phone. Side by side,
 * the two categories share their rows (subgrid), so every card is as tall as the tallest: two cards in one column are
 * wider than three in the other, and their text takes fewer lines.
 */
.bmg-modules__lead { max-width: 46rem; margin: 0 auto; font-size: 1.15rem; }
.bmg-modules__columns { display: grid; row-gap: 2.5rem; margin-top: 2rem; }
.bmg-modules__group { display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.bmg-modules__category { grid-row: 1; }
.bmg-modules__category-text { grid-row: 2; }
.bmg-modules__cards { grid-row: 3; }
@media (min-width: 1200px) {
    /* A subgrid takes its parent's row gap, so the parent has none: the gaps stay those the items set themselves. */
    .bmg-modules__columns { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; row-gap: 0; column-gap: 3rem; }
    .bmg-modules__group { grid-row: span 3; grid-template-rows: subgrid; }
}
.bmg-modules__category {
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(31, 42, 55, .15);
    font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.bmg-modules__category-text { margin: .5rem 0 0; color: #5b6673; font-size: .95rem; }
.bmg-modules__group.is-here .bmg-modules__category { color: var(--bmg-product); border-bottom-color: var(--bmg-product); }
.bmg-modules__cards {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
    margin: 1rem 0 0; padding: 0; list-style: none;
}
@media (min-width: 576px) { .bmg-modules__cards { grid-template-columns: repeat(var(--bmg-modules-n, 3), minmax(0, 1fr)); } }
.bmg-modules__item { display: flex; }
.bmg-modules__card {
    display: flex; flex-direction: column; width: 100%;
    padding: 1.125rem 1rem 1rem;
    border-top: 4px solid var(--bmg-product); border-radius: .5rem;
    background: #fff; box-shadow: 0 1px 2px rgba(31, 42, 55, .08);
    color: inherit; text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
a.bmg-modules__card:hover, a.bmg-modules__card:focus-visible {
    color: inherit; text-decoration: none;
    box-shadow: 0 .5rem 1.25rem rgba(31, 42, 55, .14); transform: translateY(-2px);
}
a.bmg-modules__card:focus-visible { outline: 3px solid var(--bmg-product); outline-offset: 2px; }
.bmg-modules__name { margin: 0 0 .375rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--bmg-product); }
.bmg-modules__text { margin: 0; font-size: .95rem; }
.bmg-modules__more { margin-top: auto; padding-top: .75rem; color: var(--bmg-product); }
.bmg-modules__item.is-here .bmg-modules__card { background: var(--bmg-product); color: #fff; }
.bmg-modules__item.is-here .bmg-modules__name { color: #fff; }
.bmg-modules__here {
    align-self: flex-start; margin-bottom: .625rem; padding: .125rem .625rem;
    border-radius: 999px; background: rgba(255, 255, 255, .2);
    font-size: .8125rem; font-weight: 600;
}
.bmg-modules__here i { margin-right: .25rem; }

/*
 * Logobånd (Lea, 5 Oct 2026; D37): one row of logos in their own proportions, inside 160 × 48 px each (Images.Logo
 * asks for files that size), grey until pointed at. A narrow screen wraps them onto more rows, a little smaller.
 */
.bmg-logos { text-align: center; }
.bmg-logos__heading { margin: 0 0 1.5rem; font-size: 1.125rem; font-weight: 600; color: #5b6673; }
.bmg-logos__list {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 3rem;
    margin: 0; padding: 0; list-style: none;
}
.bmg-logos__item { display: flex; align-items: center; justify-content: center; }
.bmg-logos__link { display: block; border-radius: .25rem; }
.bmg-logos__link:focus-visible { outline: 3px solid #2a5d87; outline-offset: 4px; }
.bmg-logos__img {
    display: block; width: auto; height: 48px; max-width: 160px; object-fit: contain;
    filter: grayscale(1); opacity: .7;
    transition: filter .2s ease, opacity .2s ease;
}
.bmg-logos__item:hover .bmg-logos__img, .bmg-logos__link:focus-visible .bmg-logos__img { filter: none; opacity: 1; }
.bmg-logos__empty { margin: 0; color: #5b6673; font-style: italic; }
@media (max-width: 575.98px) {
    .bmg-logos__list { gap: 1.25rem 2rem; }
    .bmg-logos__img { height: 36px; max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .bmg-modules__card, .bmg-logos__img { transition: none; }
    a.bmg-modules__card:hover, a.bmg-modules__card:focus-visible { transform: none; }
}