/**
 * Apartment Finder (Matchmaker) — block styles.
 *
 * WHAT CHANGED FROM THE AUTHORED VERSION
 * 1. The Google Fonts @import is gone. It was a render-blocking request to a third party for
 *    Archivo and Inter, on a page whose theme already loads its own faces. The local aliases
 *    below now source the site's own stacks, so this block matches the rest of the site
 *    instead of importing a near-miss of it.
 * 2. Brand colors are aliased FROM the shared tokens rather than restated as literals. The
 *    aliases live on #thrive-matchmaker, not :root — this block never redefines a site-wide
 *    token, so it cannot drift from the P&FP block that owns them, and the literal fallbacks
 *    keep it standalone on a page where that stylesheet is not enqueued.
 * 3. Containment rules added. Bricks nests a shortcode several containers deep, and a single
 *    overflowing child gives the whole page a horizontal scrollbar on mobile.
 *
 * Every selector is scoped to #thrive-matchmaker. The authored stylesheet was already
 * disciplined about this; the "CSS bleed" reported on the live page came from the paste, not
 * from these rules.
 */

#thrive-matchmaker {
  /* Local aliases, sourced from the site's tokens. Not a :root redeclaration. */
  --tm-green: var(--thrive-green, #173F35);
  --tm-green-deep: #0E2A23;
  --tm-orange: var(--thrive-orange, #FF6A39);
  --tm-sage: #83B585;
  --tm-teal: #63B1BC;
  --tm-sand: #D6D2C4;
  --tm-soft: #FCFBF5;
  --tm-bone: #F1F1EC;
  --tm-gray: #525252;
  --tm-display: var(--display, 'Shift', 'Archivo', system-ui, sans-serif);
  --tm-body: var(--sans-serif, 'Inter', system-ui, -apple-system, sans-serif);

  font-family: var(--tm-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tm-green);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;

  /* Gutter, supplied by default and removed by JS when an ancestor already provides one.
     Deliberately this way round rather than opt-in: the site gutter comes from `.brxe-section`
     padding, and per taste/layout you cannot infer it from ancestry — the Virtual Tours
     template nests its block in a `.brxe-section` whose padding is 0. If the measurement never
     runs (JS disabled or errored), defaulting to padded leaves the block correctly inset
     instead of flush against both screen edges, which is how this one shipped. box-sizing is
     border-box above, so the padding comes out of the 1040px rather than adding to it. */
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  #thrive-matchmaker { padding-left: 40px; padding-right: 40px; }
}

/* Set by block.js once it has measured that something upstream already insets the block. */
#thrive-matchmaker.tm--has-gutter { padding-left: 0; padding-right: 0; }

/* Containment — see header note 3. */
#thrive-matchmaker,
#thrive-matchmaker *,
#thrive-matchmaker *::before,
#thrive-matchmaker *::after { box-sizing: border-box; }

#thrive-matchmaker p, #thrive-matchmaker ul, #thrive-matchmaker li, #thrive-matchmaker dl,
#thrive-matchmaker dt, #thrive-matchmaker dd, #thrive-matchmaker h1, #thrive-matchmaker h2,
#thrive-matchmaker h3, #thrive-matchmaker h4 { margin: 0; padding: 0; }
#thrive-matchmaker ul { list-style: none; }
#thrive-matchmaker button { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0; text-transform: none; letter-spacing: normal; cursor: pointer; }
#thrive-matchmaker :focus-visible { outline: 3px solid var(--tm-orange); outline-offset: 3px; }

#thrive-matchmaker h1.tm-pagetitle {
  font-family: var(--tm-body); font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tm-gray); margin: 0 0 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--tm-sand); text-align: left;
}
#thrive-matchmaker .tm-eyebrow {
  display: block; font-family: var(--tm-body); font-size: 11px; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tm-orange); font-weight: 600;
}

