/* ============================================================
   RealEstate Hup — Blog MEDIA layer (loads after guides.css).
   Adds: real featured-image rendering (object-fit cover), card
   publish date, strict ~16:9 card media, and inline article
   figures. Tokens only (--rh-*). No hardcoded palette, no emoji.
   RTL-safe (logical props). No horizontal overflow at 280-768.
============================================================ */

/* ---- FEATURED CARD image (guides.css styles the box, not the img) ---- */
.rh-gfeat__media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  /* stacked featured: give the image a stable ~16:9 band */
  .rh-gfeat__media{min-height:0;aspect-ratio:16/9}
}

/* ---- GRID CARD media: tighten to ~16:9, keep cover crop ---- */
.rh-gcard__media{aspect-ratio:16/9}
.rh-gcard__media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- CARD footer: date + read time on one line, CTA on the other ---- */
.rh-gcard__foot{flex-wrap:wrap;row-gap:8px}
.rh-gcard__meta{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;
  color:var(--rh-ink-2);font-size:.8rem;font-weight:600;min-width:0}
.rh-gcard__date{color:var(--rh-muted);white-space:nowrap}
.rh-gcard__dot{color:var(--rh-line-2)}
.rh-gcard__read{white-space:nowrap}

/* featured-card date chip */
.rh-gfeat__meta time{display:inline-flex;align-items:center;gap:6px}

/* ============ INLINE ARTICLE FIGURES ============ */
.rh-blog-fig{margin-block:26px;margin-inline:0}
.rh-blog-fig img{display:block;width:100%;height:auto;border-radius:var(--rh-radius);
  background:var(--rh-bg-soft);border:1px solid var(--rh-line)}
.rh-blog-fig figcaption{margin-top:9px;color:var(--rh-muted);font-size:.82rem;
  line-height:1.5;text-align:start}

/* Any image the editor drops in the body is responsive + never overflows. */
.rh-prose img{max-width:100%;height:auto}
.rh-prose figure{margin-inline:0;max-width:100%}
/* Wide blocks (tables, pre) scroll inside themselves, never the page. */
.rh-prose table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse}
.rh-prose pre{max-width:100%;overflow-x:auto}

/* ---- narrow-viewport hardening (280-560): no horizontal overflow ---- */
@media(max-width:560px){
  .rh-gcard__foot{align-items:flex-start}
  .rh-blog-fig{margin-block:20px}
}