/* Návody a rady pre rybárov (Rybar_Guides). Len farby z tokenov, aby fungovali aj nočná a žeravá téma. */

.ryb-guides [hidden] {
	display: none !important;
}

/* ---------- úvod stránky návodu ---------- */
.ryb-g-lead {
	padding-top: 18px;
}
.ryb-g-lead p {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	line-height: 1.55;
	color: var(--ryb-ink-2);
	text-wrap: pretty;
}

/* ---------- rozloženie: obsah vľavo, text vpravo ---------- */
.ryb-g-layout {
	display: grid;
	gap: 18px;
	align-items: start;
	margin-top: 8px;
}
.ryb-g-body {
	min-width: 0;
	max-width: 54rem;
}
.ryb-g-toc {
	min-width: 0;
}
.ryb-g-toc__t {
	margin: 0 0 8px;
	font-size: .82rem;
	font-weight: 680;
	color: var(--ryb-mute);
}
.ryb-g-toc ol {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 2px 0 8px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}
.ryb-g-toc a {
	display: block;
	white-space: nowrap;
	padding: 8px 12px;
	border: 1px solid var(--ryb-line);
	border-radius: 999px;
	background: var(--ryb-surface);
	color: var(--ryb-ink-2);
	font-size: .88rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ryb-g-toc a:hover,
.ryb-g-toc a:focus-visible,
.ryb-g-toc a.is-on {
	background: var(--ryb-shallow);
	border-color: var(--ryb-river);
	color: var(--ryb-deep);
}
@media (min-width: 980px) {
	.ryb-g-layout {
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 40px;
	}
	.ryb-g-toc {
		position: sticky;
		top: 5.5rem;
	}
	.ryb-g-toc ol {
		display: block;
		overflow: visible;
		padding: 0;
		border-left: 2px solid var(--ryb-line);
	}
	.ryb-g-toc li + li {
		margin-top: 2px;
	}
	.ryb-g-toc a {
		white-space: normal;
		padding: 6px 12px;
		margin-left: -2px;
		border: 0;
		border-left: 2px solid transparent;
		border-radius: 0 8px 8px 0;
		background: transparent;
		font-size: .9rem;
		line-height: 1.35;
	}
	.ryb-g-toc a:hover,
	.ryb-g-toc a:focus-visible,
	.ryb-g-toc a.is-on {
		background: var(--ryb-shallow);
		border-left-color: var(--ryb-river);
	}
}

/* ---------- stručne ---------- */
.ryb-g-key {
	display: flex;
	gap: 14px;
	margin: 0 0 8px;
	padding: 16px 18px;
	border: 1px solid var(--ryb-line);
	border-left: 4px solid var(--ryb-river);
	border-radius: var(--ryb-r-lg);
	background: var(--ryb-shallow);
}
.ryb-g-key > .ryb-i {
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	color: var(--ryb-river-2);
}
.ryb-g-key h2 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 700;
}
.ryb-guides .ryb-g-key ul {
	margin: 0;
	padding-left: 1.15rem;
	list-style: disc;
}
.ryb-g-key li {
	margin: 0 0 6px;
	line-height: 1.55;
}
.ryb-g-key li:last-child {
	margin-bottom: 0;
}

/* ---------- sekcie a text ---------- */
.ryb-g-sec {
	scroll-margin-top: 5rem;
	margin-top: clamp(26px, 4vw, 42px);
}
.ryb-g-prose > * + * {
	margin-top: 16px;
}
.ryb-g-prose p,
.ryb-g-prose li,
.ryb-g-a p,
.ryb-g-a li {
	font-size: 1rem;
	line-height: 1.65;
	text-wrap: pretty;
}
.ryb-g-prose p,
.ryb-g-a p {
	margin: 0 0 .8em;
	max-width: 70ch;
}
.ryb-g-prose p:last-child,
.ryb-g-a p:last-child {
	margin-bottom: 0;
}
.ryb-g-prose a,
.ryb-g-a a,
.ryb-g-key a,
.ryb-g-src a {
	color: var(--ryb-river-2);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.ryb-g-prose a:hover,
.ryb-g-a a:hover,
.ryb-g-key a:hover,
.ryb-g-src a:hover {
	text-decoration-thickness: 2px;
}
.ryb-g-ext::after {
	content: "";
	display: inline-block;
	width: .5em;
	height: .5em;
	margin-left: .25em;
	background: currentColor;
	opacity: .6;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ryb-guides .ryb-g-list {
	margin: 0;
	padding-left: 1.3rem;
	list-style: disc;
}
.ryb-guides ol.ryb-g-list {
	list-style: decimal;
}
/* Základný reset (.ryb li::marker) marker vypína; v návodoch ho vraciame, inak zoznamy nemajú odrážky. */
.ryb-guides li::marker {
	content: normal;
}
.ryb-guides .ryb-g-list li::marker,
.ryb-guides .ryb-g-key li::marker {
	color: var(--ryb-river-2);
}
.ryb-g-list li {
	margin: 0 0 .45em;
	max-width: 70ch;
}
.ryb-g-h3 {
	margin: 22px 0 0;
	font-size: 1.05rem;
	font-weight: 700;
	scroll-margin-top: 5rem;
}
.ryb-g-prose .ryb-g-h3 + * {
	margin-top: 8px;
}
.ryb-guides .ryb-g-a ul {
	margin: 0 0 .8em;
	padding-left: 1.2rem;
	list-style: disc;
}
.ryb-g-ev {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: .92rem;
	color: var(--ryb-ink-2);
}
.ryb-g-ev .ryb-eco-tag {
	flex: none;
	margin-top: 2px;
}

/* ---------- poznámky ---------- */
.ryb-g-note {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-r-lg);
	background: var(--ryb-surface);
}
.ryb-g-note > .ryb-i {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--ryb-river-2);
}
.ryb-g-note p {
	margin: 0 0 .6em;
	font-size: .95rem;
	line-height: 1.6;
}
.ryb-g-note p:last-child {
	margin-bottom: 0;
}
.ryb-g-note.is-info {
	background: var(--ryb-shallow);
}
.ryb-g-note.is-warn {
	border-color: var(--eco-mid-bd);
	background: var(--eco-mid-bg);
}
.ryb-g-note.is-warn > .ryb-i {
	color: var(--eco-mid-ink);
}
.ryb-g-note.is-ok {
	border-color: var(--eco-good-bd);
	background: var(--eco-good-bg);
}
.ryb-g-note.is-ok > .ryb-i {
	color: var(--eco-good-ink);
}
.ryb-g-legal {
	margin-top: clamp(26px, 4vw, 42px);
}

