/* Ariadne Related Posts — frontend block styles.
   Theme-agnostic by design: colors inherit from the theme (color: inherit)
   so the block reads correctly in light or dark mode, with neutral
   rgba(127,127,127,.NN) overlays for borders/backgrounds instead of
   hardcoded hex colors.

   Two independent axes control each card, set via class-frontend.php's
   settings (surfaced through the Customizer):
     - arp-layout-{row|grid|list|masonry} — the OUTER arrangement: a
       horizontally-scrolling row, a wrapping grid, a full vertical stack,
       or CSS-columns masonry.
     - arp-position-{top|left|right|bottom} — each CARD's own internal
       orientation, independent of the outer arrangement above.
   arp-card-style adds a boxed background/border per card (with the
   divider-line look as the alternative when it's off).

   Defensive reset: many themes style `ul li` inside post content
   (spacing, bullets, borders) for ordinary blog lists. Since this block
   renders inside the_content, that theme styling can bleed into our
   markup unless we reset it explicitly — hence the !important on the
   handful of properties themes most commonly override. */

.arp-block {
	--arp-heading-color: inherit;
	--arp-text-color: inherit;
	--arp-accent-color: rgba(127, 127, 127, 0.3);
	--arp-background-color: rgba(127, 127, 127, 0.08);
	--arp-image-size: 64px;
	--arp-image-radius: 8px;
	--arp-heading-size: 1.05em;
	--arp-title-size: 0.9em;
	--arp-title-font-weight: 700;
	--arp-meta-font-weight: 400;
	--arp-font-family: inherit;
	margin: 32px 0;
	color: inherit;
	font-family: var(--arp-font-family, inherit);
}

.arp-block-heading {
	font-size: var(--arp-heading-size, 1.05em);
	font-weight: 700;
	text-transform: uppercase; /* the default (arp-heading-case-uppercase) needs no override rule below; lowercase/capitalize/none do */
	letter-spacing: 0.04em;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--arp-accent-color);
	color: var(--arp-heading-color);
}

.arp-heading-case-lowercase .arp-block-heading {
	text-transform: lowercase;
}

.arp-heading-case-capitalize .arp-block-heading {
	text-transform: capitalize;
}

.arp-heading-case-none .arp-block-heading {
	text-transform: none;
}

/* oversized_pool_fallback = 'placeholder' state — a post whose
   computation was deferred to the background sweep, shown in place of
   the real card list until that finishes. See
   ARP_Frontend::render_pending_placeholder(). */
.arp-block-pending-message {
	margin: 0;
	color: var(--arp-text-color);
	opacity: 0.7;
	font-size: 0.9em;
}

/* Heading style — decorative treatment for the block heading itself,
   curated from a 4-theme audit down to the genuinely distinct patterns.
   'underline' (the default) is intentionally NOT redeclared here — it's
   just the base .arp-block-heading rule above, unchanged, so a site that
   never touches this setting sees no visual difference at all. */

.arp-heading-style-plain .arp-block-heading {
	border-bottom: 0;
	padding-bottom: 0;
}

.arp-heading-style-accent-underline .arp-block-heading {
	position: relative;
	border-bottom: 1px solid color-mix(in srgb, var(--arp-accent-color) 25%, transparent);
	padding-bottom: 10px;
}

.arp-heading-style-accent-underline .arp-block-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 40px;
	height: 2px;
	background: var(--arp-accent-color);
}

.arp-heading-style-left-accent .arp-block-heading {
	position: relative;
	border-bottom: 0;
	padding-bottom: 0;
	padding-left: 13px;
}

.arp-heading-style-left-accent .arp-block-heading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--arp-accent-color);
}

/* --arp-cta-text-color is the SAME auto-picked black/white-by-contrast
   value the CTA button already uses against this identical accent-color
   background (see appearance_style_attr()) — reused rather than
   duplicated: a heading sitting on a solid accent-color chip needs
   guaranteed-readable text more than it needs to respect an arbitrary
   custom heading color that might not contrast. */
.arp-heading-style-pill .arp-block-heading {
	display: inline-block;
	border-bottom: 0;
	padding: 6px 14px;
	background: var(--arp-accent-color);
	color: var(--arp-cta-text-color, #fff);
	border-radius: 4px;
}

.arp-heading-style-boxed .arp-block-heading {
	border-bottom: 0;
	padding: 10px 14px;
	background: color-mix(in srgb, var(--arp-accent-color) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--arp-accent-color) 25%, transparent);
	border-radius: 6px;
}

.arp-heading-style-trailing-rule .arp-block-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 0;
	padding-bottom: 0;
}

.arp-heading-style-trailing-rule .arp-block-heading::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: color-mix(in srgb, var(--arp-accent-color) 25%, transparent);
}

/* flanked — centered text with a horizontal rule flanking each side; the
   look Inline's own "RELATED" label always had, now offered as an 8th
   option for the block's own heading too. Needs the inner span
   (.arp-block-heading-inner, wrapping just the text) since the flanking
   lines size themselves to the TEXT's own width, not the full heading
   element's. */
.arp-heading-style-flanked .arp-block-heading {
	text-align: center;
	border-bottom: 0;
	padding-bottom: 0;
}

.arp-heading-style-flanked .arp-block-heading-inner {
	position: relative;
	display: inline-block;
	padding: 0 16px;
}

.arp-heading-style-flanked .arp-block-heading-inner::before,
.arp-heading-style-flanked .arp-block-heading-inner::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 100vw;
	max-width: 300px;
	border-top: 1px solid color-mix(in srgb, var(--arp-accent-color) 40%, transparent);
}

.arp-heading-style-flanked .arp-block-heading-inner::before {
	right: 100%;
}

.arp-heading-style-flanked .arp-block-heading-inner::after {
	left: 100%;
}

/* Optional heading icon — inline SVG (arp_get_icon_svg()). 'none' (the
   default) means this element never renders at all; --arp-icon-color
   falls back to the same accent color the heading's own underline uses,
   so an icon looks coordinated with zero extra configuration until a
   site explicitly overrides it. */
.arp-block-heading-icon {
	margin-right: 6px;
	color: var(--arp-icon-color, var(--arp-accent-color));
}

/* Sizes/aligns the inline SVG itself — em-based so it scales with
   whatever font-size the wrapping span (heading icon or card badge)
   already has. */
.arp-icon-svg svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
}

.arp-block ul.arp-card-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 0 4px !important;
	display: flex;
	gap: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	/* A themed scrollbar for the Row layout's horizontal scroll — Firefox
	   via scrollbar-width/-color, WebKit/Blink via ::-webkit-scrollbar. */
	scrollbar-width: thin;
	scrollbar-color: rgba(127, 127, 127, 0.5) transparent;
}

