/**
 * Block Grid frontend layout stylesheet.
 * Ported from umbraco/assets/css/umbraco-blockgridlayout-flexbox.css
 * Required for correct rendering of all Block Grid components on the frontend.
 */

.umb-block-grid {
    container-type: inline-size;
}

/**
 * No row gap between top-level Block Grid items. v8 (DTGE) rendered sections flush
 * against each other - each component manages its own internal padding - so a grid
 * gap here produces an unwanted white band between sections (e.g. between a grey RTE
 * row and the next row). Keep this 0 to match v8 spacing.
 */
.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), 1fr);
    gap: var(--umb-block-grid--row-gap, 0px) var(--umb-block-grid--column-gap, 0px);
}

.umb-block-grid__layout-item {
    position: relative;
    grid-column: span var(--umb-block-grid--item-column-span, 1);
    grid-row: span var(--umb-block-grid--item-row-span, 1);
}

.umb-block-grid__area-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, 1), 1fr);
    gap: var(--umb-block-grid--areas-row-gap, 0px) var(--umb-block-grid--areas-column-gap, 30px);
    width: 100%;
}

.umb-block-grid__area {
    position: relative;
    grid-column: span var(--umb-block-grid--area-column-span, 1);
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

/**
 * Vertical spacing between blocks.
 *
 * v8 reference: app.css has a global `section { margin: 1rem 0 }`, so in v8 every stacked
 * component (each rendered a <section>) had 1rem top/bottom breathing room - both for
 * top-level rows AND for components stacked inside a container.
 *
 * TOP-LEVEL rows: the row wrapper (gridColumn* -> <section class="grid-row">) must NOT keep
 * that margin, because the grid gap + the section margin double-spaced consecutive rows and
 * produced an unwanted white band (e.g. between a grey RTE row and the next row). So we reset
 * the margin to 0 ONLY for a <section> that is a direct child of a TOP-LEVEL layout item -
 * i.e. a layout container that is NOT itself inside an area (container).
 */
.umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item > section {
    margin-top: 0;
    margin-bottom: 0;
}

/**
 * COMPONENTS INSIDE A CONTAINER: a component that lives inside a container/column renders its
 * <section> nested under `.umb-block-grid__area` (the area wrapper the container emits). Here we
 * WANT the v8 spacing back, otherwise multiple components in one container are squeezed together
 * vertically with no gap. Restore the v8 `1rem 0` for any component <section> that sits inside an
 * area. The layout item wrapping it has no margin of its own, so this reinstates v8 behaviour 1:1.
 */
.umb-block-grid__area .umb-block-grid__layout-item > section {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/**
 * Collapse the OUTER margin at the container edges. The 1rem rule above is meant to space
 * components *between* each other, but on the FIRST and LAST component in an area it also pushes
 * against the container's own edge/padding - showing as an extra white gap (e.g. a grey RTE row
 * whose text sits 1rem in from the coloured band's top/bottom). Zero the first child's top margin
 * and the last child's bottom margin so the container padding alone controls the outer spacing,
 * exactly like v8.
 */
.umb-block-grid__area .umb-block-grid__layout-item:first-child > section {
    margin-top: 0;
}

.umb-block-grid__area .umb-block-grid__layout-item:last-child > section {
    margin-bottom: 0;
}

/**
 * Full-bleed banner blocks must sit flush (no outer margin) even when placed inside a
 * container/area. The generic rule above adds 1rem top/bottom so stacked components in a
 * container get breathing room, but the Link Bar is a full-width coloured/background-image
 * banner (v8 rendered it edge-to-edge). The 1rem margin showed as white strips above and
 * below the banner. Zero it for the link-bar specifically.
 */
.umb-block-grid__area .umb-block-grid__layout-item > section.link-bar {
    margin-top: 0;
    margin-bottom: 0;
}

/**
 * Full-bleed Call To Action blocks must also sit flush. Like the Link Bar, the CTA is a
 * full-width coloured section (`<section class="call-to-action" style="background-color:...">`)
 * that manages its own vertical padding via `py-5`. The generic 1rem in-area margin above shows
 * as white strips above and below each coloured CTA (the margin exposes the page background).
 * Zero it so consecutive CTAs stack flush, matching v8.
 */
.umb-block-grid__area .umb-block-grid__layout-item > section.call-to-action {
    margin-top: 0;
    margin-bottom: 0;
}

/**
 * Call To Action video containment.
 *
 * The Call To Action component renders a video-only block inside `.video-wrapper`, which uses the
 * classic responsive-embed technique (height:0 + padding-bottom:56.25%). That only works if the
 * iframe/video inside is absolutely positioned to fill the padded box. The global app.css only
 * positions the iframe for `.video-teaser div.video-wrapper iframe`, so in the CTA the iframe/video
 * was left unpositioned and overflowed OUTSIDE the CTA column (spilling across the page). Scope the
 * fill to the CTA's own `.video-wrapper` so the video stays inside its column.
 *
 * NOTE: the thumbnail+video case (`.image-vid-container`) is intentionally left to app.css - it uses
 * a different image-as-poster overlay design, so we must not override it here.
 */
.call-to-action .video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 0; /* app.css adds 25px here for .video-teaser; reset so the 16:9 box is exact */
    padding-bottom: 56.25%; /* 16:9 */
    overflow: hidden;
}

.call-to-action .video-wrapper iframe,
.call-to-action .video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/**
 * Grid Media component image styling.
 *
 * v8 reference: the legacy Grid "media" editor output a bare <img class="img-fluid"> inside the
 * column, with NO frame and NO drop shadow - the site stylesheet rule
 * [class*="col-"] [class*="grid-"] img { max-width:100%; height:auto } did all the work.
 * The Block Grid wrapper (`figure.grid-media > img.img-fluid`) must therefore stay visually
 * transparent, otherwise media blocks render with a box/shadow that v8 never had.
 */
.grid-media {
    /* Keep the v8 gap between the image and the text/RTE that follows it. Bootstrap's default
       figure margin was 0 0 1rem; preserve that so the text isn't cramped against the image. */
    margin: 0 0 1rem;
}

.grid-media img {
    /* Match v8 exactly: the v8 grid "media" editor config had NO config.size, so GetCropUrl
       never ran - v8 simply output <img class="img-fluid"> at the image's natural aspect ratio.
       So we keep height:auto here (no forced crop). No box-shadow/border: v8 had none, and any
       decoration here makes the block look different from the same image placed via the RTE. */
    display: block;
    max-width: 100%;
    height: auto;
}

.grid-media figcaption {
    margin-top: .5rem;
    font-size: 90%;
    color: #6c757d;
}

/**
 * RTE image containment.
 *
 * Images inserted through the Rich Text Editor are emitted with hard-coded width/height
 * attributes (e.g. width="643" height="654") and NO `img-fluid` class. bootstrap.css only
 * declares `img{vertical-align:middle;border-style:none}` - there is no global max-width - so
 * such an image renders at its fixed pixel width and cannot shrink to its Block Grid column,
 * crowding the adjacent column (e.g. an image RTE beside a text RTE in the same row).
 *
 * Constrain RTE images to their column, which is what `img-fluid` would have done. `height:auto`
 * is required so the hard-coded height attribute doesn't distort the aspect ratio once the width
 * is capped. Scoped to `.rte-container` so text-only RTEs and all other components are unaffected.
 */
.rte-container img {
    max-width: 100%;
    height: auto;
}