/*
 * Zmienky o zážitkoch v textoch webu (Ellipse_Experience_Mentions): odkaz v texte (ex-ref), riadková karta (ex-row),
 * mriežka riadkových kariet zo zoznamu (ex-rows) a mriežka menších kariet s fotkou (ex-minis).
 * Funguje aj mimo obalu .ellipse-pkg (obyčajný text stránky z Elementora): vlastné hodnoty farieb,
 * premenné --ep-* sa použijú iba ak existujú. Zdvojené triedy zvyšujú prioritu pred štýlmi témy a textu balíčka.
 */

.ex-mention-block,
.ex-ref {
	--exm-brown: var(--ep-brown, #332B21);
	--exm-brown-hover: var(--ep-brown-hover, #4A3F31);
	--exm-bg: var(--ep-bg, #F8F7F4);
	--exm-sand: var(--ep-sand, #EFEAE2);
	--exm-line: var(--ep-line, #E6E1D8);
	--exm-gold: #B98B4E;
	--exm-gold-dark: #8A6738;
	--exm-ink: #1E1912;
	--exm-muted: rgba(0, 0, 0, .6);
	--exm-white: #FFFFFF;
	--exm-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------- Ikony (maska – prežijú aj čistenie HTML) ---------------- */

.ex-mi {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--exm-icon) center / contain no-repeat;
	mask: var(--exm-icon) center / contain no-repeat;
}
.ex-mi--pin { --exm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.ex-mi--car { --exm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16.5h14M6.5 16.5V19M17.5 16.5V19'/%3E%3Cpath d='M4 16.5v-4l1.8-4.6A2 2 0 0 1 7.7 6.6h8.6a2 2 0 0 1 1.9 1.3l1.8 4.6v4'/%3E%3Cpath d='M4 12.5h16'/%3E%3C/svg%3E"); }
.ex-mi--arrow { --exm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* ---------------- Odkaz v texte ---------------- */

a.ex-ref.ex-ref,
a.ex-ref.ex-ref:visited,
.ellipse-pkg .ep-prose a.ex-ref {
	color: var(--exm-brown);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(185, 139, 78, .55);
	text-underline-offset: .22em;
	transition: text-decoration-color .2s ease, color .2s ease;
}
a.ex-ref.ex-ref:hover,
a.ex-ref.ex-ref:focus-visible,
.ellipse-pkg .ep-prose a.ex-ref:hover {
	color: var(--exm-brown-hover);
	text-decoration-color: currentColor;
}
.ex-ref .ex-ref__icon {
	width: .8em;
	height: .8em;
	margin: 0 .18em 0 .04em;
	vertical-align: -.06em;
	color: var(--exm-gold);
}

/* ---------------- Bloky ---------------- */

.ex-mention-block {
	margin: 1.4em 0;
	font-family: var(--ep-font, "Neue Plak", "Helvetica Neue", Arial, sans-serif);
	line-height: 1.4;
}
.ex-mention-block:first-child { margin-top: 0; }
.ex-mention-block:last-child { margin-bottom: 0; }
.ex-mention-block *,
.ex-mention-block *::before,
.ex-mention-block *::after { box-sizing: border-box; }

/* Riadková karta: malá fotka vľavo, kategória, názov, popis, vzdialenosť, šípka */
.ex-mention-block > .ex-row { max-width: 680px; }
.ex-rows {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: 12px;
}
.ex-mention-block .ex-row.ex-row,
.ex-mention-block a.ex-row.ex-row:visited,
.ellipse-pkg .ep-prose a.ex-row {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	padding: 10px 16px 10px 10px;
	border: 1px solid var(--exm-line);
	border-radius: 20px;
	background: var(--exm-white);
	color: var(--exm-ink);
	text-decoration: none;
	transition: transform .25s var(--exm-ease), box-shadow .25s var(--exm-ease), border-color .25s ease;
}
.ex-mention-block a.ex-row.ex-row:hover,
.ex-mention-block a.ex-row.ex-row:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(185, 139, 78, .45);
	box-shadow: 0 16px 34px -20px rgba(36, 30, 23, .35);
}
.ex-row__media {
	position: relative;
	flex: 0 0 auto;
	width: 92px;
	height: 92px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--exm-sand);
}
.ex-mention-block .ex-row__media img,
.ex-mention-block .ex-mini__media img,
.ellipse-pkg .ep-prose .ex-mention-block img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	transition: transform .6s var(--exm-ease);
}
.ex-mention-block a:hover .ex-row__media img,
.ex-mention-block a:hover .ex-mini__media img { transform: scale(1.06); }
.ex-row__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--exm-gold);
	font-size: 26px;
}
.ex-row__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ex-row__cat,
.ex-mini__cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--exm-gold-dark);
}
.ex-row__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.005em;
	color: var(--exm-brown);
}
.ex-row__desc {
	font-size: 14px;
	line-height: 1.45;
	color: var(--exm-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ex-row__meta,
.ex-mini__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--exm-brown);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ex-row__meta .ex-mi,
.ex-mini__meta .ex-mi { font-size: 15px; color: var(--exm-gold); }
.ex-row__arrow,
.ex-mini__arrow {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--exm-sand);
	color: var(--exm-brown);
	font-size: 16px;
	transition: background-color .2s ease, color .2s ease, transform .25s var(--exm-ease);
}
.ex-mention-block a:hover .ex-row__arrow,
.ex-mention-block a:hover .ex-mini__arrow {
	background: var(--exm-brown);
	color: var(--exm-white);
	transform: translateX(2px);
}

