/**
 * ERE: stack the property contact items underneath each other on narrow screens.
 *
 * The "Contact Information" block on a single property page renders the landline number,
 * the mobile number and the WhatsApp link as one flex row (`d-flex gap-2 align-items-center`
 * in the markup, i.e. display:flex with flex-wrap:nowrap) inside the agent list. The three
 * items need roughly 435px together, while the card's content column on a phone is about
 * 340px, so the row cannot fit. The theme's own
 * `.agent-information .agent-phone-wrap span{overflow:hidden}` then lets the spans shrink
 * below their text width and the landline number and the "WhatsApp" label are silently cut
 * off at the right edge.
 *
 * Below the md breakpoint the row therefore becomes a two-column grid: every item keeps its
 * icon in the first column and its value in the second, so the items sit underneath each
 * other and nothing is clipped. From md up the single row already fits as it is, so the
 * desktop layout is left alone.
 */

@media (max-width: 767.98px) {
    .property-contact-agent-wrap .agent-information .agent-phone-wrap {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 0.5rem;
    }

    /* The `me-1` utility margin spaced the icon inside the inline row; in the grid the
       column gap already separates icon from value, so drop it for a clean left edge. */
    .property-contact-agent-wrap .agent-information .agent-phone-wrap > .houzez-icon {
        margin-right: 0 !important;
    }

    /* A value wraps rather than being clipped if the value column is very narrow. */
    .property-contact-agent-wrap .agent-information .agent-phone-wrap > span {
        min-width: 0;
    }

    .property-contact-agent-wrap .agent-information .agent-phone-wrap > span > a {
        overflow-wrap: anywhere;
    }
}