/*
 * File:
 * public/css/mortgage-discovery-sections.css
 *
 * Purpose:
 * Edge-to-edge Mortgage discovery sections.
 *
 * Version: 1.0
 */


.rb-md-band,
.rb-md-band *,
.rb-md-band *::before,
.rb-md-band *::after {
    box-sizing: border-box;
}


.rb-md-band {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding:
        clamp(3.4rem, 6vw, 5.7rem)
        0;

    color: #0f172a;
}


.rb-md-band--locations {
    background:
        radial-gradient(
            circle at 92% 14%,
            rgba(34, 197, 94, 0.08),
            transparent 28rem
        ),
        #f4f7f5;
}


.rb-md-band--providers {
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(59, 130, 246, 0.055),
            transparent 27rem
        ),
        #ffffff;
}


.rb-md-band--paths {
    background:
        radial-gradient(
            circle at 90% 90%,
            rgba(21, 128, 61, 0.09),
            transparent 30rem
        ),
        linear-gradient(
            135deg,
            #f2f7f3 0%,
            #f7faf8 52%,
            #f1f5f2 100%
        );
}


.rb-md-band--tools {
    background:
        radial-gradient(
            circle at 10% 90%,
            rgba(100, 116, 139, 0.075),
            transparent 30rem
        ),
        #f6f7f8;
}


/*
 * Quiet oversized section watermark.
 */

.rb-md-band__watermark {
    position: absolute;
    right: clamp(-2rem, 1vw, 1rem);
    bottom: -4.2rem;
    color: rgba(15, 23, 42, 0.025);
    font-size: clamp(11rem, 22vw, 22rem);
    line-height: 1;
    pointer-events: none;
    transform: rotate(-6deg);
}


/*
 * Visual separator between surrounding page sections.
 */

.rb-md-visual-break {
    width: min(100%, 780px);
    display: grid;
    grid-template-columns:
        minmax(2rem, 1fr)
        auto
        minmax(2rem, 1fr);

    align-items: center;
    gap: 0.9rem;
    margin: 0 auto 2.5rem;
}


.rb-md-visual-break::before,
.rb-md-visual-break::after {
    content: '';
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(21, 128, 61, 0.22)
        );
}


.rb-md-visual-break::after {
    background:
        linear-gradient(
            90deg,
            rgba(21, 128, 61, 0.22),
            transparent
        );
}


.rb-md-visual-break > span {
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: #15803d;
    font-size: 1rem;
    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.07);
}


.rb-md-kicker {
    display: block;
    margin-bottom: 0.65rem;
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}


.rb-md-intro h2,
.rb-md-provider-heading h2,
.rb-md-path-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size:
        clamp(1.85rem, 3.5vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.038em;
    line-height: 1.08;
    text-wrap: balance;
}


.rb-md-intro p,
.rb-md-provider-heading p,
.rb-md-path-heading p {
    margin: 1rem 0 0;
    color: #526071;
    font-size: 1rem;
    line-height: 1.68;
    text-wrap: pretty;
}


.rb-md-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.4rem;
    color: #166534;
    font-size: 0.93rem;
    font-weight: 800;
    text-decoration: none;
}


.rb-md-feature-link i {
    transition: transform 0.16s ease;
}


.rb-md-feature-link:hover {
    color: #14532d;
    text-decoration: underline;
    text-underline-offset: 0.24rem;
}


.rb-md-feature-link:hover i {
    transform: translateX(3px);
}


/*
 * Locations.
 */

.rb-md-locations-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(250px, 0.8fr)
        minmax(0, 1.7fr);

    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
}


.rb-md-location-directory {
    display: grid;
    gap: 2.2rem;
}


.rb-md-link-group h3 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    line-height: 1.2;
    text-transform: uppercase;
}


.rb-md-link-group h3 i {
    color: #15803d;
}


.rb-md-link-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.7rem
        clamp(1.5rem, 4vw, 4rem);

    margin: 0;
    padding: 0;
    list-style: none;
}


