/* Echo Related Post - Thrill NG — frontend block styles.
   Theme-agnostic by design, matching Celebrify's own tcb-style.css
   convention: colors inherit from the theme (color: inherit) so blocks
   read 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
   appearance settings (now surfaced through the Customizer):
     - erpt-layout-{row|grid|list|masonry} — the OUTER arrangement, SHARED
       across all 5 blocks: a horizontally-scrolling row, a wrapping grid,
       a full vertical stack, or CSS-columns masonry.
     - erpt-position-{top|left|right|bottom|overlay} — each CARD's own
       internal orientation, INDEPENDENT per block (erpt_get_block_style())
       — Related, Nationality, Profession, Zodiac, and Mentioned can each
       set their own image position/alignment/border/shape/title+meta
       color+font, entirely separate from one another. These two axes are
       independent of each other too — e.g. erpt-layout-row +
       erpt-position-left gives a horizontally-scrolling row of
       image-left mini-cards.
   erpt-card-style adds a boxed background/border per card (with the
   divider-line look as the alternative when it's off) — per block. Image
   shape/radius (erpt-shape-circle vs --erpt-image-radius) is also fully
   per-block now, not hardcoded circular for the celebrity-roster blocks
   the way it originally was.

   Defensive reset: many themes style `ul li` inside post content
   (spacing, bullets, borders) for ordinary blog lists. Since these blocks
   render 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. */

.erpt-block {
	--erpt-heading-color: inherit;
	--erpt-text-color: inherit;
	--erpt-accent-color: rgba(127, 127, 127, 0.3);
	--erpt-background-color: rgba(127, 127, 127, 0.08);
	--erpt-image-size: 64px;
	--erpt-image-radius: 8px;
	--erpt-heading-size: 1.05em;
	--erpt-title-size: 0.9em;
	--erpt-font-family: inherit;
	/* Defaults to a fixed amber, independent of the site's chosen accent
	   color — but IS user-configurable (Customizer → Colors → "Birthday
	   highlight color"), overridden per-block via an inline custom
	   property when set (see appearance_style_attr() in class-frontend.php).
	   The glow is always DERIVED from whichever color is active via
	   color-mix(), rather than being its own separate setting — one color
	   picker controls the badge, ring/glow, and label consistently. */
	--erpt-birthday-color: #c67c00;
	--erpt-birthday-glow: color-mix(in srgb, var(--erpt-birthday-color) 65%, transparent);
	margin: 32px 0;
	color: inherit;
	font-family: var(--erpt-font-family, inherit);
}

.erpt-block-heading {
	font-size: var(--erpt-heading-size, 1.05em);
	font-weight: 700;
	text-transform: uppercase; /* the default (erpt-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(--erpt-accent-color);
	color: var(--erpt-heading-color);
}

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

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

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

.erpt-block ul.erpt-card-list {
	list-style: none !important;
	/* overflow-x:auto below implicitly computes overflow-y to 'auto' too
	   (a CSS spec rule: an axis left at 'visible' while the other isn't
	   gets promoted to 'auto') — there's no way to scroll one axis while
	   staying genuinely visible on the other. That silently clips
	   anything extending past the row vertically, including the birthday
	   glow's box-shadow (it only showed before because a shorter card
	   happened to leave enough incidental headroom; adding a meta line
	   made cards taller and used up that headroom, clipping the glow).
	   20px of padding, canceled by an equal negative margin so the
	   block's actual footprint doesn't change, gives the clipping box
	   enough room on both edges for the glow to render into instead. */
	margin: -20px 0 -20px !important;
	padding: 20px 0 24px !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.
	   Neutral rgba, same "theme-agnostic" convention as the rest of this
	   file, rather than the browser/OS-default scrollbar. */
	scrollbar-width: thin;
	scrollbar-color: rgba(127, 127, 127, 0.5) transparent;
}

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

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

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

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