/* ---------- tabuľky ---------- */
.ryb-g-tw {
	overflow-x: auto;
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-r-lg);
	background: var(--ryb-surface);
}
.ryb-g-tw:focus-visible {
	outline: 2px solid var(--ryb-river);
	outline-offset: 2px;
}
.ryb-g-table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: .93rem;
	line-height: 1.5;
}
.ryb-g-table caption {
	padding: 12px 14px 4px;
	text-align: left;
	font-size: .85rem;
	font-weight: 650;
	color: var(--ryb-mute);
}
.ryb-g-table th,
.ryb-g-table td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--ryb-line);
}
.ryb-g-table thead th {
	border-top: 0;
	background: var(--ryb-shallow);
	font-size: .82rem;
	font-weight: 700;
	color: var(--ryb-ink-2);
}
.ryb-g-table tbody th {
	font-weight: 640;
	white-space: normal;
}
.ryb-g-table tbody tr:hover > * {
	background: color-mix(in srgb, var(--ryb-shallow) 55%, transparent);
}
.ryb-g-table small {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: .8rem;
	color: var(--ryb-mute);
}
.ryb-g-table td {
	font-variant-numeric: tabular-nums;
}

/* ---------- karty faktov ---------- */
.ryb-g-facts {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.ryb-g-facts .ryb-ffact p {
	margin: 0 0 .5em;
	font-size: .93rem;
	line-height: 1.55;
}
.ryb-g-facts .ryb-ffact p:last-child {
	margin-bottom: 0;
}
.ryb-g-facts .ryb-ffact h3 {
	font-size: .88rem;
	color: var(--ryb-ink);
}

/* ---------- postup (HowTo) ---------- */
.ryb-g-need {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 !important;
	font-size: .92rem !important;
	color: var(--ryb-ink-2);
}
.ryb-g-need span {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
}
.ryb-g-need .ryb-i {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--ryb-river-2);
}
.ryb-g-steps {
	counter-reset: ryb-step;
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-g-steps > li {
	position: relative;
	counter-increment: ryb-step;
	padding: 0 0 22px 3.1rem;
	scroll-margin-top: 5rem;
}
.ryb-g-steps > li:last-child {
	padding-bottom: 0;
}
.ryb-g-steps > li::before {
	content: counter(ryb-step);
	position: absolute;
	left: 0;
	top: -2px;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--ryb-river);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}
.ryb-g-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.05rem - 1px);
	top: 2.3rem;
	bottom: .3rem;
	width: 2px;
	background: var(--ryb-line);
}
.ryb-g-steps h3 {
	margin: 0 0 4px;
	font-size: 1.03rem;
	font-weight: 700;
	line-height: 1.35;
}
.ryb-g-steps p {
	margin: 0 0 .5em;
}

/* ---------- FAQ (rozbaľovacie odpovede) ---------- */
.ryb-g-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}
.ryb-g-tools .ryb-search {
	flex: 1 1 16rem;
	max-width: 28rem;
}
.ryb-g-all {
	padding: 9px 14px;
	border: 1px solid var(--ryb-line);
	border-radius: 999px;
	background: var(--ryb-surface);
	color: var(--ryb-ink-2);
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.ryb-g-all:hover,
.ryb-g-all:focus-visible,
.ryb-g-all[aria-pressed="true"] {
	background: var(--ryb-shallow);
	border-color: var(--ryb-river);
}
.ryb-g-faq {
	display: grid;
	gap: 8px;
}
.ryb-g-q {
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-r-lg);
	background: var(--ryb-surface);
	scroll-margin-top: 5rem;
}
.ryb-g-q > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--ryb-r-lg);
	font-weight: 650;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}
.ryb-g-q > summary::-webkit-details-marker {
	display: none;
}
.ryb-g-q > summary:hover {
	background: color-mix(in srgb, var(--ryb-shallow) 60%, transparent);
}
.ryb-g-q > summary:focus-visible {
	outline: 2px solid var(--ryb-river);
	outline-offset: 2px;
}
.ryb-g-q__car {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--ryb-mute);
	transition: transform .18s ease-out;
}
.ryb-g-q[open] > summary .ryb-g-q__car {
	transform: rotate(180deg);
}
.ryb-g-q[open] {
	border-color: var(--ryb-river);
}
.ryb-g-q:target {
	border-color: var(--ryb-river);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryb-river) 22%, transparent);
}
.ryb-g-a {
	padding: 0 16px 14px;
}
@media (prefers-reduced-motion: reduce) {
	.ryb-g-q__car,
	.ryb-g-toc a,
	.ryb-g-all {
		transition: none;
	}
}

/* ---------- karty návodov ---------- */
.ryb-g-cards {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.ryb-g-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	gap: 8px 14px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-r-lg);
	background: var(--ryb-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ryb-g-card:hover,
.ryb-g-card:focus-visible {
	border-color: var(--ryb-river);
	box-shadow: var(--ryb-shadow);
}
.ryb-g-card > .ryb-i {
	width: 44px;
	height: 44px;
	padding: 10px;
	border-radius: 12px;
	background: var(--ryb-shallow);
	color: var(--ryb-river-2);
}
.ryb-g-card__b {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.ryb-g-card__b strong {
	font-size: 1.04rem;
	line-height: 1.3;
}
.ryb-g-card__b span {
	font-size: .92rem;
	line-height: 1.5;
	color: var(--ryb-ink-2);
}
.ryb-g-card__b small {
	font-size: .82rem;
	color: var(--ryb-mute);
}
.ryb-g-card > .ryb-eco-tag {
	grid-column: 2;
	justify-self: start;
	align-self: end;
}
@media (prefers-reduced-motion: reduce) {
	.ryb-g-card {
		transition: none;
	}
}

/* ---------- zoznam situácií „Čo ak…“ ---------- */
.ryb-g-links {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 760px) {
	.ryb-g-links {
		grid-template-columns: 1fr 1fr;
	}
}
.ryb-g-links a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	height: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ryb-line);
	border-radius: 12px;
	background: var(--ryb-surface);
	color: var(--ryb-ink);
	line-height: 1.4;
	text-decoration: none;
}
.ryb-g-links a:hover,
.ryb-g-links a:focus-visible {
	border-color: var(--ryb-river);
	background: var(--ryb-shallow);
}
.ryb-g-links .ryb-i {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--ryb-river-2);
}

/* ---------- zdroje ---------- */
.ryb-g-src {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ryb-src;
}
.ryb-g-src > li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid var(--ryb-line);
	border-radius: 12px;
	background: var(--ryb-surface);
	font-size: .93rem;
	line-height: 1.5;
	scroll-margin-top: 5rem;
}
.ryb-g-src > li:target {
	border-color: var(--ryb-river);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ryb-river) 22%, transparent);
}
.ryb-g-src small {
	display: block;
	margin-top: 2px;
	font-size: .82rem;
	color: var(--ryb-mute);
}
.ryb-g-src .ryb-eco-tag {
	flex: none;
	margin-top: 2px;
}
.ryb-g-table tr:target > * {
	background: color-mix(in srgb, var(--ryb-river) 14%, transparent);
}

/* ---------- scenár ---------- */
.ryb-g-scen {
	padding: 14px 16px;
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-r-lg);
	background: var(--ryb-surface);
}
.ryb-g-scen h3 {
	margin: 0 0 8px;
	font-size: 1.02rem;
}
.ryb-g-basis {
	display: flex;
	gap: 8px;
	margin: 10px 0 0 !important;
	font-size: .88rem !important;
	color: var(--ryb-mute);
}
.ryb-g-basis .ryb-i {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 3px;
}

