/* Linkora Inline Reads – front-end styles. All selectors are prefixed with .lkir- */

.lkir-box {
	--lkir-scale: 1;
	--lkir-radius: 18px;
	--lkir-font: inherit;
	--lkir-shadow: 0 10px 30px -12px rgba(30, 20, 10, .35), 0 2px 6px rgba(30, 20, 10, .06);
	--lkir-fg: #4a3428;
	--lkir-accent: #a5684a;
	--lkir-pill: rgba(255, 255, 255, .6);
	--lkir-cta-bg: #4a3428;
	--lkir-cta-ink: #fff;
	--lkir-surface: #fffaf6;
	--lkir-border: #ecd9c9;
	--lkir-ink: #3b2a20;
	--lkir-muted: #8a6f5e;
	--lkir-hover: #fbeee3;
	--lkir-g1: linear-gradient(135deg, #f8eadf 0%, #e8cab4 100%);
	--lkir-g2: linear-gradient(135deg, #f6e3e2 0%, #e0b9bd 100%);
	--lkir-g3: linear-gradient(135deg, #f1e8d8 0%, #d8c09f 100%);
	--lkir-g4: linear-gradient(135deg, #f3e1d1 0%, #dbb398 100%);

	display: block;
	position: relative;
	box-sizing: border-box;
	float: none;
	clear: both;
	width: auto;
	max-width: 100%;
	margin: 2.2em 0;
	padding: 0;
	font-family: var(--lkir-font);
	font-size: calc(16px * var(--lkir-scale));
	line-height: 1.35;
	color: var(--lkir-ink);
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}

.lkir-box *,
.lkir-box *::before,
.lkir-box *::after {
	box-sizing: border-box;
}

.lkir-box ul,
.lkir-box li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lkir-box li::before,
.lkir-box li::after {
	content: none;
	display: none;
}

.lkir-box a.lkir-link,
.lkir-box a.lkir-link:hover,
.lkir-box a.lkir-link:focus,
.lkir-box a.lkir-link:visited {
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	outline-offset: 3px;
	background-image: none;
}

.lkir-box a.lkir-link:focus-visible {
	outline: 3px solid var(--lkir-accent);
}

.lkir-box .lkir-svg {
	display: block;
	width: 1em;
	height: 1em;
	flex: none;
}

/* ---- Label pill ---------------------------------------------------------- */
.lkir-box .lkir-label {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: .72em;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}

.lkir-box .lkir-ico {
	display: inline-block;
	font-size: 1.15em;
	line-height: 1;
	transform-origin: 50% 55%;
}

.lkir-box .lkir-cat {
	display: block;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
}

/* ============================================================================
 * 1. SPOTLIGHT – one big gradient card
 * ========================================================================== */
.lkir-style-spotlight a.lkir-link {
	display: block;
	color: var(--lkir-fg) !important;
}

.lkir-style-spotlight .lkir-card {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 2em 2em 1.8em;
	border-radius: var(--lkir-radius);
	background: var(--lkir-g1);
	color: var(--lkir-fg);
	box-shadow: var(--lkir-shadow);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}

.lkir-style-spotlight .lkir-card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .42), transparent 42%),
		radial-gradient(circle at 4% 104%, rgba(255, 255, 255, .22), transparent 40%);
}

.lkir-style-spotlight .lkir-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: -70%;
	width: 40%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-20deg);
	transition: left .8s ease;
}

.lkir-style-spotlight a.lkir-link:hover .lkir-card {
	transform: translateY(-4px);
}

.lkir-style-spotlight a.lkir-link:hover .lkir-card::after {
	left: 140%;
}

.lkir-style-spotlight .lkir-label {
	position: relative;
	padding: .6em 1.05em;
	border-radius: 999px;
	background: var(--lkir-pill);
	backdrop-filter: blur(4px);
}

.lkir-style-spotlight .lkir-cat {
	position: relative;
	margin-top: 1.1em;
}

.lkir-style-spotlight .lkir-title {
	position: relative;
	display: block;
	margin: .75em 0 1.15em;
	font-size: 1.7em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.lkir-style-spotlight .lkir-cat + .lkir-title {
	margin-top: .35em;
}

.lkir-box .lkir-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .7em 1.25em;
	border-radius: 999px;
	background: var(--lkir-cta-bg);
	color: var(--lkir-cta-ink);
	font-size: .9em;
	font-weight: 800;
	line-height: 1;
	transition: gap .25s ease, padding .25s ease;
}

.lkir-style-spotlight a.lkir-link:hover .lkir-cta {
	gap: .95em;
}

/* ============================================================================
 * 2. RIBBON – slim single card with a colour bar
 * ========================================================================== */
.lkir-style-ribbon a.lkir-link {
	display: block;
	color: var(--lkir-ink) !important;
}

.lkir-style-ribbon .lkir-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.1em;
	overflow: hidden;
	padding: 1.15em 1.3em 1.15em 1.7em;
	border: 1px solid var(--lkir-border);
	border-radius: var(--lkir-radius);
	background: var(--lkir-surface);
	box-shadow: var(--lkir-shadow);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s;
}