.erpt-block li.erpt-card {
	list-style: none !important;
	margin: 0 !important;
	box-sizing: border-box;
	/* flex-grow: 0 deliberately — a block with only 1-2 results (a
	   sparsely-tagged nationality, a thin candidate pool) should render
	   those cards at the same fixed size as a full block of 5, not
	   stretch them to fill the row. Cards still shrink on narrow
	   viewports (flex-shrink: 1) down to min-width before the row starts
	   scrolling instead. */
	flex: 0 1 160px;
	min-width: 120px;
	max-width: 200px;
	padding: 0 16px;
	border-left: 1px solid var(--erpt-accent-color);
	/* Widened below (erpt-position-left/right/bottom) — this base 160-200px
	   width was sized for a simple image-on-top card, where the image
	   fills the card's own width and only the title sits underneath it.
	   Once the image sits BESIDE the text at a fixed --erpt-image-size
	   instead, that same width leaves barely any room for the text
	   column — a long title already wraps to 5-6 lines, and a meta line
	   (date · category · tag) has no space left to render at all. */
	scroll-snap-align: start;
}

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

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

/* Row layout + image-beside-text — see the comment on the base card width
   above. 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, so it doesn't hit this same squeeze. */
.erpt-block.erpt-layout-row.erpt-position-left li.erpt-card,
.erpt-block.erpt-layout-row.erpt-position-right li.erpt-card {
	flex-basis: 280px;
	min-width: 220px;
	max-width: 340px;
}

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

.erpt-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0; /* lets long titles ellipsize/wrap instead of forcing the row wider than its column */
	/* Without this, erpt-align-center/right's align-items override (center/
	   flex-end instead of the default stretch) lets this shrink-wrap to its
	   own content's natural width — harmless for a title that WRAPS, but
	   the meta line's white-space:nowrap means its "natural width" is the
	   entire unwrapped line ("May 26, 2022 · Biography · Actors and
	   Actresses"). With nothing forcing this box back to the card's actual
	   width, that nowrap line just renders at full length and visually
	   overflows straight through however many neighboring cards it takes
	   to fit — overflow:hidden on .erpt-card-meta never even engages,
	   because the BOX it's clipped to was never constrained in the first
	   place. 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%;
}

.erpt-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(127, 127, 127, 0.12);
	flex-shrink: 0;
}

.erpt-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Circular avatars for the celebrity-roster blocks (Nationality, Profession,
   Zodiac, Mentioned) — Related keeps its own adjustable border-radius
   below, since it isn't exclusively showing people. */
/* Every block's own image_shape/image_radius (erpt_get_block_style()) —
   square/rounded by default at that block's own configured radius,
   overridden to a true circle when that SPECIFIC block's shape is set to
   circle. Was hardcoded circular for the 4 roster blocks and adjustable
   only for Related; all 5 are independently configurable now. */
.erpt-card-image {
	border-radius: var(--erpt-image-radius, 8px);
}

/* image_shape: circle overrides the adjustable radius above with a true
   circle — independently per block now (erpt-shape-{square|circle} is
   set from that block's OWN image_shape, not a shared setting). */
.erpt-block.erpt-shape-circle .erpt-card-image {
	border-radius: 50%;
}

.erpt-card-title {
	/* Every direct child of .erpt-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(--erpt-title-size);
	line-height: 1.35;
	/* --erpt-title-color/--erpt-title-font-family are this block's own
	   per-block overrides (erpt_get_block_style()); falling back to the
	   shared --erpt-text-color/--erpt-font-family when unset, same
	   "empty = inherit the more general default" convention used
	   throughout this file. */
	color: var(--erpt-title-color, var(--erpt-text-color));
	font-family: var(--erpt-title-font-family, var(--erpt-font-family, inherit));
}

.erpt-title-bold .erpt-card-title {
	font-weight: 700;
}

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

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

/* Divider lines toggle — the plain (non-card_style) look's between-card
   vertical rule, and every block heading's underline. Both share one
   "Show divider lines" setting since they're the same visual language.
   Deliberately scoped to :not(.erpt-card-style) — a boxed card's border
   already fully encloses it on all 4 sides; without this scoping, the
   !important below stripped just the LEFT edge of that border (border-left
   specifically, not the card-style shorthand's top/right/bottom), leaving
   the box open on one side instead of toggling anything meaningful, since
   "show a divider between cards" isn't a concept that applies once cards
   are already individually boxed. */