/* ---------- úzke displeje ---------- */
@media (max-width: 560px) {
	.ryb-g-key {
		padding: 14px;
	}
	.ryb-g-q > summary {
		padding: 13px 14px;
	}
	.ryb-g-a {
		padding: 0 14px 13px;
	}
	.ryb-g-steps > li {
		padding-left: 2.8rem;
	}
	.ryb-g-table {
		font-size: .88rem;
	}
	.ryb-g-table th,
	.ryb-g-table td {
		padding: 9px 11px;
	}
	/* Tabuľky sa na mobile skladajú do kariet: hlavička riadku hore, pri bunkách ich názov stĺpca. */
	.ryb-g-tw {
		overflow: visible;
		border: 0;
		background: none;
	}
	.ryb-g-table,
	.ryb-g-table tbody,
	.ryb-g-table tr,
	.ryb-g-table tbody th,
	.ryb-g-table td {
		display: block;
		min-width: 0;
		width: auto;
	}
	.ryb-g-table caption {
		display: block;
		padding: 0 2px 8px;
	}
	.ryb-g-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.ryb-g-table tbody tr {
		margin: 0 0 10px;
		border: 1px solid var(--ryb-line);
		border-radius: var(--ryb-r-lg);
		background: var(--ryb-surface);
		overflow: hidden;
	}
	.ryb-g-table tbody th {
		padding: 10px 12px 6px;
		border-top: 0;
		background: var(--ryb-shallow);
	}
	.ryb-g-table td {
		padding: 7px 12px;
		border-top: 0;
	}
	.ryb-g-table td:last-child {
		padding-bottom: 11px;
	}
	.ryb-g-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 1px;
		font-size: .74rem;
		font-weight: 700;
		color: var(--ryb-mute);
	}
	.ryb-g-table td[data-label=""]::before {
		content: none;
	}
	.ryb-g-ev {
		flex-direction: column;
		gap: 6px;
	}
}

/* ---------- rozcestník: rozostupy medzi sekciami ---------- */
.ryb-g-hub .ryb-sec + .ryb-sec,
.ryb-g-hub .ryb-sec + .ryb-g-note {
	margin-top: clamp(28px, 4vw, 44px);
}

/* ---------- ilustrácie v návodoch (Rybar_Guide_Figs) ---------- */
.ryb-guides .ryb-g-fig {
	margin-inline: 0;
	margin-bottom: 0;
	padding: 16px;
	border: 1px solid var(--ryb-line);
	border-radius: var(--ryb-r-lg);
	background: var(--ryb-surface);
	color: var(--ryb-ink);
}
.ryb-g-fig figcaption {
	margin: 14px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--ryb-line);
	font-size: .84rem;
	line-height: 1.5;
	color: var(--ryb-mute);
	text-wrap: pretty;
}
.ryb-g-fig figcaption a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* postup s uzlami (cesta k prvému lovu, vetvenia) */
.ryb-nds {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-nd {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 0 14px;
}
.ryb-nd:last-child {
	padding-bottom: 0;
}
.ryb-nd:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 17px;
	top: 40px;
	bottom: 2px;
	width: 2px;
	background: var(--ryb-line);
}
.ryb-nd__i {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ryb-river) 18%, var(--ryb-surface));
	color: var(--ryb-river-2);
}
.ryb-nd__i .ryb-i {
	width: 19px;
	height: 19px;
}
.ryb-nd__t {
	display: grid;
	gap: 1px;
	min-width: 0;
	padding-top: 2px;
}
.ryb-nd__t b {
	font-size: .97rem;
	line-height: 1.35;
}
.ryb-nd__t small {
	font-size: .84rem;
	line-height: 1.4;
	color: var(--ryb-mute);
}
.ryb-pa {
	display: grid;
	gap: 8px;
}
.ryb-pa__join {
	display: grid;
	place-items: center;
	color: var(--ryb-mute);
}
.ryb-pa__join .ryb-i {
	width: 20px;
	height: 20px;
}
.ryb-pa__fork {
	display: grid;
	gap: 8px;
}
.ryb-pa__lane {
	padding: 12px 14px;
	border: 1px solid var(--ryb-line);
	border-radius: 12px;
	background: var(--ryb-shallow);
}
.ryb-pa__t {
	margin: 0 0 10px;
	font-size: .92rem;
	font-weight: 700;
}
.ryb-pa__or {
	justify-self: center;
	padding: 2px 12px;
	border: 1px solid var(--ryb-line);
	border-radius: 999px;
	background: var(--ryb-surface);
	font-size: .8rem;
	font-weight: 700;
	color: var(--ryb-mute);
}
@media (min-width: 700px) {
	.ryb-pa__fork {
		grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr);
		align-items: start;
		gap: 12px;
	}
	.ryb-pa__or {
		align-self: center;
	}
}

