/* -------------------------------------------------------------------- */
/* Shared: header, wrapper, base variables                              */
/* -------------------------------------------------------------------- */

/* A plain <div> (not <section>) - a related-posts block is a
   supplementary widget, not its own document section, so it shouldn't
   add sectioning/landmark semantics to the page. No border here either;
   the surrounding content's own spacing is enough of a separator. */
.tlinky-related-posts {
	--tlinky-accent: #2271b1;
	--tlinky-hover-color: #135e96;
	--tlinky-columns: 3;
	--tlinky-item-font-size: 1em;
	margin: 2em 0 0;
	padding: 0;
}

.tlinky-related-posts__header {
	margin: 0 0 1em;
}

/* Deliberately no font-size here: the heading tag (h2-h4) inherits your
   theme's own heading typography instead of a size we pick for it. When
   set to DIV or P instead, it still just inherits ambient text size.
   Only spacing is our concern, never the theme's type scale. */
.tlinky-related-posts__title {
	margin: 0 0 0.25em;
	line-height: 1.3;
}

.tlinky-related-posts__subtitle {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.75;
}

.tlinky-related-posts__placeholder {
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	padding: 16px;
	color: #50575e;
	font-size: 0.9em;
}

/* -------------------------------------------------------------------- */
/* Layout 1: List (theme default) - inherits the theme's own styling    */
/* -------------------------------------------------------------------- */

.tlinky-related-posts__list {
	list-style: disc;
	padding-left: 1.25em;
	margin: 0;
}

.tlinky-related-posts__item {
	margin-bottom: 0.5em;
}

.tlinky-related-posts__item a {
	text-decoration: none;
	color: var( --tlinky-accent );
}

.tlinky-related-posts__item a:hover,
.tlinky-related-posts__item a:focus {
	text-decoration: underline;
	color: var( --tlinky-hover-color, var( --tlinky-accent ) );
}

/* -------------------------------------------------------------------- */
/* Shared grid scaffold (Cards / Minimal / Magazine)                    */
/*                                                                      */
/* Semantic <ul><li> list (same as the List layout) rather than bare    */
/* <div>s - a plain list of links is the clearest possible signal to    */
/* search engines about what this section is. The <li> is the actual   */
/* CSS Grid item; the link inside it simply fills the available space. */
/* -------------------------------------------------------------------- */

.tlinky-related-posts__grid {
	display: grid;
	grid-template-columns: repeat( var( --tlinky-columns, 3 ), 1fr );
	gap: 1.25em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tlinky-related-posts__grid > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

@media ( max-width: 600px ) {
	.tlinky-related-posts__grid {
		grid-template-columns: 1fr;
	}
}

/* Responsive font-size system: the base size is the "Related Item Font
   Size" setting (Small/Medium/Large), automatically scaled down further
   on Cards/Magazine as columns increase (computed server-side into
   --tlinky-item-font-scale) so a 4-column grid can't overflow or wrap
   awkwardly the way one fixed font-size used to. Everything below
   (excerpt, cta, index badge) is sized in em relative to this, so one
   variable controls the whole item consistently. */
.tlinky-rp-item {
	display: flex;
	text-decoration: none;
	color: inherit;
	font-family: inherit;
	font-size: var( --tlinky-item-font-size, 1em );
}

/* Always its own block so whatever follows (excerpt, read-more, or
   nothing at all) starts on a new line rather than running into the
   title on the same row - this was the cause of titles and "Read More"
   running together on one line whenever the excerpt was turned off. */
.tlinky-rp-item__title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.4em;
	color: var( --tlinky-accent );
}