.erpt-no-dividers:not(.erpt-card-style) li.erpt-card {
	border-left: 0 !important;
	padding-left: 16px;
}

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

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

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

.erpt-card-meta {
	display: block;
	/* Without this, the combination of white-space:nowrap here + no
	   explicit width + being a flex item of a column flex container
	   (.erpt-card-body) could make the browser collapse this element to
	   zero visible width instead of showing truncated "…" text — i.e. the
	   date/category/tag/author line silently vanishing rather than
	   truncating, in exactly the narrower card widths (Row layout,
	   hide_image on) where it matters. */
	min-width: 0;
	font-size: 0.75em;
	opacity: 0.7;
	/* --erpt-meta-color/--erpt-meta-font-family — see .erpt-card-title's
	   identical fallback-chain comment above. */
	color: var(--erpt-meta-color, var(--erpt-text-color));
	font-family: var(--erpt-meta-font-family, var(--erpt-font-family, inherit));
	/* With several fields enabled (date/category/tag/author) in a narrow
	   row-layout card, wrapped text reads as a jumbled mess and can look
	   like it's bleeding into the next card. A single truncated line
	   ("June 20, 2026 · Movies · Abr…") is much more legible than a messy
	   2-3 line wrap at this width. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.erpt-card-link:hover .erpt-card-title,
.erpt-card-link:focus .erpt-card-title {
	text-decoration: underline;
}

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

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

/* Image position: left — the image sits beside the text at a fixed size
   (--erpt-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. */
.erpt-block.erpt-position-left .erpt-card-link {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}

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

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

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

/* Image position: bottom — text first, image last. The base .erpt-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, so the image (full-width, aspect-ratio square, same as 'top')
   ends up last on screen instead of first. */
.erpt-block.erpt-position-bottom .erpt-card-link {
	flex-direction: column-reverse;
}

/* Image position: overlay — title (and excerpt/meta) sit directly on top
   of the image over a dark gradient scrim, instead of beside/below it. */
.erpt-block.erpt-position-overlay .erpt-card-link {
	position: relative;
	display: block;
	/* Hard clip — without this, a card whose title/eyebrow/meta content is
	   taller than the (often quite short, in a multi-column grid) image
	   overflows the card's own box entirely and bleeds into whatever sits
	   below it (the next grid row, or the block's own heading). Better to
	   truncate than to visually break the layout. */
	overflow: hidden;
}

.erpt-block.erpt-position-overlay .erpt-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
}

.erpt-block.erpt-position-overlay .erpt-card-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	border-radius: 0 0 8px 8px;
}

.erpt-block.erpt-position-overlay .erpt-card-title,
.erpt-block.erpt-position-overlay .erpt-card-excerpt,
.erpt-block.erpt-position-overlay .erpt-card-meta,
.erpt-block.erpt-position-overlay .erpt-card-eyebrow {
	/* Overlay mode always needs light text over the dark scrim, regardless
	   of the theme's own text color — the one appearance case where we
	   deliberately don't inherit. */
	color: #fff;
}

.erpt-block.erpt-position-overlay .erpt-card-title {
	/* A caption overlay has room for a short headline, not a full title —
	   clamp to 2 lines with an ellipsis rather than letting long titles
	   push the gradient panel (and the image beneath it) taller than the
	   card, which is what caused the overflow into neighboring cards. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.erpt-block.erpt-position-overlay .erpt-card-excerpt,
.erpt-block.erpt-position-overlay .erpt-card-meta {
	opacity: 0.85;
}

.erpt-block.erpt-position-overlay .erpt-card-excerpt {
	/* Eyebrow + a 2-line title + meta is already a lot of text for a small
	   overlay caption; an excerpt on top of that is what was overflowing
	   in practice. Hide it here specifically, even if "Show excerpt" is
	   on for the block generally — overlay mode just isn't the layout for it. */
	display: none;
}

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

