/**
 * TR-RSS - Multi feed RSS reader for Joomla
 *
 * The module deliberately declares no font family and no colour of its own: it
 * inherits both from the template and derives its secondary tones from the text
 * colour already in use, so it looks native in a light or a dark template alike.
 * Every value that can be configured arrives as a custom property set inline on
 * the root element.
 *
 * @copyright  (C) 2026 Giuseppe Strano
 * @license    GNU General Public License version 2 or later
 */

.trrss {
	--trrss-width: 100%;
	--trrss-gap: 1rem;
	--trrss-radius: 6px;
	--trrss-thumb-w: 120px;
	--trrss-thumb-h: 80px;
	--trrss-fit: cover;
	--trrss-line: color-mix(in srgb, currentColor 15%, transparent);
	--trrss-muted: color-mix(in srgb, currentColor 65%, transparent);
	--trrss-tint: color-mix(in srgb, currentColor 6%, transparent);

	box-sizing: border-box;
	width: var(--trrss-width);
	max-width: 100%;
	font: inherit;
	color: inherit;
}

.trrss *,
.trrss *::before,
.trrss *::after {
	box-sizing: inherit;
}

/* Height is optional: when it is set the list scrolls inside the module. */
.trrss.trrss-scroll {
	max-height: var(--trrss-height, none);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.trrss .trrss-items {
	display: flex;
	flex-direction: column;
	gap: var(--trrss-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.trrss .trrss-item {
	display: flex;
	gap: var(--trrss-gap);
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trrss.trrss-divided .trrss-item + .trrss-item {
	border-top: 1px solid var(--trrss-line);
	padding-top: var(--trrss-gap);
}

/* Thumbnail placement */
.trrss.trrss-thumb-right .trrss-item {
	flex-direction: row-reverse;
}

.trrss.trrss-thumb-top .trrss-item {
	flex-direction: column;
}

.trrss .trrss-media {
	flex: 0 0 auto;
	width: var(--trrss-thumb-w);
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--trrss-radius);
	background: var(--trrss-tint);
}

.trrss.trrss-thumb-top .trrss-media {
	width: 100%;
}

.trrss .trrss-img {
	display: block;
	width: 100%;
	height: var(--trrss-thumb-h);
	object-fit: var(--trrss-fit);
	border-radius: inherit;
}

.trrss .trrss-img-empty {
	background:
		linear-gradient(135deg, transparent 46%, var(--trrss-line) 46%, var(--trrss-line) 54%, transparent 54%),
		var(--trrss-tint);
}

.trrss .trrss-body {
	flex: 1 1 auto;
	min-width: 0;
}

.trrss .trrss-title {
	margin: 0;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.trrss .trrss-title a {
	color: inherit;
	text-decoration: none;
}

.trrss .trrss-title a:hover,
.trrss .trrss-title a:focus-visible {
	text-decoration: underline;
}

.trrss .trrss-title a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.trrss .trrss-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .5em;
	margin: .25em 0 0;
	font-size: .8em;
	line-height: 1.4;
	color: var(--trrss-muted);
}

.trrss .trrss-meta > * + *::before {
	content: "\00b7";
	margin-right: .5em;
}

.trrss .trrss-source {
	font-weight: 600;
}

.trrss .trrss-text {
	margin: .4em 0 0;
	font-size: .9em;
	line-height: 1.45;
	color: var(--trrss-muted);
	overflow-wrap: anywhere;
}

.trrss .trrss-more {
	display: inline-block;
	margin-top: .4em;
	font-size: .85em;
	font-weight: 600;
}

/* Cards layout */
.trrss .trrss-grid {
	display: grid;
	grid-template-columns: repeat(var(--trrss-cols, auto-fill), minmax(min(220px, 100%), 1fr));
	gap: var(--trrss-gap);
}

.trrss .trrss-card {
	display: flex;
	flex-direction: column;
	gap: .6em;
	min-width: 0;
}

.trrss.trrss-divided .trrss-card {
	padding: var(--trrss-gap);
	border: 1px solid var(--trrss-line);
	border-radius: var(--trrss-radius);
}

.trrss .trrss-card .trrss-media {
	width: 100%;
}

/* The card image follows the thumbnail height, or the ratio of its container
   when the height is left empty. */
.trrss .trrss-card .trrss-img {
	height: var(--trrss-thumb-h);
}

/* Diagnostics, shown to site administrators only. */
.trrss .trrss-debug {
	margin-top: var(--trrss-gap);
	padding: .6em .8em;
	border: 1px dashed var(--trrss-line);
	border-radius: var(--trrss-radius);
	font-size: .8em;
	color: var(--trrss-muted);
}

.trrss .trrss-debug ul {
	margin: .4em 0 0;
	padding-left: 1.2em;
	overflow-wrap: anywhere;
}

/* Small screens: side thumbnails shrink rather than squeezing the text. */
@media (max-width: 480px) {
	.trrss.trrss-thumb-left .trrss-media,
	.trrss.trrss-thumb-right .trrss-media {
		width: min(var(--trrss-thumb-w), 33vw);
	}
}

/* Older browsers without color-mix keep a usable, if flatter, look. */
@supports not (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.trrss {
		--trrss-line: rgba(128, 128, 128, .35);
		--trrss-muted: inherit;
		--trrss-tint: rgba(128, 128, 128, .12);
	}

	.trrss .trrss-meta,
	.trrss .trrss-text {
		opacity: .75;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trrss * {
		transition: none !important;
		animation: none !important;
	}
}

/* Timed scrolling. The scrollbar is hidden only once the script has actually taken
   over, so a module whose list already fits keeps its normal appearance. */
.trrss.trrss-ticker-on {
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.trrss.trrss-ticker-on::-webkit-scrollbar {
	display: none;
}

/* The duplicated entries exist only to make the loop seamless: they must never be
   announced by a screen reader nor reachable with the keyboard. */
.trrss .trrss-clone {
	user-select: none;
}

@media (prefers-reduced-motion: reduce) {
	.trrss.trrss-ticker-on {
		scroll-behavior: auto;
	}
}