/* ---------- intro ---------- */
#thrive-matchmaker h2.tm-h1 {
  font-family: var(--tm-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.025em;
  margin: 14px 0 0; color: var(--tm-green); text-transform: none;
}
#thrive-matchmaker h2.tm-h1 em { font-style: normal; color: var(--tm-sage); }
#thrive-matchmaker .tm-lede { font-size: 17.5px; max-width: 52ch; margin: 18px 0 0; color: #2c4a42; }
#thrive-matchmaker .tm-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
#thrive-matchmaker .tm-pill { background: var(--tm-bone); border: 1px solid var(--tm-sand); border-radius: 100px; padding: 6px 15px; font-size: 13px; color: var(--tm-green); }

/* ---------- buttons ---------- */
#thrive-matchmaker .tm-btn {
  display: inline-block; background: var(--tm-green); color: var(--tm-soft);
  border: 2px solid var(--tm-green); border-radius: 2px; padding: 15px 28px;
  font-weight: 600; font-size: 15.5px; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
#thrive-matchmaker .tm-btn:hover, #thrive-matchmaker .tm-btn:focus { background: var(--tm-orange); border-color: var(--tm-orange); color: var(--tm-soft); transform: translateY(-2px); }
#thrive-matchmaker .tm-btn.tm-ghost { background: transparent; color: var(--tm-green); }
#thrive-matchmaker .tm-btn.tm-ghost:hover, #thrive-matchmaker .tm-btn.tm-ghost:focus { background: var(--tm-green); color: var(--tm-soft); border-color: var(--tm-green); }
#thrive-matchmaker .tm-link { background: none; border: none; padding: 6px 0; font-size: 14px; color: var(--tm-gray); text-decoration: underline; text-underline-offset: 4px; }
#thrive-matchmaker .tm-link:hover { color: var(--tm-orange); }

/* ---------- questions ---------- */
#thrive-matchmaker .tm-progress { display: flex; gap: 5px; margin-bottom: 26px; flex-wrap: wrap; }
#thrive-matchmaker .tm-progress i { display: block; width: 24px; height: 6px; background: var(--tm-sand); border-radius: 1px; transition: background .3s; }
#thrive-matchmaker .tm-progress i.tm-done { background: var(--tm-sage); }
#thrive-matchmaker .tm-progress i.tm-now { background: var(--tm-orange); }

#thrive-matchmaker .tm-qnum { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-gray); font-weight: 600; }
#thrive-matchmaker h3.tm-q {
  font-family: var(--tm-display); font-weight: 600; font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.12; letter-spacing: -.02em; margin: 10px 0 6px; max-width: 24ch;
  color: var(--tm-green); text-transform: none;
}
#thrive-matchmaker .tm-hint { font-size: 14.5px; color: var(--tm-gray); margin: 0 0 24px; max-width: 62ch; }

/* minmax(0, …) rather than a bare 1fr: a long option label must not be able to push a grid
   track past the container width. Same reason min-width:0 appears on the flex children below. */
#thrive-matchmaker .tm-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
#thrive-matchmaker .tm-opts.tm-tight { grid-template-columns: repeat(auto-fit, minmax(min(194px, 100%), 1fr)); }
#thrive-matchmaker .tm-opt {
  display: flex; flex-direction: column; gap: 4px; text-align: left; background: #fff;
  border: 1.5px solid var(--tm-sand); border-radius: 3px; padding: 17px 19px; min-width: 0;
  transition: border-color .18s, background .18s, transform .18s;
}
#thrive-matchmaker .tm-opt:hover { border-color: var(--tm-green); transform: translateY(-2px); }
#thrive-matchmaker .tm-opt strong { font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--tm-green); }
#thrive-matchmaker .tm-opt small { font-size: 13px; color: var(--tm-gray); line-height: 1.4; }
#thrive-matchmaker .tm-opt.tm-on { border-color: var(--tm-orange); border-width: 2px; background: #FFF4F0; padding: 16px 18px; }
#thrive-matchmaker .tm-opt.tm-on strong::after { content: ' \2713'; color: var(--tm-orange); }
#thrive-matchmaker .tm-opt.tm-wide { grid-column: 1/-1; border-color: var(--tm-sage); }