/* Row layout's own top/bottom breathing room — matches the card list's
   own horizontal scroll padding, and stops the birthday glow / boxed-card
   shadow from clipping against the container's own edge. */
.arp-block.arp-layout-row ul.arp-card-list {
	margin: -20px 0 -20px !important;
	padding: 20px 0 24px !important;
}

.arp-block ul.arp-card-list::-webkit-scrollbar {
	height: 6px;
}

.arp-block ul.arp-card-list::-webkit-scrollbar-track {
	background: transparent;
}

.arp-block ul.arp-card-list::-webkit-scrollbar-thumb {
	background-color: rgba(127, 127, 127, 0.5);
	border-radius: 999px;
}

.arp-block ul.arp-card-list::-webkit-scrollbar-thumb:hover {
	background-color: rgba(127, 127, 127, 0.75);
}

.arp-block li.arp-card {
	list-style: none !important;
	margin: 0 !important;
	box-sizing: border-box;
	/* Containing block for .arp-card-permalink's position:absolute stretch
	   (see that rule, and the markup comment in class-frontend.php) —
	   needs to be set HERE specifically, not on .arp-card-link or
	   .arp-card-body, so "click anywhere on the card" always covers the
	   full card regardless of what else inside it might get its own
	   position:absolute in the future. */
	position: relative;
	/* Without an explicit z-index here, this element doesn't establish its
	   own stacking context — so .arp-card-image's z-index:-1 (below) would
	   escape past this <li> entirely and paint behind whatever the
	   nearest actual stacking-context ancestor's background is. Pinning
	   z-index here contains the negative value to this card locally. */
	z-index: 0;
	/* flex-grow: 0 deliberately — a block with only 1-2 results (a thin
	   candidate pool) should render those cards at the same fixed size as
	   a full block, not stretch them to fill the row.
	   flex-shrink: 0 (changed from 1, 2026-08-16) — cards used to shrink
	   down to min-width before the row started scrolling, which meant a
	   block with many results (6+) squeezed every card's meta line
	   (date · category · tag · author) into an uncomfortably narrow
	   column, wrapping across many cramped lines, before scrolling ever
	   kicked in — flexbox always tries to shrink items to fit BEFORE
	   letting a container overflow/scroll. Pinning the width instead
	   means the row scrolls immediately once cards stop fitting, at a
	   comfortable, readable width, rather than squeezing content first.
	   This matches "Row"'s own stated purpose (horizontal, scrolls if it
	   doesn't fit) — Grid/Masonry already handle the "adapt to narrow
	   screens" case by changing column count, so Row doesn't need to
	   double as a second responsive mechanism too. */
	flex: 0 0 160px;
	padding: 0 16px;
	border-left: 1px solid var(--arp-accent-color);
	scroll-snap-align: start;
}

.arp-block li.arp-card:first-child {
	border-left: 0;
	padding-left: 0;
}

.arp-block li.arp-card:last-child {
	padding-right: 0;
}

/* Row layout + image-beside-text — wide enough for a fixed image plus a
   real text column (title + meta) next to it, not just a title squeezed
   into whatever's left over. position-bottom isn't included — its image
   is still full-width/aspect-ratio-square like position-top, just
   reordered, not a fixed side-by-side box. */
.arp-block.arp-layout-row.arp-position-left li.arp-card,
.arp-block.arp-layout-row.arp-position-right li.arp-card {
	flex-basis: 280px;
	min-width: 220px;
	max-width: 340px;
}

.arp-card-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

/* The "stretched link" — an empty anchor covering the whole card (see the
   markup comment in class-frontend.php's render_block()). position:
   absolute makes it win hit-testing over the static content around it
   even though it's visually invisible, so "click anywhere on the card"
   keeps working. z-index:0 is deliberate — .arp-card-meta-category/-tag/
   -author and .arp-card-eyebrow opt back OUT of that by being real links
   themselves, at z-index:1, so THEY stay independently clickable instead
   of triggering this one. */
.arp-card-permalink {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.arp-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* lets long titles ellipsize/wrap instead of forcing the row wider
	   than its column */
	min-width: 0;
	/* Without this, arp-align-center/right's align-items override lets
	   this shrink-wrap to its own content's natural width — harmless for
	   a title that wraps, but the meta line's white-space rules mean its
	   "natural width" could be the entire line. width:100% pins this to
	   the card's real width regardless of align-items, so centering/
	   right-aligning still centers/right-aligns the TEXT within that
	   width instead of moving the whole box. */
	width: 100%;
	/* box-sizing: border-box (added 2026-08-16) — without it, width:100%
	   is content-box sized, so any padding added to THIS element by
	   another rule (image_edge_to_edge's ".arp-card-style.arp-image-edge
	   .arp-card-body { padding: 0 16px 12px; }" below) adds on TOP of the
	   100% instead of eating into it, making this box 32px wider than its
	   own card. Harmless in Row (the row's own overflow-x:auto silently
	   grew its scrollable width by the same amount) and apparently
	   harmless in Masonry, but Grid sets overflow-x: visible (see that
	   layout's own rule) specifically because it isn't meant to scroll —
	   so the same 32px instead visibly bled out of each card uncontained.
	   Confirmed via direct measurement: every card's scrollWidth was
	   exactly 32px past its clientWidth, on any block with both
	   arp-card-style and image_edge_to_edge on (the default) in Grid
	   layout — regardless of viewport width, which is why it showed on
	   both mobile and desktop. */
	box-sizing: border-box;
}

.arp-card-image {
	display: block;
	width: 100%;
	aspect-ratio: var(--arp-image-aspect-ratio, 1 / 1);
	min-height: 0;
	border-radius: var(--arp-image-radius, 8px);
	background: rgba(127, 127, 127, 0.12);
	flex-shrink: 0;
	/* Deliberately NO overflow: hidden here (moved to the <img> below) —
	   this element is also the positioning context for the numbered/icon
	   badges, and a circular image_shape (border-radius: 50%) would clip
	   anything positioned in this box's own square corners. The <img>
	   still clips to the exact same rounded/circular shape on its own;
	   only badges escape the clip. */
	/* min-height: 0 (added 2026-08-16) fixes a real Chromium flexbox bug:
	   this box is a flex item inside .arp-card-link's column flex
	   container. A flex item's default min-height is "auto", which lets
	   its content's intrinsic size win over aspect-ratio once content is
	   present — and the <img> below (height: 100%) supplies exactly that
	   intrinsic size once it finishes loading. The result: a portrait
	   source image quietly stretched this box to the image's OWN 1:3
	   ratio instead of the intended 1:1 square, so different cards ended
	   up different heights depending on their source image's dimensions,
	   even though every other setting (image_size, image_shape) was
	   identical. Confirmed via isolated reproduction — the box measured
	   correctly square only if read BEFORE the image finished loading;
	   after load it silently grew to the image's own aspect ratio.
	   min-height: 0 overrides the "auto" default so aspect-ratio wins as
	   intended, without needing overflow: hidden (which would break the
	   badge-corner-clipping fix documented above). */
}

