/**
 * @package     Joomla.Plugin
 * @subpackage  Content.gdlinkpreview
 *
 * @copyright   (C) 2026 GeniusDesign
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

:root {
	--gdlp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1.25 2.75h13.5v10.5H1.25zm1.1 2.85h11.3v6.4H2.35z'/%3E%3C/svg%3E");
	--gdlp-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M9.4 1.5h5.1v5.1h-1.4V3.89l-6.2 6.2-.99-.99 6.2-6.2H9.4z'/%3E%3Cpath fill='%23000' d='M2.9 3.6h4.3V5H4.3v6.7H11V8.8h1.4v4.3H2.9z'/%3E%3C/svg%3E");
	--gdlp-card-bg: #fff;
	--gdlp-card-fg: #1a1a1a;
	--gdlp-card-muted: #6b7280;
	--gdlp-card-border: rgba(0, 0, 0, .1);
	--gdlp-card-accent: var(--gdj-accent, #1e87f0);
	--gdlp-card-width: 22rem;
	--gdlp-card-radius: 10px;
}

/* ---------------------------------------------------------------------------
   The window glyph appended inside the link itself.
   Drawn with a mask so it always takes the link's own colour.
   --------------------------------------------------------------------------- */

.gdlp-icons a[data-gdlp]::after {
	content: "";
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-inline-start: .28em;
	vertical-align: baseline;
	background-color: currentColor;
	opacity: .6;
	-webkit-mask: var(--gdlp-icon) no-repeat center / contain;
	mask: var(--gdlp-icon) no-repeat center / contain;
	transition: opacity .15s ease;
}

.gdlp-icons a[data-gdlp]:hover::after,
.gdlp-icons a[data-gdlp]:focus-visible::after,
.gdlp-icons a[data-gdlp][aria-describedby]::after {
	opacity: 1;
}

/* Never let the glyph dangle alone on the last line. */
.gdlp-icons a[data-gdlp] {
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   The "leaves this site" glyph.

   Deliberately not scoped to .gdlp-icons: unlike the window glyph it promises
   nothing that JavaScript has to deliver, so it stays correct with no script.
   --------------------------------------------------------------------------- */

a[data-gdlp-ext]::after {
	content: "";
	display: inline-block;
	width: .68em;
	height: .68em;
	margin-inline-start: .26em;
	vertical-align: baseline;
	background-color: currentColor;
	opacity: .65;
	-webkit-mask: var(--gdlp-icon-external) no-repeat center / contain;
	mask: var(--gdlp-icon-external) no-repeat center / contain;
	transition: opacity .15s ease;
}

a[data-gdlp-ext]:hover::after,
a[data-gdlp-ext]:focus-visible::after {
	opacity: 1;
}

a[data-gdlp-ext] {
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   The preview card.
   --------------------------------------------------------------------------- */

.gdlp-card {
	position: fixed;
	z-index: 1200;
	top: 0;
	left: 0;
	width: var(--gdlp-card-width);
	max-width: calc(100vw - 2rem);
	overflow: hidden;
	border: 1px solid var(--gdlp-card-border);
	border-radius: var(--gdlp-card-radius);
	background: var(--gdlp-card-bg);
	color: var(--gdlp-card-fg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 0, 0);
	transition: opacity .14s ease;
	pointer-events: none;
	will-change: transform;
}

.gdlp-card.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Keyboard users get a card they can actually read without a pointer. */
.gdlp-card.is-anchored {
	pointer-events: auto;
}

.gdlp-card__media {
	display: block;
	aspect-ratio: 1.91 / 1;
	overflow: hidden;
	background: rgba(0, 0, 0, .04);
}

.gdlp-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gdlp-card:not(.has-image) .gdlp-card__media {
	display: none;
}

.gdlp-card__body {
	padding: .75rem .9rem .85rem;
}

.gdlp-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: baseline;
	margin-bottom: .3rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gdlp-card-accent);
}

.gdlp-card__date {
	font-weight: 500;
	color: var(--gdlp-card-muted);
}

.gdlp-card:not(.has-meta) .gdlp-card__meta {
	display: none;
}

.gdlp-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0 0 .3rem;
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.3;
}

.gdlp-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--gdlp-card-muted);
}

.gdlp-card:not(.has-desc) .gdlp-card__desc {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root {
		--gdlp-card-bg: #1e1f24;
		--gdlp-card-fg: #f2f3f5;
		--gdlp-card-muted: #a0a4ad;
		--gdlp-card-border: rgba(255, 255, 255, .14);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdlp-card {
		transition: none;
	}
}

/* Coarse pointers never hover: keep the glyph, drop the card entirely. */
@media not all and (hover: hover) and (pointer: fine) {
	.gdlp-card {
		display: none;
	}
}