#thrive-matchmaker .tm-nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
#thrive-matchmaker .tm-selcount { font-size: 13px; color: var(--tm-gray); }

/* ---------- shortlist strip ---------- */
#thrive-matchmaker .tm-shortlist { margin-top: 30px; padding: 18px 20px; background: var(--tm-green); border-radius: 4px; color: var(--tm-soft); }
#thrive-matchmaker .tm-sl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
#thrive-matchmaker .tm-shortlist .tm-eyebrow { color: var(--tm-sage); }
#thrive-matchmaker .tm-sl-count { font-size: 12px; color: var(--tm-sand); letter-spacing: .04em; }
#thrive-matchmaker .tm-roster { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 4px; }
#thrive-matchmaker .tm-roster li { flex: 1 1 0; min-width: 118px; transition: opacity .35s ease; }
#thrive-matchmaker .tm-roster li.tm-out { opacity: .3; }
#thrive-matchmaker .tm-r-name { display: block; font-size: 13px; font-weight: 500; color: var(--tm-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#thrive-matchmaker .tm-r-bar { display: block; height: 3px; background: rgba(252,251,245,.18); border-radius: 2px; overflow: hidden; margin-top: 7px; }
#thrive-matchmaker .tm-r-fill { display: block; height: 100%; width: 0; background: var(--tm-sage); transition: width .5s cubic-bezier(.22,.9,.28,1), background .3s; }
#thrive-matchmaker .tm-roster li.tm-lead .tm-r-fill { background: var(--tm-orange); }
#thrive-matchmaker .tm-roster li.tm-lead .tm-r-name { font-weight: 600; }
#thrive-matchmaker .tm-roster li.tm-out .tm-r-fill { width: 0; }

/* ---------- results ---------- */
#thrive-matchmaker .tm-hero { background: var(--tm-green); color: var(--tm-soft); border-radius: 4px; padding: 34px 36px; }
#thrive-matchmaker .tm-hero .tm-eyebrow { color: var(--tm-sage); }
#thrive-matchmaker .tm-score { display: flex; align-items: flex-end; gap: 14px; margin: 10px 0 2px; }
#thrive-matchmaker .tm-score b { font-family: var(--tm-display); font-weight: 700; font-size: clamp(42px, 6.6vw, 72px); line-height: .9; letter-spacing: -.03em; }
#thrive-matchmaker .tm-score span { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--tm-sand); padding-bottom: 9px; }
#thrive-matchmaker h3.tm-match { font-family: var(--tm-display); font-weight: 700; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.05; letter-spacing: -.02em; margin: 12px 0 6px; color: var(--tm-soft); text-transform: none; }
/* inline-block, not inline: the 2px underline is a border, and on an inline box that border sits
   on the text's line box rather than the heading's, so the space below it does not count toward
   the heading's height and the next line crowds it. */
#thrive-matchmaker h3.tm-match a { display: inline-block; color: var(--tm-soft); text-decoration: none; border-bottom: 2px solid var(--tm-sage); }
#thrive-matchmaker h3.tm-match a:hover { color: var(--tm-sage); border-bottom-color: var(--tm-orange); }
#thrive-matchmaker .tm-where { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--tm-sage); font-weight: 500; }
#thrive-matchmaker .tm-hero .tm-line { max-width: 58ch; color: #DCE6E1; margin: 15px 0 0; font-size: 15.5px; }

#thrive-matchmaker .tm-why { margin: 24px 0 0; display: grid; gap: 1px; background: rgba(252,251,245,.16); }
#thrive-matchmaker .tm-why li { background: var(--tm-green); padding: 13px 0 13px 16px; font-size: 15px; border-left: 3px solid var(--tm-orange); color: #EAF1EE; }
#thrive-matchmaker .tm-why li b { font-weight: 600; color: var(--tm-soft); }