.arp-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Matches the parent's own border-radius exactly (including the
	   circular-shape override below) — see the parent's own comment for
	   why the clip lives here instead. */
	border-radius: inherit;
	overflow: hidden;
}

/* image_shape: circle overrides the adjustable radius above with a true
   circle. */
.arp-block.arp-shape-circle .arp-card-image {
	border-radius: 50%;
}

/* A circular avatar stretched to 100% of the card's width (position-top's
   default sizing) looks fine at 4+ narrow grid columns, but balloons into
   an oversized, disproportionate circle once there's more room per card.
   Capped and centered instead, only for position-top — position-left/
   right already size the image via the fixed --arp-image-size custom
   property, not 100% width. */
.arp-block.arp-shape-circle.arp-position-top .arp-card-image {
	max-width: 180px;
	margin: 0 auto;
}

.arp-card-title {
	/* Every direct child of .arp-card-body (a column flexbox) needs its
	   OWN min-width: 0, not just the parent's — a flex item's default
	   min-width:auto overrides text-overflow/overflow rules on the item
	   itself, so without this a long unbroken title can force the item
	   (and the whole fixed-width card) to overflow instead of wrapping. */
	min-width: 0;
	font-size: var(--arp-title-size);
	line-height: 1.35;
	/* --arp-title-color/--arp-title-font-family are per-block overrides,
	   falling back to the shared --arp-text-color/--arp-font-family when
	   unset. --arp-title-font-weight is always set (defaults to 700 —
	   bold) so a card's title reads as the clear focal point over its
	   lighter-weight meta line below. */
	color: var(--arp-title-color, var(--arp-text-color));
	font-family: var(--arp-title-font-family, var(--arp-font-family, inherit));
	font-weight: var(--arp-title-font-weight, 700);
	/* Only the color property, not a blanket `all` — so a hover effect
	   (see arp-title-hover-* further down) transitions smoothly instead
	   of snapping, without risking an accidental transition on something
	   layout-affecting. */
	transition: color 0.15s ease-in-out;
}

.arp-title-small { --arp-title-size: 0.8em; }
.arp-title-medium { --arp-title-size: 0.9em; }
.arp-title-large { --arp-title-size: 1.05em; }

.arp-heading-small { --arp-heading-size: 0.9em; }
.arp-heading-medium { --arp-heading-size: 1.05em; }
.arp-heading-large { --arp-heading-size: 1.3em; }

/* Divider lines toggle — the plain (non-card_style) look's between-card
   vertical rule, and the block heading's underline. Both share one "Show
   divider lines" setting since they're the same visual language.
   Deliberately scoped to :not(.arp-card-style) — a boxed card's border
   already fully encloses it on all 4 sides. */
.arp-no-dividers:not(.arp-card-style) li.arp-card {
	border-left: 0 !important;
	padding-left: 16px;
}

.arp-no-dividers:not(.arp-card-style) li.arp-card:first-child {
	padding-left: 0;
}

.arp-no-dividers .arp-block-heading {
	border-bottom: 0;
	padding-bottom: 0;
}

/* "Show divider lines" also suppresses the LINE-based heading styles —
   those are dividers too, just not border-bottom ones. Doesn't touch
   'pill'/'boxed', which are fills a site owner opted into deliberately. */
.arp-no-dividers .arp-block-heading::after,
.arp-no-dividers .arp-block-heading::before,
.arp-no-dividers .arp-block-heading-inner::after,
.arp-no-dividers .arp-block-heading-inner::before {
	content: none;
}

/* flanked's lines are on .arp-inline-related-label span, not the label
   itself — the generic rule above only targets .arp-block-heading(-inner),
   so this needs its own line here too. */
.arp-no-dividers .arp-inline-related-label span::after,
.arp-no-dividers .arp-inline-related-label span::before {
	content: none;
}

.arp-no-dividers.arp-heading-style-trailing-rule .arp-block-heading {
	display: block;
}

.arp-no-dividers.arp-heading-style-left-accent .arp-block-heading {
	padding-left: 0;
}

.arp-card-excerpt {
	display: block;
	min-width: 0; /* see .arp-card-title above */
	font-size: 0.8em;
	line-height: 1.4;
	opacity: 0.75;
	color: var(--arp-text-color);
}

.arp-card-meta {
	display: block;
	min-width: 0;
	font-size: 0.75em;
	opacity: 0.7;
	/* --arp-meta-color/--arp-meta-font-family — see .arp-card-title's
	   identical fallback-chain comment above. */
	color: var(--arp-meta-color, var(--arp-text-color));
	font-family: var(--arp-meta-font-family, var(--arp-font-family, inherit));
	white-space: normal;
	line-height: 1.5;
	/* overflow-wrap: break-word (added 2026-08-16) — word-wrapping alone
	   (white-space: normal, above) only breaks BETWEEN words; it never
	   breaks a single word early just because there's barely enough room
	   left on the current line. At Grid's exact column-count breakpoints
	   (auto-fill recalculating from N to N+1 columns), the last word
	   before a wrap — usually a tag or category name — sometimes just
	   barely doesn't fit in the last few px of its line, and without
	   this, the browser still places a few px of it there anyway rather
	   than pushing the whole word down, so it juts out past the card.
	   Confirmed via direct width-sweep testing: the longer the tag/
	   category text, the larger the overflow (2px with a short tag,
	   10px with a long one like "Reality TV Star, Singer") — a strong
	   signal it's a wrap-point issue, not a track-sizing one. Row layout
	   never showed this (only Grid recalculates a discrete column count
	   at specific widths; Row's cards stay a fixed width regardless of
	   viewport). break-word only kicks in on this rare, narrow-margin
	   case — normal-width rendering is unaffected. */
	overflow-wrap: break-word;
}

.arp-card-meta-sep {
	margin: 0 5px;
}

