/**
 * wyg-css-news-media
 *
 * WHAT: the News & Media page's residue -- the media card (a NEW component, not
 * a variant of the publication plate or the workshop card), the featured video
 * frame, the filter rail's label, and the review-only placeholder marker.
 *
 * WHY SO LITTLE OF IT: everything Elementor has a control for is set on the
 * control (conventions 5-i). The card's background, border, padding, direction
 * and gap all live in the loop item template; the filter buttons' colors,
 * borders and typography live on the Unlimited Elements widget. What is left
 * here is what no control expresses: the thumbnail box, the mono families
 * (which must come from var( --wyg-mono ) rather than an Elementor font stack,
 * see conventions 3d), the CTA's arrow, and the feature card's grid.
 *
 * SPECIFICITY: doubled component classes throughout (conventions 5a). The one
 * !important answers Unlimited Elements' own ID rule
 * #uc_ue_listing_grid_elementor_<id> .ue-grid-item { overflow: hidden }, which
 * clips the card's hover shadow and which no number of classes can outrank.
 *
 * LOGICAL PROPERTIES ONLY -- zero physical left/right.
 */

/* ---------------------------------------------------------------------------
 * 1. The media card -- shared by the loop item and the featured block
 * ------------------------------------------------------------------------ */

.e-con.wyg-media-card__body.wyg-media-card__body {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* The thumbnail box.
 *
 * 16:9 AT EVERY WIDTH, and 197x111 here. Todd's call, 30 August 2026.
 *
 * WHY NOT THE MOCKUP'S 4:3: the mockup's card was drawn against `hqdefault.jpg`,
 * which is 480x360 -- a genuinely 4:3 YouTube thumbnail. The live site pulls
 * `maxresdefault`, which is 768x432, 16:9. So a 4:3 slot was right for a source
 * asset we no longer use, and against the real one it was cropping 25% off the
 * sides -- 12.5% off each edge, measured, where YouTube puts faces and text.
 * Matching the tile to the source is a correction, not a deviation from the
 * mockup.
 *
 * AND IT WAS INCONSISTENT ACROSS THE BREAKPOINT, which is what got it noticed:
 * the mobile rule below was already 16:9, so a phone showed 100% of the frame
 * while a desktop showed 75% of it. Different crops of the same asset by
 * viewport. One ratio everywhere is now declared HERE and only here -- the
 * mobile rule deliberately no longer restates it, so the two cannot drift.
 *
 * 197 rather than keeping 148: 16:9 at 148 wide is only 83 tall, which reads as
 * small against a card the body text holds open to roughly 195. Holding the
 * height at 111 and widening instead keeps the card's visual mass unchanged. The
 * body column gives up 49px out of roughly 1150 at full width.
 *
 * The play badge on .media_type-videos is centered by transform, so it is
 * ratio-independent and needs nothing here. */
.wyg-media-card__thumb.wyg-media-card__thumb {
	flex: 0 0 197px;
	inline-size: 197px;
	aspect-ratio: 16 / 9;
	border: 1px solid var( --e-global-color-3e660e4c );
	overflow: hidden;
}

.wyg-media-card__thumb.wyg-media-card__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* The fallback tile. The dynamic tag's fallback image is the seal, and the seal
 * is the only SVG that can appear in this slot -- a real featured image is
 * always a raster. So the attribute selector IS the fallback state, and it does
 * not need a second class the loop item cannot set per record. */
.wyg-media-card__thumb.wyg-media-card__thumb img[ src$=".svg" ] {
	object-fit: contain;
	/* HO-88, 30 August 2026. Was a uniform 1.75rem, and that is where the "out of
	 * proportion" report came from. The tile is LANDSCAPE, 148x111, and uniform
	 * padding is not uniform against it: 28px a side took 51% of the height but
	 * only 38% of the width. The seal is PORTRAIT (0.68), so `contain` then
	 * height-limited it and it rendered 36x53 -- 24% of the tile's width, a narrow
	 * mark stranded in a wide box with dead space either side.
	 *
	 * The mockup's fallback got away with the same narrow seal because it also
	 * carried a "No image supplied" caption filling the width beneath it. That
	 * caption is a wireframe annotation and does not ship, so the seal has to hold
	 * the tile on its own and needs the height back.
	 *
	 * Block padding only: the inline axis has room to spare and constraining it
	 * does nothing except shrink the seal again.
	 *
	 * PERCENTAGE, not rem, and this is the whole point of the value. Percentage
	 * padding resolves against the containing block's INLINE size on every side,
	 * and at a CSS viewport of 767 or below this tile stops being a 148px 4:3 chip
	 * and becomes a full-width 16:9 banner -- 603x339 at a 685px viewport. A fixed
	 * 1rem is then almost nothing against 339px of height and the seal swelled to
	 * 91% of the tile. 12% of the tile's own width tracks it instead, holding the
	 * seal between 56% and 67% of the tile height at CSS viewports of 375, 685,
	 * 767, 1025 and 1485 alike. Measured, all five.
	 *
	 * The breakpoint is the `max-width: 767px` query further down this file, NOT
	 * 1024. Do not read it off an iframe's element width -- a 768px iframe has a
	 * 753px CSS viewport once the scrollbar is subtracted, and mistaking the two is
	 * exactly how an earlier pass of this comment came to name 1024. Measure
	 * documentElement.clientWidth. */
	padding: 12% 0;
	background: var( --e-global-color-83bd7746 );
}

.wyg-media-card__badge.wyg-media-card__badge .elementor-heading-title {
	display: inline-block;
	font-family: var( --wyg-mono );
	font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) );
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --e-global-color-primary );
	border: 1px solid var( --e-global-color-primary );
	padding: 0.2rem 0.6rem;
	margin: 0;
}