.lkir-style-ribbon .lkir-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: .5em;
	background: var(--lkir-g1);
	transition: width .3s ease;
}

.lkir-style-ribbon a.lkir-link:hover .lkir-card {
	transform: translateX(4px);
	border-color: var(--lkir-accent);
}

.lkir-style-ribbon a.lkir-link:hover .lkir-card::before {
	width: .8em;
}

.lkir-style-ribbon .lkir-body {
	flex: 1;
	min-width: 0;
}

.lkir-style-ribbon .lkir-label {
	color: var(--lkir-accent);
	font-size: .7em;
}

.lkir-style-ribbon .lkir-title {
	display: block;
	margin-top: .5em;
	font-size: 1.14em;
	font-weight: 750;
	line-height: 1.28;
	text-wrap: balance;
	transition: color .25s;
}

.lkir-style-ribbon a.lkir-link:hover .lkir-title {
	color: var(--lkir-accent);
}

.lkir-style-ribbon .lkir-cat {
	margin-top: .55em;
	color: var(--lkir-muted);
}

.lkir-style-ribbon .lkir-arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	background: var(--lkir-g1);
	color: var(--lkir-fg);
	font-size: 1em;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lkir-style-ribbon a.lkir-link:hover .lkir-arrow {
	transform: translateX(4px) rotate(-45deg);
}

/* ============================================================================
 * 3. STACK – header + numbered list of titles
 * ========================================================================== */
.lkir-style-stack .lkir-inner {
	overflow: hidden;
	border: 1px solid var(--lkir-border);
	border-radius: var(--lkir-radius);
	background: var(--lkir-surface);
	box-shadow: var(--lkir-shadow);
}

.lkir-style-stack .lkir-head {
	padding: 1.05em 1.4em;
	background: var(--lkir-g1);
	color: var(--lkir-fg);
}

.lkir-style-stack .lkir-item + .lkir-item {
	border-top: 1px solid var(--lkir-border);
}

.lkir-style-stack a.lkir-link {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1.05em 1.4em;
	color: var(--lkir-ink) !important;
	transition: background-color .25s ease, padding-left .25s ease;
}

.lkir-style-stack a.lkir-link:hover {
	padding-left: 1.85em;
	background-color: var(--lkir-hover);
}

.lkir-style-stack .lkir-num {
	flex: none;
	min-width: 1.9em;
	color: var(--lkir-accent);
	font-size: 1.1em;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	opacity: .95;
}

.lkir-style-stack .lkir-title {
	flex: 1;
	font-size: 1.04em;
	font-weight: 650;
	line-height: 1.32;
}

.lkir-style-stack .lkir-arrow {
	flex: none;
	color: var(--lkir-accent);
	opacity: .35;
	transition: opacity .25s ease, transform .25s ease;
}

.lkir-style-stack a.lkir-link:hover .lkir-arrow {
	opacity: 1;
	transform: translateX(3px);
}

/* ============================================================================
 * 4. TILES – colourful grid
 * ========================================================================== */
.lkir-style-tiles .lkir-head,
.lkir-style-slider .lkir-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: .95em;
}

.lkir-style-tiles .lkir-label,
.lkir-style-slider .lkir-label {
	padding: .6em 1.05em;
	border-radius: 999px;
	background: var(--lkir-accent);
	color: #fff;
}

.lkir-style-tiles .lkir-grid {
	display: grid;
	grid-template-columns: repeat(var(--lkir-cols, 3), minmax(0, 1fr));
	gap: .95em;
}

.lkir-item[data-tone="1"] { --lkir-tone: var(--lkir-g1); }
.lkir-item[data-tone="2"] { --lkir-tone: var(--lkir-g2); }
.lkir-item[data-tone="3"] { --lkir-tone: var(--lkir-g3); }
.lkir-item[data-tone="4"] { --lkir-tone: var(--lkir-g4); }

.lkir-style-tiles a.lkir-link,
.lkir-style-slider a.lkir-link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 10em;
	overflow: hidden;
	padding: 1.2em;
	border-radius: calc(var(--lkir-radius) * .85);
	background: var(--lkir-tone, var(--lkir-g1));
	color: var(--lkir-fg) !important;
	box-shadow: var(--lkir-shadow);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lkir-style-tiles a.lkir-link::before,
.lkir-style-slider a.lkir-link::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .38), transparent 55%);
}

.lkir-style-tiles a.lkir-link:hover,
.lkir-style-slider a.lkir-link:hover {
	transform: translateY(-5px) scale(1.012);
}

.lkir-style-tiles .lkir-num,
.lkir-style-slider .lkir-num {
	position: absolute;
	top: -.12em;
	right: .12em;
	font-size: 4.8em;
	font-weight: 900;
	line-height: 1;
	opacity: .17;
	pointer-events: none;
}

.lkir-style-tiles .lkir-arrow,
.lkir-style-slider .lkir-arrow {
	position: absolute;
	top: 1em;
	left: 1.1em;
	display: grid;
	place-items: center;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: var(--lkir-pill);
	transition: transform .3s ease;
}

