/**
 * wyg-css-publication-card
 *
 * WHAT: The publication card components shared by the homepage essays row and
 * the Research & Publications library -- the dark .wyg-plate-essay plate, the
 * .wyg-essay-under abstract block that sits beneath the featured plate, and the
 * compact .wyg-essay-row list row. All three are rendered from Elementor Loop
 * Item templates (post 370 "WYG Publication Card", post 371 "WYG Publication
 * Row"), so any page that places an Unlimited Elements Loop Grid against those
 * templates inherits this treatment without repeating it.
 *
 * WHY: the plate card appears in two approved designs -- the homepage essays
 * row and the Research & Publications library grid -- and whichever page ships
 * first owns the component. Page snippets are per page by convention, so the
 * shared part lives in its own file rather than inside wyg-css-homepage, where
 * the library page would either have to load a homepage stylesheet or grow a
 * second copy that drifts from this one. Same reasoning that moved HO-34's form
 * focus ring out of wyg-css-contact and into wyg-css-global.
 *
 * REJECTED: setting the chip borders, the joined under-block border and the row
 * hover through Elementor controls. Elementor's border control carries one color
 * for all four sides, which IS enough for the plate (6px Tan bottom only) and
 * for the row (1px Rule bottom only) -- both are set in Elementor and are not
 * repeated here. The chips are heading widgets, which have no border control at
 * all, and neither the row's hover padding shift nor its trailing arrow has a
 * control. Only that residue is in this file.
 *
 * REJECTED: binding the compact row's title to the WYG / Body typography
 * global. Body carries line-height 1.6 and this row is designed at 1.35. A
 * bound global emits on the widget's own per-element selector at 0,5,0, which
 * no component rule in a snippet stylesheet can outrank. The size is therefore
 * set locally on that one widget, from the same three values the token carries,
 * and this file sets no typography size at all.
 *
 * GOTCHAS: every selector below doubles its own class. The generated
 * post-<id>.css emits `.elementor-widget-heading .elementor-heading-title` at
 * 0,2,0 and is enqueued after the snippet stylesheets, so a single-class
 * component rule ties and loses on source order. See page-build-conventions.md
 * section 5a.
 *
 * The language marker on the plate ("English") is a static string in template
 * 370, not a dynamic value. WordPress exposes no dynamic tag for "the language
 * this post is written in", and on a per-language site every post the grid
 * returns is in that site's language anyway. It must be translated per language
 * as the NAME OF THAT LANGUAGE IN ITSELF -- the Hebrew site must read a Hebrew
 * word for Hebrew, not the Hebrew word for English. Flagged for review.
 */

/* --------------------------------------------------------------------------
   1. Unlimited Elements grid wrappers
   The Loop Grid places each result in .ue-grid-item inside its own grid
   container. Both are the plugin's markup, not ours, and both carry sizing that
   is wrong for a single-column list.
   -------------------------------------------------------------------------- */

.wyg-essays__featuregrid .ue-grid-item,
.wyg-essays__list .ue-grid-item {
	inline-size: 100%;
	max-inline-size: none;
}

.wyg-essays__featuregrid.wyg-essays__featuregrid .ue-grid-item > .e-con,
.wyg-essays__list.wyg-essays__list .ue-grid-item > .e-con {
	inline-size: 100%;
	max-inline-size: none;
}

/* --------------------------------------------------------------------------
   2. The plate
   Dark blue, bottom-anchored, with the metadata chips pinned to the top by the
   container's own space-between. Only the chips and the residue are here.
   -------------------------------------------------------------------------- */

/* THE CHIP LIVES IN `wyg-css-shared` (60) -- moved there by HO-49, 23 August
   2026, together with `.wyg-wk__type`, which was a character-for-character copy
   of it in `wyg-css-programs-workshops`. Both class names, and both element
   forms (the Elementor widget DIV and the bare `span` the essay rail's Themes
   row prints), are aliases on ONE declaration block there.

   Do not restate any of it here. `wyg-css-publication-single` still answers the
   border and text color for the light-surface Themes row at 0,4,0, which is a
   real local variation rather than a copy. */

