/* ---------------------------------------------------------------------
   RAR PRESS KIT -- IN-CONTENT MEDIA

   Presentation for the furniture inc/content-media.php emits, and only
   that furniture. Amendment 14.5 set the precedent: what the plugin
   renders, the plugin styles, so a video or a legacy cut is never
   waiting on a theme release to be usable.

   Two rules the theme already owns are deliberately NOT restated here:
   the halftone screen, the 1px ink border and the colour snap
   (components-fx.css, keyed on .rar-press-photo, whose selectors are
   element-agnostic and so already reach a div or a span), and the
   vertical rhythm of figures inside the article measure
   (components-article.css `.rar-body figure`, which carries the owner's
   loosened margins). This file supplies only what those two cannot: the
   grid container for the non-figure wrappers, and the video box.
   ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   1. NON-FIGURE PRESS-PHOTO WRAPPERS

   components-fx.css makes `figure.rar-press-photo` a one-column grid so
   the halftone ::after pins to the image cell exactly. That rule is
   element-scoped, so the two wrappers this plugin has to use when a
   figure would be invalid markup need the same container behaviour:

     div  -- the pre-HTML5 `div.wp-caption` shape.
     span -- an image inline in running text, where a <figure> inside a
             <p> would close the paragraph out from under itself.

   The span is display:grid rather than inline-grid on purpose: it sits
   inside a paragraph of body copy, and a block-level box stacks above
   the text instead of shouldering it aside. No float is introduced
   anywhere: floats escape their paragraph and would need a clearfix on
   a theme class this plugin does not own.
   ------------------------------------------------------------------- */
div.rar-press-photo,
span.rar-press-photo {
  display: grid;
  grid-template-columns: 100%;
  position: relative;
  isolation: isolate;
  margin: var(--rar-block, 34px) auto;
}

/* The wrappers carry the image's own declared width inline, the way the
   classic caption shortcode did, so a 200px legacy cut is not stretched
   across a 1200px measure. max-width folds it back on narrow screens;
   it is a different property from the inline width, so it wins the
   used-width computation without an importance flag. */
.rar-press-photo {
  max-width: 100%;
}

/* An alignment class survives on the wrapper so the design owner can
   act on it later. Centred is the house default for a cut on one wide
   measure (SPEC section 8); alignnone stays flush left. */
.rar-press-photo.alignnone {
  margin-left: 0;
  margin-right: 0;
}

/* ---------------------------------------------------------------------
   2. THE VIDEO BOX

   A player is not printed matter, so it takes no halftone: SPEC section
   12's material rule already separates screened ink from continuous-tone
   objects, and a dot screen over a player would sit between the reader
   and the controls. What it does take is the same 1px ink border and the
   same Courier source line as every other cut, because the furniture is
   what makes it belong to the page.

   aspect-ratio does the responsive box with no wrapper element and no
   padding-top hack; the width/height attributes on the iframe are the
   pre-CSS fallback.
   ------------------------------------------------------------------- */
.rar-press-video {
  display: block;
  margin: var(--rar-block, 34px) auto;
  max-width: 100%;
}

.rar-press-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--wp--preset--color--ink, #1a1712);
}

