/* ==========================================================
   MRC CUSTOM BLOCKS
   Shared front-end + Gutenberg editor styles.
   ========================================================== */


/* ---------- Block typography ---------- */

.feature-strip,
.morrisania-two-column,
.mrc-stat-blocks1-block,
.mrc-media-stack-block,
.stats {
    font-family: "Montserrat", sans-serif;
}

/*
 * Gutenberg applies its own typography directly to core text blocks,
 * so explicitly keep text inside these custom layouts on the theme font.
 */
.morrisania-two-column h1,
.morrisania-two-column h2,
.morrisania-two-column h3,
.morrisania-two-column h4,
.morrisania-two-column h5,
.morrisania-two-column h6,
.morrisania-two-column p,
.morrisania-two-column li,
.morrisania-two-column a,
.feature-strip h3,
.feature-strip p,
.stat,
.stat strong,
.stat__text {
    font-family: "Montserrat", sans-serif;
}

.morrisania-two-column h2 {
    margin: 30px 0 10px;
    font-size: 2rem;
}

/* ------------------------------------------
   Icon Block
   ------------------------------------------ */

.mrc-icon-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mrc-icon-block i {
    font-size: 1.5rem;
}


/* ---------- Icon + Text ---------- */

.mrc-icon-text {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    column-gap: 18px;

    width: 100%;
    margin: 18px 0;
}

.mrc-icon-text__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    min-height: 32px;

    color: var(--navy);
    font-size: 1.5rem;
    line-height: 1;
}

.mrc-icon-text__copy {
    min-width: 0;
    line-height: 1.45;
}

.mrc-icon-text__text,
.mrc-icon-text__secondary {
    margin: 0;
}

.mrc-icon-text__secondary {
    margin-top: 2px;
}

.mrc-icon-text__link {
    color: inherit;
    text-decoration: none;
}

.mrc-icon-text__link:hover .mrc-icon-text__copy,
.mrc-icon-text__link:focus .mrc-icon-text__copy {
    text-decoration: underline;
}


/* ---------- Rule Block ---------- */

.mrc-rule {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
}

.mrc-rule span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--orange, #ef6c24);
}

/* Keep the wrapper aligned with surrounding content; shorten the line only. */
.mrc-rule-half span {
    width: 50%;
}


/* ---------- Button Block ---------- */

.mrc-button-block {
    display: flex;
    width: 100%;
    margin: 24px 0;
}

.mrc-button-block.align-left {
    justify-content: flex-start;
}

.mrc-button-block.align-center {
    justify-content: center;
}

.mrc-button-block.align-right {
    justify-content: flex-end;
}

.mrc-button-block .button,
.mrc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 10px 20px;

    border: 1px solid transparent;
    border-radius: 7px;

    background: var(--orange, #ef6c24);
    color: var(--white, #ffffff);

    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

/* ---------- Download Button ---------- */

.mrc-download-button {
    margin: 1.5rem 0;
}

.mrc-download-button .mrc-button {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}


/* Two column layout */

.morrisania-two-column {
    width: min(calc(100% - 48px), var(--max));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl, 4rem);
    padding: 88px 0;
    margin-inline: auto;
}

.morrisania-two-column__column {
    min-width: 0;
}

@media (max-width: 768px) {

    .morrisania-two-column {
        grid-template-columns: 1fr;
        gap: var(--space-lg, 2.5rem);
    }

    .morrisania-two-column--lead-left
    > .morrisania-two-column__column:first-child {
        order: 1;
    }

    .morrisania-two-column--lead-left
    > .morrisania-two-column__column:last-child {
        order: 2;
    }

    .morrisania-two-column--lead-right
    > .morrisania-two-column__column:first-child {
        order: 2;
    }

    .morrisania-two-column--lead-right
    > .morrisania-two-column__column:last-child {
        order: 1;
    }

}


/* ---------- Feature strip ---------- */

.feature-strip {
    position: relative;
    margin-top: -96px;
    z-index: 2;
}

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--paper);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.feature {
    padding: 26px 28px;
    border-right: 1px solid var(--line);
}