/* Title hover effect — :hover works regardless of which element the
   pointer is actually over (it's purely geometric), so this still fires
   from anywhere on the card. :focus doesn't carry over the same way
   (.arp-card-link is a <span> now, not the focusable element) — :has()
   reaches back up to the actual focused element, .arp-card-permalink,
   instead. 'underline' (the default) reuses this exact selector pair
   unscoped; 'none'/'color'/'underline-color' are scoped to their own
   arp-title-hover-{value} class on the block wrapper.

   Both HOVER and FOCUS must use :has(.arp-card-permalink:*) — NOT a plain
   .arp-card-link:hover. The stretched-link permalink is a SIBLING of
   .arp-card-link, not an ancestor of the title, so it never triggers
   .arp-card-link:hover on its own. --arp-hover-color falls back to
   --arp-accent-color when the "Hover color" override isn't set. */
.arp-title-hover-underline li.arp-card:has(.arp-card-permalink:hover) .arp-card-title,
.arp-title-hover-underline li.arp-card:has(.arp-card-permalink:focus) .arp-card-title {
	text-decoration: underline;
}

.arp-title-hover-color li.arp-card:has(.arp-card-permalink:hover) .arp-card-title,
.arp-title-hover-color li.arp-card:has(.arp-card-permalink:focus) .arp-card-title,
.arp-title-hover-underline-color li.arp-card:has(.arp-card-permalink:hover) .arp-card-title,
.arp-title-hover-underline-color li.arp-card:has(.arp-card-permalink:focus) .arp-card-title {
	color: var(--arp-hover-color, var(--arp-accent-color));
}

.arp-title-hover-underline-color li.arp-card:has(.arp-card-permalink:hover) .arp-card-title,
.arp-title-hover-underline-color li.arp-card:has(.arp-card-permalink:focus) .arp-card-title {
	text-decoration: underline;
}

/* Text alignment */
.arp-block.arp-align-center .arp-card-link {
	align-items: center;
	text-align: center;
}

.arp-block.arp-align-right .arp-card-link {
	align-items: flex-end;
	text-align: right;
}

/* Image position: left — the image sits beside the text at a fixed size
   (--arp-image-size), independent of whichever outer layout is active.
   align-items: flex-start (not center) — with a longer title/excerpt/meta
   stack, centering pins the image to the vertical middle of the whole
   text block, which reads oddly once there's more than a line or two of
   text; anchoring both to the top instead reads as a normal image+text
   pairing regardless of how much text there is. */
.arp-block.arp-position-left .arp-card-link {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}

.arp-block.arp-position-left .arp-card-image {
	width: var(--arp-image-size);
	height: var(--arp-image-size);
	flex: 0 0 var(--arp-image-size);
	aspect-ratio: auto;
}

/* Image position: right — mirror of "left", image comes after the text. */
.arp-block.arp-position-right .arp-card-link {
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 14px;
}

.arp-block.arp-position-right .arp-card-image {
	width: var(--arp-image-size);
	height: var(--arp-image-size);
	flex: 0 0 var(--arp-image-size);
	aspect-ratio: auto;
}

/* Image position: bottom — text first, image last. The base .arp-card-link
   is already flex-direction:column with image-then-body DOM order (that's
   what 'top' is); column-reverse flips the VISUAL order without touching
   the DOM. */
.arp-block.arp-position-bottom .arp-card-link {
	flex-direction: column-reverse;
}

/* Text-only list — no image at all, regardless of image_position. */
.arp-block.arp-no-image .arp-card-image {
	display: none;
}

/* Category eyebrow */
.arp-card-eyebrow {
	display: block;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--arp-accent-color);
	/* A real link (category archive) — needs to sit above
	   .arp-card-permalink to stay independently clickable, and needs its
	   own reset since browsers apply default link-blue + underline to <a>
	   regardless of an inherited color. */
	position: relative;
	z-index: 1;
	text-decoration: none;
}

/* Cornerstone content — see ARP_Related_Posts::assemble()'s reserved
   slot. In the card body (not overlaid on the image) so it never
   collides with the numbered-rank or icon-overlay badges, which both
   already claim the image's corners when enabled. */
.arp-card-cornerstone-badge {
	display: inline-block;
	margin-bottom: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--arp-accent-color);
	color: var(--arp-cta-text-color, #fff);
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.arp-card-eyebrow:hover {
	text-decoration: underline;
}

/* Same reasoning as .arp-card-eyebrow above — category/tag/author in the
   meta line are real links too. Date stays a plain span. */
.arp-card-meta-category,
.arp-card-meta-tag,
.arp-card-meta-author {
	position: relative;
	z-index: 1;
	color: inherit;
	text-decoration: none;
}

/* Bold author name — reads as a proper byline ("By NAME · DATE") when
   meta_position is 'above' the title with only date/author enabled. */
.arp-card-meta-author {
	font-weight: 600;
}

.arp-card-meta-category:hover,
.arp-card-meta-tag:hover,
.arp-card-meta-author:hover {
	text-decoration: underline;
}

/* Pill-style category/tag meta (meta_pill_style) — a small rounded
   background chip instead of a plain inline text link. Deliberately
   category/tag only, not author/date — those read fine as plain text and
   a page full of pills for every meta field would be visual noise.
   --arp-meta-pill-color falls back to a neutral tint of the accent color
   so pills look reasonable with zero configuration; --arp-meta-pill-radius
   defaults to 999px (get_block_style()'s own default) which reads as a
   fully-rounded pill at this font-size regardless of text length. Scoped
   by .arp-meta-pill on the block/inline root rather than requiring
   .arp-block/.arp-inline-related specifically, since get_card_meta_html()
   emits the exact same .arp-card-meta-category/-tag markup in both
   contexts (see that method's own doc comment). */
.arp-meta-pill .arp-card-meta-category,
.arp-meta-pill .arp-card-meta-tag {
	display: inline-block;
	padding: 2px 10px;
	background: var(--arp-meta-pill-color, color-mix(in srgb, var(--arp-accent-color) 18%, transparent));
	border-radius: var(--arp-meta-pill-radius, 999px);
	text-decoration: none;
}

.arp-meta-pill .arp-card-meta-category:hover,
.arp-meta-pill .arp-card-meta-tag:hover {
	/* An underline across a pill's own background reads as a strikethrough
	   more than a link hover state — darken the background instead. */
	text-decoration: none;
	filter: brightness(0.92);
}

/* Numbered badge — sits on the image when there is one, or inline in the
   card body (handled by class-frontend.php) when there isn't. */
.arp-card-image {
	position: relative; /* anchors an absolutely-positioned badge */
	/* Without this, a positioned element with z-index:auto still competes
	   in the stacking order against .arp-card-permalink's z-index:0 and
	   wins on DOM order alone. Pinning this below the permalink lets
	   clicks pass through to it again, while the badge (z-index: 1)
	   still renders above the <img> itself. */
	z-index: -1;
}

.arp-card-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
}

