/* Linkinbio embed restyle — scoped under .ofm-ad--linkinbio
   Horizontal card layout: image left, stacked content right.
   `!important` is used only where the embed sets matching properties inline. */

/* No outer container — the individual row-cards carry their own background + radius.
   This lets the card list sit flush in article content without a boxy outline. */
.ofm-ad--linkinbio {
	padding: 0;
	background: transparent;
	border-radius: 0;
	margin: 1.5rem 0;
}

.ofm-ad--linkinbio [id^="linkinbio_embed_"] {
	display: block;
}

.ofm-ad--linkinbio #linkinbio_table {
	font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 1rem !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem;
}

.ofm-ad--linkinbio #linkinbio_table thead {
	display: none !important;
}

.ofm-ad--linkinbio #linkinbio_table tbody {
	display: contents !important;
}

/* Each row = horizontal row. No card chrome — sits flush in article content. */
.ofm-ad--linkinbio #linkinbio_table tr {
	display: grid !important;
	grid-template-columns: 96px 1fr auto !important;
	grid-template-areas: "img body cta" !important;
	align-items: center !important;
	gap: 1rem !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	/* Right padding gives the CTA's :hover scale(1.04)/translate room
	   to breathe without getting clipped at the article's right edge. */
	padding: 0.5rem 0.75rem 0.5rem 0 !important;
	overflow: visible;
	box-shadow: none !important;
}

.ofm-ad--linkinbio #linkinbio_table tr:nth-child(even) {
	background: transparent !important;
}

/* Embed renders twice on a single post:
   --top    after p1 → rows 1-3
   --bottom at end   → rows 4-6 */
.ofm-ad--linkinbio--top #linkinbio_table tr:nth-child(n+4) {
	display: none !important;
}
.ofm-ad--linkinbio--bottom #linkinbio_table tr:nth-child(-n+3),
.ofm-ad--linkinbio--bottom #linkinbio_table tr:nth-child(n+7) {
	display: none !important;
}

/* No hover lift — nothing to lift. Keep the image subtle scale as affordance. */
.ofm-ad--linkinbio #linkinbio_table tr:hover td:nth-child(1) a > div {
	transform: scale(1.02);
}
.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a > div {
	transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ofm-ad--linkinbio #linkinbio_table td {
	display: block !important;
	border: none !important;
	padding: 0 !important;
	text-align: left !important;
	color: var(--ofm-on-surface);
}

/* ── Column 1: picture ─────────────────────────────────────────────── */
.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) {
	grid-area: img;
	width: 96px !important;
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a {
	display: block !important;
	width: 96px !important;
	margin: 0 !important;
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a > div {
	width: 96px !important;
	height: 128px !important;
	aspect-ratio: 3 / 4 !important;
	border-radius: var(--ofm-radius-md) !important;
	background-size: cover !important;
	background-position: center !important;
}

/* ── Column 2: name + handle + subscribers pill (stacked) ──────────── */
.ofm-ad--linkinbio #linkinbio_table td:nth-child(2) {
	grid-area: body;
	display: flex !important;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(2) a.link {
	display: block;
	color: var(--ofm-on-surface) !important;
	text-decoration: none !important;
	font-family: 'Noto Serif', ui-serif, Georgia, serif;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(2) a.link:first-of-type {
	font-size: 1.2rem !important;
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(2) br + a.link {
	font-size: 0.8rem !important;
	font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
	color: var(--ofm-on-surface-muted) !important;
	font-weight: 400;
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(2) br {
	display: none;
}

/* ── Column 3 (subscribers) merged into the body column as a pill ──── */
.ofm-ad--linkinbio #linkinbio_table td:nth-child(3) {
	grid-area: body;
	justify-self: start;
	align-self: end;
	margin-top: 0.35rem;
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ofm-on-primary);
	background: linear-gradient(135deg, var(--ofm-secondary) 0%, #d4a340 100%);
	padding: 0.2rem 0.55rem !important;
	border-radius: 999px !important;
	font-weight: 700;
}

/* Push the pill into a third grid row under name/handle */
.ofm-ad--linkinbio #linkinbio_table tr {
	grid-template-rows: auto auto !important;
	grid-template-areas:
		"img body cta"
		"img pill cta" !important;
}
.ofm-ad--linkinbio #linkinbio_table td:nth-child(3) { grid-area: pill; }

/* ── Column 4: CTA button ──────────────────────────────────────────── */
.ofm-ad--linkinbio #linkinbio_table td:nth-child(4) {
	grid-area: cta;
	align-self: center;
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(4) a.button {
	background: linear-gradient(135deg, var(--ofm-primary) 0%, var(--ofm-primary-container) 100%) !important;
	color: var(--ofm-on-primary) !important;
	font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 0.85rem !important;
	padding: 0.65rem 1.1rem !important;
	border-radius: 999px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	text-align: center !important;
	display: inline-block !important;
	white-space: nowrap;
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate !important;
	box-shadow: var(--ofm-shadow-cta);
	transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 320ms ease;
}

/* Shine sweep */
.ofm-ad--linkinbio #linkinbio_table td:nth-child(4) a.button::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		110deg,
		transparent 30%,
		var(--ofm-shine) 50%,
		transparent 70%
	);
	transform: translateX(-120%);
	transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(4) a.button:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: var(--ofm-shadow-cta-hover);
}

.ofm-ad--linkinbio #linkinbio_table td:nth-child(4) a.button:hover::after {
	transform: translateX(120%);
}