/* Category eyebrow */
.erpt-card-eyebrow {
	display: block;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--erpt-accent-color);
}

/* 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. */
.erpt-card-image {
	position: relative; /* anchors an absolutely-positioned badge */
}

.erpt-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;
}

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

/* Birthday-today indicator — a soft glow around the image (Nationality/
   Zodiac/Related/Mentioned, wherever the card links to a Biography post
   whose _tcb_birth_date matches today) plus a text label under the title.
   A badge/icon was tried and dropped as redundant once these two were in
   place. */
.erpt-has-birthday .erpt-card-image {
	box-shadow: 0 0 14px 4px var(--erpt-birthday-glow);
}

.erpt-birthday-label {
	/* Not in overlay mode's title/excerpt/meta/eyebrow "force white" list
	   (see further down) by design — the amber reads fine against the dark
	   scrim too, so it keeps its own color there rather than turning white
	   and losing its "birthday" association. */
	display: block;
	font-size: 0.75em;
	font-weight: 700;
	color: var(--erpt-birthday-color);
}

/* CTA button */
.erpt-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: #fff;
	background: var(--erpt-accent-color);
	border-radius: 4px;
	width: fit-content;
}

/* 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. */
.erpt-block.erpt-card-style ul.erpt-card-list {
	gap: 16px;
}

.erpt-block.erpt-card-style li.erpt-card {
	border-left: 0;
	/* Horizontal padding (16px) deliberately matches the non-boxed divider
	   look's own 16px side padding below — only the vertical padding,
	   border, background, and radius are unique to the boxed look. Since
	   the image is width:100% of the card's content box, any difference in
	   HORIZONTAL padding directly changes the rendered image size; keeping
	   it identical means toggling "Card background/border" only changes
	   the box styling, never how big the images look. */
	padding: 12px 16px;
	background: var(--erpt-background-color);
	border: 1px solid var(--erpt-accent-color);
	border-radius: 8px;
}

/* Related's own boxed padding is tighter than the roster blocks' — the
   16px inset that keeps a small circular avatar from crowding its border
   reads as an oversized gap around Related's bigger rectangular image.
   Only overrides the inset; image-size-consistency between boxed/unboxed
   (the comment above) still holds since both use this same 8px value. */
.erpt-block-related.erpt-card-style li.erpt-card {
	padding: 8px;
}

.erpt-block-related.erpt-layout-grid:not(.erpt-card-style) li.erpt-card {
	padding: 0 8px;
}

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

/* Layout: grid — wraps to multiple rows, never scrolls horizontally.
   erpt-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. */
.erpt-block.erpt-layout-grid ul.erpt-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	overflow-x: visible;
}

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

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

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

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

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

