/* [rpb_results_preview] - values copied exactly from the approved reference
   (.results-top/.result-cards/.result-tag/.result-placeholder/.result-photo), class names
   prefixed rpb-. */

.rpb-results-top{justify-content:space-between;align-items:end;gap:32px;margin-bottom:68px;display:flex}

.rpb-result-cards{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}
.rpb-result-cards article{position:relative}

.rpb-result-tag{z-index:2;color:var(--rpb-ink);letter-spacing:.12em;text-transform:uppercase;background:#fffefaeb;padding:8px 10px;font-size:9px;font-weight:650;position:absolute;top:18px;left:18px}

/* CSS Grid's default track sizing sizes the single implicit track to the photo's own intrinsic
   aspect ratio (a "grid-template-rows/columns:1fr" fix doesn't reliably beat this when the
   container's own height comes from aspect-ratio rather than an explicit height - confirmed by
   testing), leaving object-fit/object-position nothing to crop. position:relative + an
   absolutely-positioned img sidesteps the whole auto-sizing question: inset:0 always fills the
   ancestor's own box exactly, guaranteed. */
.rpb-result-placeholder{aspect-ratio:4 / 3.1;background:linear-gradient(160deg,#09161a0a,#09161a8f),linear-gradient(135deg,#c8c2b5 0%,#7a8a82 48%,#344446 100%);margin-bottom:24px;position:relative;overflow:hidden}
/* .result-photo{padding:0} overrides the placeholder's own padding whenever a real photo is
   present (the two classes are always combined on the actual element - there's no
   photo-less empty state in this build). */
.rpb-result-photo{padding:0}
/* Salient's own ".row .col img{height:auto;max-width:100%;margin-bottom:15px}" (2 classes + type)
   otherwise collapses/offsets the photo - see [[feedback-rpb-heading-color-inheritance]]. */
.rpb-result-photo img{object-fit:cover;object-position:center 56%;width:100% !important;height:100% !important;max-width:none !important;margin:0 !important;display:block;position:absolute;inset:0}

/* 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 - harmless here since both
   happen to be 8px, but !important for consistency/robustness against future value changes. */
.rpb-result-cards h3{letter-spacing:-.03em;margin:0 0 8px !important;font-size:22px !important;font-weight:480}
.rpb-result-cards p{color:var(--rpb-muted);margin:0;font-size:13px}
/* Responsive rules for this shortcode live in css/responsive.css, not here. */