/* =========================================================
   MERIDIAN BASIC — EMERGENCY CONTACT
   Path: /wp-content/themes/meridian_premium/assets/css/emergency.css
   Scope: Gutenberg emergency contact section only.

   Expected Gutenberg classes:
   - Parent Group: meridian-emergency
   - Outer Columns (both emergency contacts): meridian-emergency__contacts
   - Each INNER Columns block (icon + text): meridian-emergency__item

   The paragraph and headings above the outer Columns block remain
   outside the contact card but within the parent Group.
   ========================================================= */

/* One shared contact card enclosing both emergency contact options. */
.meridian-emergency .meridian-emergency__contacts.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    margin: 28px 0 32px;
    padding: clamp(18px, 3vw, 32px);
    background: #fff;
    border: 1px solid #e2e9ee;
    border-left: 4px solid #d32f2f;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgb(14 35 55 / 7%);
}

/* Undo Gutenberg flex-column sizing inside our grid. */
.meridian-emergency .meridian-emergency__contacts > .wp-block-column {
    min-width: 0;
    flex-basis: auto !important;
    flex-grow: 0;
    margin: 0;
    padding: 0;
}

/* Separation between hospital and national emergency contacts. */
.meridian-emergency .meridian-emergency__contacts > .wp-block-column + .wp-block-column {
    border-left: 1px solid #e6ebef;
    padding-left: clamp(18px, 3vw, 32px);
    margin-left: clamp(18px, 3vw, 32px);
}

/* Each existing nested Columns block: image left, heading & text right. */
.meridian-emergency .meridian-emergency__item.wp-block-columns {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 0;
}

.meridian-emergency .meridian-emergency__item > .wp-block-column {
    min-width: 0;
    flex-basis: auto !important;
    flex-grow: 0;
    margin: 0;
}

/* Icon image block: maintain natural proportions. */
.meridian-emergency .meridian-emergency__item .wp-block-image {
    margin: 0;
}

.meridian-emergency .meridian-emergency__item .wp-block-image img {
    display: block;
    width: 100%;
    max-width: 76px;
    height: auto;
    object-fit: contain;
}

/* Text area. */
.meridian-emergency .meridian-emergency__item h3 {
    margin: 0 0 8px;
    color: #173958;
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 600;
    line-height: 1.3;
}

.meridian-emergency .meridian-emergency__item p {
    margin: 0;
    color: #465969;
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.meridian-emergency .meridian-emergency__item a[href^="tel:"] {
    color: #0b6b3a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.meridian-emergency .meridian-emergency__item a[href^="tel:"]:focus-visible {
    outline: 2px solid #0b6b3a;
    outline-offset: 3px;
}

/* Medium and compact: one contact per row, preserve icon-left layout. */
@media (max-width: 839.98px) {
    .meridian-emergency .meridian-emergency__contacts.wp-block-columns {
        grid-template-columns: minmax(0, 1fr);
        margin: 20px 0 28px;
    }

    .meridian-emergency .meridian-emergency__contacts > .wp-block-column + .wp-block-column {
        border-left: 0;
        border-top: 1px solid #e6ebef;
        padding-left: 0;
        padding-top: 22px;
        margin-left: 0;
        margin-top: 22px;
    }
}

@media (max-width: 599.98px) {
    .meridian-emergency .meridian-emergency__contacts.wp-block-columns {
        padding: 18px 16px;
    }

    .meridian-emergency .meridian-emergency__item.wp-block-columns {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px;
    }

    .meridian-emergency .meridian-emergency__item .wp-block-image img {
        max-width: 58px;
    }

    .meridian-emergency .meridian-emergency__item h3 {
        font-size: 18px;
    }
}