/* Same icon repeated on each card's own image — top-RIGHT specifically
   (.arp-card-badge, the numbered-ranking badge, already owns top-left),
   so both can be enabled together without overlapping. */
.arp-card-icon-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.75);
	color: var(--arp-icon-color, #fff);
	font-size: 15px;
}

/* A fixed 6px corner inset sits flush against a SQUARE image's actual
   corner, but a CIRCLE inscribed in that same square doesn't reach its
   corners — the circle only touches the square's 4 edge-midpoints,
   leaving the corners empty. top/right (or left) at 14.6% place the
   badge's OWN CENTER exactly on the circle's boundary at a 45° corner
   angle — for a circle inscribed in a square, that point sits
   (1 - sin45°)/2 ≈ 14.6% of the square's side in from each edge, the same
   math for every image size. translate(±50%, -50%) then shifts it by
   exactly half its own width/height to convert corner-position into
   center-position. */
.arp-block.arp-shape-circle .arp-card-badge {
	top: 14.6%;
	left: 14.6%;
	transform: translate(-50%, -50%);
}

.arp-block.arp-shape-circle .arp-card-icon-badge,
.arp-inline-shape-circle .arp-card-icon-badge {
	top: 14.6%;
	right: 14.6%;
	transform: translate(50%, -50%);
}

.arp-card-body > .arp-card-badge {
	position: static;
	display: inline-flex;
	margin-bottom: 4px;
}

/* CTA button — --arp-cta-text-color is PHP-computed per the site's actual
   accent color, not always white; #fff here is only the fallback for the
   rare case accent_color itself is unset. */
.arp-card-cta {
	display: inline-block;
	margin-top: 6px;
	padding: 6px 14px;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--arp-cta-text-color, #fff);
	background: var(--arp-accent-color);
	border-radius: 4px;
	width: fit-content;
}

/* Text-link variant — a lighter-weight call to action than a full boxed
   button: no background/padding/box, just colored text in the accent
   color with an underline on hover. */
.arp-card-cta-text {
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--arp-accent-color);
	text-decoration: none;
}

.arp-card-cta-text:hover {
	text-decoration: underline;
}

/* Card style: boxed background/border per card, replacing the plain
   divider-line look. Gap between cards comes from the container instead
   of a shared border once each card is its own visual box. */
.arp-block.arp-card-style ul.arp-card-list {
	gap: 16px;
}

.arp-block.arp-card-style li.arp-card {
	border-left: 0;
	padding: 12px 16px;
	background: var(--arp-background-color);
	border-radius: 8px;
}

/* Border style — only meaningful alongside arp-card-style. 'sharp' is the
   original always-on 1px solid look, kept as the default so nothing
   changes for a site that never touches this setting. */
.arp-block.arp-card-style.arp-border-sharp li.arp-card {
	border: 1px solid var(--arp-accent-color);
}

.arp-block.arp-card-style.arp-border-soft li.arp-card {
	border: 1px solid color-mix(in srgb, var(--arp-accent-color) 40%, transparent);
}

.arp-block.arp-card-style.arp-border-none li.arp-card {
	border: 0;
}

.arp-block.arp-card-style.arp-card-shadow li.arp-card {
	/* Independent of border_style — combines with sharp/soft/none border
	   or stands alone with 'none' for a pure background+shadow card. */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.arp-block.arp-card-style li.arp-card:first-child,
.arp-block.arp-card-style li.arp-card:last-child {
	padding: 12px 16px; /* override the divider-look's first/last-child padding reset above */
}

/* Edge-to-edge image — the image bleeds to the card's own left/right/top
   edges instead of sitting inset with the card's normal padding on every
   side. The card's own padding moves onto .arp-card-body instead, so the
   text content keeps the same inset it always had; only the image loses
   it. Explicit :first-child/:last-child variants (not just the bare
   selector), placed AFTER every padding override above so this correctly
   wins the same-specificity ties. */
.arp-block.arp-card-style.arp-image-edge li.arp-card,
.arp-block.arp-card-style.arp-image-edge li.arp-card:first-child,
.arp-block.arp-card-style.arp-image-edge li.arp-card:last-child {
	padding: 0;
	border-radius: var(--arp-image-radius, 8px);
}

.arp-block.arp-card-style.arp-image-edge .arp-card-body {
	padding: 0 16px 12px;
}

.arp-block.arp-card-style.arp-image-edge .arp-card-image {
	border-radius: var(--arp-image-radius, 8px) var(--arp-image-radius, 8px) 0 0;
}

/* Layout: grid — wraps to multiple rows, never scrolls horizontally.
   arp-grid-cols-desktop-auto (the default) keeps this original behavior:
   as many 160px-minimum columns as fit. The 2/3/4 variants below override
   it with an exact, fixed count instead. */
.arp-block.arp-layout-grid ul.arp-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	overflow-x: visible;
}

.arp-block.arp-layout-grid.arp-grid-cols-desktop-2 ul.arp-card-list {
	grid-template-columns: repeat(2, 1fr);
}

.arp-block.arp-layout-grid.arp-grid-cols-desktop-3 ul.arp-card-list {
	grid-template-columns: repeat(3, 1fr);
}

.arp-block.arp-layout-grid.arp-grid-cols-desktop-4 ul.arp-card-list {
	grid-template-columns: repeat(4, 1fr);
}

.arp-block.arp-layout-grid:not(.arp-card-style) ul.arp-card-list {
	gap: 16px;
}

.arp-block.arp-layout-grid li.arp-card {
	min-width: 0;
	max-width: none;
}

.arp-block.arp-layout-grid:not(.arp-card-style) li.arp-card {
	border-left: 0;
	padding: 0 16px;
}

/* Layout: masonry — like Grid, but each card keeps its own natural height
   instead of stretching to match the tallest in its row. CSS-only, no
   JS: multi-column layout. Reading order flows DOWN each column before
   moving to the next, rather than left-to-right across a row — the
   deliberate tradeoff for not shipping a layout script just to preserve
   strict reading order. arp-grid-cols-desktop (shared with Grid) sets the
   column COUNT here too — 'auto' falls back to a fixed default (3) since
   CSS columns has no equivalent to grid's own auto-fill/minmax. */
.arp-block.arp-layout-masonry ul.arp-card-list {
	display: block;
	column-count: 3;
	column-gap: 16px;
	overflow-x: visible;
}

