/**
 * Article page (single post); the header band itself is the .sk-page-header kit in design.css, after Podklady/Clanok Slovenske zahranicie.html (variant A):
 * white header band with breadcrumbs, kicker, title, lead, byline and share buttons,
 * wide photo, embroidered edge; 720px text column on the canvas; related articles.
 */


.sk-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	color: var(--wp--custom--design--muted);
	font-size: 15px;
}

.sk-byline > *,
.sk-byline__text > *,
.sk-byline__meta > * {
	margin: 0;
}

.sk-article-avatar {
	display: flex;
	inline-size: 44px;
	block-size: 44px;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--custom--design--soft);
	color: var(--wp--custom--design--ink);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 18px;
}

.sk-byline__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sk-byline__name,
.sk-byline__name a {
	color: var(--wp--custom--design--ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.sk-byline__name a:hover {
	color: var(--wp--custom--design--action);
}

.sk-byline__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 15px;
}

.sk-byline__meta > * + *::before {
	content: "";
	display: inline-block;
	inline-size: 4px;
	block-size: 4px;
	margin-inline-end: 8px;
	border-radius: 50%;
	background: #b8ae9f;
	vertical-align: middle;
}

/* Text column ---------------------------------------------------------------- */
.sk-article-body {
	max-width: 784px;
	margin: 0 auto;
	padding: 56px var(--wp--custom--layout--gutter, 32px) 24px;
	box-sizing: border-box;
}

.sk-article-content {
	color: var(--wp--custom--design--text);
	font-size: 19px;
	line-height: 1.7;
}

.sk-article-content > * {
	margin-block: 0;
}

.sk-article-content > * + * {
	margin-block-start: 22px;
}

.sk-article-content p {
	text-wrap: pretty;
}

/* Drop cap on the opening paragraph. */
.sk-article-content > p:first-child::first-letter {
	float: left;
	padding: 8px 12px 0 0;
	color: var(--wp--custom--design--action);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 84px;
	line-height: 0.82;
}

.sk-article-content :is(h2, h3, h4) {
	color: var(--wp--custom--design--ink);
	font-family: var(--wp--preset--font-family--editorial);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

.sk-article-content > :is(h2, h3, h4) {
	margin-block-start: 46px;
}

.sk-article-content h2 {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);
}

.sk-article-content h2::before {
	content: "";
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	background: var(--sk-ornament-rosette) center / contain no-repeat;
}

.sk-article-content h3 {
	font-size: 24px;
}

/* Links: bold ink with a stitched underline. */
.sk-article-content :is(p, li, figcaption) a {
	padding-bottom: 2px;
	background: repeating-linear-gradient(90deg, var(--wp--custom--design--accent) 0 6px, transparent 6px 10px) left bottom / 100% 2px no-repeat;
	color: var(--wp--custom--design--ink);
	font-weight: 600;
	text-decoration: none;
}

.sk-article-content :is(p, li, figcaption) a:hover {
	color: var(--wp--custom--design--action);
}

/* Pull quote: flower, serif italic, rules above and below. */
.sk-article-content .wp-block-quote,
.sk-article-content .wp-block-pullquote {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 40px 0 18px;
	padding: 32px 0;
	border: 0;
	border-top: 1px solid var(--wp--custom--design--border);
	border-bottom: 1px solid var(--wp--custom--design--border);
	text-align: start;
}

.sk-article-content .wp-block-pullquote blockquote {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.sk-article-content .wp-block-quote::before,
.sk-article-content .wp-block-pullquote::before {
	content: "";
	inline-size: 33px;
	block-size: 33px;
	background: var(--sk-ornament-flower) center / contain no-repeat;
}

.sk-article-content :is(.wp-block-quote, .wp-block-pullquote) p {
	margin: 0;
	color: var(--wp--custom--design--ink);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	font-style: italic;
	line-height: 1.3;
}

.sk-article-content :is(.wp-block-quote, .wp-block-pullquote) cite {
	color: var(--wp--custom--design--muted);
	font-size: 15px;
	font-style: normal;
}

.sk-article-content :is(.wp-block-quote, .wp-block-pullquote) cite strong {
	color: var(--wp--custom--design--ink);
	font-weight: 600;
}

/* Lists: diamond bullets. */
.sk-article-content ul {
	padding: 0;
	list-style: none;
}

.sk-article-content ul > li {
	position: relative;
	padding-inline-start: 22px;
}

.sk-article-content ul > li + li {
	margin-top: 8px;
}

.sk-article-content ul > li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 1px;
	inline-size: 8px;
	block-size: 8px;
	background: var(--wp--custom--design--action);
	transform: rotate(45deg);
}

.sk-article-content ol {
	padding-inline-start: 1.4em;
}

.sk-article-content ol > li::marker {
	color: var(--wp--custom--design--action);
	font-weight: 600;
}

.sk-article-content li strong {
	color: var(--wp--custom--design--ink);
}

/* List style "Rámček v skratke": white box with an embroidered top edge. */
.sk-article-content ul.is-style-facts,
.editor-styles-wrapper ul.is-style-facts {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
	padding: 30px 26px 24px;
	border: 1px solid var(--wp--custom--design--border);
	border-radius: 12px;
	background: var(--wp--custom--design--surface);
	font-size: 17px;
	line-height: 1.5;
	list-style: none;
}

.sk-article-content ul.is-style-facts::before,
.editor-styles-wrapper ul.is-style-facts::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	block-size: 8px;
	background:
		linear-gradient(45deg, transparent 40%, var(--wp--custom--design--action) 40% 60%, transparent 60%) 0 0 / 8px 8px,
		linear-gradient(-45deg, transparent 40%, var(--wp--custom--design--action) 40% 60%, transparent 60%) 0 0 / 8px 8px;
}

.sk-article-content ul.is-style-facts > li + li {
	margin-top: 0;
}

.sk-article-content ul.is-style-facts > li::before {
	top: 0.55em;
}

/* Images inside the text. */
.sk-article-content .wp-block-image {
	margin-block: 36px 14px;
}

.sk-article-content .wp-block-image img {
	border-radius: var(--wp--custom--radius--media, 10px);
}

.sk-article-content .wp-element-caption {
	margin-top: 10px;
	color: var(--wp--custom--design--muted);
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
}

/* After the text: divider, tags and sharing. */
.sk-article-body > .sk-ornament-divider {
	margin-top: 40px;
}

.sk-article-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 22px;
}

.sk-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sk-tags a {
	padding: 7px 14px 5px;
	border: 1px solid var(--wp--custom--design--stitch);
	border-radius: 999px;
	color: var(--wp--custom--design--ink);
	font-size: 14px;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sk-tags a:hover {
	border-color: var(--wp--custom--design--ink);
	background: var(--wp--custom--design--surface);
}

.sk-tags .wp-block-post-terms__separator {
	display: none;
}

.sk-article-comments {
	margin-top: 48px;
}

/* Variant B: text column with an aside (author, contents) ----------------------- */
.sk-article-body--aside {
	display: grid;
	max-width: 1200px;
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
	gap: 56px;
	align-items: start;
}

.sk-article-body--aside > * {
	margin: 0;
}

.sk-article-main > .sk-ornament-divider {
	margin-top: 40px;
}

.sk-article-aside {
	display: none;
	flex-direction: column;
	gap: 20px;
}

.sk-article-aside > * {
	margin: 0;
}

.sk-aside-author {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 4px;
}

.sk-aside-author > * {
	margin: 0;
}

/* No author on the post: drop the empty block. */
.sk-aside-author:not(:has(.sk-byline__name)),
.sk-page-hero__byline:not(:has(.sk-byline__name)) .sk-article-avatar {
	display: none;
}

.sk-toc {
	padding: 28px 22px 22px;
}

.sk-toc__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.sk-toc__list a {
	display: flex;
	gap: 10px;
	color: var(--wp--custom--design--ink);
	font-family: var(--wp--preset--font-family--editorial);
	font-size: 19px;
	line-height: 1.2;
	text-decoration: none;
}

.sk-toc__list a:hover {
	color: var(--wp--custom--design--action);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sk-toc__number {
	flex: none;
	color: var(--wp--custom--design--action);
}

.sk-article-content :is(h2, h3)[id] {
	scroll-margin-top: 96px;
}

@media (min-width: 960px) {
	.sk-article-body--aside {
		grid-template-columns: minmax(0, 720px) 300px;
	}

	.sk-article-aside {
		display: flex;
	}

	/* The byline moves from the card into the aside on wide screens. */
	.sk-page-hero__byline {
		display: none;
	}
}

@media (max-width: 600px) {
	.sk-article-body {
		padding-top: 40px;
	}

	.sk-article-content {
		font-size: 18px;
	}

	.sk-article-content > p:first-child::first-letter {
		font-size: 68px;
	}
}