/**
 * SureDash Extender — link preview card.
 *
 * A horizontal card: fixed-size thumbnail on the inline-start edge, text
 * filling the rest. Chosen over the large-cover-image style deliberately —
 * the thumbnail's box never changes size, so a 4000px-wide og:image and a
 * 200px one produce identically shaped cards, and a post with several
 * paragraphs doesn't get a full-width billboard dropped under it.
 *
 * Every value in the card came from a third-party page, so the layout has to
 * survive text that is far longer or far shorter than expected. Titles clamp
 * to two lines and descriptions to two; both degrade to fewer if the text is
 * short. Nothing here depends on the text being a sensible length.
 *
 * The `no-media` variant is not an edge case: wordpress.org's news posts ship
 * no Open Graph tags at all, so a card built from <title> and canonical alone
 * is a normal outcome and has to look deliberate rather than broken.
 *
 * Colours come from SureDash's own tokens, with fallbacks matching its
 * defaults, so the card follows a portal's palette including dark mode.
 */

.sdext-link-card {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	margin-block-start: 12px;
	border: 1px solid var( --portal-border-color, #e2e8f0 );
	border-radius: 8px;
	background: var( --portal-content-bg-color, #fff );
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sdext-link-card:hover,
.sdext-link-card:focus-visible {
	border-color: var( --portal-link-color, #4f46e5 );
	background: var( --portal-global-color-7, rgb( 0 0 0 / 2% ) );
	text-decoration: none;
}

.sdext-link-card:focus-visible {
	outline: 2px solid var( --portal-link-color, #4f46e5 );
	outline-offset: 2px;
}

/* The thumbnail well. A fixed box with its own background, so a transparent
   PNG or an image that fails to load still leaves a tidy rectangle rather
   than a collapsed gap or a broken-image glyph. */
.sdext-link-card-media {
	flex: 0 0 auto;
	width: 120px;
	align-self: stretch;
	min-height: 100%;
	overflow: hidden;
	background: var( --portal-global-color-7, #f1f5f9 );
}

.sdext-link-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 88px;
	object-fit: cover;
	/* Third-party images arrive at unpredictable aspect ratios; the well
	   crops rather than letting them dictate the card's shape. */
	object-position: center;
}

.sdext-link-card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* min-width:0 is what allows the text children to shrink and ellipsise
	   inside a flex row — without it a long unbroken word pushes the card
	   wider than its container. */
	min-width: 0;
	flex: 1 1 auto;
	padding: 12px 14px;
	justify-content: center;
}

.sdext-link-card-site {
	font-size: 12px;
	line-height: 16px;
	color: var( --portal-text-tertiary-color, var( --portal-text-secondary-color, #64748b ) );
	text-transform: lowercase;
	/* A hostname has no spaces to wrap at. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sdext-link-card-title {
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	color: var( --portal-heading-color, var( --portal-text-color, #0f172a ) );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* A URL pasted as a title has no break opportunities. */
	overflow-wrap: anywhere;
}

.sdext-link-card-desc {
	margin-block-start: 2px;
	font-size: 13px;
	line-height: 18px;
	color: var( --portal-text-secondary-color, #64748b );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* Without an image the body is the whole card, so it gets a little more room
   and the description can run to three lines. */
.sdext-link-card.no-media .sdext-link-card-body {
	padding: 14px 16px;
}

.sdext-link-card.no-media .sdext-link-card-desc {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/**
 * The banner shape, for pages that declare `twitter:card=summary_large_image`
 * or ship a wide, large og:image. Cropping one of those into the compact well
 * destroys it — GitHub's repository images are rendered text, and a square
 * crop of them is an unreadable fragment.
 *
 * aspect-ratio rather than a fixed height, so the banner scales with the
 * card's width instead of cropping harder on narrow screens.
 */
.sdext-link-card.is-wide {
	flex-direction: column;
}

.sdext-link-card.is-wide .sdext-link-card-media {
	width: 100%;
	align-self: auto;
	aspect-ratio: 1.91 / 1;
	max-height: 260px;
	min-height: 0;
}

.sdext-link-card.is-wide .sdext-link-card-media img {
	min-height: 0;
}

/* On a narrow screen a 120px well leaves too little for the text, so the card
   stacks and the image becomes a banner. */
@media ( max-width: 480px ) {
	.sdext-link-card {
		flex-direction: column;
	}

	.sdext-link-card-media {
		width: 100%;
		height: 160px;
		align-self: auto;
	}

	.sdext-link-card-media img {
		min-height: 0;
	}
}

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