/* Blog, recipes, pages: archives, article, author box, comments, tips, pagination, 404, content blocks. */

/* ── Archive / search header ─────────────────────────────────────────────── */
.archive-head { padding-block: var(--s-10) var(--s-4); }
.archive-head__title { margin-bottom: var(--s-3); font-size: var(--fs-display); line-height: 1; letter-spacing: -0.02em; }
.archive-head__desc { max-width: 62ch; }
.archive-head__desc p { margin-bottom: var(--s-3); }
.archive-head .chips { margin-top: var(--s-4); }
/* Phones: one scrollable row of categories instead of four rows of chips before the first card; the edge fade
   says there is more. site.js scrolls the active chip into view. */
@media (max-width: 599.98px) {
  .archive-head .chips { display: flex; gap: var(--s-2); flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
  .archive-head .chips::-webkit-scrollbar { display: none; }
  .archive-head .chips .chip { flex: none; }
}
.archive-head__search { max-width: 560px; margin-top: var(--s-4); }
.chips--center { justify-content: center; }

.post-grid { margin: 0; }

/* ── Post card + tip card ────────────────────────────────────────────────── */
.post-card__excerpt { margin: 0; color: var(--c-text-muted); font-size: var(--fs-small); }
.post-card__meta { margin-top: auto; padding-top: var(--s-3); }
.tip-card { background: var(--c-yellow); box-shadow: none; }
.tip-card .card__body { position: relative; padding: var(--s-6); gap: var(--s-3); }
.tip-card__text { margin: 0; font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } /* long tips: the card links to the full text */
.tip-card__text a { text-decoration: none; }
.tip-card__text a::after { content: ''; position: absolute; inset: 0; }
.tip-card__text::before { content: '„'; }
.tip-card__text::after { content: '“'; }
.tip-card__art { width: 48px; height: 48px; margin-top: auto; align-self: flex-end; }

.search-page-card .card__body { padding: var(--s-5); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { margin-top: var(--s-10); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-border); font-weight: 700; text-decoration: none; }
.pagination .page-numbers.current { background: var(--c-yellow); box-shadow: none; }
.pagination a.page-numbers:hover { box-shadow: inset 0 0 0 2px var(--c-ink); }
.pagination .dots { box-shadow: none; background: none; }
.icon--flip { transform: scaleX(-1); }

/* ── Article ─────────────────────────────────────────────────────────────── */
.article__head { padding-block: var(--s-8) var(--s-6); }
.breadcrumbs--dark ol { opacity: 1; color: var(--c-text-muted); }
.breadcrumbs--dark [aria-current] { display: none; }
.article__cat { margin-bottom: var(--s-3); text-decoration: none; }
.article__title { font-size: var(--fs-h1); line-height: 1.08; margin-bottom: var(--s-4); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; color: var(--c-text-muted); font-size: var(--fs-small); }
.article__meta li { display: inline-flex; align-items: center; gap: 0.4em; }
.article__meta .icon { width: 16px; height: 16px; }
.article__jump { margin-top: var(--s-5); }

.article__image { margin: 0 auto var(--s-8); max-width: calc(1100px + 2 * var(--gutter)); }
.page-article .article__image { max-width: calc(var(--container) + 2 * var(--gutter)); }
.article__image img { width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: var(--r-card-lg); }

.article__content { font-size: 1.0625rem; }
.article__content > *:first-child { margin-top: 0; }

.article__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-8) 0 0; padding: 0; list-style: none; }

.article__course { margin-top: var(--s-10); }
.article__course .callout__icon { background: var(--c-white); }

.author-box { display: flex; gap: var(--s-5); align-items: flex-start; margin-top: var(--s-8); padding: var(--s-5); border-radius: var(--r-card); background: var(--c-surface-alt); box-shadow: inset 0 0 0 1px var(--c-grey-200); }
.author-box__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--c-yellow); flex-shrink: 0; }
.author-box__name { margin: 0 0 var(--s-1); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }
.author-box__bio { margin: 0 0 var(--s-2); color: var(--c-text-muted); }

/* WordPress content blocks inside .prose (half the posts use blocks, half classic content). */
.prose .wp-block-image, .prose figure { margin: var(--s-6) 0; }
.prose .wp-block-image img, .prose img { height: auto; border-radius: var(--r-card); }
.prose .alignleft { float: left; margin: 0.3em var(--s-5) var(--s-3) 0; max-width: 50%; }
.prose .alignright { float: right; margin: 0.3em 0 var(--s-3) var(--s-5); max-width: 50%; }
.prose .aligncenter { margin-inline: auto; }
.prose .wp-caption, .prose figcaption { font-size: var(--fs-small); color: var(--c-text-muted); }
.prose .wp-block-embed, .prose .wp-block-embed__wrapper, .prose iframe { max-width: 100%; }
.prose .wp-block-embed.is-type-video .wp-block-embed__wrapper, .prose iframe[src*='youtube'] { aspect-ratio: 16 / 9; width: 100%; height: auto; border: 0; border-radius: var(--r-card); overflow: hidden; }
.prose .wp-block-embed.is-type-video iframe { width: 100%; height: 100%; }
.prose .wp-block-separator, .prose hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-8) 0; }
.prose .wp-block-quote { margin-inline: 0; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 3px solid var(--c-yellow); }
/* Button block: legacy posts carry inline colours (#f05c3d) — render as the theme's yellow pill (.btn--yellow). */
.prose .wp-block-buttons { margin: var(--s-6) 0 var(--s-8); gap: var(--s-3); }
.prose .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	min-height: 44px; padding: 0.625rem 1.375rem;
	border: 2px solid transparent; border-radius: var(--r-pill);
	background-color: var(--c-yellow) !important; /* beats the inline style="background-color:…" */
	color: var(--c-ink) !important;
	font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 1.1;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.prose .wp-block-button__link:hover { background-color: var(--c-yellow-hover) !important; text-decoration: none; }