.arp-block.arp-layout-masonry.arp-grid-cols-desktop-2 ul.arp-card-list {
	column-count: 2;
}

.arp-block.arp-layout-masonry.arp-grid-cols-desktop-3 ul.arp-card-list {
	column-count: 3;
}

.arp-block.arp-layout-masonry.arp-grid-cols-desktop-4 ul.arp-card-list {
	column-count: 4;
}

.arp-block.arp-layout-masonry li.arp-card {
	/* break-inside:avoid is what stops a card from being sliced across two
	   columns. */
	display: block;
	width: 100%;
	min-width: 0;
	max-width: none;
	break-inside: avoid;
	/* !important required — the base .arp-block li.arp-card rule sets
	   margin: 0 !important, which otherwise always wins regardless of
	   this rule's higher specificity or later position in the file. */
	margin-bottom: 16px !important;
}

.arp-block.arp-layout-masonry:not(.arp-card-style) li.arp-card {
	border-left: 0;
	padding: 0 16px;
}

/* Edge-to-edge WITHOUT a boxed card — the plain divider look still has
   its own horizontal padding around the image in Row/Grid/Masonry, so
   bleeding to the card's edges is just as meaningful there. Placed AFTER
   every :not(.arp-card-style) padding rule above so this correctly wins
   the same-specificity ties. List's plain look is already flush and
   never gets the arp-image-edge class in the first place. */
.arp-block:not(.arp-card-style).arp-image-edge li.arp-card,
.arp-block:not(.arp-card-style).arp-image-edge li.arp-card:first-child,
.arp-block:not(.arp-card-style).arp-image-edge li.arp-card:last-child {
	padding-left: 0;
	padding-right: 0;
}

.arp-block:not(.arp-card-style).arp-image-edge .arp-card-image {
	border-radius: var(--arp-image-radius, 8px) var(--arp-image-radius, 8px) 0 0;
}

/* Layout: list — vertical, one card per row */
.arp-block.arp-layout-list ul.arp-card-list {
	display: block;
	overflow-x: visible;
}

.arp-block.arp-layout-list li.arp-card {
	min-width: 0;
	max-width: none;
	margin-bottom: 14px !important;
}

.arp-block.arp-layout-list:not(.arp-card-style) li.arp-card {
	border-left: 0;
	padding: 0;
}

/* List gets a genuinely bigger, taller thumbnail than the small
   fixed-size square Row/position-left share by default. align-self:
   stretch matches the image's height to the row's own height instead of
   a fixed square. Scoped to arp-position-left specifically — this
   plugin's List layout does NOT force image_position to 'left' (see the
   arp-layout-list.arp-position-top rule just below), so this stays
   scoped to avoid breaking that legitimate combination. */
.arp-block.arp-layout-list.arp-position-left .arp-card-image {
	width: 180px;
	height: auto;
	flex: 0 0 180px;
	aspect-ratio: auto;
	align-self: stretch;
}

.arp-block.arp-layout-list.arp-position-left .arp-card-link {
	gap: 20px;
}

@media (max-width: 480px) {
	.arp-block.arp-layout-list.arp-position-left .arp-card-image {
		width: 96px;
		flex-basis: 96px;
	}

	.arp-block.arp-layout-list.arp-position-left .arp-card-link {
		gap: 12px;
	}
}

/* List layout's own divider — a horizontal rule between rows, the List
   equivalent of Row's vertical border-left line. */
.arp-block.arp-layout-list:not(.arp-card-style):not(.arp-no-dividers) li.arp-card:not(:last-child) {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--arp-accent-color);
}

.arp-block.arp-layout-list li.arp-card:last-child {
	margin-bottom: 0 !important;
}

.arp-block.arp-layout-list.arp-position-top .arp-card-title {
	font-size: 1em;
}

/* Row style: divided — compact thumbnail-left rows with a thin divider
   between them, tighter rhythm than the default Card row style.
   Scoped :not(.arp-card-style) — with card_style ON, li.arp-card's own
   14px margin-bottom is the ONLY thing spacing boxed cards apart, and
   zeroing it unconditionally collapsed boxed rows flush against each
   other with no gap. */
.arp-block.arp-layout-list.arp-row-style-divided:not(.arp-card-style) li.arp-card {
	margin-bottom: 0 !important;
}

.arp-block.arp-layout-list.arp-row-style-divided .arp-card-image {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	aspect-ratio: 1 / 1;
	align-self: center;
}

.arp-block.arp-layout-list.arp-row-style-divided .arp-card-link {
	gap: 14px;
	padding: 10px 0;
}

.arp-block.arp-layout-list.arp-row-style-divided:not(.arp-card-style):not(.arp-no-dividers) li.arp-card:not(:last-child) {
	border-bottom: 1px solid var(--arp-accent-color);
}

.arp-block.arp-layout-list.arp-row-style-divided li.arp-card:first-child .arp-card-link {
	padding-top: 0;
}

.arp-block.arp-layout-list.arp-row-style-divided li.arp-card:last-child .arp-card-link {
	padding-bottom: 0;
}

/* Row style: numbered — a ranked "Top 10"-style list. No image (the PHP
   side skips emitting .arp-card-image entirely for this style) — instead
   the existing rank-badge markup renders inline in the body. Title-only:
   excerpt and the meta line are hidden. */
.arp-block.arp-layout-list.arp-row-style-numbered:not(.arp-card-style) li.arp-card {
	margin-bottom: 0 !important;
}

.arp-block.arp-layout-list.arp-row-style-numbered .arp-card-link {
	padding: 10px 0;
}