.wyg-media-card__date.wyg-media-card__date .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) );
	color: var( --e-global-color-d89acb7d );
	margin: 0;
}

.wyg-media-card__title.wyg-media-card__title .elementor-heading-title {
	font-size: var( --e-global-typography-a66c1ed1-font-size );
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var( --e-global-color-primary );
	margin: 0;
}

.wyg-media-card__outlet.wyg-media-card__outlet .elementor-heading-title {
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	font-style: italic;
	color: var( --e-global-color-d89acb7d );
	margin: 0;
}

.wyg-media-card__desc.wyg-media-card__desc .elementor-heading-title {
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	line-height: 1.6;
	color: var( --e-global-color-d89acb7d );
	margin: 0;
}

/* The CTA on a LOOP-ITEM card: an anchor printed by [wyg_media_cta]. 0,3,0
 * because the kit's own `a` color lands at 0,2,0 and would otherwise tie.
 *
 * HO-52, 23 August 2026: the featured block no longer shares this treatment.
 * Todd asked for its Watch control to be the same component as "Read the essay"
 * on the publications page, so it is now a real button widget (nm20013,
 * .wyg-media-card__cta) carrying that button's own control values, and the
 * second selector that used to sit here -- for the linked heading widget it
 * replaced -- has been removed rather than left to match nothing. */
.wyg-media-card__ctawrap.wyg-media-card__ctawrap .wyg-media-card__go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-block-size: 36px;
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --e-global-color-accent );
	text-decoration: none;
}

.wyg-media-card__ctawrap.wyg-media-card__ctawrap .wyg-media-card__go::after {
	content: "\25B8";
	margin-inline-start: 0.3rem;
}

.wyg-media-card__ctawrap.wyg-media-card__ctawrap .wyg-media-card__go.is-ext::after {
	content: "\2197";
}

/* A shortcode widget always renders its wrapper, so an empty return still takes
 * the container's gap (conventions 11j). Collapse the widget, not its
 * contents -- :empty on the widget itself never matches. */
