/* [rpb_markets] - values copied exactly from the approved reference
   (.markets/.market-grid/.market-card/.residential-card/.commercial-card/.market-number/
   .icon-wrap.large), class names prefixed rpb-. */

.rpb-markets-heading{grid-template-columns:1.25fr .75fr;align-items:end;gap:10vw;margin-bottom:76px;display:grid}
.rpb-markets-heading > p{margin:0;color:var(--rpb-muted)}

.rpb-market-grid{grid-template-columns:1fr 1fr;box-shadow:0 28px 70px #0d1e221a;display:grid}

.rpb-market-card{grid-template-rows:auto 1fr;grid-template-columns:72px 1fr;gap:54px 34px;min-height:560px;padding:50px;display:grid;position:relative;overflow:hidden}
.rpb-market-card > div:last-child{grid-column:1 / -1;align-self:end}

.rpb-residential-card{background:var(--rpb-white)}
.rpb-commercial-card{color:var(--rpb-white);background:#263637}

.rpb-market-number{color:#10202440;letter-spacing:.15em;font-size:12px;position:absolute;top:32px;right:36px}
.rpb-commercial-card .rpb-market-number{color:#ffffff52}

.rpb-market-card .rpb-icon-wrap{grid-area:1/1;width:64px;height:64px;color:var(--rpb-brass-light);place-items:center;display:grid}
.rpb-market-card .rpb-icon-wrap svg{width:52px;height:52px}

/* Salient's own ".row .col h3,.row .col h4{margin-bottom:var(--nectar-heading-bottom-spacing,8px)}"
   (2 classes + type) beats a single-class h3 rule without !important. */
.rpb-market-card h3{letter-spacing:-.045em;max-width:480px;margin:0 0 24px !important;font-size:clamp(30px,3vw,44px) !important;font-weight:430;line-height:1.06}
.rpb-market-card p:not(.rpb-eyebrow){max-width:480px;color:var(--rpb-muted);margin-bottom:32px;font-size:14px}

/* Salient's own ".light h1-h6{color:...}" rule only fires inside a row that carries
   text_color="light" - the Markets row is text_color="dark" (correct for the residential
   card), so the commercial card's own heading needs a direct color rule of its own; a
   color set on the .rpb-commercial-card ancestor alone would lose to Salient's direct
   "body h3{color:var(--nectar-page-text-color)}" rule, since inherited values always lose
   to any rule that matches the element itself, regardless of specificity. */
.rpb-commercial-card h3{color:var(--rpb-white)}
.rpb-commercial-card p:not(.rpb-eyebrow){color:#ffffffa1}
/* Responsive rules for this shortcode live in css/responsive.css, not here. */