.lkir-style-tiles a.lkir-link:hover .lkir-arrow,
.lkir-style-slider a.lkir-link:hover .lkir-arrow {
	transform: rotate(-45deg);
}

.lkir-style-tiles .lkir-title,
.lkir-style-slider .lkir-title {
	position: relative;
	display: block;
	margin-top: 2.6em;
	font-size: 1.06em;
	font-weight: 780;
	line-height: 1.28;
	text-wrap: balance;
}

.lkir-style-tiles .lkir-cat,
.lkir-style-slider .lkir-cat {
	position: relative;
	margin-top: 2.2em;
}

.lkir-style-tiles .lkir-cat + .lkir-title,
.lkir-style-slider .lkir-cat + .lkir-title {
	margin-top: .35em;
}

/* ============================================================================
 * 5. SLIDER – swipeable cards
 * ========================================================================== */
.lkir-style-slider .lkir-track {
	display: flex;
	gap: .95em;
	margin: 0 -.2em;
	padding: .35em .2em 1em;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 .2em;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.lkir-style-slider .lkir-track::-webkit-scrollbar {
	display: none;
}

.lkir-style-slider .lkir-slide {
	flex: 0 0 min(76%, 17.5em);
	scroll-snap-align: start;
}

.lkir-style-slider .lkir-nav {
	display: none;
	gap: .5em;
}

.lkir-js.lkir-style-slider .lkir-nav {
	display: inline-flex;
}

.lkir-style-slider .lkir-nav button {
	display: grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	padding: 0;
	border: 1px solid var(--lkir-border);
	border-radius: 50%;
	background: var(--lkir-surface);
	color: var(--lkir-ink);
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s, transform .2s;
}

.lkir-style-slider .lkir-nav button:hover {
	background: var(--lkir-hover);
	transform: scale(1.06);
}

.lkir-style-slider .lkir-nav button:disabled {
	opacity: .35;
	cursor: default;
	transform: none;
}

/* ============================================================================
 * 6. MINIMAL – elegant inline link
 * ========================================================================== */
.lkir-style-minimal a.lkir-link {
	display: block;
	color: var(--lkir-ink) !important;
}

.lkir-style-minimal .lkir-card {
	display: block;
	padding: .35em 0 .35em 1.25em;
	border-left: 4px solid var(--lkir-accent);
}

.lkir-style-minimal .lkir-label {
	color: var(--lkir-accent);
	font-size: .7em;
}

.lkir-style-minimal .lkir-title {
	display: inline;
	margin-top: .35em;
	font-size: 1.28em;
	font-weight: 750;
	line-height: 1.4;
	background: linear-gradient(var(--lkir-accent), var(--lkir-accent)) 0 100% / 0 .12em no-repeat;
	transition: background-size .45s cubic-bezier(.2, .8, .2, 1), color .25s;
}

.lkir-style-minimal .lkir-label + .lkir-title {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-top: .55em;
}

.lkir-style-minimal a.lkir-link:hover .lkir-title {
	background-size: 100% .12em;
	color: var(--lkir-accent);
}

/* ============================================================================
 * Motion
 * ========================================================================== */
.lkir-anim .lkir-ico {
	animation: lkir-twinkle 3.2s ease-in-out infinite;
}

@keyframes lkir-twinkle {
	0%, 100% { transform: scale(1) rotate(0); }
	50% { transform: scale(1.25) rotate(12deg); }
}

.lkir-anim.lkir-pre {
	opacity: 0;
	transform: translateY(16px);
}

.lkir-anim.lkir-pre.lkir-in {
	opacity: 1;
	transform: none;
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.lkir-box *,
	.lkir-box *::before,
	.lkir-box *::after {
		animation: none !important;
		transition: none !important;
	}

	.lkir-anim.lkir-pre {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================================
 * Responsive
 * ========================================================================== */
@media (max-width: 640px) {
	.lkir-box {
		margin: 1.8em 0;
	}

	.lkir-style-spotlight .lkir-card {
		padding: 1.5em 1.35em 1.4em;
	}

	.lkir-style-spotlight .lkir-title {
		font-size: 1.45em;
	}

	.lkir-style-tiles .lkir-grid {
		grid-template-columns: 1fr;
		gap: .75em;
	}

	.lkir-style-tiles a.lkir-link {
		min-height: 0;
		padding: 1.1em 1.1em 1.1em 4.1em;
		justify-content: center;
	}

	.lkir-style-tiles .lkir-title {
		margin-top: 0;
	}

	.lkir-style-tiles .lkir-cat {
		margin-top: 0;
	}

	.lkir-style-tiles .lkir-arrow {
		top: 50%;
		transform: translateY(-50%);
	}

	.lkir-style-tiles a.lkir-link:hover .lkir-arrow {
		transform: translateY(-50%) rotate(-45deg);
	}

	.lkir-style-tiles .lkir-num {
		font-size: 3.6em;
	}

	.lkir-style-ribbon .lkir-card {
		padding: 1em 1em 1em 1.4em;
	}
}

@media print {
	.lkir-box {
		display: none !important;
	}
}