/* ── Column 5: "Monthly cost" — hidden (FREE is redundant with CTA) ── */
.ofm-ad--linkinbio #linkinbio_table td:nth-child(5) {
	display: none !important;
}

/* ── Tablet (≤ 820px) ─────────────────────────────────────────────── */
@media (max-width: 820px) {
	.ofm-ad--linkinbio {
		padding: 0;
	}
	.ofm-ad--linkinbio #linkinbio_table tr {
		grid-template-columns: 80px 1fr auto !important;
		gap: 0.85rem !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1),
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a {
		width: 80px !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a > div {
		width: 80px !important;
		height: 107px !important;
	}
}

/* ── Phone (≤ 560px) ───────────────────────────────────────────────── */
@media (max-width: 560px) {
	.ofm-ad--linkinbio {
		padding: 0;
	}
	.ofm-ad--linkinbio #linkinbio_table {
		gap: 0.6rem;
	}
	.ofm-ad--linkinbio #linkinbio_table tr {
		grid-template-columns: 68px 1fr !important;
		grid-template-rows: auto auto auto !important;
		grid-template-areas:
			"img body"
			"img pill"
			"cta cta" !important;
		gap: 0.5rem 0.75rem !important;
		padding: 0.6rem !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1),
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a {
		width: 68px !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a > div {
		width: 68px !important;
		height: 91px !important;
		border-radius: var(--ofm-radius-sm) !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(2) a.link:first-of-type {
		font-size: 1.05rem !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(3) {
		font-size: 0.6rem;
		margin-top: 0.2rem;
	}
	/* CTA drops below and stretches full-width */
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(4) a.button {
		display: block !important;
		width: 100% !important;
		padding: 0.7rem 1rem !important;
		font-size: 0.9rem !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(4) {
		align-self: stretch;
	}
}

/* ── Small phone (≤ 360px) — tighten more ─────────────────────────── */
@media (max-width: 360px) {
	.ofm-ad--linkinbio #linkinbio_table tr {
		grid-template-columns: 56px 1fr !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1),
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a,
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a > div {
		width: 56px !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(1) a > div {
		height: 75px !important;
	}
	.ofm-ad--linkinbio #linkinbio_table td:nth-child(2) a.link:first-of-type {
		font-size: 1rem !important;
	}
}

/* Kill any injected "Monthly cost:" / "Subscribers:" labels */
.ofm-ad--linkinbio.linkinbio_mobile #linkinbio_table td::before {
	content: '' !important;
}