.feature:last-child { border-right: 0; }

.feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e9eef1;
    color: var(--navy);
    font-weight: 800;
    font-size: 22px;
}

.feature:nth-child(2) .feature-icon { background: #f2eadf; }
.feature:nth-child(3) .feature-icon { background: #e7edf1; }

.feature h3 { margin: 0 0 6px; font-size: 17px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }


/* =========================================================
   STAT BLOCKS 1
   ========================================================= */

/*
 * Scope the layout to this ACF block so older/global .stats
 * styles elsewhere in the theme cannot force these cards to stack.
 */
.mrc-stat-blocks1-block {
    width: 100%;
    min-width: 0;
}

.mrc-stat-blocks1-block .stats {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.mrc-stat-blocks1-block .stat {
    grid-column: span 2;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 26px 20px;

    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;

    text-align: center;
}

/*
 * Balance incomplete rows while always filling the available width:
 *
 * 2  = 2 equal cards
 * 3  = 3 equal cards
 * 4  = 2 + 2
 * 5  = 3 + 2
 * 6  = 3 + 3
 * 7  = 3 + 2 + 2
 * 8  = 3 + 3 + 2
 */

/* Counts ending in 2: final two cards share the row 50/50. */
.mrc-stat-blocks1-block
.stats:has(> .stat:nth-child(3n + 2):last-child)
> .stat:nth-last-child(-n + 2) {
    grid-column: span 3;
}

/* Counts ending in 1: final four cards become two balanced 50/50 rows. */
.mrc-stat-blocks1-block
.stats:has(> .stat:nth-child(3n + 1):last-child)
> .stat:nth-last-child(-n + 4) {
    grid-column: span 3;
}

.mrc-stat-blocks1-block .stat strong {
    display: block;

    color: var(--orange);

    font-size: 32px;
    line-height: 1;

    margin-bottom: 8px;
}


/* =========================================================
   GUTENBERG EDITOR WIDTH
   Editor only — let the custom block UI use the full canvas.

   WordPress normally constrains top-level blocks to the editor's
   content width. That is useful for normal paragraphs, but it makes
   these layout blocks look inconsistently narrow in the UI.
   Nested blocks are intentionally excluded so a Stats block placed
   inside a Two Column column stays the width of that column.
   ========================================================= */

.editor-styles-wrapper .is-root-container
> [data-type="acf/homepage-hero"],
.editor-styles-wrapper .is-root-container
> [data-type="acf/feature-strip"],
.editor-styles-wrapper .is-root-container
> [data-type="acf/stat-blocks1"],
.editor-styles-wrapper .is-root-container
> [data-type="morrisania/two-column"],
.editor-styles-wrapper .is-root-container
> [data-type="morrisania/card-grid"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* ACF adds a preview wrapper inside its Gutenberg block wrapper. */
.editor-styles-wrapper .is-root-container
> [data-type="acf/feature-strip"] .acf-block-preview,
.editor-styles-wrapper .is-root-container
> [data-type="acf/stat-blocks1"] .acf-block-preview,
.editor-styles-wrapper .is-root-container
> [data-type="acf/homepage-hero"] .acf-block-preview {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Make the editor-only frames themselves fill their block wrapper. */
.editor-styles-wrapper .mrc-feature-strip-block,
.editor-styles-wrapper .mrc-stat-blocks1-block {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}


/* =========================================================
   GUTENBERG EDITOR FRAMES + LABELS
   Editor only — these do not appear on the live site.
   ========================================================= */

.mrc-feature-strip-block__label,
.mrc-stat-blocks1-block__label {
    display: none;
}

.editor-styles-wrapper .mrc-feature-strip-block,
.editor-styles-wrapper .mrc-stat-blocks1-block,
.editor-styles-wrapper .morrisania-two-column {
    position: relative;
    outline: 1px dashed #b8b8b8;
    outline-offset: 0;
}

.editor-styles-wrapper .mrc-feature-strip-block__label,
.editor-styles-wrapper .mrc-stat-blocks1-block__label,
.editor-styles-wrapper .morrisania-two-column::before {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 18px;
    transform: translateY(-50%);

    display: block;
    padding: 0 8px;

    background: #ffffff;
    color: #666666;

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    pointer-events: none;
}

.editor-styles-wrapper .morrisania-two-column::before {
    content: "TWO COLUMN";
}

/* Give the stats frame a little editor-only breathing room. */
.editor-styles-wrapper .mrc-stat-blocks1-block {
    padding: 24px;
}

/* Keep the ACF feature strip's existing layout intact inside its frame. */
.editor-styles-wrapper .mrc-feature-strip-block {
    padding: 16px 0;
}

/* Ensure these blocks win over Gutenberg's default editor typography. */
.editor-styles-wrapper .morrisania-two-column,
.editor-styles-wrapper .morrisania-two-column h1,
.editor-styles-wrapper .morrisania-two-column h2,
.editor-styles-wrapper .morrisania-two-column h3,
.editor-styles-wrapper .morrisania-two-column h4,
.editor-styles-wrapper .morrisania-two-column h5,
.editor-styles-wrapper .morrisania-two-column h6,
.editor-styles-wrapper .morrisania-two-column p,
.editor-styles-wrapper .morrisania-two-column li,
.editor-styles-wrapper .morrisania-two-column a,
.editor-styles-wrapper .feature-strip,
.editor-styles-wrapper .feature-strip h3,
.editor-styles-wrapper .feature-strip p,
.editor-styles-wrapper .mrc-stat-blocks1-block,
.editor-styles-wrapper .stat,
.editor-styles-wrapper .stat strong,
.editor-styles-wrapper .stat__text {
    font-family: "Montserrat", sans-serif;
}


@media (max-width: 700px) {

    .mrc-stat-blocks1-block .stats {
        grid-template-columns: 1fr;
    }

    .mrc-stat-blocks1-block .stats .stat {
        grid-column: auto !important;
    }

}


/* =========================================================
   MEDIA STACK
   ========================================================= */

.mrc-media-stack-block {
    width: 100%;
    min-width: 0;
    font-family: "Montserrat", sans-serif;
}

.mrc-media-stack-block__label {
    display: none;
}

.mrc-media-stack-block .media-stack {
    position: relative;
    width: 100%;
    min-height: 520px;
}

.mrc-media-stack-block .media-placeholder {
    position: absolute;
    top: 0;
    left: 0;

    width: 85%;
    aspect-ratio: 3 / 2;

    border: 10px solid var(--paper);
    outline: 2px solid var(--navy);
    background: var(--paper);

    overflow: hidden;
    transform: rotate(2deg);
    box-shadow: var(--shadow);
}

.mrc-media-stack-block .media-placeholder.small {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;

    width: 64%;
    transform: rotate(-2deg);
    outline-color: var(--orange);
}

.mrc-media-stack-block .media-frame__image,
.mrc-media-stack-block .media-frame__embed,
.mrc-media-stack-block .media-frame__embed iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.mrc-media-stack-block .media-frame__image {
    object-fit: cover;
}

.mrc-media-stack-block .media-frame__embed {
    position: absolute;
    inset: 0;
}

.mrc-media-stack-block .media-frame__embed iframe {
    border: 0;
}

.mrc-media-stack-block .media-frame__placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;
    padding: 20px;

    color: var(--ink, #17212b);
    text-align: center;
    box-sizing: border-box;
}

/* A tabbed child page already lives inside the section's .container. */
.service-content > .morrisania-two-column {
    width: 100%;
    max-width: none;
    padding-top: 0;
    padding-bottom: 0;
}


/* ---------- Media Stack: Gutenberg editor ---------- */

.editor-styles-wrapper .is-root-container
> [data-type="acf/media-stack"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.editor-styles-wrapper [data-type="acf/media-stack"] .acf-block-preview,
.editor-styles-wrapper .mrc-media-stack-block {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

.editor-styles-wrapper .mrc-media-stack-block {
    position: relative;
    padding: 24px;
    outline: 1px dashed #b8b8b8;
    outline-offset: 0;
}

.editor-styles-wrapper .mrc-media-stack-block__label {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 18px;
    transform: translateY(-50%);

    display: block;
    padding: 0 8px;

    background: #ffffff;
    color: #666666;

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    pointer-events: none;
}

@media (max-width: 700px) {

    .mrc-media-stack-block .media-stack {
        min-height: 430px;
    }

    .mrc-media-stack-block .media-placeholder.small {
        width: 72%;
    }

}


/* =========================================================
   CARD GRID + CONTENT CARD
   Generic reusable cards for locations, resources, programs,
   partners, and other repeatable content.
   ========================================================= */

.mrc-card-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 42px 36px;
}

.mrc-card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mrc-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mrc-card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mrc-content-card {
    min-width: 0;
    font-family: "Montserrat", sans-serif;
}

.mrc-content-card__title {
    margin: 0 0 14px;
    font-family: "Montserrat", sans-serif;
}

.mrc-content-card__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 18px;
    overflow: hidden;
    background: var(--paper, #f4f1ea);
}

.mrc-content-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mrc-content-card__body {
    min-width: 0;
}

.mrc-content-card__body > *:first-child {
    margin-top: 0;
}

.mrc-content-card__body > *:last-child {
    margin-bottom: 0;
}

.mrc-content-card__body p,
.mrc-content-card__body li,
.mrc-content-card__body a {
    font-family: "Montserrat", sans-serif;
}


/* ---------- Card Grid: Gutenberg Editor ---------- */

/*
 * Front-end .mrc-card-grid is itself a grid.
 * In Gutenberg, InnerBlocks adds another wrapper, so the outer
 * block must NOT also behave as the grid.
 */
.editor-styles-wrapper .mrc-card-grid {
    display: block;

    width: 100%;
    max-width: none;
    min-width: 0;

    position: relative;
    padding: 24px;

    outline: 1px dashed #b8b8b8;
    outline-offset: 0;

    box-sizing: border-box;
}


/* Gutenberg InnerBlocks wrapper becomes the actual grid */

.editor-styles-wrapper
.mrc-card-grid
> .block-editor-inner-blocks {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.editor-styles-wrapper
.mrc-card-grid
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    display: grid;

    width: 100%;
    max-width: none;
    min-width: 0;

    gap: 32px;
}


/* Match selected column count */

.editor-styles-wrapper
.mrc-card-grid--2
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-styles-wrapper
.mrc-card-grid--3
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editor-styles-wrapper
.mrc-card-grid--4
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* Gutenberg's individual Content Card wrappers */

.editor-styles-wrapper
.mrc-card-grid
> .block-editor-inner-blocks
> .block-editor-block-list__layout
> [data-type="morrisania/content-card"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;

    margin: 0 !important;
}


/* Actual card */

.editor-styles-wrapper .mrc-content-card {
    width: 100%;
    max-width: none;
    min-width: 0;

    padding: 18px;

    border: 1px solid var(--line, #d9dee2);
    background: #ffffff;

    box-sizing: border-box;
}


/* Image editor */

.editor-styles-wrapper .mrc-content-card__media--editor {
    position: relative;
}

.editor-styles-wrapper .mrc-content-card__media-actions {
    position: absolute;
    right: 10px;
    bottom: 10px;

    display: flex;
    gap: 8px;

    padding: 6px;

    background: rgba(255, 255, 255, 0.94);
}

.editor-styles-wrapper .mrc-content-card__image-placeholder {
    min-height: 180px;
    margin-bottom: 18px;
}


@media (max-width: 900px) {

    .editor-styles-wrapper
    .mrc-card-grid--3
    > .block-editor-inner-blocks
    > .block-editor-block-list__layout,

    .editor-styles-wrapper
    .mrc-card-grid--4
    > .block-editor-inner-blocks
    > .block-editor-block-list__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .editor-styles-wrapper
    .mrc-card-grid
    > .block-editor-inner-blocks
    > .block-editor-block-list__layout {
        grid-template-columns: 1fr;
    }
}