/* Content Grid Section — flexible 12-col layout with optional tiles + tinted images */

.content-grid-section .section-header {
    margin-bottom: 32px;
}

/* Compact mode — toggle top and bottom padding independently. Used to make
   "thin row" sections that force row separation without a header. */
.content-grid-section--compact-top {
    padding-top: 24px;
}
.content-grid-section--compact-bottom {
    padding-bottom: 24px;
}
/* Tighten header margin only when we're squeezing the top */
.content-grid-section--compact-top .section-header {
    margin-bottom: 16px;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 12), minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
}

@media (max-width: 720px) {
    /* Stack to single column on small screens */
    .content-grid > .content-grid__cell {
        grid-column: 1 / -1 !important;
    }
}

/* Non-tile rich text — give it some horizontal breathing room so it doesn't
   butt right up against an adjacent image block. Tile mode already pads
   internally (32px) so we exclude that variant. */
.content-grid__cell--richtextblock:not(.content-grid__cell--tile) {
    padding-left: 24px;
    padding-right: 24px;
}

/* Drop the edge padding when the cell touches the section container, so
   its text aligns with the section title / other container-edge content.
   `--first-in-row` / `--last-in-row` are emitted by the partial. */
.content-grid__cell--richtextblock:not(.content-grid__cell--tile).content-grid__cell--first-in-row {
    padding-left: 0;
}
.content-grid__cell--richtextblock:not(.content-grid__cell--tile).content-grid__cell--last-in-row {
    padding-right: 0;
}

/* Tile rendering — boxed, padded, with auto-inverted background relative to section */
.content-grid__cell--tile {
    border-radius: var(--radius, 16px);
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition, 0.2s ease), box-shadow var(--transition, 0.2s ease);
}

/* On a warm cream section, tiles render WHITE for contrast */
.section--warm .content-grid__cell--tile {
    background: var(--bg-white, #ffffff);
    color: var(--text-body);
}

/* On a white section, tiles render WARM cream for contrast */
.section--white .content-grid__cell--tile {
    background: var(--bg-warm);
    color: var(--text-body);
}

/* On a dark green section, tiles render WHITE for max contrast */
.section--deep .content-grid__cell--tile {
    background: var(--bg-white, #ffffff);
    color: var(--text-body);
}
/* Inside a white tile on a dark-green section, body text reverts to the
   standard body grey, but headings should stay brand-green (inherited
   from the base .rte-content h* rules below) — not forced to grey. */
.section--deep .content-grid__cell--tile p,
.section--deep .content-grid__cell--tile li {
    color: var(--text-body);
}

/* Rich Text Block — basic typographic reset inside tile and non-tile cells.
   Match the section's intro text size (1.3125rem from .section-header p). */
.content-grid .rte-content,
.content-grid .rte-content p,
.content-grid .rte-content li,
.content-grid .image-block__caption {
    font-size: 1.3125rem;
}
.content-grid .rte-content > *:first-child { margin-top: 0; }
.content-grid .rte-content > *:last-child { margin-bottom: 0; }

.content-grid .rte-content h2 {
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text-heading);
    line-height: 1.2;
}
.content-grid .rte-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 24px 0 12px;
    color: var(--text-heading);
    line-height: 1.25;
}
.content-grid .rte-content h4 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 20px 0 10px;
    color: var(--text-heading);
    line-height: 1.3;
}

/* On dark-green sections, RTE headings sitting directly on the green
   background need to flip white. `:not(.content-grid__cell--tile)` scopes
   this strictly to cells that aren't white tiles, so the base brand-green
   colour (from .content-grid .rte-content h2/h3/h4 above) survives inside
   tiles without being overridden. */
.section--deep .content-grid__cell:not(.content-grid__cell--tile) .rte-content h2,
.section--deep .content-grid__cell:not(.content-grid__cell--tile) .rte-content h3,
.section--deep .content-grid__cell:not(.content-grid__cell--tile) .rte-content h4 {
    color: #ffffff;
}

/* Metrics: rte-styles.css flips .metric / .metric-giant to coral on any
   .section--deep. Restore brand-green when the metric sits inside a white
   tile — coral on white reads cheap, dark green on white is the brand. */
.section--deep .content-grid__cell--tile span.metric,
.section--deep .content-grid__cell--tile span.metric-giant {
    color: var(--primary, #03584E);
}
.content-grid .rte-content p {
    margin-bottom: 16px;
    line-height: 1.55;
}
.content-grid .rte-content p:last-child {
    margin-bottom: 0;
}

/* Coral bullets for unordered lists — mirrors the design's .vmv-card__list pattern.
   The project has a global "ul, ol { list-style: none }" reset so we need to add
   the bullet via ::before. */
.content-grid .rte-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.content-grid .rte-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 3px;
    line-height: 1.55;
}
.content-grid .rte-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--coral);
}
.content-grid .rte-content ul li:last-child {
    margin-bottom: 0;
}

/* Ordered list — keep numbers, but with primary colour */
.content-grid .rte-content ol {
    list-style: decimal;
    padding-left: 24px;
    margin: 0 0 16px;
}
.content-grid .rte-content ol li {
    margin-bottom: 3px;
    line-height: 1.55;
}
.content-grid .rte-content ol li::marker {
    color: var(--primary);
    font-weight: 700;
}

/* Image Block */
.content-grid .image-block {
    margin: 0;
}
.content-grid .image-block__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius, 16px);
}
.content-grid .image-block__media img {
    display: block;
    width: 100%;
    height: auto;
}
.content-grid .image-block--tinted .image-block__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(2, 61, 54, 0.75) 0%,
        rgba(3, 88, 78, 0.6) 50%,
        rgba(246, 171, 147, 0.5) 100%);
    pointer-events: none;
}
.content-grid .image-block__caption {
    margin: 12px 0 0;
    font-size: 0.9375rem;
    color: var(--text-light, rgba(0, 0, 0, 0.6));
}

/* Partner-strip background overrides for the new Dark Green option */
.partner-strip--deep {
    background: var(--primary-dark);
    color: #ffffff;
}
.partner-strip--deep .label {
    color: rgba(255, 255, 255, 0.85);
}
.partner-strip--deep h2,
.partner-strip--deep h3,
.partner-strip--deep h4 {
    color: #ffffff;
}
.partner-strip--deep p {
    color: rgba(255, 255, 255, 0.75);
}

/* Iframe Block — wraps third-party embeds (Salesforce forms, etc).
   Height is set inline from the editor's numeric property; width fills the
   cell. Border stripped because most embedded forms ship with their own
   chrome and a UA border would double up. */
.content-grid .iframe-block {
    width: 100%;
}
.content-grid .iframe-block iframe {
    width: 100%;
    border: 0;
    display: block;
}

/* On dark-green sections the embedded form usually has a white/light bg of
   its own; give the iframe a subtle rounded corner so it sits as a panel
   rather than running edge-to-edge against the green. */
.section--deep .content-grid .iframe-block iframe {
    border-radius: var(--radius, 16px);
    background: #ffffff;
}