.rb-md-link-grid--city {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.rb-md-link-grid a {
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    color: #263547;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}


.rb-md-link-grid a i {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 0.76rem;
    transition:
        color 0.16s ease,
        transform 0.16s ease;
}


.rb-md-link-grid a:hover {
    color: #15803d;
}


.rb-md-link-grid a:hover i {
    color: #15803d;
    transform: translate(2px, -2px);
}


/*
 * Providers.
 */

.rb-md-provider-heading {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 2.5rem;
    text-align: center;
}


.rb-md-provider-heading p {
    max-width: 69ch;
    margin-right: auto;
    margin-left: auto;
}


.rb-md-provider-directory {
    position: relative;
    z-index: 1;
}


.rb-md-provider-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        1.25rem
        clamp(1.4rem, 3vw, 3rem);

    margin: 0;
    padding: 0;
    list-style: none;
}


.rb-md-provider-grid a {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 0.75rem;
    min-height: 3.3rem;
    color: #172033;
    text-decoration: none;
}


.rb-md-provider-icon {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf7f0;
    color: #15803d;
    font-size: 0.8rem;
}


.rb-md-provider-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}


.rb-md-provider-copy strong {
    color: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
}


.rb-md-provider-copy small {
    color: #778394;
    font-size: 0.72rem;
    font-weight: 600;
}


.rb-md-provider-grid a > .bi-arrow-right {
    color: #a1aab7;
    font-size: 0.75rem;
    transition:
        color 0.16s ease,
        transform 0.16s ease;
}


.rb-md-provider-grid a:hover {
    color: #15803d;
}


.rb-md-provider-grid a:hover >
.bi-arrow-right {
    color: #15803d;
    transform: translateX(3px);
}


/*
 * Mortgage paths.
 */

.rb-md-path-heading {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-bottom: 2.8rem;
}


.rb-md-path-heading p {
    max-width: 70ch;
}


.rb-md-path-directory {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: clamp(1.8rem, 4vw, 4rem);
}


.rb-md-path-number {
    display: block;
    margin-bottom: 0.55rem;
    color: rgba(21, 128, 61, 0.44);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}


.rb-md-path-column h3 {
    margin: 0 0 1rem;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.25;
}


.rb-md-clean-links {
    display: grid;
    gap: 0.62rem;
    margin: 0;
    padding: 0;
    list-style: none;
}


.rb-md-clean-links a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    color: #465568;
    font-size: 0.88rem;
    font-weight: 680;
    line-height: 1.4;
    text-decoration: none;
}


.rb-md-clean-links a i {
    flex: 0 0 auto;
    margin-top: 0.17rem;
    color: #a0aaba;
    font-size: 0.68rem;
    transition:
        color 0.16s ease,
        transform 0.16s ease;
}


.rb-md-clean-links a:hover {
    color: #15803d;
}


.rb-md-clean-links a:hover i {
    color: #15803d;
    transform: translateX(3px);
}


/*
 * Tools and guides.
 */

.rb-md-tools-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(250px, 0.76fr)
        minmax(0, 1.8fr);

    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
}


.rb-md-tools-directory {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(2rem, 5vw, 5rem);
}


.rb-md-tools-group-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}


.rb-md-tools-group-heading > span {
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf5ed;
    color: #15803d;
    font-size: 0.95rem;
}


.rb-md-tools-group-heading small {
    display: block;
    margin-bottom: 0.12rem;
    color: #15803d;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.rb-md-tools-group-heading h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 850;
}


/*
 * Accessibility.
 */

.rb-md-band a:focus-visible {
    outline: 3px solid rgba(34, 197, 94, 0.24);
    outline-offset: 4px;
    border-radius: 0.2rem;
}


/*
 * Tablet.
 */

@media (max-width: 1199.98px) {

    .rb-md-provider-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .rb-md-path-directory {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        row-gap: 2.5rem;
    }
}