.arp-block.arp-layout-list.arp-row-style-numbered .arp-card-body {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.arp-block.arp-layout-list.arp-row-style-numbered .arp-card-body > .arp-card-badge {
	flex: 0 0 auto;
	background: transparent;
	color: var(--arp-accent-color);
	font-size: 1.15em;
	width: auto;
	height: auto;
	margin-bottom: 0;
}

.arp-block.arp-layout-list.arp-row-style-numbered .arp-card-excerpt,
.arp-block.arp-layout-list.arp-row-style-numbered .arp-card-meta {
	display: none;
}

.arp-block.arp-layout-list.arp-row-style-numbered:not(.arp-card-style):not(.arp-no-dividers) li.arp-card:not(:last-child) {
	border-bottom: 1px solid var(--arp-accent-color);
}

/* Row style: boxed — the whole list (heading + rows together) wrapped in
   one border, NYT-inspired. A DIFFERENT box than card_style's per-card
   boxed look — this one is per-BLOCK. */
.arp-block.arp-layout-list.arp-row-style-boxed {
	border: 1px solid var(--arp-accent-color);
	border-radius: 6px;
	padding: 4px 16px;
}

.arp-block.arp-layout-list.arp-row-style-boxed .arp-card-image {
	width: 88px;
	height: 88px;
	flex: 0 0 88px;
	aspect-ratio: 1 / 1;
	align-self: center;
}

.arp-block.arp-layout-list.arp-row-style-boxed .arp-card-link {
	gap: 16px;
	padding: 12px 0;
}

.arp-block.arp-layout-list.arp-row-style-boxed:not(.arp-card-style) li.arp-card {
	margin-bottom: 0 !important;
}

.arp-block.arp-layout-list.arp-row-style-boxed:not(.arp-card-style):not(.arp-no-dividers) li.arp-card:not(:last-child) {
	border-bottom: 1px solid var(--arp-accent-color);
}

/* Image size — only visually meaningful when arp-position-left is
   active; arp-position-top images always fill their column via
   aspect-ratio regardless of this setting. */
.arp-block.arp-image-small {
	--arp-image-size: 48px;
}

.arp-block.arp-image-large {
	--arp-image-size: 96px;
}

/* Tablet grid-column override — 481-782px, the range between Mobile's own
   breakpoint below and the unscoped desktop rules above. 782px matches
   wp-admin's own tablet breakpoint. Equal specificity to the
   arp-grid-cols-desktop-* rules above, so being LATER in the file is what
   makes this win in this range. */
@media (min-width: 481px) and (max-width: 782px) {
	.arp-block.arp-layout-grid.arp-grid-cols-tablet-2 ul.arp-card-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.arp-block.arp-layout-grid.arp-grid-cols-tablet-3 ul.arp-card-list {
		grid-template-columns: repeat(3, 1fr);
	}
	.arp-block.arp-layout-masonry.arp-grid-cols-tablet-2 ul.arp-card-list {
		column-count: 2;
	}
	.arp-block.arp-layout-masonry.arp-grid-cols-tablet-3 ul.arp-card-list {
		column-count: 3;
	}
}

@media (max-width: 480px) {
	.arp-block.arp-position-top:not(.arp-layout-list) li.arp-card {
		min-width: 100px;
	}

	/* :not(.arp-image-edge) — split out from the min-width rule above
	   because ONLY this padding half conflicts with edge-to-edge: this
	   rule and the edge-to-edge padding:0 rules earlier in the file tie
	   at equal (0,4,1) specificity for any card that isn't :first-child/
	   :last-child (those get boosted to (0,5,1) and were already safe);
	   being later in the file made THIS rule win the tie on mobile,
	   silently restoring 10px left/right padding on every card in between
	   and breaking edge-to-edge for exactly the cards in the middle of
	   the list. Excluding arp-image-edge here is more correct than yet
	   another specificity-order patch: this rule's own purpose (breathing
	   room around a snug image on a narrow phone) is exactly what edge-
	   to-edge is opting out of. min-width above stays unconditional — the
	   grid-column safeguard it provides is unrelated to the padding fight. */
	.arp-block.arp-position-top:not(.arp-layout-list):not(.arp-image-edge) li.arp-card {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Grid layout's default repeat(auto-fill, minmax(160px, 1fr)) — and an
	   explicit arp-grid-cols-desktop-2/3/4 override — can both collapse
	   unpredictably around common phone widths. arp-grid-cols-mobile
	   makes the count explicit and deterministic below this breakpoint
	   instead, independent of whatever's configured for desktop. */
	.arp-block.arp-layout-grid.arp-grid-cols-mobile-1 ul.arp-card-list {
		grid-template-columns: 1fr;
	}
	.arp-block.arp-layout-grid.arp-grid-cols-mobile-2 ul.arp-card-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.arp-block.arp-layout-masonry.arp-grid-cols-mobile-1 ul.arp-card-list {
		column-count: 1;
	}
	.arp-block.arp-layout-masonry.arp-grid-cols-mobile-2 ul.arp-card-list {
		column-count: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arp-block ul.arp-card-list {
		scroll-behavior: auto;
	}
}

/* =======================================================================
   Inline related posts — single-card "RELATED" boxes inserted mid-article
   by class-frontend.php's insert_inline_related(). Independent of the
   end-of-content block above; deliberately its own simpler component
   rather than reusing .arp-card, since it's always exactly one card in a
   fixed image-left layout, never part of a row/grid of many.
   ======================================================================= */

.arp-inline-related {
	margin: 28px 0;
	color: inherit;
}

/* Base label typography — shared by all 8 heading styles below; only the
   DECORATION (line/underline/pill/box) changes per style. Wording and
   style are both customizable (inline_heading_text/inline_heading_style)
   — this used to be hardcoded to exactly the "flanked" look, now the
   default look a site sees no change from unless it picks something
   else. */
.arp-inline-related-label {
	text-align: center;
	text-transform: uppercase;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0.7;
	margin-bottom: 10px;
	overflow: hidden;
}

.arp-inline-related-label span {
	position: relative;
	display: inline-block;
}

/* flanked (the original, still-default look) — centered text with a
   horizontal rule flanking each side. */
.arp-heading-style-flanked .arp-inline-related-label span {
	padding: 0 16px;
}

.arp-heading-style-flanked .arp-inline-related-label span::before,
.arp-heading-style-flanked .arp-inline-related-label span::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 100vw;
	max-width: 300px;
	border-top: 1px solid rgba(127, 127, 127, 0.4);
}

.arp-heading-style-flanked .arp-inline-related-label span::before {
	right: 100%;
}

.arp-heading-style-flanked .arp-inline-related-label span::after {
	left: 100%;
}

/* plain — bare centered text, no decoration at all. */
.arp-heading-style-plain .arp-inline-related-label {
	opacity: 1;
}

/* underline (matches the block heading's own default look) — a short rule
   centered directly beneath the text. */
.arp-heading-style-underline .arp-inline-related-label span {
	padding-bottom: 6px;
	border-bottom: 2px solid var(--arp-accent-color, currentColor);
}

/* accent-underline — a faint full-width rule plus a short solid accent
   segment on top of it, same idea as the block version scaled down. */
.arp-heading-style-accent-underline .arp-inline-related-label span {
	position: relative;
	padding-bottom: 8px;
	border-bottom: 1px solid color-mix(in srgb, var(--arp-accent-color, currentColor) 25%, transparent);
}

.arp-heading-style-accent-underline .arp-inline-related-label span::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -1px;
	width: 24px;
	height: 2px;
	background: var(--arp-accent-color, currentColor);
}

/* left-accent/trailing-rule both imply a left-anchored flow — centering
   the label fights that, so these two switch it to left-aligned. */
.arp-heading-style-left-accent .arp-inline-related-label,
.arp-heading-style-trailing-rule .arp-inline-related-label {
	text-align: left;
}

.arp-heading-style-left-accent .arp-inline-related-label span {
	padding-left: 10px;
	border-left: 3px solid var(--arp-accent-color, currentColor);
}

.arp-heading-style-trailing-rule .arp-inline-related-label {
	display: flex;
	align-items: center;
	gap: 10px;
}

.arp-heading-style-trailing-rule .arp-inline-related-label::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: color-mix(in srgb, var(--arp-accent-color, currentColor) 25%, transparent);
}