#thrive-matchmaker .tm-doing { margin-top: 24px; padding: 20px 22px; background: var(--tm-green-deep); border-radius: 3px; }
#thrive-matchmaker .tm-doing .tm-eyebrow { color: var(--tm-sage); }
#thrive-matchmaker .tm-doing ul { margin-top: 14px; display: grid; gap: 12px; }
#thrive-matchmaker .tm-doing li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 14.5px; color: #DCE6E1; }
#thrive-matchmaker .tm-doing li b { font-family: var(--tm-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-orange); white-space: nowrap; }

#thrive-matchmaker .tm-bldg { margin-top: 16px; padding: 19px 21px; border: 1px solid rgba(252,251,245,.22); border-radius: 3px; }
#thrive-matchmaker .tm-bldg .tm-eyebrow { color: var(--tm-orange); }
#thrive-matchmaker .tm-bldg .tm-bname { display: block; font-family: var(--tm-display); font-size: 21px; font-weight: 600; margin: 8px 0 4px; }
#thrive-matchmaker .tm-bldg .tm-bname a { color: var(--tm-soft); text-decoration: none; border-bottom: 1px solid rgba(252,251,245,.45); }
#thrive-matchmaker .tm-bldg .tm-bname a:hover { color: var(--tm-sage); }
#thrive-matchmaker .tm-bldg p { margin: 0; color: #DCE6E1; font-size: 14.5px; max-width: 54ch; }

#thrive-matchmaker .tm-alts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: stretch; }
#thrive-matchmaker .tm-alt { background: #fff; border: 1.5px solid var(--tm-sand); border-radius: 4px; padding: 22px 24px; }
#thrive-matchmaker .tm-pct { font-family: var(--tm-display); font-weight: 700; font-size: 29px; letter-spacing: -.02em; color: var(--tm-sage); }
#thrive-matchmaker h4.tm-altname { font-family: var(--tm-display); font-weight: 600; font-size: 20px; margin: 5px 0 2px; letter-spacing: -.01em; color: var(--tm-green); text-transform: none; }
/* inline-block for the same reason as .tm-match above — the border needs to sit on a box the
   heading actually measures. */
#thrive-matchmaker h4.tm-altname a { display: inline-block; color: var(--tm-green); text-decoration: none; border-bottom: 2px solid var(--tm-sand); }
#thrive-matchmaker h4.tm-altname a:hover { border-bottom-color: var(--tm-orange); }
#thrive-matchmaker .tm-alt .tm-where { color: var(--tm-gray); font-size: 11.5px; }
#thrive-matchmaker .tm-alt p { font-size: 14px; color: var(--tm-gray); margin: 11px 0 0; }

#thrive-matchmaker .tm-disc { margin-top: 16px; padding: 24px 26px; background: #fff; border: 1.5px solid var(--tm-teal); border-left: 6px solid var(--tm-teal); border-radius: 4px; }
#thrive-matchmaker .tm-disc .tm-eyebrow { color: var(--tm-teal); }
#thrive-matchmaker .tm-disc h4.tm-altname { font-size: 23px; margin: 9px 0 2px; }
#thrive-matchmaker .tm-disc h4.tm-altname a { border-bottom-color: var(--tm-teal); }
#thrive-matchmaker .tm-disc .tm-where { color: var(--tm-gray); }
#thrive-matchmaker .tm-disc p { font-size: 14.5px; color: var(--tm-gray); margin: 11px 0 0; max-width: 62ch; }

#thrive-matchmaker .tm-cta { margin-top: 16px; padding: 26px 28px; background: var(--tm-bone); border: 1px solid var(--tm-sand); border-radius: 4px; }
#thrive-matchmaker h4.tm-ctah { font-family: var(--tm-display); font-weight: 600; font-size: 23px; margin: 0 0 8px; letter-spacing: -.01em; color: var(--tm-green); text-transform: none; }
#thrive-matchmaker .tm-cta p { margin: 0 0 18px; color: var(--tm-gray); font-size: 15px; max-width: 54ch; }
#thrive-matchmaker .tm-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

