/**
 * City + type landing pages (inc/seo-landing-pages.php). Loaded only on
 * pages that have a cre_landing_city. Gives the shortcode blocks a centred
 * column with side gutters, so the page looks right even without an
 * Elementor container around them. Same --fpc-* tokens as
 * css/property-listing-card.css.
 */

.cre-landing-crumb,
.cre-landing-heading,
.cre-landing-intro,
.cre-landing-grid {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

.cre-landing-crumb {
    margin-top: 24px;
    font-family: var(--fpc-sans, Helvetica, Arial, sans-serif);
    font-size: 14px;
    color: var(--fpc-500, #7A7A7A);
}

.cre-landing-crumb a {
    color: var(--fpc-700, #54595F);
    text-decoration: none;
}

.cre-landing-crumb a:hover {
    color: var(--fpc-hover, #5485D6);
}

.cre-landing-heading {
    margin-top: 8px;
    margin-bottom: 12px;
    font-family: var(--fpc-sans, Helvetica, Arial, sans-serif);
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.2;
    color: var(--fpc-black, #000000);
}

.cre-landing-intro {
    margin-bottom: 24px;
    font-family: var(--fpc-sans, Helvetica, Arial, sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fpc-700, #54595F);
}

.cre-landing-intro p {
    max-width: 820px;
}

.cre-landing-grid {
    margin-bottom: 48px;
}

/* ── Listing cards: vertical layout, photo on top ─────────────────────────
   The shared .fpc-card is a horizontal card (25% photo strip) built for the
   two-column city grid; at three columns the photo shrank to a sliver.
   Here every card stacks: a 4:3 photo at full card width (the listing_grid_v1
   image size is 584x438, so it stays sharp), then title, address, tags, and
   size + price pinned to the bottom so rows line up. Selectors carry the
   .cre-landing-grid .cpg-grid .cpg-grid-item prefix to out-rank the tiered
   card heights in property-listing-card.css without !important. */

.cre-landing-grid .cpg-grid {
    gap: 24px;
}

.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card {
    flex-direction: column;
    height: 100%;
    border-radius: 8px;
}

.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-media {
    flex: none !important;
    width: 100%;
    max-width: 100% !important;
    height: auto;
    aspect-ratio: 4 / 3;
}

.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-content {
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}

.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-upper {
    gap: 10px;
}

.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-title {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    /* Reserve two lines so a one-line title doesn't shift the rest of the card. */
    min-height: calc(1.12rem * 1.35 * 2);
}

.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-address {
    font-size: .85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Size and price sit on their own divider-topped row at the bottom. */
.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-lower {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(122, 122, 122, .2);
}

.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-footer {
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
}

.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-price {
    font-size: .95rem;
    color: var(--fpc-black, #000000);
}

/* Preview / favourite / compare buttons: keep them clear of the photo edge. */
.cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-media .item-tools {
    left: 12px;
    bottom: 12px;
}

@media (max-width: 767px) {
    .cre-landing-grid .cpg-grid {
        gap: 16px;
    }
    .cre-landing-grid .cpg-grid .cpg-grid-item .fpc-card-content {
        padding: 16px;
    }
}