/* pill/boxed both need full opacity — a tinted/solid chip at 0.7 opacity
   reads as faded/disabled rather than a deliberate badge. */
.arp-heading-style-pill .arp-inline-related-label,
.arp-heading-style-boxed .arp-inline-related-label {
	opacity: 1;
}

.arp-heading-style-pill .arp-inline-related-label span {
	padding: 4px 12px;
	background: var(--arp-accent-color, currentColor);
	color: var(--arp-cta-text-color, #fff);
	border-radius: 999px;
}

.arp-heading-style-boxed .arp-inline-related-label span {
	padding: 4px 12px;
	background: color-mix(in srgb, var(--arp-accent-color, currentColor) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--arp-accent-color, currentColor) 25%, transparent);
	border-radius: 6px;
}

.arp-inline-related-card {
	display: flex;
	/* Default align-items (stretch) forced the text column to match the
	   fixed-size image's height even when its own content needed far
	   less. Centering fixes that regardless of how much text is showing. */
	align-items: center;
	gap: 14px;
	padding: 12px;
	background: rgba(127, 127, 127, 0.08);
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	/* Containing block for .arp-inline-related-permalink's stretch — see
	   .arp-card-permalink's own comment for the full reasoning (same
	   "stretched link" pattern, needed here since the meta line can
	   contain real category/tag/author links). */
	position: relative;
}

/* The stretched link itself — see .arp-card-permalink's comment. */
.arp-inline-related-permalink {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.arp-inline-related-image {
	display: block;
	width: 96px;
	height: 96px;
	flex: 0 0 96px;
	border-radius: var(--arp-inline-image-radius, 6px);
	overflow: hidden;
	background: rgba(127, 127, 127, 0.12);
	/* Anchors the optional icon-overlay badge, same as .arp-card-image. */
	position: relative;
}

/* Circle shape, alongside the existing square default. */
.arp-inline-shape-circle .arp-inline-related-image {
	border-radius: 50%;
}

/* Text alignment — only centers the TEXT content itself (title/excerpt/
   meta), not the image+text row's own layout — inline is a horizontal
   row, not a vertical stack. */
.arp-inline-align-center .arp-inline-related-body {
	text-align: center;
}

.arp-inline-related-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.arp-inline-related-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.arp-inline-related-title {
	/* 1.05em is this style's own "medium" default (see the size classes
	   below) — deliberately its own scale, not shared with the block's
	   own small/medium/large (0.8/0.9/1.05em), since this title has
	   always read as a standalone in-content callout, visually bigger
	   than the block's own card titles. */
	font-size: 1.05em;
	font-weight: var(--arp-title-font-weight, 700);
	color: var(--arp-title-color, inherit);
	font-family: var(--arp-title-font-family, inherit);
	line-height: 1.3;
}

.arp-inline-title-small .arp-inline-related-title {
	font-size: 0.9em;
}

.arp-inline-title-large .arp-inline-related-title {
	font-size: 1.2em;
}

/* Same :hover-vs-:focus split as .arp-card-link's own rule — see that
   comment. .arp-inline-related-card is the direct :has() target here
   (not an <li> ancestor) since .arp-inline-related-permalink is its
   direct child. */
.arp-inline-related-card:hover .arp-inline-related-title,
.arp-inline-related-card:has(.arp-inline-related-permalink:focus) .arp-inline-related-title {
	text-decoration: underline;
}

.arp-inline-related-excerpt {
	font-size: 0.85em;
	opacity: 0.75;
	line-height: 1.4;
}

/* The inline card's meta line reuses .arp-card-meta's own markup/rules
   (get_card_meta_html()) rather than a dedicated byline-only class, since
   it can show any combination of date/category/tag/author — sizing it
   down to match this compact card. */
.arp-inline-related-body .arp-card-meta {
	font-size: 0.8em;
	opacity: 0.6;
	color: var(--arp-meta-color, inherit);
	font-family: var(--arp-meta-font-family, inherit);
}

/* Row style: divided — a plain compact row (small thumbnail, thin
   top/bottom rule) instead of the default tinted rounded-corner card.
   The border color comes from --arp-accent-color, emitted as an inline
   custom property on .arp-inline-related itself since this markup isn't
   nested inside an .arp-block to inherit one from — falls back to the
   same rgba(127,127,127,0.4) this section's other decorative lines
   already default to. Suppressed entirely by "Show divider lines" (the
   arp-no-dividers class, applied the same way as every .arp-block). */
.arp-inline-style-divided .arp-inline-related-card {
	background: transparent;
	border-radius: 0;
	padding: 10px 0;
	border-top: 1px solid var(--arp-accent-color, rgba(127, 127, 127, 0.4));
	border-bottom: 1px solid var(--arp-accent-color, rgba(127, 127, 127, 0.4));
}

.arp-no-dividers.arp-inline-style-divided .arp-inline-related-card {
	border-top: 0;
	border-bottom: 0;
}

.arp-inline-style-divided .arp-inline-related-image {
	width: 56px;
	height: 56px;
	flex-basis: 56px;
	border-radius: 4px;
}

/* Row style: boxed — a genuine bordered box (not just the default's
   tinted background) around the whole card, NYT-inspired. Same
   --arp-accent-color color handling as divided, above — but NOT gated by
   "Show divider lines": that toggle is about lines BETWEEN things, not
   whether a container has a border at all. */
.arp-inline-style-boxed .arp-inline-related-card {
	background: transparent;
	border: 1px solid var(--arp-accent-color, rgba(127, 127, 127, 0.4));
	border-radius: 6px;
	padding: 14px;
}

@media (max-width: 480px) {
	.arp-inline-related-image {
		width: 72px;
		height: 72px;
		flex-basis: 72px;
	}
	.arp-inline-related-excerpt {
		display: none; /* keep the mobile inline card compact — title + image is enough at this width */
	}
}