#thrive-matchmaker .tm-note { margin-top: 22px; font-size: 12.5px; color: var(--tm-gray); line-height: 1.6; max-width: 74ch; }

/* ---------- static section ---------- */
#thrive-matchmaker .tm-static { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--tm-sand); }
/* Both tags matched: the shortcode's `heading` attribute can render this as h2 or h3 so the
   page's outline stays sane wherever it is dropped. */
#thrive-matchmaker h2.tm-static-h,
#thrive-matchmaker h3.tm-static-h { font-family: var(--tm-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -.02em; color: var(--tm-green); margin: 0 0 14px; text-transform: none; }
#thrive-matchmaker .tm-static-lede { font-size: 16.5px; color: #2c4a42; max-width: 62ch; margin: 0 0 26px; }
#thrive-matchmaker .tm-static-list { display: grid; gap: 20px; }
#thrive-matchmaker .tm-static-list dt { font-family: var(--tm-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--tm-green); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
#thrive-matchmaker .tm-static-list dt a { color: var(--tm-green); text-decoration: none; border-bottom: 2px solid var(--tm-sage); }
#thrive-matchmaker .tm-static-list dt a:hover { border-bottom-color: var(--tm-orange); }
#thrive-matchmaker .tm-static-list dt span { font-family: var(--tm-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tm-gray); }
#thrive-matchmaker .tm-static-list dd { margin-top: 6px; font-size: 15px; color: var(--tm-gray); max-width: 70ch; line-height: 1.55; }
#thrive-matchmaker .tm-static-close { margin-top: 26px; font-size: 15px; color: var(--tm-gray); max-width: 70ch; }
#thrive-matchmaker .tm-static-close a, #thrive-matchmaker .tm-static-list dd a { color: var(--tm-green); font-weight: 500; }

/* ---------- result imagery ---------- */
/*
 * The pictures come from `ad_image` — the same field the P&FP promo card uses — and WHAT THAT
 * FIELD HOLDS decides this entire section. They are not landscape photography: each one is a
 * branded card, a photograph with the place's wordmark set across the middle, and the library
 * holds them at 285x411 portrait and 1024x1024 square.
 *
 * So every placement is a portrait CARD beside the copy, never a full-width band:
 *   - a banner crop would cut horizontally through the wordmark, which is the one part of the
 *     image that has to survive;
 *   - a 285px-wide original stretched across a 970px hero would be visibly soft.
 *
 * 4:5 is the shared ratio, chosen so BOTH shapes in the library keep their wordmark under
 * object-fit: cover. A 285x411 source keeps its full width and loses only the top and bottom
 * margin; a 1024 square keeps its middle 819px, and the widest wordmark in the set spans about
 * 154-870px, so it clears the crop. Check a new upload against that before assuming any ratio.
 *
 * THE TRACK WIDTHS BELOW ARE PART OF THAT, not spacing taste. Because the picture fills the
 * card's height (see below), a *narrow* track makes the filled box narrower than 4:5, and cover
 * starts cropping sideways instead of vertically — which is the one direction that eats the
 * wordmark. A 112px thumbnail beside three lines of copy came out 112x191, and clipped both
 * ends of "ROCKPOINTE". Each track is sized so the box it produces stays at or above 4:5 at the
 * heights this layout actually reaches. Narrowing one is a legibility change, not a cosmetic one.
 *
 * Every picture is OPTIONAL — .tm-has-media is additive and each card is untouched without one.
 * A destination with no photograph is a normal state, not a broken card.
 *
 * 4:5 IS A FLOOR, NOT A FIXED BOX. The picture fills whatever height its card ends up being —
 * three lines of copy, or a runner-up levelled against a taller neighbour — and falls back to
 * the ratio only when nothing else is taller. Three pieces:
 *
 *   ::before      carries the ratio and nothing else. It is the only thing establishing the
 *                 box's auto height, so it is what the picture contributes to the row: the
 *                 card can never be shorter than 4:5.
 *   stretch       grows the box past that contribution when the row is taller. Works because
 *                 the box's own height stays `auto`.
 *   position      the <img> is out of flow, so it contributes NOTHING to the sizing above and
 *                 simply covers whatever box results. In flow, a `height: 100%` image against
 *                 an auto-height parent can fall back to its intrinsic height and size the row
 *                 off a 411px original instead of the ratio.
 *
 * THE RATIO IS DELIBERATELY NOT ON .tm-media ITSELF. That is the obvious way to write this and
 * it breaks: once `stretch` makes the height definite, `aspect-ratio` starts deriving the WIDTH
 * from it instead — a 191px-tall runner-up thumbnail computed itself 153px wide against a 112px
 * track and overflowed the card. On a spacer the ratio can only ever set a minimum height, and
 * the track keeps sole control of the width.
 */
