/* MR Ads -- listing-page ad cards, the gallery slide and pasted ad code. Hero
   slides and Highlights circles use the theme's and MR Highlights' own styles. */

.mra { --mra-g: #0b823e; --mra-r: #dd003b; --mra-ink: #101828; --mra-mute: #5b6472; --mra-line: #e4eae6; --mra-soft: #f5f8f6; font-family: inherit; }

.mra-label { display: block; font-size: 12px; line-height: 1.3; color: var(--mra-mute); letter-spacing: .01em; }
.mra-label b { color: var(--mra-r); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.mra-card, .mra-banner, .mra-code { background: #fff; border: 1px solid var(--mra-line); border-radius: 16px; overflow: hidden; box-sizing: border-box; }
.mra-card { margin: 0; }
.mra-media { display: block; background: var(--mra-soft); }
.mra-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mra img.is-contain { object-fit: contain; background: var(--mra-soft); }
.mra-body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.mra-h { display: block; margin: 2px 0 0; color: var(--mra-ink); font-size: 16px; line-height: 1.3; font-weight: 700; }
.mra-t { margin: 0; color: var(--mra-mute); font-size: 14px; line-height: 1.45; }
.mra-cta { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 16px; border: 1.5px solid var(--mra-g); border-radius: 999px; color: var(--mra-g) !important; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: background .15s, color .15s; }
.mra-cta svg { width: 15px; height: 15px; }
.mra-cta:hover, .mra-cta:focus-visible { background: var(--mra-g); color: #fff !important; }

/* Before "Similar homes nearby": a wide banner, picture left, words right. */
.mra-inline-sec { padding: 8px 0 0 !important; background: transparent; }
.mra-banner { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); margin: 0 0 8px; }
.mra-banner .mra-media img { height: 100%; aspect-ratio: 16 / 7; }
.mra-banner .mra-body { align-content: center; padding: 22px 28px; }
.mra-banner .mra-h { font-size: 20px; }
@media (max-width: 767px) {
	.mra-banner { grid-template-columns: 1fr; }
	.mra-banner .mra-media img { height: auto; aspect-ratio: 16 / 9; }
	.mra-banner .mra-body { padding: 14px 16px 16px; }
	.mra-banner .mra-h { font-size: 16px; }
	.mra-card { margin: 16px 0 0; }
}

/* Inside a listing gallery: a slide after the last photo. The banner is shown
   whole (never cropped) over a blurred, darkened copy of itself. */
.mra-gal { position: relative; display: flex; aspect-ratio: 4 / 3; overflow: clip; /* not hidden: the box may grow past 4:3 to fit its words */ isolation: isolate; background: #0f2a1b; color: #fff !important; text-decoration: none !important; }
.mra-gal-bg { position: absolute; inset: -24px; z-index: -1; background: center / cover no-repeat; filter: blur(22px) brightness(.45) saturate(1.2); }
.mra-gal-in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; width: 100%; min-width: 0; padding: 16px; box-sizing: border-box; }
.mra-gal-in .mra-label, .mra-gal-in .mra-label b { color: #fff; }
.mra-gal-art { display: block; flex: 0 1 auto; width: 100%; min-height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.mra-gal .mra-gal-art img { position: static; display: block; width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; object-fit: contain; background: none; }
.mra-gal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%; }
.mra-gal-row strong { display: -webkit-box; flex: 1 1 180px; overflow: hidden; font-size: 16px; line-height: 1.3; font-weight: 700; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mra-gal-row .mra-cta { flex: none; margin-top: 0; padding: 7px 14px; border-color: #fff; background: #fff; color: var(--mra-ink) !important; }
.mra-gal:hover .mra-cta { border-color: var(--mra-r); background: var(--mra-r); color: #fff !important; }
/* The photos at the top of the page (phones, tablets): as tall as the photos.
   The search bar covers the top, and the lister's photo and the page's white
   sheet the bottom 110px, so everything sits between; the banner is kept
   small enough to leave room for the words. */
.mra-gal--cover { aspect-ratio: auto; height: 450px; }
.mra-gal--cover .mra-gal-in { padding: 68px 20px 118px; }
.mra-gal--cover .mra-gal-art { width: auto; max-width: 100%; }
.mra-gal--cover .mra-gal-art img { width: auto; height: auto; max-width: 100%; max-height: 190px; }
.mra-gal--cover .mra-gal-row { flex-wrap: nowrap; }
.mra-gal--cover .mra-gal-row strong { flex: 1 1 auto; min-width: 0; font-size: 15px; }
@media (min-width: 600px) { .mra-gal--cover .mra-gal-in { align-items: center; } .mra-gal--cover .mra-gal-row { justify-content: center; width: auto; max-width: 100%; } }

/* Pasted ad code: the label above, the ad centred. */
.mra-code { margin: 0; padding: 10px 12px 12px; text-align: center; }
.mra-code .mra-label { text-align: left; }
.mra-code-in { margin: 8px auto 0; }
.mra-code-in iframe { display: block; width: 100%; border: 0; }
.mra-code--listing_inline { margin: 0 0 8px; }
@media (max-width: 767px) { .mra-code { margin: 16px 0 0; } }

/* Homepage hero: finished artwork shown whole rather than cropped. */
.mr-hero-slide[data-mra-fit="contain"] > img, .mr-hero-tile[data-mra-fit="contain"] > img { object-fit: contain; background: #f5f8f6; }
/* Computers: the hero card shows a listing's price on the right; an ad has no
   price, so its button takes that place (the theme hides buttons there). */
@media (min-width: 1201px) {
	.mr-hero-slide[data-mra] .mr-hero-copy .mr-hero-cta { display: inline-flex; grid-area: price; background: var(--g, #0b823e); color: #fff; padding: 10px 18px; font-size: 14px; white-space: nowrap; }
	.mr-hero-slide[data-mra]:hover .mr-hero-copy .mr-hero-cta { background: var(--r, #dd003b); }
}