/*
 * Blog — /blog/ archive + single article.
 *
 * Conditionally enqueued (see inc/enqueue.php): only the two blog routes ever
 * download this. The homepage and video singles never do.
 *
 * This file holds ONLY what's new. The article page reuses single.css wholesale
 * for its shell — .tt-single__grid (two columns + 340px rail), .tt-upnext (the
 * rail) and .tt-share all live there and are loaded alongside this file. The
 * cards reuse .tt-card from components.css. Everything below is the delta.
 *
 * Tokens only — never a hardcoded colour.
 */

/* ---------------------------------------------------------------- archive grid */

/*
 * Its own 1/2/3 ladder, overriding .tt-grid's 1/2/5.
 *
 * Five columns is right for a thumbnail and wrong for text: on a 1600px
 * container five article cards land at ~200px each, which cannot hold a title
 * plus an excerpt without turning into a column of single words. Three keeps a
 * readable measure, and 12 (the archive's posts_per_page, set in
 * inc/query-mods.php) divides by 1, 2 and 3 — so the last row is never ragged
 * at any breakpoint.
 */
@media (min-width: 1100px) {
	.tt-grid--blog {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Standfirst under the archive H1. Reading text, so --tt-text-muted is right
   here (it's a caption, not body copy) but a step up in size. */
.tt-blog-intro {
	max-width: 70ch;
	margin: calc(var(--tt-s2) * -1) 0 var(--tt-s6);
	color: var(--tt-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------- article card */

/*
 * Media and body are SIBLINGS here (not nested in one <a> like the video card).
 * That is what lets the featured card flip to a horizontal row further down.
 */
.tt-card--article {
	display: flex;
	flex-direction: column;
}

.tt-card--article .tt-card__media {
	flex: 0 0 auto;
}

.tt-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tt-s2);
	flex: 1 1 auto;
	padding: var(--tt-s4);
	min-width: 0;
}

/*
 * WHOLE-CARD CLICK TARGET.
 *
 * The anchor wraps only the title; this stretches its hit area over the entire
 * card. Anything that must stay independently clickable would need
 * position:relative + a higher z-index — an article card has nothing else to
 * click, which is exactly why it's safe here and would NOT be on a video card
 * (those carry actor links inside).
 */
.tt-card__titlelink {
	color: inherit;
	text-decoration: none;
}

.tt-card__titlelink::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

/*
 * An article title is the card's main content, not a caption under a thumbnail
 * the way a video title is — so it gets real size, and none of the two-line
 * clamp's reserved min-height (which exists to align actor rows across a video
 * row and would just add dead space here).
 */
.tt-card--article .tt-card__title {
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	-webkit-line-clamp: 3;
}

.tt-card--article:hover .tt-card__title,
.tt-card--article:focus-within .tt-card__title {
	color: var(--tt-accent);
}

.tt-card__excerpt {
	margin: 0;
	padding: 0;
	color: var(--tt-text-muted);
	font-size: 13.5px;
	line-height: 1.65;

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Date chip, sat on the image instead of in a stats row at the card's foot.
 * Frees the body for title + excerpt + CTA, and uses the overlay tokens (which
 * are mode-independent by design — they always sit on a photo, never a surface).
 */
.tt-card__date-chip {
	position: absolute;
	left: var(--tt-s2);
	bottom: var(--tt-s2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px var(--tt-s2);
	border-radius: var(--tt-radius-pill);
	background: var(--tt-overlay);
	color: var(--tt-overlay-text);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
}

.tt-card__date-plain {
	color: var(--tt-text-muted);
	font-size: 12px;
}

/* The read-more affordance. mt:auto pins it to the card's bottom edge so it
   lines up across a row no matter how short an excerpt runs. */
.tt-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: var(--tt-s2);
	color: var(--tt-accent);
	font-size: 13px;
	font-weight: 700;
}

.tt-card__more svg {
	transition: transform var(--tt-speed);
}

.tt-card--article:hover .tt-card__more svg,
.tt-card--article:focus-within .tt-card__more svg {
	transform: translateX(4px);
}

/*
 * No cover uploaded — a supported state, not an error (see article-card.php).
 * Without the media box the card would be a bare block of text sitting flush in
 * the grid, so it gets a top accent hairline to keep it reading as a card.
 */
.tt-card--noimg {
	border-top: 2px solid var(--tt-accent);
}

/*
 * NO featured/hero card variant.
 *
 * v0.20.0 briefly promoted the newest article to a full-width horizontal card to
 * stop a lone card looking marooned in a 3-column row. Reverted on owner review:
 * every card stays the same shape and the grid stays uniform. The improvements
 * that came with it are kept — whole-card click, date chip, read-more, typography.
 * Don't reintroduce a hero variant without asking.
 */

/* ---------------------------------------------------------- sidebar article list */

/*
 * "Přečti si další články" — the second block in the article page's sticky
 * sidebar, under the popular-videos rail.
 *
 * It reuses the `.tt-upnext` shell (border, padding, heading) from single.css so
 * the two blocks read as one column, and replaces only the LIST, because the
 * rows are a different shape: no thumbnail. Covers are optional here (hand
 * uploaded, and this project never writes to uploads/), so a thumbnail list
 * would render empty grey boxes — see more-articles.php.
 *
 * Rows are divided by hairlines instead of the rail's gap + hover pill. Without
 * a thumbnail there is no visual edge to a row, so two stacked titles would read
 * as one paragraph.
 */
.tt-artlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-artlist__item + .tt-artlist__item {
	border-top: 1px solid var(--tt-border);
}

/*
 * Row layout: media + body, mirroring .tt-upnext__link in single.css so the two
 * sidebar blocks read as one column rather than two unrelated widgets.
 *
 * The media box is NARROWER than the video rail's 132px. An article thumbnail is
 * supporting detail (the title is what gets clicked); a video thumbnail IS the
 * product. Giving them equal weight made the articles look like badly-cropped
 * videos.
 */
.tt-artlist__link {
	display: flex;
	align-items: flex-start;
	gap: var(--tt-s3);
	padding: var(--tt-s3) var(--tt-s2);
	border-radius: var(--tt-radius);
	transition: background var(--tt-speed);
}

.tt-artlist__link:hover {
	background: var(--tt-bg-raised);
}

.tt-artlist__media {
	flex: 0 0 84px;
	display: block;
	aspect-ratio: var(--tt-thumb-ratio);
	overflow: hidden;
	border-radius: calc(var(--tt-radius) - 2px);
	background: var(--tt-bg-raised);
}

.tt-artlist__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * No cover is a SUPPORTED state (covers are uploaded by hand; this project never
 * writes to uploads/). The placeholder keeps the row exactly the same shape as a
 * row with an image, so a coverless article reads as "no picture" rather than as
 * a broken thumbnail. Accent-tinted via color-mix so it stays token-driven and
 * correct in both themes; the glyph inherits it through currentColor.
 */
.tt-artlist__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, var(--tt-accent) 12%, var(--tt-bg-raised));
	color: var(--tt-accent);
}

.tt-artlist__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tt-artlist__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--tt-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	transition: color var(--tt-speed);
}

.tt-artlist__link:hover .tt-artlist__name {
	color: var(--tt-accent);
}

.tt-artlist__date {
	color: var(--tt-text-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Sits below the list, separated by the same hairline the rows use. */
.tt-artlist__all {
	display: block;
	margin-top: var(--tt-s3);
	padding-top: var(--tt-s3);
	border-top: 1px solid var(--tt-border);
	color: var(--tt-accent);
	font-size: 13px;
	font-weight: 700;
}

.tt-artlist__all:hover {
	color: var(--tt-accent-dark);
}

/* ---------------------------------------------------------------- article page */

.tt-article__cover {
	position: relative;
	aspect-ratio: var(--tt-thumb-ratio);
	overflow: hidden;
	border-radius: var(--tt-radius);
	background: var(--tt-bg-raised);
}

.tt-article__cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The article title.
 *
 * ⚠️ SCOPED TO .tt-article — do not lift this to .tt-single__title. That base
 * rule (single.css) is tuned for a VIDEO page, where the title sits under a
 * player that already dominates the screen and a big heading would fight it.
 * An article has no player: the title IS the top of the page.
 *
 * It also fixes a hierarchy inversion introduced when the H2s grew to 27px/800 —
 * the H1 was still 24px/700, i.e. visibly SMALLER than the section headings
 * inside it. Now the ladder reads title > section > body at every width.
 */
.tt-article .tt-single__title {
	margin: var(--tt-s5) 0 var(--tt-s3);
	color: var(--tt-text);
	font-size: clamp(28px, 4vw, 44px);
	/* 700, not 800 (owner, v0.19.4) — size and spacing carry the hierarchy here,
	   so the extra weight only made the display type look heavy-handed. */
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	/* Long Czech titles break badly mid-word at display sizes. */
	text-wrap: balance;
}

.tt-article__meta {
	display: flex;
	align-items: center;
	gap: var(--tt-s2);
	margin: 0 0 var(--tt-s4);
	color: var(--tt-text-muted);
	font-size: 13px;
}

/*
 * The reading column.
 *
 * ⚠️ max-width: none — the inherited 70ch cap is REMOVED here, deliberately.
 *
 * This reverses my own earlier call, and the measurement is why. The article's
 * main column is 1109px on a 1536px viewport, but 70ch resolves to ~604px — so
 * the H1 spanned the full column while the body sat in a narrow strip with a
 * **505px empty gap** beside it. It doesn't read as a considered reading measure;
 * it reads as text that got cut off. That is exactly the bug v0.8.12 fixed on
 * .tt-page, and v0.5.1 fixed on .tt-single__content ("70ch cap removed by
 * request") — this is the third time the same cap has produced the same
 * complaint, so it goes.
 *
 * Body now fills the column and lines up with the title, like every other block
 * on the page.
 *
 * Bumped a step from .tt-prose's 15px — this is an article, the main content of
 * its page, not a legal footnote.
 */
.tt-article__body {
	max-width: none;
	margin-bottom: var(--tt-s6);
	font-size: 16px;
	line-height: 1.75;
}

/*
 * Section headings (owner request, v0.19.2: "bigger, underline them or something
 * for differentiating").
 *
 * In a 2500-word listicle the H2 is the navigation — it's how a reader scans for
 * the model they came for. At 20px with no rule under it, each one read as a
 * slightly bold paragraph and the ten sections ran together.
 *
 * Three changes, all reusing the site's existing language rather than inventing:
 *   - real size jump, fluid so it doesn't dwarf a phone
 *   - a bottom hairline (--tt-border, same as .tt-rail__title's) = the "underline"
 *   - the 4px accent tick from .tt-rail__title::before, so a blog heading and a
 *     sidebar heading are visibly the same design system
 * Plus much more space above than below, which is what actually binds a heading
 * to the text it introduces instead of letting it float between two blocks.
 */
.tt-article__body h2 {
	display: flex;
	align-items: center;
	gap: var(--tt-s3);
	margin-top: var(--tt-s7);
	margin-bottom: var(--tt-s4);
	padding-bottom: var(--tt-s3);
	border-bottom: 1px solid var(--tt-border);
	color: var(--tt-text);
	font-size: clamp(20px, 2.4vw, 27px);
	/* 700, matching the H1 (owner, v0.19.4). The accent tick and the hairline
	   already separate these from body copy — weight isn't doing that job. */
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.tt-article__body h2::before {
	content: '';
	flex: 0 0 auto;
	width: 4px;
	/* em, not px — the tick scales with the fluid heading instead of shrinking
	   against it at the top of the clamp. */
	height: 0.95em;
	border-radius: 2px;
	background: var(--tt-accent);
}

.tt-article__body h3 {
	margin-top: var(--tt-s6);
	margin-bottom: var(--tt-s2);
	color: var(--tt-text);
	font-size: 19px;
	font-weight: 700;
}

.tt-article__body p {
	margin: 0 0 var(--tt-s4);
}

.tt-article__body ul,
.tt-article__body ol {
	margin: 0 0 var(--tt-s4);
	padding-left: var(--tt-s5);
}

.tt-article__body li {
	margin-bottom: var(--tt-s2);
}

/*
 * NO link rule here on purpose.
 *
 * Article links are styled by the shared `.tt-prose a, .tt-seo__text a` rule in
 * components.css (accent + 700 + underline), so a blog link, a legal-page link
 * and a homepage SEO link are one decision.
 *
 * There used to be a `font-weight: 600` override here. Same specificity as the
 * shared rule but later in the cascade, so it silently won and article links
 * rendered a step lighter than everywhere else — the exact drift that merging
 * the two link rules was meant to end.
 */

/* ------------------------------------------------------- prev / next article */

/*
 * Two-column GRID, not a flexbox with space-between.
 *
 * That distinction is the whole point: either link can be missing (the newest
 * article has no newer neighbour, the oldest has no older one), and with
 * space-between a lone link slides to the left edge regardless of which
 * direction it points. An explicit column keeps "next" on the right even when
 * "previous" doesn't exist, so the arrow never contradicts its position. With
 * only two articles published, every page is currently in that state.
 */
.tt-artnav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tt-s3);
	margin: var(--tt-s6) 0 var(--tt-s5);
	padding-top: var(--tt-s5);
	border-top: 1px solid var(--tt-border);
}

@media (min-width: 700px) {
	.tt-artnav {
		grid-template-columns: 1fr 1fr;
	}

	/* Hold the right-hand column even when there is no previous link. */
	.tt-artnav__link--next {
		grid-column: 2;
	}
}

.tt-artnav__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: var(--tt-s3) var(--tt-s4);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	background: var(--tt-bg-surface);
	transition: border-color var(--tt-speed), background var(--tt-speed), transform var(--tt-speed);
}

.tt-artnav__link:hover {
	border-color: var(--tt-accent);
	background: var(--tt-bg-raised);
}

.tt-artnav__link--next {
	text-align: right;
}

.tt-artnav__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tt-accent);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Push the label to the right edge of its own flex line on the next card. */
.tt-artnav__link--next .tt-artnav__label {
	justify-content: flex-end;
	margin-left: auto;
}

.tt-artnav__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--tt-text);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

/* The arrows lean toward their direction on hover, matching .tt-card__more. */
.tt-artnav__label svg {
	transition: transform var(--tt-speed);
}

.tt-artnav__link--prev:hover .tt-artnav__label svg {
	transform: translateX(-3px);
}

.tt-artnav__link--next:hover .tt-artnav__label svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.tt-artnav__label svg {
		transition: none;
	}

	.tt-artnav__link--prev:hover .tt-artnav__label svg,
	.tt-artnav__link--next:hover .tt-artnav__label svg {
		transform: none;
	}
}

.tt-article__back {
	margin: 0 0 var(--tt-s6);
	font-size: 14px;
	font-weight: 600;
}

.tt-article__back a {
	color: var(--tt-accent);
}

.tt-article__back a:hover {
	color: var(--tt-accent-dark);
}