#thrive-matchmaker .tm-media { position: relative; overflow: hidden; background: var(--tm-bone); border-radius: 3px; }
#thrive-matchmaker .tm-media::before { content: ''; display: block; aspect-ratio: 4 / 5; }
#thrive-matchmaker .tm-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Hero: the card sits beside the score and the name. Only .tm-hero-head is a grid, so the
   reasons, the week and the building card below it still run the full width of the hero. */
#thrive-matchmaker .tm-hero-head.tm-has-media { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 30px; align-items: stretch; }

/* Runners-up, the discovery card and the building card all take a thumbnail on the left.
   min-width: 0 on the copy: a long community name must not push the text track wider than its
   share of the grid, which is the same containment rule the option buttons follow. */
#thrive-matchmaker .tm-alt.tm-has-media { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: stretch; }
#thrive-matchmaker .tm-disc.tm-has-media { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: stretch; }
#thrive-matchmaker .tm-bldg.tm-has-media { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: stretch; }
#thrive-matchmaker .tm-card-copy { min-width: 0; }

@media (max-width: 640px) {
  /* NO PICTURES AT ALL DOWN HERE.
     Every way of keeping them was worse than dropping them. Beside the copy the text track is
     too narrow, so the card runs two to three times the picture's natural height and cover crops
     away more than half its width — straight through the wordmark. Capping the stretch fixes the
     crop and leaves the picture short again. Stacking fixes both and costs a full-width band per
     card, which on a phone pushes the answer — the fit score, the name — down the screen behind
     decoration. The copy is the result; the picture was only ever confirmation of it.

     display: none rather than visibility or a zero size, so the bytes are never fetched: the
     <img> is loading="lazy", and a lazily-loaded image inside a display:none box is not
     downloaded. A phone gets the results screen without any of this.

     Resetting the containers to `display: block` puts each card back to exactly the layout it
     has when a destination carries no picture at all — a shape already proven by the two
     buildings that resolve none. */
  #thrive-matchmaker .tm-media { display: none; }
  #thrive-matchmaker .tm-hero-head.tm-has-media,
  #thrive-matchmaker .tm-alt.tm-has-media,
  #thrive-matchmaker .tm-disc.tm-has-media,
  #thrive-matchmaker .tm-bldg.tm-has-media { display: block; }
}

#thrive-matchmaker .tm-fade { animation: tmRise .4s ease both; }
@keyframes tmRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  #thrive-matchmaker .tm-alts { grid-template-columns: minmax(0, 1fr); }
  #thrive-matchmaker .tm-hero { padding: 24px 22px; }
  #thrive-matchmaker .tm-cta, #thrive-matchmaker .tm-disc { padding: 22px 20px; }
  #thrive-matchmaker .tm-doing li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  #thrive-matchmaker .tm-roster li { flex: 0 0 auto; }
  /* Full-width primary actions on a phone — a 28px-padded inline button next to a text link
     is an easy mis-tap when both sit on the same line. */
  #thrive-matchmaker .tm-cta-row .tm-btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  #thrive-matchmaker *, #thrive-matchmaker *::before, #thrive-matchmaker *::after { animation: none !important; transition: none !important; }
}