/*
 * Same background-image/color + scrim mechanics as square-card, but a
 * different layout: content (heading+text) and the action link are both
 * pinned to the bottom of the card via justify-content: flex-end, stacked
 * with a spacing-8 gap between them — no number badge — matching this
 * card's own Figma source exactly, distinct from square-card's single
 * flowing content block.
 *
 * The card itself is always a plain, non-interactive <div> — only the
 * action (.wp-block-andrei-saguna-linking-card__action) is a real link, by
 * request. (An earlier version made the whole card the click target, per
 * the Figma source's own literal markup; reverted to a button-only link.)
 *
 * "Dark" tone ink (#002547) and its own text-secondary (#3f4a5a) are the
 * same recurring not-yet-tokenized hexes used elsewhere in this plugin
 * (square-card, faq-item, cta-section, breadcrumb-item, hero-text) — see
 * square-card/style.css for the running note on promoting them.
 */
.wp-block-andrei-saguna-linking-card {
	position: relative;
	box-sizing: border-box;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--8);
	min-height: 424px;
	width: 100%;
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background-color: lightgray;
	background-position: 50% center;
	background-size: cover;
	background-repeat: no-repeat;
}

.wp-block-andrei-saguna-linking-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.wp-block-andrei-saguna-linking-card__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.2;
	letter-spacing: 0.64px;
}

.wp-block-andrei-saguna-linking-card__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
}

.wp-block-andrei-saguna-linking-card__action {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	text-decoration: none;
	color: inherit;
}

/* Only a real <a> (the front end) gets the pointer cursor — the editor's own preview is a plain, non-clickable <div>. */
a.wp-block-andrei-saguna-linking-card__action {
	cursor: pointer;
}

.wp-block-andrei-saguna-linking-card__action-text {
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	font-weight: 500;
	line-height: 1;
	text-decoration: underline;
	text-underline-offset: 0.1em;
}

.wp-block-andrei-saguna-linking-card__action-icon {
	display: flex;
	width: 16px;
	height: 16px;
}

.wp-block-andrei-saguna-linking-card__action-icon svg {
	width: 100%;
	height: 100%;
}

/*
 * Light tone (image or dark solid backgrounds): white heading, light-gray
 * body text, white action link — same values as square-card's "light" tone.
 */
.wp-block-andrei-saguna-linking-card.has-tone-light .wp-block-andrei-saguna-linking-card__heading {
	color: var(--wp--preset--color--base-white);
}

.wp-block-andrei-saguna-linking-card.has-tone-light .wp-block-andrei-saguna-linking-card__text {
	color: var(--wp--preset--color--border-default);
}

.wp-block-andrei-saguna-linking-card.has-tone-light .wp-block-andrei-saguna-linking-card__action-text,
.wp-block-andrei-saguna-linking-card.has-tone-light .wp-block-andrei-saguna-linking-card__action-icon {
	color: var(--wp--preset--color--base-white);
}

/*
 * Dark tone (light/white backgrounds): ink heading, its own text-secondary
 * body text — the action link uses the site's real accent link color, not
 * a muted tone-matched gray like square-card's button, since this card's
 * whole purpose is to BE a link (per the Figma "Atom / Link" component's
 * "on-light uses the accent blue" rule).
 */
.wp-block-andrei-saguna-linking-card.has-tone-dark .wp-block-andrei-saguna-linking-card__heading {
	color: #002547;
}

.wp-block-andrei-saguna-linking-card.has-tone-dark .wp-block-andrei-saguna-linking-card__text {
	color: #3f4a5a;
}

.wp-block-andrei-saguna-linking-card.has-tone-dark .wp-block-andrei-saguna-linking-card__action-text,
.wp-block-andrei-saguna-linking-card.has-tone-dark .wp-block-andrei-saguna-linking-card__action-icon {
	color: var(--wp--preset--color--accent-500);
}

.wp-block-andrei-saguna-linking-card.has-tone-dark a.wp-block-andrei-saguna-linking-card__action:hover .wp-block-andrei-saguna-linking-card__action-text,
.wp-block-andrei-saguna-linking-card.has-tone-dark a.wp-block-andrei-saguna-linking-card__action:hover .wp-block-andrei-saguna-linking-card__action-icon {
	color: var(--wp--preset--color--accent-600);
}

@media (max-width: 480px) {
	.wp-block-andrei-saguna-linking-card {
		min-height: 320px;
	}
}