.erpt-block.erpt-layout-grid:not(.erpt-card-style) li.erpt-card {
	border-left: 0;
	/* NOT 0 — a grid cell has no divider border to make padding pointless
	   the way Row layout's non-card-style cards have (theirs relied on
	   border-left for separation; a grid cell is already visually distinct
	   via the gap between cells). Zeroing padding here made the image
	   (width:100% of the card's content box) fill the ENTIRE grid cell the
	   moment "Card background/border" was turned off — a much bigger jump
	   than the boxed-vs-divider padding difference elsewhere, and the
	   actual cause of images visibly growing when toggling this off in
	   Grid layout. 16px matches the boxed look's own horizontal padding so
	   the image renders the same size either way. */
	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 (a mixed pool of
   circular-avatar cards and taller excerpt/meta cards looks noticeably
   better without forced-equal heights). CSS-only, no JS: multi-column
   layout. Reading order flows DOWN each column before moving to the next
   (card 1, 2, 3 stack in column 1; 4, 5, 6 in column 2, ...) rather than
   left-to-right across a row — the deliberate tradeoff for not shipping a
   layout script just to preserve strict reading order.
   erpt-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. */
.erpt-block.erpt-layout-masonry ul.erpt-card-list {
	display: block;
	column-count: 3;
	column-gap: 16px;
	overflow-x: visible;
}

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

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

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

.erpt-block.erpt-layout-masonry li.erpt-card {
	/* break-inside:avoid is what stops a card from being sliced across two
	   columns — without it, a tile could visually split mid-image/mid-title
	   at the column boundary. */
	display: block;
	width: 100%;
	min-width: 0;
	max-width: none;
	break-inside: avoid;
	margin-bottom: 16px;
}

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

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

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

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

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

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

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

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

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

	/* Grid layout's default repeat(auto-fill, minmax(160px, 1fr)) — and,
	   below, an explicit erpt-grid-cols-desktop-2/3/4 override — can both
	   collapse unpredictably around common phone widths (a few px of theme
	   padding is the difference between 1 and 2 fitting), which is exactly
	   why the Customizer's simulated mobile frame can show a different
	   column count than an actual phone. erpt-grid-cols-mobile makes the
	   count explicit and deterministic below this breakpoint instead,
	   independent of whatever's configured for desktop; equal specificity
	   to the erpt-grid-cols-desktop-* rules above, so being LATER in the
	   file (here) is what makes this win at this width — see
	   grid_columns_mobile in erpt_get_appearance_settings(). */
	.erpt-block.erpt-layout-grid.erpt-grid-cols-mobile-1 ul.erpt-card-list {
		grid-template-columns: 1fr;
	}
	.erpt-block.erpt-layout-grid.erpt-grid-cols-mobile-2 ul.erpt-card-list {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Masonry's mobile column count — same erpt-grid-cols-mobile setting
	   Grid uses, same knife-edge reasoning for why this needs to be
	   explicit rather than left to auto-fit. */
	.erpt-block.erpt-layout-masonry.erpt-grid-cols-mobile-1 ul.erpt-card-list {
		column-count: 1;
	}
	.erpt-block.erpt-layout-masonry.erpt-grid-cols-mobile-2 ul.erpt-card-list {
		column-count: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.erpt-block ul.erpt-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 blocks above; deliberately its own simpler component
   rather than reusing .erpt-card, since it's always exactly one card in a
   fixed image-left layout, never part of a row/grid of many.
   ======================================================================= */

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

.erpt-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;
}

.erpt-inline-related-label span {
	position: relative;
	display: inline-block;
	padding: 0 16px;
}

.erpt-inline-related-label span::before,
.erpt-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);
}

.erpt-inline-related-label span::before {
	right: 100%;
}

.erpt-inline-related-label span::after {
	left: 100%;
}

.erpt-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 (just a title,
	   with meta/excerpt off) needed far less — the gap wasn't wasted
	   exactly, it just left dead space at the BOTTOM of the text column
	   instead of the two sides settling into visual balance. 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;
}

.erpt-inline-related-image {
	display: block;
	width: 96px;
	height: 96px;
	flex: 0 0 96px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(127, 127, 127, 0.12);
}

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

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

.erpt-inline-related-title {
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
}

.erpt-inline-related-card:hover .erpt-inline-related-title,
.erpt-inline-related-card:focus .erpt-inline-related-title {
	text-decoration: underline;
}

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

/* The inline card's meta line reuses .erpt-card-meta's own markup/rules
   (get_card_meta_html()) rather than a dedicated byline-only class now
   that it can show any combination of date/category/tag/author — sizing
   it down to match this compact card, same look the old byline-only
   version had. */
.erpt-inline-related-body .erpt-card-meta {
	font-size: 0.8em;
	opacity: 0.6;
}

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

/* The old hardcoded "Related always becomes a small-thumbnail stacked list
   below 600px, regardless of its own configured arrangement/style"
   override lived here — removed 2026-08-06. Related now has its own fully
   independent arrangement + card style (erpt_get_block_style()), the same
   as every other block, so it should actually RESPECT whatever's
   configured at every width instead of being forcibly overridden on
   mobile specifically — that mismatch (desktop preview showing one thing,
   real mobile showing something else entirely) was the bug, not a
   feature. General responsive behavior (grid-cols-mobile, the Image size
   setting for position-left/right's fixed px width) now applies to
   Related exactly like it does to every other block. */