@media (max-width: 991.98px) {

    .rb-md-locations-layout,
    .rb-md-tools-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .rb-md-provider-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .rb-md-link-grid--city {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/*
 * Mobile.
 */

@media (max-width: 767.98px) {

    .rb-md-band {
        padding:
            3rem
            0;
    }

    .rb-md-visual-break {
        margin-bottom: 2rem;
    }

    .rb-md-link-grid,
    .rb-md-link-grid--city,
    .rb-md-provider-grid,
    .rb-md-path-directory,
    .rb-md-tools-directory {
        grid-template-columns: 1fr;
    }

    .rb-md-provider-grid {
        gap: 0.9rem;
    }

    .rb-md-path-directory {
        gap: 2.2rem;
    }

    .rb-md-band__watermark {
        display: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .rb-md-band a,
    .rb-md-band a i {
        transition: none !important;
    }
}


/* =========================================================
   Mortgage discovery — province and city directory
   ========================================================= */

.rb-md-locations,
.rb-md-locations *,
.rb-md-locations *::before,
.rb-md-locations *::after {
    box-sizing: border-box;
}


.rb-md-locations {
    position: relative;
    width: 100%;
    padding:
        clamp(3.25rem, 6vw, 5.5rem)
        0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 90% 4%,
            rgba(21, 128, 61, 0.07),
            transparent 28rem
        ),
        #f4f7f5;
    color: #0f172a;
}


.rb-md-locations__intro {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.78fr)
        minmax(0, 1.22fr);
    align-items: end;
    gap:
        clamp(2rem, 7vw, 7rem);
}


.rb-md-locations__heading {
    max-width: 630px;
}


.rb-md-locations__eyebrow {
    display: block;
    margin-bottom: 0.5rem;
    color: #15803d;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}


.rb-md-locations__heading h2 {
    margin: 0;
    color: #0f172a;
    font-size:
        clamp(1.75rem, 3.3vw, 2.65rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.06;
    text-wrap: balance;
}


.rb-md-locations__heading p {
    max-width: 62ch;
    margin:
        0.8rem
        0
        0;
    color: #596779;
    font-size: 0.95rem;
    line-height: 1.65;
}


.rb-md-locations__featured {
    min-width: 0;
}


.rb-md-locations__featured-label {
    display: block;
    margin-bottom: 0.72rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}


.rb-md-locations__featured-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.46rem 0;
}


.rb-md-locations__featured-links a,
.rb-md-locations__featured-current {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #263449;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
}


.rb-md-locations__featured-links a {
    transition:
        color 0.16s ease,
        transform 0.16s ease;
}


.rb-md-locations__featured-links a:hover {
    color: #15803d;
    transform: translateY(-1px);
}


.rb-md-locations__featured-links > *:not(:last-child)::after {
    content: "";
    width: 3px;
    height: 3px;
    margin:
        0
        0.72rem;
    border-radius: 50%;
    background: #94a3b8;
}


.rb-md-locations__featured-current {
    color: #15803d;
}


.rb-md-locations__visual-break {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin:
        clamp(2.4rem, 5vw, 4.2rem)
        0
        clamp(2rem, 4vw, 3.4rem);
}


.rb-md-locations__visual-break span {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100, 116, 139, 0.32)
        );
}


.rb-md-locations__visual-break span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(100, 116, 139, 0.32),
            transparent
        );
}


.rb-md-locations__visual-break i {
    width: 2.65rem;
    height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #15803d;
    font-size: 0.95rem;
    box-shadow:
        0 14px 30px -24px
        rgba(15, 23, 42, 0.7);
}


.rb-md-locations__directory {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap:
        clamp(2.3rem, 5vw, 4.6rem)
        clamp(2rem, 5vw, 4rem);
}


.rb-md-locations__province {
    min-width: 0;
    padding-top: 1rem;
    border-top:
        2px solid
        rgba(21, 128, 61, 0.24);
}


.rb-md-locations__province-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}


.rb-md-locations__province-heading > div {
    min-width: 0;
}


.rb-md-locations__province-code {
    display: block;
    margin-bottom: 0.22rem;
    color: #15803d;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}


.rb-md-locations__province-title {
    color: #172033;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-decoration: none;
}


a.rb-md-locations__province-title:hover {
    color: #15803d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22rem;
}


.rb-md-locations__province-title--current {
    color: #15803d;
}


.rb-md-locations__market-count {
    flex: 0 0 auto;
    color: #7b8797;
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.3;
}


.rb-md-locations__city-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:
        0.48rem
        0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}


.rb-md-locations__city-list li {
    margin: 0;
    padding: 0;
}