.prose .wp-block-button__link:active { transform: translateY(1px); }
.prose .is-style-outline .wp-block-button__link { background-color: transparent !important; border-color: currentColor; }
.prose::after { content: ''; display: block; clear: both; }
@media (max-width: 599.98px) { .prose .alignleft, .prose .alignright { float: none; max-width: 100%; margin: var(--s-4) 0; } }

/* ── Comments ────────────────────────────────────────────────────────────── */
.comments { padding-top: var(--s-6); }
.comments__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.comments__title { font-size: var(--fs-h2); margin: 0; }
.comments__write { font-weight: 700; }
.comments__more { margin: 0 0 var(--s-4); }
.comments__list, .comments__list .children { margin: 0; padding: 0; list-style: none; }
.comments__list .children { margin-left: var(--s-6); padding-left: var(--s-4); border-left: 2px solid var(--c-yellow); }
.comment__body { margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--c-surface-alt); }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-2); }
.comment__author { font-weight: 700; }
.comment__date { font-size: var(--fs-xs); color: var(--c-text-subtle); text-decoration: none; }
.comment__text p:last-child { margin-bottom: 0; }
.comment__reply { margin: var(--s-2) 0 0; font-size: var(--fs-small); font-weight: 600; }
.comment-respond { margin-top: var(--s-6); padding: var(--s-6); border-radius: var(--r-card-lg); background: var(--c-white); box-shadow: 0 0 0 1px var(--c-border), var(--shadow-sm); }
.comment-reply-title { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.comment-reply-title small { margin-left: var(--s-3); font-family: var(--font-body); font-size: var(--fs-small); }
.comment-form p { margin-bottom: var(--s-4); }
.comment-form label { display: block; margin-bottom: var(--s-1); font-size: var(--fs-small); font-weight: 600; }
.comment-form .comment-form-cookies-consent { display: flex; gap: var(--s-2); align-items: flex-start; }
.comment-form .comment-form-cookies-consent label { font-weight: 400; }
/* Jetpack's "Informujte mě…" checkboxes, laid out like the consent row above them. */
.comment-form .comment-subscription-form { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-2); }
.comment-form .comment-subscription-form input { flex: none; margin: 0.25em 0 0; }
.comment-form .comment-subscription-form label { display: inline; margin: 0; font-weight: 400; }
.comment-notes { color: var(--c-text-muted); font-size: var(--fs-small); }
/* WPRM star rating in the comment form */
.comment-form-wprm-rating { display: flex; align-items: center; gap: var(--s-3); }

/* ── Pages ───────────────────────────────────────────────────────────────── */
.page-head { padding-block: var(--s-10) var(--s-6); }
.page-head__title { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--s-3); } /* pages: H1 scale; the 80 px display size is for the listing heroes (kurzy, categories, 404) */
.page-head .lead { max-width: 62ch; }
.page-article__body { padding-bottom: var(--section-y); }

/* ── Empty state / 404 ───────────────────────────────────────────────────── */
.empty-state { display: grid; justify-items: center; gap: var(--s-4); padding-block: var(--s-10); text-align: center; color: var(--c-text-muted); }
.empty-state img { width: 220px; height: auto; }
.empty-state .chip { color: var(--c-ink); } /* links, not muted text */
.not-found__inner { text-align: center; }
.not-found__art { width: 120px; height: 120px; margin: 0 auto var(--s-5); }
.not-found h1 { font-size: var(--fs-display); line-height: 1; }
.not-found__search { max-width: 520px; margin: var(--s-6) auto; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* Ecomail sign-up widget inside articles (the 14-day menu download): Ecomail's orange box in Open Sans with a 3 px
   black button → the theme's soft-yellow card, body font, pill button. The widget injects its own CSS, so these
   rules need !important. */
.prose .ec-v-form-holder { margin: var(--s-6) 0 !important; padding: var(--s-6) !important; border: 0 !important; border-radius: var(--r-card) !important; background: var(--c-yellow-soft) !important; font-family: var(--font-body) !important; color: var(--c-text) !important; box-shadow: none !important; }
.prose .ec-v-form-holder * { font-family: var(--font-body) !important; color: inherit; }
.prose .ec-v-form-holder input[type="text"], .prose .ec-v-form-holder input[type="email"] { min-height: 44px !important; padding: 0.6rem 0.9rem !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-md) !important; background: var(--c-white) !important; font-size: var(--fs-body) !important; }
.prose .ec-v-form-holder button, .prose .ec-v-form-holder input[type="submit"] { min-height: 44px !important; padding: 0.625rem 1.375rem !important; border: 0 !important; border-radius: var(--r-pill) !important; background: var(--c-black) !important; color: var(--c-yellow) !important; font-size: var(--fs-body) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }