/**
 * TinyMCE: poravnanje (inline style, align atribut, klase).
 * Tipografija: u Tailwind v4 base sloju h1–h6 imaju font-size/weight inherit — klase
 * prose/prose-lg nisu u Shuffle ski-cmrok.css, stoga ovdje obnavljamo čitljiv izgled.
 */
.cmrok-rich {
	max-width: none;
	color: var(--color-gray-700, #374151);
	font-size: var(--text-lg, 1.125rem);
	line-height: var(--leading-relaxed, 1.625);
	overflow: visible;
}

.cmrok-rich h1,
.cmrok-rich h2,
.cmrok-rich h3,
.cmrok-rich h4 {
	font-family: var(--font-heading, Oswald), ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	color: var(--color-gray-900, #111827);
	line-height: var(--leading-tight, 1.25);
	margin-top: 1.25em;
	margin-bottom: 0.5em;
}

.cmrok-rich h1:first-child,
.cmrok-rich h2:first-child,
.cmrok-rich h3:first-child,
.cmrok-rich h4:first-child {
	margin-top: 0;
}

.cmrok-rich h1 {
	font-size: var(--text-4xl, 2.25rem);
	line-height: var(--text-4xl--line-height, 1.1);
}

.cmrok-rich h2 {
	font-size: var(--text-3xl, 1.875rem);
	line-height: var(--text-3xl--line-height, 1.2);
}

.cmrok-rich h3 {
	font-size: var(--text-2xl, 1.5rem);
	line-height: var(--text-2xl--line-height, 1.3);
}

.cmrok-rich h4 {
	font-size: var(--text-xl, 1.25rem);
	line-height: var(--text-xl--line-height, 1.4);
}

.cmrok-rich h5,
.cmrok-rich h6 {
	font-family: var(--font-body, Inter), ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	color: var(--color-gray-800, #1f2937);
	font-size: var(--text-base, 1rem);
	margin-top: 1em;
	margin-bottom: 0.35em;
}

.cmrok-rich p {
	margin-top: 0;
	margin-bottom: 1em;
}

.cmrok-rich p:last-child {
	margin-bottom: 0;
}

.cmrok-rich a {
	color: var(--color-red-600, #dc2626);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cmrok-rich a:hover {
	color: var(--color-red-700, #b91c1c);
}

/* Liste: preflight postavlja * { padding:0 }, ol/ul { list-style:none }.
   „outside“ markere grid/flex često obreže (min-w-0) — „inside“ + padding kao u editoru. */
.cmrok-rich ul,
.cmrok-rich ol {
	margin: 0.75em 0 1em;
	padding: 0;
	padding-inline-start: 1.5rem;
	list-style-position: inside;
}

.cmrok-rich ul {
	list-style-type: disc;
}

.cmrok-rich ol {
	list-style-type: decimal;
}

.cmrok-rich ul ul {
	list-style-type: circle;
}

.cmrok-rich ul ul ul {
	list-style-type: square;
}

.cmrok-rich li {
	margin: 0.25em 0;
	padding-inline-start: 0.125em;
}

.cmrok-rich li > ul,
.cmrok-rich li > ol {
	margin-top: 0.35em;
	margin-bottom: 0.35em;
}

.cmrok-rich blockquote {
	margin: 1em 0;
	padding: 0.75em 1em 0.75em 1rem;
	border-left: 4px solid var(--color-red-600, #dc2626);
	background: var(--color-gray-50, #f9fafb);
	color: var(--color-gray-700, #374151);
	font-style: italic;
}

.cmrok-rich hr {
	margin: 1.5em 0;
	border: 0;
	border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.cmrok-rich img {
	max-width: 100%;
	height: auto;
}

.cmrok-rich table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
	font-size: var(--text-sm, 0.875rem);
}

.cmrok-rich th,
.cmrok-rich td {
	border: 1px solid var(--color-gray-200, #e5e7eb);
	padding: 0.5em 0.75em;
	text-align: left;
	vertical-align: top;
}

.cmrok-rich th {
	background: var(--color-gray-100, #f3f4f6);
	font-weight: 600;
}

.cmrok-rich code {
	font-size: 0.9em;
	background: var(--color-gray-100, #f3f4f6);
	padding: 0.1em 0.35em;
	border-radius: var(--radius-sm, 0.25rem);
}

.cmrok-rich pre {
	margin: 1em 0;
	padding: 1em;
	overflow: auto;
	background: var(--color-gray-900, #111827);
	color: var(--color-gray-100, #f3f4f6);
	border-radius: var(--radius-lg, 0.5rem);
	font-size: var(--text-sm, 0.875rem);
}

.cmrok-rich pre code {
	background: transparent;
	padding: 0;
	color: inherit;
}

.cmrok-rich [style*="text-align: center"],
.cmrok-rich [style*="text-align:center"] {
	text-align: center !important;
}

.cmrok-rich [style*="text-align: right"],
.cmrok-rich [style*="text-align:right"] {
	text-align: right !important;
}

.cmrok-rich [style*="text-align: left"],
.cmrok-rich [style*="text-align:left"] {
	text-align: left !important;
}

.cmrok-rich [style*="text-align: justify"],
.cmrok-rich [style*="text-align:justify"] {
	text-align: justify !important;
}

/* TinyMCE / WP: bez podvlake */
.cmrok-rich .aligncenter,
.cmrok-rich p.aligncenter,
.cmrok-rich h1.aligncenter,
.cmrok-rich h2.aligncenter,
.cmrok-rich h3.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.cmrok-rich .alignleft {
	float: left;
	margin: 0 1em 0.5em 0;
}

.cmrok-rich .alignright {
	float: right;
	margin: 0 0 0.5em 1em;
}

.cmrok-rich .alignjustify {
	text-align: justify;
}

/* ProcessWire TinyMCE: s podvlakom (align_right, align_center, …) */
.cmrok-rich p.align_left,
.cmrok-rich p.align_right,
.cmrok-rich p.align_center,
.cmrok-rich p.align_justify,
.cmrok-rich h1.align_left,
.cmrok-rich h1.align_right,
.cmrok-rich h1.align_center,
.cmrok-rich h2.align_left,
.cmrok-rich h2.align_right,
.cmrok-rich h2.align_center,
.cmrok-rich h3.align_left,
.cmrok-rich h3.align_right,
.cmrok-rich h3.align_center,
.cmrok-rich div.align_left,
.cmrok-rich div.align_right,
.cmrok-rich div.align_center {
	float: none;
}

.cmrok-rich p.align_left,
.cmrok-rich h1.align_left,
.cmrok-rich h2.align_left,
.cmrok-rich h3.align_left,
.cmrok-rich div.align_left {
	text-align: left;
}

.cmrok-rich p.align_right,
.cmrok-rich h1.align_right,
.cmrok-rich h2.align_right,
.cmrok-rich h3.align_right,
.cmrok-rich div.align_right {
	text-align: right;
}

.cmrok-rich p.align_center,
.cmrok-rich h1.align_center,
.cmrok-rich h2.align_center,
.cmrok-rich h3.align_center,
.cmrok-rich div.align_center {
	text-align: center;
}

.cmrok-rich p.align_justify,
.cmrok-rich div.align_justify {
	text-align: justify;
}

.cmrok-rich img.align_left {
	float: left;
	margin: 0.25em 1em 0.75em 0;
	display: block;
}

.cmrok-rich img.align_right {
	float: right;
	margin: 0.25em 0 0.75em 1em;
	display: block;
}

.cmrok-rich img.align_center,
.cmrok-rich img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}

/* Omot oko centrirane slike */
.cmrok-rich p:has(img.align_center),
.cmrok-rich p:has(img.aligncenter) {
	text-align: center;
}

/* figure + slika centrirano */
.cmrok-rich figure.aligncenter,
.cmrok-rich figure.align_center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.cmrok-rich::after,
.cmrok-rich .alignleft::after,
.cmrok-rich .alignright::after,
.cmrok-rich .align_left::after,
.cmrok-rich .align_right::after {
	content: "";
	display: table;
	clear: both;
}

/*
 * Dvostupac u TinyMCE-u: inline grid + <style> purifier ukloni — raspored ovdje.
 * !important: pobjeda nad bilo kojim utilityjem; #content ako .cmrok-rich nije izravan predak.
 * Alternativa klasi: <div data-cmrok-two-col="1">…</div> (dopušteno u ready.php hooku).
 */
.cmrok-rich .vrtici-grid,
.cmrok-rich .cmrok-two-col,
#content .vrtici-grid,
#content .cmrok-two-col,
#content [data-cmrok-two-col="1"] {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 1.25rem !important;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.cmrok-rich .vrtici-grid,
	.cmrok-rich .cmrok-two-col,
	#content .vrtici-grid,
	#content .cmrok-two-col,
	#content [data-cmrok-two-col="1"] {
		grid-template-columns: 1fr !important;
	}
}

.cmrok-rich .vrtici-grid > div,
.cmrok-rich .cmrok-two-col > div,
#content .vrtici-grid > div,
#content .cmrok-two-col > div,
#content [data-cmrok-two-col="1"] > div {
	border-radius: 8px;
	min-width: 0;
}

.cmrok-rich .vrtici-grid a[href],
.cmrok-rich .cmrok-two-col a[href],
#content .vrtici-grid a[href],
#content .cmrok-two-col a[href],
#content [data-cmrok-two-col="1"] a[href] {
	display: inline-block;
	padding: 10px 20px;
	background: #d32f2f;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
}

.cmrok-rich .vrtici-grid a[href]:hover,
.cmrok-rich .cmrok-two-col a[href]:hover,
#content .vrtici-grid a[href]:hover,
#content .cmrok-two-col a[href]:hover,
#content [data-cmrok-two-col="1"] a[href]:hover {
	color: #fff;
	background: #b71c1c;
}

/* Logo u izborniku: širina do ruba lijevog stupca (flex-1), visina iz omjera slike — ne fiksna visina retka menija */
.cmrok-nav-brand-logo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 6.5rem;
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 1024px) {
	.cmrok-nav-brand-logo {
		max-height: 7.5rem;
	}
}

.cmrok-footer-brand-logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 4.5rem;
	object-fit: contain;
	object-position: left center;
}

/* Početnica — partneri: logo + naziv */
.cmrok-partner-card__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 5rem;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	object-position: center;
}

@media (min-width: 768px) {
	.cmrok-partner-card__logo {
		max-height: 6rem;
	}
}

/* basic-page: body + lijevo + desno u jednom retku (lg), mobilno body prvi */
.cmrok-article-row {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.cmrok-article-row__body {
	order: 1;
}

.cmrok-article-row__left {
	order: 2;
}

.cmrok-article-row__right {
	order: 3;
}

@media (min-width: 1024px) {
	.cmrok-article-row {
		display: grid;
		grid-template-columns: var(--cmrok-cols, 1fr 2fr 1fr);
		gap: 2rem 2.5rem;
		align-items: start;
	}

	.cmrok-article-row__body,
	.cmrok-article-row__left,
	.cmrok-article-row__right {
		order: unset;
	}

	/* Okomite linije između stupaca (samo kad su oba susjedna stupca ispunjena) */
	.cmrok-article-has-left.cmrok-article-has-body .cmrok-article-row__body {
		border-left: 1px solid #e5e7eb;
		padding-left: 1.5rem;
	}

	.cmrok-article-has-body.cmrok-article-has-right .cmrok-article-row__right {
		border-left: 1px solid #e5e7eb;
		padding-left: 1.5rem;
	}

	.cmrok-article-has-left.cmrok-article-has-right:not(.cmrok-article-has-body) .cmrok-article-row__right {
		border-left: 1px solid #e5e7eb;
		padding-left: 1.5rem;
	}
}

/* Mobilno: vodoravne crte između blokova (body je prvi u čitanju) */
@media (max-width: 1023.98px) {
	.cmrok-article-has-body.cmrok-article-has-left .cmrok-article-row__left {
		border-top: 1px solid #e5e7eb;
		padding-top: 1.5rem;
		margin-top: 0.25rem;
	}

	.cmrok-article-has-body.cmrok-article-has-right .cmrok-article-row__right {
		border-top: 1px solid #e5e7eb;
		padding-top: 1.5rem;
		margin-top: 0.25rem;
	}

	.cmrok-article-has-left.cmrok-article-has-right:not(.cmrok-article-has-body) .cmrok-article-row__right {
		border-top: 1px solid #e5e7eb;
		padding-top: 1.5rem;
		margin-top: 0.25rem;
	}
}