/* Tan at 55 percent as a hairline, not as text: the chip border is decoration
   around a label that is already Tan at full strength, and a solid rule at that
   weight reads as a second element rather than as an outline. Taken from the
   approved mockup rather than chosen here. */

.wyg-plate-essay__title.wyg-plate-essay__title .elementor-heading-title {
	margin: 0;
}

.wyg-plate-essay__title.wyg-plate-essay__title a {
	color: inherit;
	text-decoration: none;
}

.wyg-plate-essay__title.wyg-plate-essay__title a:hover {
	color: var( --e-global-color-83bd7746 );
}

.wyg-plate-essay__by.wyg-plate-essay__by .elementor-heading-title {
	/* HO-40: he/ar font-size bump -- see wyg-css-global section 5g. */
	font-size: calc( var( --e-global-typography-fd54d4a4-font-size ) * var( --wyg-label-size-scale, 1 ) );
	margin: 0;
	font-family: var( --wyg-mono );
	/* HO-39: see wyg-css-global section 5e for the token. */
	font-weight: var( --wyg-label-weight, 600 );
	letter-spacing: 0.03em;
}

.wyg-plate-essay__themes.wyg-plate-essay__themes .elementor-heading-title {
	/* HO-40: he/ar font-size bump -- see wyg-css-global section 5g. */
	font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) );
	margin: 0;
	font-family: var( --wyg-mono );
	/* HO-39: see wyg-css-global section 5e for the token. */
	font-weight: var( --wyg-label-weight, 600 );
	line-height: 1.55;
	letter-spacing: 0.04em;
}

/* The three colors that used to be here are now on the widgets' own Text Color
   controls -- section 5-i. They were the one real instance of that trap in this
   file: every other color in these components was already on a control, so the
   editor and the front end agreed by construction. The theme list's #C9D4D8 is a
   literal on the control rather than a bound global, and deliberately. It sits on
   beneath a Tan byline and has to recede from it without dropping below 4.5:1 --
   Muted Ink does not clear that on this background and Off White does not
   recede. Same value and same reason as the footer's secondary text. */

/* --------------------------------------------------------------------------
   3. The under block
   Joined to the plate above it: Elementor draws its 1px Rule border on three
   sides and omits the top, so the plate's own 6px Tan edge is the seam.
   -------------------------------------------------------------------------- */

/* The paragraph rhythm is the text widget`s own Paragraph Spacing control, not
   this file. Only the last-child reset stays -- the control applies to every
   paragraph including the last. */

.elementor-widget.wyg-essay-under__abstract.wyg-essay-under__abstract p:last-child {
	margin-block-end: 0;
}

/* The abstract field is empty on both currently published publications, and
   Elementor renders an empty widget rather than omitting it -- which would leave
   the block's own 1.125rem of flex gap above the button with nothing in it.
   Collapsing on :empty keeps the card correct until the abstracts arrive and
   needs no rebuild when they do. */

.wyg-essay-under__abstract.wyg-essay-under__abstract:empty,
.wyg-essay-under__abstract.wyg-essay-under__abstract > .elementor-widget-container:empty {
	display: none;
}

/* The auto-width button rule moved to `wyg-css-shared` (60), HO-49 -- it was
   character-for-character `.wyg-media-card__cta` in `wyg-css-news-media`. */

/* --------------------------------------------------------------------------
   4. The compact row
   The whole row is the link -- the container carries it -- so the two headings
   inside must not fight it for the pointer or for color.
   -------------------------------------------------------------------------- */

.wyg-essay-row.wyg-essay-row {
	position: relative;
	transition: padding-inline-start 0.2s ease;
}