.wyg-media-card__ctawrap:has( .elementor-shortcode:empty ),
.wyg-media-card__flagwrap:has( .elementor-shortcode:empty ) {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 2. The review-only placeholder marker
 *
 * Deliberately NOT page design: it reads as an annotation so that nobody --
 * Gabi included -- mistakes a stand-in row for real coverage. It renders only
 * where the private meta _wyg_placeholder_note exists, and disappears with it.
 * ------------------------------------------------------------------------ */

.wyg-media-flag {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	line-height: 1.5;
	color: var( --e-global-color-accent );
	border-inline-start: 2px dashed var( --e-global-color-accent );
	padding-inline-start: 0.6rem;
	margin: 0.35rem 0 0;
}

/* ---------------------------------------------------------------------------
 * 3. The featured block
 * ------------------------------------------------------------------------ */

.elementor-widget.wyg-media-featured__video {
	flex: 1 1 52%;
	min-inline-size: 0;
}

.wyg-media-featured__video.wyg-media-featured__video .elementor-wrapper {
	border: 1px solid var( --e-global-color-3e660e4c );
	border-block-end: 6px solid var( --e-global-color-0e573e58 );
}

/* The featured card has no thumbnail, so its badge and date share one row while
 * everything else spans. A grid does that with no extra container -- the kicker
 * wrapper the loop item needs would have been a fourth level here. */
.e-con.wyg-media-card--feature.wyg-media-card--feature {
	flex: 1 1 48%;
	min-inline-size: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	align-content: start;
}

.wyg-media-card--feature > *:not( .wyg-media-card__badge ):not( .wyg-media-card__date ) {
	grid-column: 1 / -1;
}

.wyg-media-card--feature .wyg-media-card__date.wyg-media-card__date {
	justify-self: start;
	align-self: center;
}

/* The Watch button. HO-52: the same component as "Read the essay" on the
 * publications page -- an Elementor button widget carrying that button's own
 * control values, not a lookalike. Color, border, radius, type scale and
 * padding are therefore all on the widget (conventions 5-i) and none of them
 * are restated here.
 *
 * Two things no control reaches. A grid item stretches on both axes by default,
 * so the widget has to be told to sit at the start of its track; and Elementor's
 * button width control offers 20-100 percent and no `auto`, so an auto-width
 * button needs both flex-basis and inline-size (conventions 6).
 *
 * RESOLVED BY HO-49: the auto-width button rule was character-for-character
 * .wyg-essay-under__cta in wyg-css-publication-card. Both are now aliases on one
 * declaration block in wyg-css-shared (60).
 */
.wyg-media-card--feature .wyg-media-card__cta.wyg-media-card__cta {
	justify-self: start;
	margin-block-start: 0.6rem;
}

/* Mobile shrink, matching "Read the essay" on the publications page exactly
 * (wyg-css-research-publications, Userback #8241201): same font-size token, same
 * padding. This button is NOT a loop item -- it is nm20013, a direct widget on
 * page 118 -- so what it competes with is Elementor's own per-element CSS in
 * post-118.css, not a loop template's 0,3,0 rule. That selector is
 * `.elementor-118 .elementor-element.elementor-element-nm20013 .elementor-button`
 * at 0,4,0 with no media query of its own, so this rule doubles both component
 * classes and the .elementor-button class to reach 0,5,0 and win regardless of
 * enqueue order. Do NOT reuse #8241201's loop-template selector shape here --
 * it answers a different competitor (measured 23 August, HO-53). */
@media ( max-width: 767px ) {
	.wyg-media-card--feature .wyg-media-card__cta.wyg-media-card__cta .elementor-button.elementor-button {
		font-size: var( --e-global-typography-1c3ea07a-font-size );
		padding: 0.75rem 1.15rem;
	}
}

/* The auto-width button rule moved to `wyg-css-shared` (60), HO-49, 23 August
   2026 -- it was character-for-character `.wyg-essay-under__cta` in
   `wyg-css-publication-card`. `.wyg-media-card__cta` is now an alias on that one
   declaration block. The `justify-self` rule above stays: it is this card's own
   grid placement, not the shared device. */

/* The section title breaks to two lines. Todd, 23 August, marking the break
 * between "of" and "Within" on his own screenshot.
 *
 * A measure, not a typed line break: putting a <br> in the heading's title
 * field would be presentational markup inside a content field, and it would
 * need re-typing in Hebrew and Arabic where the words fall differently. The
 * heading had no measure at all -- it was rendering 1400px wide, the full shell
 * -- so giving it one is the design fix and the break falls out of it.
 *
 * 16ch, chosen from measured text rather than guessed: at the desktop 40px
 * Nunito Sans 800 the token resolves ch to 24px, so 16ch is 384px. "The launch
 * of Within" measures 399px and cannot fit; "Within Your Gates" measures 347px
 * and does. Any value in [347, 399) produces the same two lines; 384 sits in
 * the middle of that window rather than on its edge.
 *
 * Desktop only. Below 1025px the title already wraps to two lines on its own --
 * measured 68px tall at both 390px and 431px -- and a cap there would push it
 * to three.
 *
 * HEBREW AND ARABIC: this is a measure, which is legitimate in any script, but
 * the 16ch value is tuned to where the ENGLISH words fall. Check both and give
 * them their own value if the title breaks badly. */
@media ( min-width: 1025px ) {
	.wyg-media-featured .wyg-sec-title.wyg-sec-title .elementor-heading-title {
		max-inline-size: 16ch;
	}
}

/* ---------------------------------------------------------------------------
 * 4. The filter rail
 * ------------------------------------------------------------------------ */

.wyg-media-filter__label.wyg-media-filter__label .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) );
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --e-global-color-d89acb7d );
	margin: 0;
	margin-inline-end: 0.35rem;
}