.rb-md-locations__city-list a,
.rb-md-locations__city-current {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: #4b596b;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}


.rb-md-locations__city-list a {
    transition:
        color 0.15s ease,
        transform 0.15s ease;
}


.rb-md-locations__city-list a:hover {
    color: #15803d;
    transform: translateY(-1px);
}


.rb-md-locations__city-list a i {
    color: #8b98a8;
    font-size: 0.62rem;
    opacity: 0;
    transform: translate(-2px, 2px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}


.rb-md-locations__city-list a:hover i {
    opacity: 1;
    transform: translate(0, 0);
}


.rb-md-locations__city-current {
    color: #15803d;
    font-weight: 850;
}


.rb-md-locations__city-current i {
    font-size: 0.56rem;
}


.rb-md-locations__province-link {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin-top: 1.1rem;
    color: #166534;
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.35;
    text-decoration: none;
}


.rb-md-locations__province-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.22rem;
}


.rb-md-locations__province-link i {
    font-size: 0.72rem;
    transition: transform 0.15s ease;
}


.rb-md-locations__province-link:hover i {
    transform: translateX(2px);
}


.rb-md-locations__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top:
        clamp(3rem, 6vw, 5rem);
    padding-top: 1.5rem;
    border-top:
        1px solid
        rgba(100, 116, 139, 0.22);
}


.rb-md-locations__footer > div {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}


.rb-md-locations__footer-icon {
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f3ea;
    color: #15803d;
}


.rb-md-locations__footer strong {
    display: block;
    color: #223047;
    font-size: 0.9rem;
    font-weight: 850;
}


.rb-md-locations__footer p {
    margin: 0.16rem 0 0;
    color: #728093;
    font-size: 0.76rem;
    line-height: 1.45;
}


.rb-md-locations__hub-link,
.rb-md-locations__hub-current {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #166534;
    font-size: 0.84rem;
    font-weight: 850;
    text-decoration: none;
}


.rb-md-locations__hub-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.22rem;
}


.rb-md-locations__hub-link i {
    font-size: 1rem;
    transition: transform 0.15s ease;
}


.rb-md-locations__hub-link:hover i {
    transform: translateX(2px);
}


.rb-md-locations__hub-current {
    color: #15803d;
}


@media (max-width: 1199.98px) {
    .rb-md-locations__directory {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767.98px) {
    .rb-md-locations {
        padding:
            3rem
            0;
    }


    .rb-md-locations__intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.6rem;
    }


    .rb-md-locations__featured-links {
        gap:
            0.52rem
            0;
    }


    .rb-md-locations__directory {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }


    .rb-md-locations__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.1rem;
    }


    .rb-md-locations__hub-link,
    .rb-md-locations__hub-current {
        padding-left: 3.5rem;
    }
}


@media (max-width: 479.98px) {
    .rb-md-locations__heading h2 {
        font-size: 1.72rem;
    }


    .rb-md-locations__featured-links > *:not(:last-child)::after {
        margin:
            0
            0.55rem;
    }


    .rb-md-locations__province-heading {
        gap: 0.65rem;
    }


    .rb-md-locations__city-list {
        gap:
            0.55rem
            0.7rem;
    }
}


@media (prefers-reduced-motion: reduce) {
    .rb-md-locations a,
    .rb-md-locations a i {
        transition: none !important;
    }
}


/* =========================================================
   LOCATION DIRECTORY ORGANIZATION UPGRADE — START
   Version: 2.1

   Purpose:
   - Organize featured markets into a consistent grid
   - Render provinces as structured directory rows
   - Prevent uneven province cards and scattered whitespace
   - Preserve all existing EJS, links and page-state logic
   ========================================================= */


/*
 * Featured markets.
 */

.rb-md-locations__intro {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.9fr);

    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}


.rb-md-locations__featured {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #d9e5dc;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        0 14px 32px -28px
        rgba(15, 23, 42, 0.62);
}


.rb-md-locations__featured-label {
    margin-bottom: 0.75rem;
    color: #526071;
}


.rb-md-locations__featured-links {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0.5rem;
}


