/* BM Units (/BMUnit, Views/BmUnit/Index.cshtml). Page-scoped, loaded from that view's Styles
   section the way /Pn and /BidOfferCashflow load their own. */

/* The detail panel's map and photo side by side in boxes of one size, the credit under both, laid out and sized as
   BM Unit Detail's (bmUnitDetail.css's .gc-bmud-media): half the column each, and 14rem tall, which is its six fact
   rows less the gap under the last (6 x 2.4rem - 0.4rem). Stacked on a phone. */
.gc-bmus-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.5rem;
}

.gc-bmus-media > .gc-bmus-attribution {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    .gc-bmus-media {
        grid-template-columns: 1fr;
    }
}

.gc-bmus-box {
    box-sizing: border-box;
    width: 100%;
    /* BM Unit Detail's size until bmUnits.js (alignFields) resizes it to a whole number of the panel's lines. */
    height: var(--gc-bmus-box-height, calc(6 * 2.4rem - 0.4rem));
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    overflow: hidden;
}

/* The photo cropped to fill its box, as BM Unit Detail's is. */
.gc-bmus-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gc-bmus-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
}

/* The photo's credit and licence, a small line each under the photo. */
.gc-bmus-attribution {
    margin-top: 0.25rem;
    min-height: 1.5rem;
}

/* The photo credit: dashed underline, as BM Unit Detail marks it. */
.gc-bmus-credit {
    color: inherit;
    text-decoration: underline dashed;
    text-underline-offset: 2px;
}


/* Exclude under Include: where the filters' columns run to three or more (site.css's 19rem tracks, 1.5rem apart), the
   Settlement Date takes the first column of both rows, level with Include, so the two tag boxes, two columns each,
   stack in the columns beside it rather than Exclude wrapping back under the date. Narrower, each takes its own row. */
@container (min-width: 60rem) {
    #bmUnitsSelectors > .gc-page-filter:first-child {
        grid-row: span 2;
        align-self: start;
    }
}