.rar-press-video figcaption {
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .02em;
  text-align: left;
  text-indent: 0;
  margin: var(--rar-tight, 8px) 0 0;
  color: var(--wp--preset--color--ink, #1a1712);
}

/* -------------------------------------------------------------------
 * MORE FROM THE RECORD -- related articles at the foot of an article.
 *
 * An acknowledged modern-UX compromise (owner directive 2026-07-27):
 * a 1972 broadsheet ended a story with a jump line, but a reader on the
 * web needs somewhere to go next. Kept inside the house voice: ink on
 * paper, hairline rules, no cards, no shadows, no radius, no lift on
 * hover. The cuts are ordinary press photos and inherit the halftone
 * screen and colour snap from components-fx.css, so hovering one behaves
 * exactly like hovering any other photograph on the site.
 *
 * Markup contract (blocks/related/render.php):
 *   aside.rar-related > p.rar-related-label
 *                     > ul.rar-related-list > li.rar-related-item
 *                       > a.rar-related-link
 *                         > figure.rar-press-photo.rar-related-figure
 *                         > span.rar-related-kicker
 *                         > span.rar-related-title
 *                         > span.rar-related-date
 * ------------------------------------------------------------------- */

.rar-related {
	margin: 55px 0 0;
	padding-top: 13px;
	border-top: 3px solid var(--rar-ink, #1a1712);
}

.rar-related-label {
	margin: 0 0 21px;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rar-ink, #1a1712);
}

.rar-related-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rar-related-item {
	margin: 0;
	padding: 0;
}

/* The whole cell is the target, as a newspaper column is. */
.rar-related-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.rar-related-figure {
	margin: 0 0 13px;
}

/* One declared box so three cuts of different proportions sit level. */
.rar-related-figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 28%;
}

.rar-related-kicker {
	display: block;
	margin-bottom: 4px;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rar-red, #8c1f13);
}

.rar-related-title {
	display: block;
	font-family: "Libre Caslon Display", Georgia, serif;
	font-size: 19px;
	line-height: 1.15;
	color: var(--rar-ink, #1a1712);
}

/* Ink does not change colour on hover; the rule under the headline is
   the acknowledgement, the way a printed index underlines an entry. */
.rar-related-link:hover .rar-related-title,
.rar-related-link:focus-visible .rar-related-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rar-related-date {
	display: block;
	margin-top: 8px;
	font-family: "Courier Prime", "Courier New", monospace;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--rar-ink, #1a1712);
}

@media (max-width: 900px) {
	.rar-related-list {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Three items over two columns leaves an orphan; drop the third
	   rather than print a half-empty row. */
	.rar-related-item:nth-child(3) {
		display: none;
	}
}

@media (max-width: 600px) {
	.rar-related-list {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.rar-related-item:nth-child(3) {
		display: block;
	}
}

/* -------------------------------------------------------------------
 * THE LOST PLATE -- where a 2012 VodPod embed used to be.
 *
 * A newspaper that could not print a photograph said so in the space
 * the photograph would have filled. Same idea: a ruled box, Courier,
 * ink on paper, no apology and no broken player. The source line is the
 * point of the whole component, so it is the only part set in the body
 * face and it is never allowed to look like chrome.
 * ------------------------------------------------------------------- */

.rar-lost-plate {
	margin: 34px 0;
	padding: 21px 26px;
	border: 1px solid var(--rar-ink, #1a1712);
	background: var(--rar-paper-shade, #eae3d2);
}

.rar-lost-plate-label {
	margin: 0 0 13px;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rar-red, #8c1f13);
}

.rar-lost-plate-note {
	margin: 0 0 13px;
	font-family: "Courier Prime", "Courier New", monospace;
	font-size: 13px;
	line-height: 1.55;
	text-indent: 0;
	text-align: left;
	color: var(--rar-ink, #1a1712);
}

.rar-lost-plate-source {
	margin: 0;
	font-family: "Courier Prime", "Courier New", monospace;
	font-size: 13px;
	line-height: 1.55;
	text-indent: 0;
	text-align: left;
}

.rar-lost-plate-source a {
	color: inherit;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------
 * Long unbroken tokens must never blow out a column.
 *
 * This archive carries bare URLs and, until they were retired, raw
 * shortcodes hundreds of characters long with no space in them. In a
 * multi-column masonry feed one such token widens its column and pushes
 * the whole row sideways, which is what the owner saw. Justified text
 * makes it worse by refusing to break. Belt and braces, on the two
 * places arbitrary archive text can land.
 * ------------------------------------------------------------------- */

.rar-body,
.rar-teaser {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* A recovered 2012 clip, played through the modern element. Sized and
   framed like a press cut so it sits in the column as a photograph
   would; no halftone, because a moving image is not a printed plate. */
.rar-press-video--archive video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	background: var(--rar-ink, #1a1712);
	border: 1px solid var(--rar-ink, #1a1712);
}