/* Článek (návrh design/ostatni „06 Článek“): úzký sloupec 760 px na levandulovém podkladu, úvodní
   obrázek jako karta se stínem, typografie obsahu v parts/obsah.css, box s produktem a sdílení. */

.as-clanek { background: var(--as-levandule); }
.as-clanek__in { max-width: calc(760px + 2 * var(--as-okraj)); margin: 0 auto; padding: 28px var(--as-okraj) 88px; }
.as-clanek .as-drobky { margin-bottom: 20px; }
.as-clanek__rubrika { margin-bottom: 4px; }
.as-clanek__rubrika:hover { color: var(--as-inkoust); }
.as-clanek__nadpis { font-size: 44px; line-height: 1.08; margin: 16px 0; }
.as-clanek__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 28px; font-size: 13.5px; font-weight: 600; color: var(--as-text-2); }
.as-clanek__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--as-inkoust);
	color: var(--as-merunka);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
}
.as-clanek__autor { color: var(--as-inkoust); font-weight: 800; }
.as-clanek__obrazek {
	margin: 0 0 32px;
	border: var(--as-ramecek);
	border-radius: 24px;
	overflow: hidden;
	background: var(--as-bila);
	box-shadow: var(--as-stin-8);
}
.as-clanek__obrazek img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; }

/* Úvodní tučný odstavec starých článků jako perex návrhu. */
.as-clanek__obsah > p:first-child { font-size: 19px; line-height: 1.6; font-weight: 600; color: var(--as-inkoust); margin-bottom: 24px; }
.as-clanek__obsah > p:first-child b,
.as-clanek__obsah > p:first-child strong { font-weight: 700; }

/* Obsah článku (inc/kapitoly.php) jako karta návrhu, vzhledem stejný jako box pluginu LuckyWP, který
   ho kreslil do 23. 10.: šířka podle obsahu, na úzkém displeji celá. Seznamy a odkazy přebíjejí obecná
   pravidla obsahu (.as-text ol / li / a v parts/obsah.css), proto selektory přes .as-kapitoly. */
.as-kapitoly { width: fit-content; max-width: 100%; margin: 8px 0 28px; clear: both; }
.as-kapitoly__box { background: var(--as-bila); border: var(--as-ramecek); border-radius: 18px; padding: 0 22px; box-shadow: var(--as-stin-5); }
.as-kapitoly__hlava { display: flex; align-items: center; gap: 16px; padding: 16px 0 8px; cursor: pointer; list-style: none; }
.as-kapitoly__hlava::-webkit-details-marker { display: none; }
.as-kapitoly__hlava::marker { content: ''; }
.as-kapitoly__nadpis { font-family: var(--as-pismo-nadpis); font-size: 17px; font-weight: 800; color: var(--as-inkoust); }
.as-kapitoly__sipka { margin-left: auto; flex: none; color: var(--as-inkoust); transition: transform .2s ease; }
.as-kapitoly__box[open] .as-kapitoly__sipka { transform: rotate(180deg); }
.as-kapitoly__box:not([open]) .as-kapitoly__hlava { padding-bottom: 16px; }
.as-text .as-kapitoly ol { display: block; margin: 0; padding: 0; list-style: none; }
.as-text .as-kapitoly ol.as-kapitoly__seznam { padding-bottom: 16px; font-size: 15px; line-height: 1.55; }
.as-text .as-kapitoly li { padding: 3px 0; min-height: 0; }
.as-text .as-kapitoly li::before { content: none; }
.as-text .as-kapitoly ol.as-kapitoly__pod { padding-left: 14px; margin-top: 3px; }
.as-text .as-kapitoly a { color: var(--as-inkoust); font-weight: 600; text-decoration: none; }
.as-text .as-kapitoly a:hover { color: var(--as-terakota); }
/* Kapitola po kliknutí v obsahu nezajede pod lepivou hlavičku. */
.as-clanek__obsah h2[id],
.as-clanek__obsah h3[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
	.as-kapitoly__sipka { transition: none; }
}

.as-clanek-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	background: var(--as-inkoust);
	border-radius: 24px;
	padding: 24px 26px;
	margin: 36px 0;
}
.as-clanek-box__obr {
	width: 84px;
	height: 84px;
	border-radius: 18px;
	background: var(--as-bila);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.as-clanek-box__obr img { max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; }
.as-clanek-box__text { flex: 1 1 0%; min-width: 200px; }
.as-clanek-box__nadpis { font-family: var(--as-pismo-nadpis); font-size: 20px; font-weight: 800; color: var(--as-bila); margin-bottom: 4px; }
.as-clanek-box__pod { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.as-clanek-box__cta { font-size: 15px; padding: 13px 26px; }
.as-clanek-box__cta,
.as-clanek-box__cta:hover { box-shadow: 0 4px 0 var(--as-merunka-tmava); }

.as-clanek__upozorneni { font-size: 13px; line-height: 1.6; color: var(--as-sede); margin: 0 0 28px; }
.as-clanek__pata {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	border-top: var(--as-ramecek);
	padding-top: 20px;
}
.as-clanek__stitky { display: flex; flex-wrap: wrap; gap: 8px; }
.as-clanek__stitek { font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; background: var(--as-bila); color: var(--as-inkoust); }
.as-sdilet { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--as-text-2); }
.as-sdilet__tlacitko {
	font-family: var(--as-pismo);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--as-inkoust);
	border: var(--as-ramecek);
	border-radius: 999px;
	padding: 5px 12px;
	background: var(--as-bila);
	cursor: pointer;
}
.as-sdilet__tlacitko:hover { color: var(--as-inkoust); background: var(--as-merunka-svetla); }

@media (max-width: 1024px) {
	.as-clanek__nadpis { font-size: 38px; }
}

@media (max-width: 768px) {
	.as-clanek__in { padding: 16px var(--as-okraj) 56px; }
	.as-clanek__nadpis { font-size: 28px; margin: 12px 0; }
	.as-clanek__meta { font-size: 12.5px; gap: 6px 10px; margin-bottom: 20px; }
	.as-clanek__avatar { display: none; }
	.as-clanek__obrazek { border-radius: 18px; box-shadow: var(--as-stin-6); margin-bottom: 24px; }
	.as-clanek__obsah > p:first-child { font-size: 16.5px; }
	.as-clanek-box { border-radius: 20px; padding: 18px; gap: 14px; }
	.as-clanek-box__obr { width: 64px; height: 64px; border-radius: 14px; }
	.as-clanek-box__text { min-width: 0; }
	.as-clanek-box__nadpis { font-size: 17px; }
	.as-clanek-box__pod { font-size: 13px; }
	.as-clanek-box__cta { display: flex; width: 100%; }
}