/* Mriežka menších kariet s fotkou (2 – 3 v rade) */
.ex-minis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.ex-minis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.ex-mention-block .ex-mini.ex-mini,
.ex-mention-block a.ex-mini.ex-mini:visited,
.ellipse-pkg .ep-prose a.ex-mini {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--exm-line);
	border-radius: 20px;
	overflow: hidden;
	background: var(--exm-white);
	color: var(--exm-ink);
	text-decoration: none;
	transition: transform .25s var(--exm-ease), box-shadow .25s var(--exm-ease), border-color .25s ease;
}
.ex-mention-block a.ex-mini.ex-mini:hover,
.ex-mention-block a.ex-mini.ex-mini:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(185, 139, 78, .45);
	box-shadow: 0 18px 36px -22px rgba(36, 30, 23, .4);
}
.ex-mini__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--exm-sand);
}
.ex-mini__cat {
	position: absolute;
	left: 10px;
	top: 10px;
	max-width: calc(100% - 20px);
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--exm-brown);
	letter-spacing: .06em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ex-mini__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 10px;
	padding: 12px 12px 14px 16px;
}
.ex-mini__title {
	grid-column: 1;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--exm-brown);
}
.ex-mini__meta { grid-column: 1; }
.ex-mini__arrow { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; font-size: 15px; }

/* Mobil a úzke stĺpce */
@media (max-width: 599px) {
	.ex-row__media { width: 76px; height: 76px; border-radius: 12px; }
	.ex-mention-block .ex-row.ex-row,
	.ellipse-pkg .ep-prose a.ex-row { gap: 12px; padding: 8px 12px 8px 8px; border-radius: 18px; }
	.ex-row__title { font-size: 16px; }
	.ex-row__desc { font-size: 13px; }
	.ex-row__arrow { width: 32px; height: 32px; font-size: 14px; }
	/* Mriežka kariet na mobile: kompaktné vodorovné karty pod sebou (fotka vľavo ako pri riadkovej karte) */
	.ex-minis,
	.ex-minis--2 { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: none; }
	.ex-mention-block .ex-mini.ex-mini,
	.ellipse-pkg .ep-prose a.ex-mini { flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 18px; }
	.ex-mini__media { flex: 0 0 auto; width: 64px; height: 64px; aspect-ratio: auto; border-radius: 12px; }
	.ex-mini__cat { display: none; }
	.ex-mini__body { flex: 1 1 auto; min-width: 0; padding: 0; }
	.ex-mini__title { font-size: 16px; }
	.ex-mini__arrow { width: 32px; height: 32px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ex-mention-block *,
	a.ex-ref.ex-ref { transition: none !important; }
	.ex-mention-block a:hover { transform: none !important; }
	.ex-mention-block a:hover img { transform: none !important; }
}