/* schémy ryby a hair rigu (SVG) */
.ryb-fm,
.ryb-hr {
	display: block;
	width: 100%;
	max-width: 34rem;
	height: auto;
	margin: 0 auto;
}
.ryb-hr {
	max-width: 25rem;
}
.ryb-fm__body {
	fill: var(--ryb-shallow);
	stroke: var(--ryb-river-2);
	stroke-width: 2.5;
	stroke-linejoin: round;
}
.ryb-fm__fin {
	fill: color-mix(in srgb, var(--ryb-river) 26%, var(--ryb-surface));
	stroke: var(--ryb-river-2);
	stroke-width: 2.5;
	stroke-linejoin: round;
}
.ryb-fm__ln {
	fill: none;
	stroke: var(--ryb-river-2);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: .75;
}
.ryb-fm__ln.is-dash {
	stroke-dasharray: 2 7;
}
.ryb-fm__eye {
	fill: var(--ryb-surface);
	stroke: var(--ryb-river-2);
	stroke-width: 2;
}
.ryb-fm__pupil {
	fill: var(--ryb-ink);
}
.ryb-fm__guide {
	fill: none;
	stroke: var(--ryb-blaze);
	stroke-width: 2;
	stroke-dasharray: 5 5;
}
.ryb-fm__dim {
	fill: none;
	stroke: var(--ryb-blaze);
	stroke-width: 3;
}
.ryb-fm__arrow {
	fill: var(--ryb-blaze);
}
.ryb-fm__leader {
	fill: none;
	stroke: var(--ryb-blaze);
	stroke-width: 2;
}
.ryb-fm__badge {
	fill: var(--ryb-surface);
	stroke: var(--ryb-blaze);
	stroke-width: 3;
}
.ryb-fm__bt {
	fill: var(--ryb-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
}
.ryb-fm__lab {
	fill: var(--ryb-ink-2);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
}
.ryb-fm__lg {
	display: grid;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
}
.ryb-fm__lg li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ryb-fm__lg b {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 2px solid var(--ryb-blaze);
	border-radius: 50%;
	font-size: .82rem;
	line-height: 1;
}
.ryb-hr__line {
	fill: none;
	stroke: var(--ryb-ink-2);
	stroke-width: 3;
	stroke-linecap: round;
}
.ryb-hr__eye {
	fill: none;
	stroke: var(--ryb-ink);
	stroke-width: 4;
}
.ryb-hr__hook {
	fill: none;
	stroke: var(--ryb-ink);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ryb-hr__hair {
	fill: none;
	stroke: var(--ryb-river-2);
	stroke-width: 3;
	stroke-linecap: round;
}
.ryb-hr__knot {
	fill: var(--ryb-river-2);
}
.ryb-hr__boilie {
	fill: color-mix(in srgb, var(--ryb-sun) 72%, var(--ryb-surface));
	stroke: var(--ryb-ink-2);
	stroke-width: 2.5;
}
.ryb-hr__shine {
	fill: none;
	stroke: #fff;
	stroke-opacity: .7;
	stroke-width: 4;
	stroke-linecap: round;
}

/* kalendár hájenia */
.ryb-cal {
	display: grid;
	gap: 12px;
}
.ryb-cal__m {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	font-size: .7rem;
	text-align: center;
	color: var(--ryb-mute);
}
.ryb-cal__h {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
	margin: 0 0 5px;
	font-size: .9rem;
}
.ryb-cal__h span {
	color: var(--ryb-ink-2);
	font-variant-numeric: tabular-nums;
}
.ryb-cal__t {
	position: relative;
	height: 24px;
	border: 1px solid var(--eco-good-bd);
	border-radius: 7px;
	overflow: hidden;
	background-color: var(--eco-good-bg);
	background-image: linear-gradient(to right, color-mix(in srgb, var(--ryb-ink) 16%, transparent) 1px, transparent 1px);
	background-size: calc(100% / 12) 100%;
}
.ryb-cal__t i {
	position: absolute;
	top: 0;
	bottom: 0;
	background: repeating-linear-gradient(135deg, var(--eco-mid-ink) 0 2px, var(--eco-mid-bg) 2px 7px);
	box-shadow: inset 0 0 0 1px var(--eco-mid-bd);
}
.ryb-cal__lg {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 2px 0 0;
	font-size: .84rem;
	color: var(--ryb-ink-2);
}
.ryb-cal__lg span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.ryb-cal__lg i {
	display: inline-block;
	width: 24px;
	height: 14px;
	border: 1px solid var(--eco-good-bd);
	border-radius: 4px;
	background: var(--eco-good-bg);
}
.ryb-cal__lg i.is-closed {
	border-color: var(--eco-mid-bd);
	background: repeating-linear-gradient(135deg, var(--eco-mid-ink) 0 2px, var(--eco-mid-bg) 2px 6px);
}

/* denný limit */
.ryb-lim {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-lim li {
	--lc: #8b95a1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 12px 13px 14px;
	border: 1px solid var(--ryb-line);
	border-left: 6px solid var(--lc);
	border-radius: 12px;
	background: color-mix(in srgb, var(--lc) 9%, var(--ryb-surface));
}
.ryb-lim li.is-blue {
	--lc: #3b82c4;
}
.ryb-lim li.is-green {
	--lc: #2e9d5b;
}
.ryb-lim li.is-yellow {
	--lc: #d9a400;
}
.ryb-lim__top {
	font-size: .76rem;
	color: var(--ryb-mute);
}
.ryb-lim__n {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.ryb-lim__n small {
	margin-left: 4px;
	font-size: 1rem;
	font-weight: 700;
}
.ryb-lim li b {
	font-size: .95rem;
}
.ryb-lim__d {
	font-size: .82rem;
	line-height: 1.4;
	color: var(--ryb-ink-2);
}
.ryb-lim__rule {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--eco-mid-bd);
	border-radius: 10px;
	background: var(--eco-mid-bg);
	font-size: .9rem;
	line-height: 1.5;
}
.ryb-lim__rule .ryb-i {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--eco-mid-ink);
}

/* typy vôd */
.ryb-wt {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-wt li {
	--wc: var(--ryb-river);
	padding: 14px;
	border: 1px solid var(--ryb-line);
	border-top: 5px solid var(--wc);
	border-radius: 12px;
	background: color-mix(in srgb, var(--wc) 8%, var(--ryb-surface));
}
.ryb-wt li.is-trout {
	--wc: #3d9bd1;
}
.ryb-wt li.is-grayling {
	--wc: #7a86d8;
}
.ryb-wt li.is-carp {
	--wc: #d99a2b;
}
.ryb-wt__h {
	display: block;
	font-size: 1.02rem;
}
.ryb-wt__rods {
	display: flex;
	gap: 2px;
	margin: 6px 0 8px;
	color: var(--wc);
}
.ryb-wt__rods .ryb-i {
	width: 26px;
	height: 26px;
}
.ryb-wt dl {
	display: grid;
	gap: 6px;
	margin: 0;
}
.ryb-wt dl > div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding-top: 6px;
	border-top: 1px solid var(--ryb-line);
}
.ryb-wt dt {
	font-size: .82rem;
	color: var(--ryb-mute);
}
.ryb-wt dd {
	margin: 0;
	font-size: .9rem;
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) {
	.ryb-wt {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* čo s chytenou rybou */
.ryb-fl {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-fl__q {
	position: relative;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 6px 12px;
	align-items: start;
	padding: 0 0 18px;
}
.ryb-fl__q:last-child {
	padding-bottom: 0;
}
.ryb-fl__q:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 42px;
	bottom: 2px;
	width: 2px;
	background: var(--ryb-line);
}
.ryb-fl__qi {
	grid-row: 1 / span 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ryb-river) 18%, var(--ryb-surface));
	color: var(--ryb-river-2);
}
.ryb-fl__qi .ryb-i {
	width: 20px;
	height: 20px;
}
.ryb-fl__qt {
	align-self: center;
	min-height: 38px;
	display: flex;
	align-items: center;
	font-size: .97rem;
	font-weight: 700;
	line-height: 1.35;
}
.ryb-fl__a {
	grid-column: 2;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 9px 11px;
	border: 1px solid var(--ryb-line);
	border-radius: 10px;
	font-size: .9rem;
	line-height: 1.45;
}
.ryb-fl__a .ryb-i {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}
.ryb-fl__a b {
	flex: none;
	padding: 0 8px;
	border-radius: 999px;
	font-size: .8rem;
	line-height: 1.7;
	background: color-mix(in srgb, currentColor 14%, transparent);
}
.ryb-fl__a.is-no {
	border-color: var(--eco-mid-bd);
	background: var(--eco-mid-bg);
	color: var(--eco-mid-ink);
}
.ryb-fl__a.is-yes {
	border-color: var(--eco-good-bd);
	background: var(--eco-good-bg);
	color: var(--eco-good-ink);
}
.ryb-fl__a > span {
	color: var(--ryb-ink);
}
.ryb-fl__n {
	grid-column: 2;
	font-size: .8rem;
	color: var(--ryb-mute);
}

/* postup varenia boilies */
.ryb-pf {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ryb-pf;
}
.ryb-pf li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px;
	border: 1px solid var(--ryb-line);
	border-radius: 12px;
	background: var(--ryb-shallow);
	counter-increment: ryb-pf;
}
.ryb-pf li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.ryb-pf li::before {
	content: counter(ryb-pf);
	position: absolute;
	top: 9px;
	right: 11px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--ryb-mute);
	font-variant-numeric: tabular-nums;
}
.ryb-pf__s {
	width: 48px;
	height: 48px;
	margin-bottom: 4px;
	fill: none;
	stroke: var(--ryb-river-2);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ryb-pf b {
	font-size: .95rem;
	line-height: 1.3;
}
.ryb-pf small {
	font-size: .8rem;
	line-height: 1.4;
	color: var(--ryb-mute);
}
@media (min-width: 760px) {
	.ryb-pf {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.ryb-pf li:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* Google Trends */
.ryb-tr {
	display: grid;
	gap: 18px;
}
.ryb-tr__g h4 {
	margin: 0 0 8px;
	font-size: .9rem;
	color: var(--ryb-ink-2);
}
.ryb-tr__g ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-tr__g li {
	display: grid;
	grid-template-columns: 1fr 2.8rem;
	grid-template-areas: "l v" "b b";
	align-items: center;
	gap: 3px 10px;
	font-size: .88rem;
}
.ryb-tr__l {
	grid-area: l;
	min-width: 0;
}
.ryb-tr__b {
	grid-area: b;
	height: 12px;
	border-radius: 4px;
	background-color: color-mix(in srgb, var(--ryb-ink) 7%, transparent);
	background-image: linear-gradient(to right, transparent calc(50% - 1px), color-mix(in srgb, var(--ryb-ink) 20%, transparent) calc(50% - 1px) 50%, transparent 50%);
}
.ryb-tr__b i {
	display: block;
	height: 100%;
	min-width: 3px;
	border-radius: 4px;
	background: var(--ryb-river);
}
.ryb-tr__v {
	grid-area: v;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
@media (min-width: 560px) {
	.ryb-tr__g li {
		grid-template-columns: 10.5rem minmax(0, 1fr) 2.8rem;
		grid-template-areas: "l b v";
		gap: 10px;
	}
}

@media (max-width: 560px) {
	.ryb-guides .ryb-g-fig {
		padding: 14px;
	}
}

/* fotografie v návodoch (Wikimedia Commons, so zdrojom a licenciou) */
.ryb-g-ph {
	margin-inline: 0;
	margin-bottom: 0;
}
.ryb-g-phs .ryb-g-ph {
	margin: 0;
}
.ryb-g-ph__f {
	overflow: hidden;
	border-radius: calc(var(--ryb-r-lg) - 4px);
	background: var(--ryb-shallow);
}
.ryb-g-ph__f img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 26rem;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}
.ryb-guides .ryb-g-ph .ryb-credit {
	display: block;
	margin-top: 4px;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--ryb-mute);
}
.ryb-guides .ryb-g-ph .ryb-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ryb-g-phs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 12px;
}
.ryb-g-phs .ryb-g-ph figcaption {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	font-size: .84rem;
	line-height: 1.4;
	color: var(--ryb-ink-2);
}
.ryb-g-phs .ryb-g-ph__f img {
	aspect-ratio: 4 / 3;
}
.ryb-g-phs--n3 .ryb-g-ph:last-child,
.ryb-g-phs--n5 .ryb-g-ph:last-child {
	grid-column: 1 / -1;
}
@media (min-width: 700px) {
	.ryb-g-phs {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}
	.ryb-g-phs--n5,
	.ryb-g-phs--n6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ryb-g-phs--n3 .ryb-g-ph:last-child,
	.ryb-g-phs--n5 .ryb-g-ph:last-child {
		grid-column: auto;
	}
	.ryb-g-ph:not(.is-s) .ryb-g-ph__f img {
		aspect-ratio: 2 / 1;
	}
}

/* ilustrácie vygenerované AI: vždy viditeľne označené (štítok na obrázku + text pod ním) */
.ryb-g-ph__f {
	position: relative;
}
.ryb-g-ph--ai .ryb-g-ph__f::after {
	content: "Ilustrácia AI";
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.5;
	background: rgba(0, 0, 0, .66);
	color: #fff;
	pointer-events: none;
}
.ryb-guides .ryb-g-ph .ryb-credit--ai {
	font-style: italic;
}
.ryb-g-phs--wide .ryb-g-ph__f img {
	aspect-ratio: 16 / 9;
}

/* fotografie krokov (napríklad viazanie uzla), bez orezania */
.ryb-g-seq ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 12px;
	counter-reset: ryb-seq;
}
.ryb-g-seq li {
	margin: 0;
	padding: 0;
	counter-increment: ryb-seq;
}
.ryb-g-seq li::marker {
	content: "";
}
.ryb-g-seq__f {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--ryb-r-lg) - 4px);
	background: var(--ryb-shallow);
}
.ryb-g-seq__f::before {
	content: counter(ryb-seq);
	position: absolute;
	left: 8px;
	top: 8px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1;
	background: rgba(0, 0, 0, .7);
	color: #fff;
}
.ryb-g-seq__f img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: color-mix(in srgb, var(--ryb-ink) 6%, var(--ryb-surface));
}
.ryb-g-seq li > span {
	display: block;
	margin-top: 6px;
	font-size: .84rem;
	line-height: 1.4;
	color: var(--ryb-ink-2);
}
.ryb-guides .ryb-g-seq .ryb-credit {
	display: block;
	margin-top: 4px;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--ryb-mute);
}
.ryb-guides .ryb-g-seq .ryb-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
@media (min-width: 700px) {
	.ryb-g-seq ol {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* jediný obrázok v rade (napríklad schéma uzla): bez čísla, užší */
.ryb-g-seq--n1 ol {
	grid-template-columns: minmax(0, 1fr);
	max-width: 30rem;
}
.ryb-g-seq--n1 .ryb-g-seq__f::before {
	display: none;
}
.ryb-g-seq--n2 ol {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
	.ryb-g-seq--n1 ol {
		grid-template-columns: minmax(0, 1fr);
	}
	.ryb-g-seq--n2 ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* fotografie krokov: na úzkom displeji pod seba (detail uzla), inak po dvoch; rámik 3:2 pre široké snímky */
.ryb-g-seq__f img {
	aspect-ratio: 3 / 2;
}
.ryb-g-seq ol {
	grid-template-columns: minmax(0, 1fr);
}
.ryb-g-seq--n2 ol {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 520px) {
	.ryb-g-seq ol,
	.ryb-g-seq--n2 ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ryb-g-seq--n1 ol {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (min-width: 700px) {
	.ryb-g-seq ol,
	.ryb-g-seq--n2 ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ryb-g-seq--n1 ol {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===== 1.31.0: nové vizualizácie v návodoch ===== */

/* čipy (krátke štítky) */
.ryb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.ryb-chips li {
	margin: 0;
	padding: 3px 10px;
	border: 1px solid var(--ryb-line);
	border-radius: 999px;
	background: var(--ryb-surface);
	font-size: .8rem;
	line-height: 1.45;
	color: var(--ryb-ink-2);
}

/* tri vrstvy pravidiel */
.ryb-ly {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-ly > li {
	--lc: var(--ryb-river);
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--ryb-line);
	border-left: 6px solid var(--lc);
	border-radius: 12px;
	background: color-mix(in srgb, var(--lc) 8%, var(--ryb-surface));
}
.ryb-ly > li.is-1 {
	--lc: #3b82c4;
}
.ryb-ly > li.is-2 {
	--lc: #2e9d5b;
}
.ryb-ly > li.is-3 {
	--lc: #d9a400;
}
.ryb-ly > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 28px;
	bottom: -17px;
	width: 10px;
	height: 10px;
	border-right: 3px solid var(--ryb-mute);
	border-bottom: 3px solid var(--ryb-mute);
	transform: rotate(45deg);
}
.ryb-ly__i {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lc);
	color: #fff;
}
.ryb-ly__i .ryb-i {
	width: 22px;
	height: 22px;
}
.ryb-ly__b b {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
}
.ryb-ly__b small {
	display: block;
	margin-top: 2px;
	font-size: .84rem;
	color: var(--ryb-mute);
}

/* denný čas lovu */
.ryb-dt {
	display: grid;
	gap: 14px;
}
.ryb-dt__ax {
	position: relative;
	height: 1.1em;
	font-size: .72rem;
	line-height: 1;
	color: var(--ryb-mute);
}
.ryb-dt__ax span {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ryb-dt__ax span:first-child {
	transform: none;
}
.ryb-dt__ax span:last-child {
	transform: translateX(-100%);
}
.ryb-dt__g {
	--wc: var(--ryb-river);
	display: grid;
	gap: 9px;
	padding: 10px 12px 12px;
	border: 1px solid var(--ryb-line);
	border-top: 5px solid var(--wc);
	border-radius: 12px;
	background: color-mix(in srgb, var(--wc) 7%, var(--ryb-surface));
}
.ryb-dt__g.is-trout {
	--wc: #3d9bd1;
}
.ryb-dt__g.is-grayling {
	--wc: #7a86d8;
}
.ryb-dt__g.is-carp {
	--wc: #d99a2b;
}
.ryb-dt__g h4 {
	margin: 0;
	font-size: 1rem;
}
.ryb-dt__h {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 12px;
	margin: 0 0 4px;
	font-size: .88rem;
}
.ryb-dt__h b {
	font-weight: 600;
}
.ryb-dt__h span {
	color: var(--ryb-ink-2);
	font-variant-numeric: tabular-nums;
}
.ryb-dt__t {
	position: relative;
	height: 16px;
	border: 1px solid var(--ryb-line);
	border-radius: 6px;
	overflow: hidden;
	background-color: color-mix(in srgb, var(--ryb-ink) 6%, var(--ryb-surface));
	background-image: linear-gradient(to right, color-mix(in srgb, var(--ryb-ink) 16%, transparent) 1px, transparent 1px);
	background-size: 25% 100%;
}
.ryb-dt__t i {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--wc);
	border-radius: 4px;
}
.ryb-dt__lg {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	font-size: .84rem;
	color: var(--ryb-ink-2);
}
.ryb-dt__lg span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.ryb-dt__lg i {
	display: inline-block;
	width: 24px;
	height: 12px;
	border-radius: 4px;
	background: var(--ryb-river);
}
.ryb-dt__lg i.is-off {
	border: 1px solid var(--ryb-line);
	background: color-mix(in srgb, var(--ryb-ink) 6%, var(--ryb-surface));
}

/* lovné miery */
.ryb-ms {
	display: grid;
	gap: 5px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-ms li {
	display: grid;
	grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr) 3.4rem;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .86rem;
}
.ryb-ms__n {
	line-height: 1.25;
}
.ryb-ms__b {
	height: 10px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--ryb-ink) 8%, var(--ryb-surface));
	overflow: hidden;
}
.ryb-ms__b i {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--ryb-river), var(--ryb-river-2));
}
.ryb-ms li b {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
	.ryb-ms li {
		grid-template-columns: minmax(0, 1fr) 3.4rem;
		gap: 2px 8px;
	}
	.ryb-ms__b {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}
@media (min-width: 900px) {
	.ryb-ms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(16, auto);
		grid-auto-flow: column;
	}
	.ryb-ms li {
		grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) 3.2rem;
	}
}