/* The hover BACKGROUND is the container`s own Background (hover) control, bound
   to the Off White global, with its own transition control. Only the inline-start
   shift is here: Elementor has no hover-padding control, and the shift is what
   makes the row feel like a list item rather than a button. */

.wyg-essay-row.wyg-essay-row:hover {
	padding-inline-start: 0.9rem;
}

.wyg-essay-row__title.wyg-essay-row__title .elementor-heading-title,
.wyg-essay-row__author.wyg-essay-row__author .elementor-heading-title {
	margin: 0;
}

/* The trailing arrow is drawn rather than typed. A character inside the row
   would be read out as part of the link text, and the row's accessible name is
   already the essay title and its author. It is positioned inline-end, so it
   moves to the correct side under Hebrew and Arabic on its own -- but the glyph
   still has to be swapped, because U+2192 is a right arrow in any writing
   direction. */

.wyg-essay-row.wyg-essay-row::after {
	content: "\2192";
	position: absolute;
	inset-inline-end: 0.25rem;
	inset-block-start: 50%;
	transform: translateY( -50% );
	color: var( --e-global-color-accent );
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

[dir="rtl"] .wyg-essay-row.wyg-essay-row::after {
	content: "\2190";
}

.wyg-essay-row.wyg-essay-row:hover::after,
.wyg-essay-row.wyg-essay-row:focus-within::after {
	opacity: 1;
}


/* --------------------------------------------------------------------------
   5. Why the chip, byline and theme widgets bind no typography global
   -------------------------------------------------------------------------- */

/* Measured 2026-08-19. Binding a typography global emits a per-element rule at
   0,5,0 carrying every typography property, including the ones the global does
   not define -- those resolve against an undefined variable, become invalid at
   computed-value time, resolve to unset, and still beat a doubled-class rule in
   this file. The plate chips rendered in Nunito Sans with letter-spacing normal
   until the bindings came off. The size is read from the token`s own CSS
   variable here instead, which the kit redefines per breakpoint. Full note in
   wyg-css-homepage section 7. */

/* ---------------------------------------------------------------------------
   8. The *But* essay's title is italic wherever a card renders it

   Gabi, 26 August: the title is an ordinary word doing duty as a proper noun,
   and a reader who meets it upright reads the sentence rather than the name.
   It applies in all three languages -- But, אבל, لكن -- so the rule is keyed to
   the three post IDs and not to the English string.

   `data-postid` on the Unlimited Elements grid item is the only per-post hook a
   card has. Templates 370 and 371 are what the homepage, the Research and
   Publications library and the collection page all render through, so both
   title classes are listed here and one rule covers every card surface.

   0,4,0: the doubled component class plus the attribute selector clears the
   per-post stylesheet's `.elementor-widget-heading .elementor-heading-title` at
   0,2,0, which loads after this file.

   NOT COVERED, deliberately: the related-essays rail on the essay page builds
   its links in PHP with no post id in the markup (44-wyg-publication-detail-
   partials). Post 633 is `future` until 1 October and that box only queries
   `publish`, so nothing renders there yet; giving those links a `data-postid`
   is the fix when it does.
   ------------------------------------------------------------------------ */

.ue-grid-item[data-postid="633"] .wyg-plate-essay__title.wyg-plate-essay__title .elementor-heading-title,
.ue-grid-item[data-postid="875"] .wyg-plate-essay__title.wyg-plate-essay__title .elementor-heading-title,
.ue-grid-item[data-postid="864"] .wyg-plate-essay__title.wyg-plate-essay__title .elementor-heading-title,
.ue-grid-item[data-postid="633"] .wyg-essay-row__title.wyg-essay-row__title .elementor-heading-title,
.ue-grid-item[data-postid="875"] .wyg-essay-row__title.wyg-essay-row__title .elementor-heading-title,
.ue-grid-item[data-postid="864"] .wyg-essay-row__title.wyg-essay-row__title .elementor-heading-title {
	font-style: italic;
}