.tlinky-rp-item__excerpt {
	display: -webkit-box;
	font-size: 0.9em;
	opacity: 0.75;
	line-height: 1.5;
	margin: 0 0 0.5em;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.tlinky-rp-item__cta {
	display: inline-block;
	margin-top: auto;
	padding-top: 0.2em;
	font-size: 0.85em;
	font-weight: 600;
	color: var( --tlinky-accent );
}

/* -------------------------------------------------------------------- */
/* Layout 2: Card Grid                                                   */
/* -------------------------------------------------------------------- */

.tlinky-rp-item--card {
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tlinky-rp-item--card:hover,
.tlinky-rp-item--card:focus {
	transform: translateY( -3px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.08 );
	border-color: var( --tlinky-hover-color, var( --tlinky-accent ) );
}

.tlinky-rp-item--card:hover .tlinky-rp-item__title,
.tlinky-rp-item--card:focus .tlinky-rp-item__title {
	color: var( --tlinky-hover-color, var( --tlinky-accent ) );
}

.tlinky-rp-item--card .tlinky-rp-item__media {
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient( 135deg, #eef1f4, #e1e5ea );
}

.tlinky-rp-item--card .tlinky-rp-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tlinky-rp-item--card .tlinky-rp-item__media--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var( --tlinky-accent );
	opacity: 0.65;
}

.tlinky-rp-item--card .tlinky-rp-item__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 1em 1.1em 1.1em;
}

/* -------------------------------------------------------------------- */
/* Layout 3: Minimal Modern                                              */
/* -------------------------------------------------------------------- */

.tlinky-related-posts--minimal .tlinky-related-posts__grid {
	display: block;
}

.tlinky-related-posts--minimal .tlinky-related-posts__grid > li {
	border-bottom: 1px solid #eee;
}

.tlinky-related-posts--minimal .tlinky-related-posts__grid > li:last-child {
	border-bottom: none;
}

.tlinky-rp-item--minimal {
	align-items: center;
	padding: 0.85em 0;
	gap: 0.9em;
}

.tlinky-rp-item--minimal:hover .tlinky-rp-item__title,
.tlinky-rp-item--minimal:focus .tlinky-rp-item__title {
	color: var( --tlinky-hover-color, var( --tlinky-accent ) );
}

.tlinky-rp-item__index {
	flex: 0 0 auto;
	font-size: 0.8em;
	font-weight: 700;
	color: var( --tlinky-accent );
	border: 1px solid var( --tlinky-accent );
	border-radius: 50%;
	width: 1.9em;
	height: 1.9em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tlinky-rp-item--minimal .tlinky-rp-item__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.tlinky-rp-item--minimal .tlinky-rp-item__title {
	transition: color 0.15s ease;
	margin-bottom: 0.2em;
}

.tlinky-rp-item--minimal .tlinky-rp-item__excerpt {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------- */
/* Layout 4: Magazine Overlay                                            */
/* -------------------------------------------------------------------- */

/* Tiles keep their own aspect ratio instead of stretching to match the
   tallest item in the row (the default CSS Grid stretch behavior),
   which previously distorted tiles whenever one title wrapped longer
   than its neighbors. */
.tlinky-related-posts--magazine .tlinky-related-posts__grid {
	align-items: start;
}

.tlinky-rp-item--magazine {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: var( --tlinky-accent );
	align-items: flex-end;
}

.tlinky-rp-item--magazine.no-image {
	background-image: linear-gradient( 135deg, var( --tlinky-accent ), rgba( 0, 0, 0, 0.35 ) );
}

.tlinky-rp-item__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.2 ) 55%, rgba( 0, 0, 0, 0 ) 100% );
}

/* Long titles truncate to two lines with an ellipsis instead of
   overflowing the tile and breaking the layout. */
.tlinky-rp-item--magazine .tlinky-rp-item__title {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	color: #fff;
	padding: 1em;
	margin: 0;
	font-size: 1.02em;
	line-height: 1.35;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.55 );
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tlinky-rp-item--magazine:hover .tlinky-rp-item__overlay,
.tlinky-rp-item--magazine:focus .tlinky-rp-item__overlay {
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.88 ) 0%, rgba( 0, 0, 0, 0.3 ) 60%, rgba( 0, 0, 0, 0.05 ) 100% );
}