/* zakázané spôsoby lovu */
.ryb-bn {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-bn li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 12px 12px 12px 14px;
	border: 1px solid var(--eco-bad-bd, var(--ryb-line));
	border-radius: 12px;
	background: var(--eco-bad-bg, var(--ryb-surface));
}
.ryb-bn__i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 4px;
	border-radius: 9px;
	background: var(--ryb-surface);
	border: 1px solid var(--eco-bad-bd, var(--ryb-line));
	color: var(--eco-bad-ink, #b3411e);
}
.ryb-bn__i .ryb-i {
	width: 20px;
	height: 20px;
}
.ryb-bn li b {
	font-size: .9rem;
	line-height: 1.3;
}
.ryb-bn small {
	font-size: .78rem;
	line-height: 1.4;
	color: var(--ryb-ink-2);
}
.ryb-bn em {
	margin-top: auto;
	padding-top: 4px;
	font-size: .72rem;
	font-style: normal;
	color: var(--ryb-mute);
}
@media (min-width: 700px) {
	.ryb-bn {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* pokuty */
.ryb-fn {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-fn li {
	margin: 0;
}
.ryb-fn__h {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	margin: 0 0 5px;
	font-size: .9rem;
}
.ryb-fn__h b {
	flex: 1 1 12rem;
	font-weight: 600;
	line-height: 1.3;
}
.ryb-fn__h > span:last-child {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ryb-fn__i {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ryb-float) 14%, var(--ryb-surface));
	color: var(--ryb-float-ink);
}
.ryb-fn__i .ryb-i {
	width: 15px;
	height: 15px;
}
.ryb-fn__t {
	position: relative;
	display: block;
	height: 14px;
	border-radius: 7px;
	background-color: color-mix(in srgb, var(--ryb-ink) 7%, var(--ryb-surface));
	background-image: linear-gradient(to right, color-mix(in srgb, var(--ryb-ink) 16%, transparent) 1px, transparent 1px);
	background-size: calc(100% / 3) 100%;
}
.ryb-fn__t i {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 7px;
	background: var(--ryb-float);
}
.ryb-fn .is-b .ryb-fn__t i {
	background: var(--ryb-river-2);
}
.ryb-fn .is-b .ryb-fn__i {
	background: color-mix(in srgb, var(--ryb-river) 14%, var(--ryb-surface));
	color: var(--ryb-river-2);
}
.ryb-fn__sc {
	display: flex;
	justify-content: space-between;
	margin: 6px 0 0;
	font-size: .72rem;
	color: var(--ryb-mute);
	font-variant-numeric: tabular-nums;
}

/* tri zostavy */
.ryb-rgs {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-rgs > li {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--ryb-line);
	border-radius: 12px;
	background: var(--ryb-surface);
}
.ryb-rgs h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 1rem;
}
.ryb-rgs h4 .ryb-i {
	width: 22px;
	height: 22px;
	color: var(--ryb-river-2);
}
.ryb-rg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 9px;
	overflow: hidden;
	background: color-mix(in srgb, var(--ryb-sun) 9%, var(--ryb-surface));
}
.ryb-rg__w {
	fill: color-mix(in srgb, var(--ryb-river) 16%, var(--ryb-surface));
}
.ryb-rg__b {
	fill: color-mix(in srgb, var(--ryb-ink) 20%, var(--ryb-surface));
}
.ryb-rg__s {
	fill: none;
	stroke: var(--ryb-river);
	stroke-width: 2;
}
.ryb-rg__rod {
	stroke: var(--ryb-ink);
	stroke-width: 3.5;
	stroke-linecap: round;
}
.ryb-rg__ln {
	fill: none;
	stroke: var(--ryb-ink-2);
	stroke-width: 1.4;
	stroke-linecap: round;
}
.ryb-rg__fl {
	stroke: var(--ryb-ink);
	stroke-width: 2;
	stroke-linecap: round;
}
.ryb-rg__fl2 {
	fill: var(--ryb-float);
	stroke: var(--ryb-float-ink);
	stroke-width: 1.5;
}
.ryb-rg__lead {
	fill: var(--ryb-ink-2);
	stroke: var(--ryb-ink);
	stroke-width: 1;
}
.ryb-rg__lead.is-big {
	fill: var(--ryb-ink-2);
}
.ryb-rg__hk {
	fill: none;
	stroke: var(--ryb-ink);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ryb-rg__hk.is-sm {
	stroke-width: 1.8;
}
.ryb-rg__bait {
	fill: var(--ryb-sun);
	stroke: var(--ryb-ink-2);
	stroke-width: 1;
}
.ryb-rg__dim {
	fill: none;
	stroke: var(--ryb-mute);
	stroke-width: 1.4;
	stroke-dasharray: 3 3;
}
.ryb-rg__tx {
	fill: var(--ryb-ink-2);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
}
.ryb-rg__mv {
	fill: none;
	stroke: var(--ryb-blaze);
	stroke-width: 2;
	stroke-dasharray: 4 4;
}
.ryb-rg__arw {
	fill: var(--ryb-blaze);
}
.ryb-rg__lure {
	fill: color-mix(in srgb, var(--ryb-float) 55%, var(--ryb-surface));
	stroke: var(--ryb-ink);
	stroke-width: 1.4;
	stroke-linejoin: round;
}
.ryb-rg__eye {
	fill: var(--ryb-ink);
}
.ryb-rg__leader {
	fill: none;
	stroke: var(--ryb-blaze);
	stroke-width: 1.4;
}
.ryb-rg__badge {
	fill: var(--ryb-surface);
	stroke: var(--ryb-blaze);
	stroke-width: 2;
}
.ryb-rg__bt {
	fill: var(--ryb-ink);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
}
@media (min-width: 700px) {
	.ryb-rgs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* chyť a pusť: štúdia */
.ryb-rl {
	display: grid;
	gap: 8px;
}
.ryb-rl__t {
	margin: 0;
	font-size: .92rem;
	font-weight: 600;
}
.ryb-rl h4 {
	margin: 8px 0 0;
	font-size: .95rem;
}
.ryb-rl__g {
	position: relative;
	height: 24px;
	margin: 30px 0 22px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ryb-ink) 8%, var(--ryb-surface));
}
.ryb-rl__r {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ryb-float) 22%, var(--ryb-surface));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ryb-float) 50%, transparent);
}
.ryb-rl__k {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 3px;
	margin-left: -1.5px;
	background: var(--ryb-ink);
	border-radius: 2px;
}
.ryb-rl__k b {
	position: absolute;
	bottom: 100%;
	left: 50%;
	padding-bottom: 3px;
	font-size: .76rem;
	line-height: 1.2;
	white-space: nowrap;
	transform: translateX(-100%);
}
.ryb-rl__k.is-avg b {
	transform: none;
	margin-left: 4px;
}
.ryb-rl__k.is-med b {
	margin-left: -4px;
}
.ryb-rl__e {
	position: absolute;
	top: 100%;
	font-size: .72rem;
	color: var(--ryb-mute);
	white-space: nowrap;
}
@media (max-width: 600px) {
	.ryb-rl__g {
		margin-top: 52px;
	}
	.ryb-rl__k.is-med b {
		bottom: calc(100% + 18px);
		transform: none;
		margin-left: -4px;
	}
	.ryb-rl__k.is-med b::after {
		content: "";
		position: absolute;
		left: 2px;
		top: 100%;
		width: 3px;
		height: 18px;
		margin-top: -3px;
		background: var(--ryb-ink);
		border-radius: 2px;
	}
}
.ryb-rl__e b {
	font-weight: 600;
}
.ryb-rl__e.is-hi {
	transform: translateX(-100%);
}
.ryb-rl__sc {
	display: none;
}
.ryb-ic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-ic li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--eco-mid-bd, var(--ryb-line));
	border-radius: 10px;
	background: var(--eco-mid-bg, var(--ryb-surface));
	font-size: .86rem;
	line-height: 1.35;
}
.ryb-ic li > span {
	flex: none;
	color: var(--eco-mid-ink, var(--ryb-ink-2));
}
.ryb-ic li .ryb-i {
	width: 20px;
	height: 20px;
}
.ryb-ic.is-ok li {
	border-color: var(--eco-good-bd, var(--ryb-line));
	background: var(--eco-good-bg, var(--ryb-surface));
}
.ryb-ic.is-ok li > span {
	color: var(--eco-good-ink, var(--ryb-river-2));
}
@media (max-width: 460px) {
	.ryb-ic {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ceny */
.ryb-co {
	display: grid;
	gap: 12px;
}
.ryb-co__g {
	padding: 10px 12px 12px;
	border: 1px solid var(--ryb-line);
	border-radius: 12px;
	background: var(--ryb-surface);
}
.ryb-co__g h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: .95rem;
}
.ryb-co__g h4 .ryb-i {
	width: 20px;
	height: 20px;
	color: var(--ryb-river-2);
}
.ryb-co__g ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-co__g li {
	display: grid;
	grid-template-columns: minmax(6rem, 9.5rem) minmax(0, 1fr) 3.8rem;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .86rem;
}
.ryb-co__b {
	height: 12px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--ryb-ink) 7%, var(--ryb-surface));
	overflow: hidden;
}
.ryb-co__b i {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--ryb-float), var(--ryb-float-ink));
}
.ryb-co__g li b {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 460px) {
	.ryb-co__g li {
		grid-template-columns: minmax(0, 1fr) 3.8rem;
		gap: 2px 8px;
	}
	.ryb-co__b {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}
@media (min-width: 900px) {
	.ryb-co {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* veľkosť boilies */
.ryb-bs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-around;
	gap: 12px;
	margin: 0;
	padding: 8px 0 2px;
	list-style: none;
}
.ryb-bs li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.ryb-bs i {
	display: block;
	width: calc(var(--d) * 2.6px);
	height: calc(var(--d) * 2.6px);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--ryb-sun) 40%, #fff), color-mix(in srgb, var(--ryb-sun) 78%, var(--ryb-surface)) 55%, color-mix(in srgb, var(--ryb-sun) 60%, #7a5200));
	box-shadow: 0 0 0 1.5px var(--ryb-ink-2);
}
.ryb-bs b {
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
	.ryb-bs i {
		width: calc(var(--d) * 2px);
		height: calc(var(--d) * 2px);
	}
}

/* živiny z nástrahy */
.ryb-nu {
	display: grid;
	gap: 12px;
}
.ryb-nu__r p {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 12px;
	margin: 0 0 4px;
	font-size: .9rem;
}
.ryb-nu__r p span {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ryb-nu__t {
	position: relative;
	height: 16px;
	border-radius: 8px;
	overflow: hidden;
	background-color: color-mix(in srgb, var(--ryb-ink) 7%, var(--ryb-surface));
	background-image: linear-gradient(to right, color-mix(in srgb, var(--ryb-ink) 16%, transparent) 1px, transparent 1px);
	background-size: 25% 100%;
}
.ryb-nu__t i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: var(--eco-bad, var(--ryb-float));
}
.ryb-nu__r.is-p .ryb-nu__t i {
	background: var(--ryb-river-2);
}
.ryb-nu__t i.is-rng {
	background: repeating-linear-gradient(135deg, var(--ryb-river-2) 0 2px, transparent 2px 5px);
}
.ryb-nu__r small {
	display: block;
	margin-top: 3px;
	font-size: .78rem;
	color: var(--ryb-mute);
}
.ryb-nu__sc {
	display: flex;
	justify-content: space-between;
	font-size: .72rem;
	color: var(--ryb-mute);
}

/* tri pravidlá */
.ryb-r3 {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-r3 li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--ryb-line);
	border-top: 5px solid var(--ryb-river);
	border-radius: 12px;
	background: color-mix(in srgb, var(--ryb-river) 6%, var(--ryb-surface));
}
.ryb-r3__i {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 4px;
	border-radius: 50%;
	background: var(--ryb-river);
	color: #fff;
}
.ryb-r3__i .ryb-i {
	width: 22px;
	height: 22px;
}
.ryb-r3 b {
	font-size: 1rem;
}
.ryb-r3 li > span:not(.ryb-r3__i) {
	font-size: .88rem;
	line-height: 1.4;
	color: var(--ryb-ink-2);
}
.ryb-r3 em {
	margin-top: auto;
	padding-top: 6px;
	font-size: .76rem;
	font-style: normal;
	color: var(--ryb-mute);
}
@media (min-width: 700px) {
	.ryb-r3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* výbava */
.ryb-gr {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-gr li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 11px;
	border: 1px solid var(--ryb-line);
	border-radius: 10px;
	background: var(--ryb-surface);
	font-size: .86rem;
	line-height: 1.3;
}
.ryb-gr li > span {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--ryb-river) 12%, var(--ryb-surface));
	color: var(--ryb-river-2);
}
.ryb-gr li .ryb-i {
	width: 20px;
	height: 20px;
}
@media (min-width: 700px) {
	.ryb-gr {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- schémy uzlov: panely krokov s vlastnými kresbami ---------- */
.ryb-kns {
	--kn-bg: color-mix(in srgb, var(--ryb-sun) 9%, var(--ryb-surface));
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ryb-kns > li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--ryb-line);
	border-radius: 12px;
	background: var(--ryb-surface);
}
.ryb-kns h4 {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: .95rem;
	line-height: 1.3;
}
.ryb-kns h4 b {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ryb-river-2);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
}
.ryb-kns p {
	margin: 0;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--ryb-ink-2);
}
.ryb-kn {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 9px;
	background: var(--kn-bg);
}
.ryb-kn path,
.ryb-kn ellipse {
	fill: none;
}
.ryb-kn .kn-a,
.ryb-kn .kn-b,
.ryb-kn .kn-k,
.ryb-kn .kn-h,
.ryb-kn .kn-wrap {
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ryb-kn .kn-a {
	stroke: var(--ryb-ink-2);
}
.ryb-kn .kn-b,
.ryb-kn .kn-wrap {
	stroke: var(--ryb-river);
}
.ryb-kn .kn-wrap {
	stroke-width: 3;
}
.ryb-kn .kn-k {
	stroke: var(--ryb-ink);
}
.ryb-kn .kn-h {
	stroke: var(--kn-bg);
	stroke-linecap: butt;
}
.ryb-kn .kn-body {
	fill: var(--ryb-ink-2);
	stroke: var(--ryb-ink);
	stroke-width: 1.6;
}
.ryb-kn .kn-band {
	stroke: var(--kn-bg);
	stroke-width: 2;
	stroke-linecap: round;
}
.ryb-kn .kn-finger {
	fill: color-mix(in srgb, var(--ryb-sun) 38%, var(--ryb-surface));
	stroke: var(--ryb-ink-2);
	stroke-width: 1.6;
}
.ryb-kn .kn-mv {
	stroke: var(--ryb-blaze);
	stroke-width: 2;
	stroke-dasharray: 4 3.5;
	stroke-linecap: round;
}
.ryb-kn .kn-mh {
	fill: var(--ryb-blaze);
	stroke: none;
}
.ryb-kn .kn-bandx {
	stroke: var(--ryb-blaze);
	stroke-width: 2.4;
}
.ryb-kn .kn-dim {
	stroke: var(--ryb-mute);
	stroke-width: 1.2;
	stroke-dasharray: 3 3;
}
.ryb-kn .kn-br {
	stroke: var(--ryb-ink-2);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* značka A / B s ukazovateľom (rozlíšenie dvoch vlascov v schéme) */
.ryb-kn .kn-bd {
	fill: var(--ryb-surface);
	stroke: var(--ryb-blaze);
	stroke-width: 1.8;
}
.ryb-kn .kn-bt {
	fill: var(--ryb-ink);
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
}
.ryb-kn .kn-ld {
	fill: none;
	stroke: var(--ryb-blaze);
	stroke-width: 1.2;
	stroke-linecap: round;
}
@media (min-width: 560px) {
	.ryb-kns--n4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 760px) {
	.ryb-kns--n3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- videá z YouTube: kartička s prehratím až po kliknutí ---------- */
.ryb-g-vid__box,
.ryb-g-vid__frame {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
}
.ryb-g-vid__frame {
	overflow: hidden;
	background: #000;
}
.ryb-g-vid__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	color: var(--ryb-ink);
	background: color-mix(in srgb, var(--ryb-river) 12%, var(--ryb-surface));
	border: 1px solid var(--ryb-line);
	transition: background-color .15s ease;
}
.ryb-g-vid__box:hover {
	background: color-mix(in srgb, var(--ryb-river) 20%, var(--ryb-surface));
}
.ryb-g-vid__box:focus-visible {
	outline: 3px solid var(--ryb-blaze);
	outline-offset: 2px;
}
.ryb-g-vid__play {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--ryb-river-2);
	color: #fff;
}
.ryb-g-vid__play svg {
	width: 28px;
	height: 28px;
	margin-left: 3px;
	fill: currentColor;
}
.ryb-g-vid__t {
	font-weight: 700;
	font-size: .98rem;
	line-height: 1.3;
	text-wrap: balance;
}
.ryb-g-vid__s {
	font-size: .8rem;
	line-height: 1.4;
	color: var(--ryb-mute);
}
.ryb-g-vid__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}