/* The widget's typography control cannot carry the mono family: Elementor emits
 * font-family: "X", Sans-serif, so a failed webfont would land on a sans face
 * and change shape rather than degrade (conventions 3d). */
.wyg-media-pills.wyg-media-pills .ue_taxonomy_item_title {
	font-family: var( --wyg-mono );
}

/* ---------------------------------------------------------------------------
 * 5. The grid, and the hover
 * ------------------------------------------------------------------------ */

/* Unlimited Elements ships overflow: hidden from an ID selector at 1,1,0, which
 * clips the hover shadow. !important is the only reach (HO-41 log, 7). */
.wyg-media-grid .ue-grid-item {
	overflow: visible !important;
}

/* will-change at REST, not on :hover -- promoting mid-animation causes the
 * flash it is meant to prevent -- plus translate3d, so the 1px border is
 * rasterised once and the layer is what moves (HO-41 log, 7, cause 3). */
.wyg-media-grid .e-con.wyg-media-card {
	transition:
		box-shadow 0.22s cubic-bezier( 0.2, 0.6, 0.3, 1 ),
		transform 0.22s cubic-bezier( 0.2, 0.6, 0.3, 1 );
	will-change: transform;
	transform: translate3d( 0, 0, 0 );
}

.wyg-media-grid .e-con.wyg-media-card:hover {
	box-shadow: 0 10px 24px rgba( 38, 54, 63, 0.10 );
	transform: translate3d( 0, -1px, 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.wyg-media-grid .e-con.wyg-media-card,
	.wyg-media-grid .e-con.wyg-media-card:hover {
		transition: none;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Mobile
 * ------------------------------------------------------------------------ */

@media ( max-width: 767px ) {
	/* Full-bleed, and the ratio is NOT restated -- section 1 declares 16:9 for
	 * every width and this rule inherits it. Restating it here is what let the
	 * two drift to 4:3 desktop / 16:9 mobile in the first place. */
	.wyg-media-card__thumb.wyg-media-card__thumb {
		flex: none;
		inline-size: 100%;
	}

	.e-con.wyg-media-card--feature.wyg-media-card--feature {
		grid-template-columns: 1fr;
	}

	.wyg-media-card--feature .wyg-media-card__badge,
	.wyg-media-card--feature .wyg-media-card__date {
		grid-column: 1 / -1;
	}
}

/* The video card's play badge. post_class() stamps media_type-videos on the loop
 * item root, so this needs no per-record control and no second template. */
.media_type-videos .wyg-media-card__thumb.wyg-media-card__thumb {
	position: relative;
}

.media_type-videos .wyg-media-card__thumb.wyg-media-card__thumb::after {
	content: "\25B6";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate( -50%, -50% );
	inline-size: 40px;
	block-size: 40px;
	border-radius: 50%;
	background: var( --e-global-color-accent );
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	box-shadow: 0 2px 10px rgba( 38, 54, 63, 0.45 );
	pointer-events: none;
}

/* ==========================================================================
   The page intro -- the two column section head
   Same device as wyg-css-research-publications section 1, deliberately
   duplicated rather than shared: those rules are page scoped and this page's
   snippet is the one that loads here. If a third page grows one, promote all
   three to wyg-css-shared (60) at that point, not before.
   The Elementor container controls (row, wrap, flex-start, 4rem/2rem gap,
   boxed 1400) already match R&P exactly; what no control expresses is the
   column split below, which is why the section read as one column without it.
   ========================================================================== */

.e-con.wyg-media-intro__head.wyg-media-intro__head {
	flex: 0 0 clamp( 220px, 30%, 400px );
	min-inline-size: 0;
}

.e-con.wyg-media-intro__body.wyg-media-intro__body {
	flex: 1 1 0%;
	min-inline-size: 0;
}

/* 0,4,0. The shared 12px / 28px come from wyg-css-shared (60) at 0,3,0 and are
   the site default; this section spaces its head from the container gap alone,
   so they have to go or the offset below is wrong by exactly their sum. */
.wyg-media-intro .wyg-sec-label.wyg-sec-label .elementor-heading-title,
.wyg-media-intro .wyg-sec-title.wyg-sec-title .elementor-heading-title {
	margin-block-end: 0;
}

/* Optical alignment: drop the body column by the label's own line box plus the
   head column's row gap, so the prose's first line sits with the title rather
   than with the label. Derived from the label token (wyg-css-global 5g) rather
   than a magic number. Desktop only -- below 1025px there is nothing to align
   to. Recipe in page-build-conventions 2a. */
@media ( min-width: 1025px ) {
	.e-con.wyg-media-intro__body.wyg-media-intro__body {
		margin-block-start: calc(
			1.6 * var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 )
			+ 0.75rem
		);
	}
}

@media ( max-width: 767px ) {
	.e-con.wyg-media-intro__head.wyg-media-intro__head { flex: 0 1 auto; }
}

/* ---------------------------------------------------------------------------
   RTL: the media card's arrows turn around.

   Found by sweeping every arrow on the site, 2026-08-27 (HO-85), after Todd's
   ticket on the Hebrew News & Media page. The margin was already logical, so
   the arrow sat on the correct side and pointed the wrong way -- which is the
   harder version of the bug to see.

   `\25B8` is the card's "go" triangle and `\2197` the external-link arrow; both
   are directional, so both mirror. `\2193`, the download arrow elsewhere on the
   site, points down in every language and is deliberately left alone.

   0,4,0, one above the base rules.
   ------------------------------------------------------------------------ */

[dir="rtl"] .wyg-media-card__ctawrap.wyg-media-card__ctawrap .wyg-media-card__go::after {
	content: "\25C2";
}

[dir="rtl"] .wyg-media-card__ctawrap.wyg-media-card__ctawrap .wyg-media-card__go.is-ext::after {
	content: "\2196";
}