/* San Juan market page */

.san-juan-approach {
    background: #fff;
}

.san-juan-approach-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(36px, 6vw, 84px);
    align-items: start;
}

.san-juan-approach-copy {
    align-self: start;
}

.san-juan-approach-copy h2 {
    margin-top: 10px;
    margin-bottom: 28px;
    max-width: 760px;
}

.san-juan-approach-copy p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.82;
}

.san-juan-approach-copy p:last-child {
    margin-bottom: 0;
}

.san-juan-approach-copy a,
.market-story-list a,
.neighborhood-card h3 a {
    color: var(--navy);
    font-weight: 800;
    text-decoration-line: underline;
    text-decoration-color: rgba(18, 59, 93, .28);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition:
        color .2s ease,
        text-decoration-color .2s ease;
}

.san-juan-approach-copy a:hover,
.market-story-list a:hover,
.neighborhood-card h3 a:hover {
    color: var(--green);
    text-decoration-color: currentColor;
}

.san-juan-family-photo {
    position: sticky;
    top: 112px;
    margin: 0;
    overflow: hidden;
    border-radius: 30px;
    background: var(--sand);
    box-shadow: var(--shadow);
}

.san-juan-family-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.san-juan-family-photo figcaption {
    padding: 16px 20px 18px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

.market-hero-san-juan + .san-juan-approach {
    padding-top: clamp(64px, 8vw, 110px);
}

/* The proof metrics now follow the approach section. */
.san-juan-approach + .market-metrics-panel {
    margin-top: 80px;
}

@media (max-width: 960px) {
    .san-juan-approach-grid {
        grid-template-columns: 1fr;
    }

    .san-juan-family-photo {
        position: relative;
        top: auto;
        max-width: 720px;
    }
}

@media (max-width: 640px) {
    .san-juan-approach-copy p {
        font-size: .98rem;
        line-height: 1.74;
    }

    .san-juan-family-photo {
        border-radius: 22px;
    }

    .san-juan-family-photo figcaption {
        padding: 14px 16px 16px;
    }
}

.faq-card h3, .link-card h3 {
    line-height: 35px;
    padding-bottom:15px;
}

/* The following CSS is for the San Juan market page. */
.neighborhood-img.neighborhood-condado {
    background-image: url("/assets/images/markets/san-juan/condado-web.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-downtown-san-juan {
    background-image: url("/assets/images/markets/san-juan/downtown-san-juan-web.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-isla-verde {
    background-image: url("/assets/images/markets/san-juan/isla-verde-web.png");
    background-size: auto 190px;
}

/* The following CSS is for the Condado market page. */
.neighborhood-img.neighborhood-ocean-park {
    background-image: url("/assets/images/markets/san-juan/ocean-park-web.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-ashford {
    background-image: url("/assets/images/markets/condado/ashford-ave.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-laguna-de-condado {
    background-image: url("/assets/images/markets/condado/laguna-de-condado.webp");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-residential-condado {
    background-image: url("/assets/images/markets/condado/condado-residential.webp");
    background-size: auto 190px;
}

/* The following CSS is for the Rincon market page. */
.neighborhood-img.neighborhood-rincon-puntas {
    background-image: url("/assets/images/markets/rincon/sandy-beach.png");
    background-size: auto 210px;
}

.neighborhood-img.neighborhood-rincon-domes {
    background-image: url("/assets/images/markets/rincon/tres-palmas.png");
    background-size: auto 210px;
}

.neighborhood-img.neighborhood-rincon-downtown {
    background-image: url("/assets/images/markets/rincon/rincon-pueblo.png");
    background-size: auto 210px;
}

.neighborhood-img.neighborhood-rincon-ensenada {
    background-image: url("/assets/images/markets/rincon/rincon-hero.jpg");
    background-size: auto 190px;
}

/* The following CSS is for the Dorado market page. */
.neighborhood-img.neighborhood-dorado-beach {
    background-image: url("/assets/images/markets/dorado/dorado-beach.webp");
    background-size: auto 210px;
}

.neighborhood-img.neighborhood-dorado-del-mar {
    background-image: url("/assets/images/markets/dorado/dorado-del-mar.webp");
    background-size: auto 210px;
}

.neighborhood-img.neighborhood-dorado-kikita {
    background-image: url("/assets/images/markets/dorado/kikita-coastal-dorado.jpg");
    background-size: auto 270px;
}

.neighborhood-img.neighborhood-dorado-pueblo {
    background-image: url("/assets/images/markets/dorado/dorado-gated-community.webp");
    background-size: auto 210px;
}

/* The following CSS is for the Luquillo market page. */
.neighborhood-img.neighborhood-luquillo-beach {
    background-image: url("/assets/images/markets/luquillo/luquillo-hero.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-playa-azul {
    background-image: url("/assets/images/markets/luquillo/costa-azul.png");
    background-size: auto 280px;
}

.neighborhood-img.neighborhood-la-pared {
    background-image: url("/assets/images/markets/luquillo/la-pared.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-pitahaya {
    background-image: url("/assets/images/markets/luquillo/el-yunque.jpg");
    background-size: auto 210px;
}

/* The following CSS is for the Fajardo market page. */
.neighborhood-img.neighborhood-las-croabas {
    background-image: url("/assets/images/markets/fajardo/las-croabas.jpg");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-seven-seas {
    background-image: url("/assets/images/markets/fajardo/seven-seas.png");
    background-size: auto 210px;
}

.neighborhood-img.neighborhood-fajardo-marinas {
    background-image: url("/assets/images/markets/fajardo/coastal-community.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-fajardo-hills {
    background-image: url("/assets/images/markets/fajardo/hills.png");
    background-size: auto 210px;
}

/* The following CSS is for the Ponce market page. */
.neighborhood-img.neighborhood-historic-ponce {
    background-image: url("/assets/images/markets/ponce/de-bombas.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-la-guancha {
    background-image: url("/assets/images/markets/ponce/ponce-waterfront.webp");
    background-size: auto 210px;
}

.neighborhood-img.neighborhood-ponce-mercedita {
    background-image: url("/assets/images/markets/ponce/coastal-mercedita.png");
    background-size: auto 190px;
}

.neighborhood-img.neighborhood-ponce-residential {
    background-image: url("/assets/images/markets/ponce/residential.jpg");
    background-size: auto 210px;
}

.market-metric div {
    padding-bottom: 5px;
}

.market-carousel-viewport .neighborhood-img {
    width: 400px !important;
}

/* The following CSS is for the carousel on the Puerto Rico market page. */
.market-carousel-viewport{
    .neighborhood-img.neighborhood-downtown-san-juan {
        background-image: url("/assets/images/markets/san-juan/downtown-san-juan-web.png");
        background-size: auto 280px;
    }
    
    .neighborhood-img.neighborhood-condado {
        background-image: url("/assets/images/markets/san-juan/condado-web.png");
        background-size: auto 280px;
    }
    
    .neighborhood-img.neighborhood-dorado-beach {
        background-image: url("/assets/images/markets/dorado/dorado-beach.webp");
        background-size: auto 280px;
    }
    
    .neighborhood-img.neighborhood-rincon-domes {
        background-image: url("/assets/images/markets/rincon/tres-palmas.png");
        background-size: auto 290px;
    }
    
    .neighborhood-img.neighborhood-pitahaya {
        background-image: url("/assets/images/markets/luquillo/el-yunque.jpg");
        background-size: auto 280px;
    }
    
    .neighborhood-img.neighborhood-fajardo-hills {
        background-image: url("/assets/images/markets/fajardo/hills.png");
        background-size: auto 280px;
    }
    
    .neighborhood-img.neighborhood-ponce-residential {
        background-image: url("/assets/images/markets/ponce/residential.jpg");
        background-size: auto 280px;
    }
}