/* --------------------------------------------------------------------------
   Text & image block (rmp/text-image)
   --------------------------------------------------------------------------
   Copy beside a picture, with the width split chosen in the editor. The two
   columns are expressed as custom properties so the "picture on the left"
   variant is one rule (swap the two values) rather than a modifier per split.

   Loaded on the front end after pages.css, and inside the editor canvas via
   add_editor_style(), so the block looks the same in both.
   -------------------------------------------------------------------------- */
.rmp-ti{
	--ti-text:50fr;
	--ti-img:50fr;
	display:grid;
	grid-template-columns:var(--ti-text) var(--ti-img);
	gap:clamp(32px,5vw,80px);
	align-items:center;
}

/* The two widths are set per block as inline custom properties (the sidebar
   slider, 20%-80% in fives), so there is no class per size to maintain here.
   The values above are only the fallback for a block with no style attribute. */

/* Picture on the left: the columns swap width as well as order, otherwise a
   70/30 would put the narrow column under the copy. */
.rmp-ti--img-left{grid-template-columns:var(--ti-img) var(--ti-text)}
.rmp-ti--img-left .rmp-ti__media{order:-1}

/* Grid items default to min-width:auto, i.e. they refuse to shrink below their
   content. In the editor the empty image picker is wide enough to push a 30%
   column out to 35%; on the front end a long unbroken word would do the same.
   Let the chosen widths win. */
.rmp-ti__text,
.rmp-ti__media{min-width:0}

/* The picture. <figure> carries the browser's default margin; clear it. */
.rmp-ti__media{margin:0}
.rmp-ti__img{display:block;width:100%;height:auto;border-radius:var(--rmp-radius)}
/* No picture chosen yet: the house grey box, at the same band ratio the split
   sections use, so choosing an image does not move the layout. */
.rmp-ti__media .rmp-ph{aspect-ratio:1920/1174;min-height:0}

/* Headings in this block read as typed, not shouted. `.rmp-h2` (and `.rmp-h1`
   / `.rmp-h4`) set text-transform:uppercase for the landing-page bands; inside
   a text-and-image section the heading sits at reading size beside body copy,
   so the caps are switched off here while the size and weight are kept.
   Requested 14 Sep 2026. */
.rmp-ti .rmp-ti__text h1,
.rmp-ti .rmp-ti__text h2,
.rmp-ti .rmp-ti__text h3,
.rmp-ti .rmp-ti__text h4{text-transform:none}

/* Rhythm inside the copy column. Two classes deep on purpose: `.rmp-page p`
   and `.rmp-art__body p` are (0,1,1) and would otherwise outrank a single
   class here, leaving the stock 1.1em paragraph gap. */
.rmp-ti .rmp-ti__text>*{margin:0}
.rmp-ti .rmp-ti__text>*+*{margin-top:var(--rmp-s3)}

/* Two stacked bands read as one block of page without a gap between them. */
.rmp-ti+.rmp-ti{margin-top:var(--rmp-s7)}

@media (max-width:782px){
	.rmp-ti,
	.rmp-ti--img-left{grid-template-columns:1fr}
	/* Stacked, the copy always comes first -- a picture above an unread
	   heading is just a delay. */
	.rmp-ti--img-left .rmp-ti__media{order:0}
}