.rb-md-locations__featured-links a,
.rb-md-locations__featured-current {
    min-width: 0;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.55rem;
    border: 1px solid #dce6df;
    border-radius: 0.65rem;
    background: #ffffff;
    color: #344256;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}


.rb-md-locations__featured-links a:hover {
    transform: translateY(-1px);
    border-color: #15803d;
    background: #f7fbf8;
    color: #15803d;
}


.rb-md-locations__featured-current {
    border-color: #9fceb0;
    background: #eaf5ed;
    color: #15803d;
}


.rb-md-locations__featured-links >
*:not(:last-child)::after {
    content: none;
    display: none;
}


/*
 * Province and city directory.
 *
 * Each province is now one horizontal directory row.
 */

.rb-md-locations__directory {
    display: block;
}


.rb-md-locations__province {
    min-width: 0;
    display: grid;
    grid-template-columns:
        minmax(220px, 0.32fr)
        minmax(0, 1fr);

    grid-template-areas:
        "province-heading city-list"
        "province-link city-list";

    grid-template-rows:
        auto
        1fr;

    align-items: start;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 0.5rem;
    padding: 1.45rem 0;
    border-top: 1px solid #d8e3db;
}


.rb-md-locations__province:last-child {
    border-bottom: 1px solid #d8e3db;
}


.rb-md-locations__province-heading {
    grid-area: province-heading;
    display: block;
    margin: 0;
}


.rb-md-locations__province-heading > div {
    min-width: 0;
}


.rb-md-locations__province-code {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.45rem;
    margin: 0 0 0.45rem;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    background: #eaf5ed;
    color: #15803d;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}


.rb-md-locations__province-title {
    display: block;
    color: #172033;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.3;
}


a.rb-md-locations__province-title:hover {
    color: #15803d;
}


.rb-md-locations__market-count {
    display: block;
    margin-top: 0.4rem;
    color: #7b8797;
    font-size: 0.7rem;
    font-weight: 700;
}


/*
 * Structured city grid.
 */

.rb-md-locations__city-list {
    grid-area: city-list;
    min-width: 0;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-content: start;
    gap: 0.55rem 0.75rem;
    margin: 0;
}


.rb-md-locations__city-list li {
    min-width: 0;
}


.rb-md-locations__city-list a,
.rb-md-locations__city-current {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid #e0e8e2;
    border-radius: 0.58rem;
    background: #ffffff;
    font-size: 0.78rem;
    line-height: 1.25;
}


.rb-md-locations__city-list a {
    justify-content: space-between;
    gap: 0.55rem;
}


.rb-md-locations__city-list a:hover {
    transform: translateY(-1px);
    border-color: #a9d3b5;
    background: #f7fbf8;
    color: #15803d;
}


.rb-md-locations__city-list a i {
    flex: 0 0 auto;
    color: #94a3b8;
    opacity: 0.5;
    transform: none;
}


.rb-md-locations__city-list a:hover i {
    color: #15803d;
    opacity: 1;
    transform: translate(1px, -1px);
}


.rb-md-locations__city-current {
    justify-content: flex-start;
    gap: 0.4rem;
    border-color: #a9d3b5;
    background: #eaf5ed;
    color: #15803d;
    font-weight: 850;
}


/*
 * Province-level action.
 */

.rb-md-locations__province-link {
    grid-area: province-link;
    align-self: start;
    width: fit-content;
    margin-top: 0.15rem;
}


/*
 * Medium desktop and tablet.
 */

@media (max-width: 1199.98px) {

    .rb-md-locations__intro {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(390px, 1.1fr);

        gap: 2.5rem;
    }


    .rb-md-locations__city-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 991.98px) {

    .rb-md-locations__intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.75rem;
    }


    .rb-md-locations__featured {
        width: 100%;
    }


    .rb-md-locations__province {
        grid-template-columns:
            minmax(190px, 0.3fr)
            minmax(0, 1fr);

        column-gap: 2rem;
    }
}


/*
 * Mobile.
 */

@media (max-width: 767.98px) {

    .rb-md-locations__featured-links {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .rb-md-locations__province {
        grid-template-columns: 1fr;
        grid-template-areas:
            "province-heading"
            "city-list"
            "province-link";

        grid-template-rows: auto;
        row-gap: 1rem;
        padding: 1.35rem 0;
    }


    .rb-md-locations__province-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }


    .rb-md-locations__market-count {
        flex: 0 0 auto;
        margin-top: 0.2rem;
    }


    .rb-md-locations__city-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.5rem;
    }


    .rb-md-locations__province-link {
        margin-top: 0;
    }
}


@media (max-width: 389.98px) {

    .rb-md-locations__featured-links,
    .rb-md-locations__city-list {
        grid-template-columns: 1fr;
    }
}


/*
 * Reduced motion.
 */

@media (prefers-reduced-motion: reduce) {

    .rb-md-locations__featured-links a,
    .rb-md-locations__city-list a {
        transition: none !important;
    }
}


/* LOCATION DIRECTORY ORGANIZATION UPGRADE — END */