@charset "UTF-8";
/* Novinky – výpis článků (spec 3.7, Figma 495:574, schváleno 2026-10-26): filtr kategorií 513:636, hlavní článek
   557:696, karty Component 11–17, stránkování 577:579. Loaded only on the posts page and category archives
   (inc/enqueue.php). Rhythm 1920: banner → 73 → filter → 73 → featured → 28 → grid → 36 → pagination → 73 → footer.
   Hover / focus states are not in the design – card as the megamenu card and Druhy přepravy (decision 2026-10-26). */

.news {
	padding-block: 48px;
}

/* Category colour (ACF Barva): category, date and icons; badge fill of the featured article and the most read
   articles. Figma: orange, red, purple and their badges (#FFEDD5, #FFE2DD, #E0D7FF – Novinky detail 957:831); blue and
   navy decided 2026-10-26. Navy badge is not in the design – 15 % of the colour on white; blue = the filter option. */
.news-meta--orange {
	--news-accent: var(--color-orange);
	--news-badge: var(--color-badge-orange);
}

.news-meta--red {
	--news-accent: var(--color-theme-red);
	--news-badge: var(--color-badge-red);
}

.news-meta--purple {
	--news-accent: var(--color-theme-purple);
	--news-badge: var(--color-badge-purple);
}

.news-meta--blue {
	--news-accent: var(--color-blue);
	--news-badge: var(--color-chip);
}

.news-meta--navy {
	--news-accent: var(--color-navy);
	--news-badge: color-mix(in srgb, var(--color-navy) 15%, var(--color-white));
}

/* Filter – #F1F4F8, radius 8, only a bottom line 2px #CDD9E9 inside the padding (as Karty s ikonou), 1370 × 68.
   Items 36px, radius 6, 14/21; active blue 600, others #CBDBEF navy 400. Rows wrap on narrow screens (WF mobile). */
.news-filter {
	--news-filter-border: 2px;

	margin-bottom: 48px;
	padding: 16px 20px calc(16px - var(--news-filter-border));
	/* Target of #clanky (filter and pagination links): 24px below the sticky header. */
	scroll-margin-top: 24px;
	border-bottom: var(--news-filter-border) solid var(--color-card-border);
	border-radius: var(--radius);
	background: var(--color-surface-light);
}

.news-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-filter__item {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 15px;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--color-navy);
	background: var(--color-chip);
	font-size: var(--font-size-small);
	font-weight: 400;
	line-height: 21px;
	text-decoration: none;
	transition: background-color var(--transition), box-shadow var(--transition);
}

.news-filter__item:hover,
.news-filter__item:focus-visible {
	background: var(--color-white);
	box-shadow: var(--shadow-button-hover);
}

.news-filter__item.is-active {
	border-color: var(--color-blue);
	color: var(--color-white);
	background: var(--color-blue);
	font-weight: 600;
	box-shadow: none;
}

/* Card – #F1F4F8, radius 8, padding 24 / 24 / 21; photo 390 × 248 (Figma 392 overflows 2px), 31 → meta → 13 →
   title 24/700/1.2 navy → 13 → perex → "Číst více" at the bottom. */
.news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px 24px 21px;
	border-radius: var(--radius);
	background: var(--color-surface-light);
	transition: background-color var(--transition), box-shadow var(--transition);
}

/* Hover: mouse and keyboard from 768px only (2026-11-11 – see .card-link in main.css): nothing on touch or mobile. */
@media (hover: hover) and (min-width: 768px) {
	.news-card:is(:hover, :has(:focus-visible)) {
		background: var(--color-white);
		box-shadow: var(--shadow-button-hover);
	}

	.news-card:is(:hover, :has(:focus-visible)) .news-card__image {
		transform: translateY(var(--hover-lift));
		box-shadow: var(--shadow-image-hover);
	}

	.news-card:is(:hover, :has(:focus-visible)) .news-card__more .icon {
		transform: translateX(var(--hover-arrow-shift));
	}
}

/* The title link covers the card; the focus ring is drawn around the card. */
.news-card:has(.news-card__link:focus-visible) {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

/* Featured article on mobile (2026-11-11, no design): under 768px it has the layout of the grid cards, so it is
   set apart – white card with a 1px border and the hover shadow, more space below. */
@media (max-width: 767px) {
	.news-card--featured {
		margin-bottom: 40px;
		border: 1px solid var(--color-card-border);
		background: var(--color-white);
		box-shadow: var(--shadow-button-hover);
	}
}
.news-card__media {
	margin-bottom: 31px;
}

.news-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 392 / 248;
	object-fit: cover;
	border-radius: var(--radius);
	transition: transform var(--transition), box-shadow var(--transition);
}

.news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
}

/* Meta – 13/700 uppercase, tracking 0.65 (as "Více informací"), icons 16 + 8, items 24 apart, category colour. */
.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	color: var(--news-accent);
	font-size: var(--font-size-more);
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.65px;
	text-transform: uppercase;
}

.news-card__category,
.news-card__date,
.news-card__reading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.news-card__meta .icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* Reading time (featured only) – 13/400 #595C65 lower case, clock #CDD9E9. */
.news-card__reading {
	color: var(--color-text);
	font-weight: 400;
	text-transform: none;
}

.news-card__reading .icon {
	color: var(--color-card-border);
}

.news-card__title {
	margin: 13px 0 0;
	color: var(--color-navy);
	font-size: var(--font-size-card-title);
	font-weight: 700;
	line-height: 1.2;
}

.news-card__link {
	color: inherit;
	text-decoration: none;
}

.news-card__link:focus-visible {
	outline: none;
}

.news-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius);
}

.news-card__text {
	margin: 13px 0 0;
	color: var(--color-text);
}

/* Grid cards (2026-10-26, not in the design): title max 3 lines, perex max 4 – a long text ends with "…", so one
   long card does not stretch its row. The stretched title link (::after) is positioned to the card, not clipped. */
.news-card:not(.news-card--featured) :is(.news-card__title, .news-card__text) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.news-card:not(.news-card--featured) .news-card__title {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.news-card__more {
	margin-top: auto;
	padding-top: 22px;
}

/* Featured article – 1370 × 488, photo 680 × 441 | 32 | text 610 (centred vertically), gaps 24, button 226 × 60.
   Under 1024px the photo is above the text. Without a photo the text takes the full width. */
.news-card--featured {
	margin-bottom: 28px;
}

.news-card--featured .news-card__media {
	margin-bottom: 24px;
}

.news-card--featured .news-card__image {
	aspect-ratio: 680 / 441;
}

.news-card--featured .news-card__category {
	min-height: 29px;
	padding: 0 7px 0 5px;
	border-radius: 6px;
	background: var(--news-badge);
}

.news-card--featured .news-card__title,
.news-card--featured .news-card__text {
	margin-top: 24px;
}

.news-card__button {
	position: relative;
	z-index: 2;
	min-width: 226px;
	margin-top: 24px;
}

/* Grid – 3 × 438, gap 28 (Figma middle column 6px off – artefact); an incomplete row stays left (reading order). */
.news__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pagination – 40px items, gap 12, radius 6; Předchozí / Další white with a 1px #CDD9E9 border, numbers 40 × 40
   #CBDBEF navy 600, current blue white 700. Wraps on narrow screens. */
.news .pagination .nav-links {
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.news .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 8px;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--color-navy);
	background: var(--color-chip);
	font-size: var(--font-size-small);
	font-weight: 600;
	line-height: 21px;
	text-decoration: none;
	transition: background-color var(--transition), box-shadow var(--transition);
}

.news .pagination .page-numbers.prev,
.news .pagination .page-numbers.next {
	padding: 0 15px;
	border-color: var(--color-card-border);
	background: var(--color-white);
}

.news .pagination .page-numbers.dots {
	background: transparent;
}

.news .pagination a.page-numbers:hover,
.news .pagination a.page-numbers:focus-visible {
	background: var(--color-white);
	text-decoration: none;
	box-shadow: var(--shadow-button-hover);
}

.news .pagination .page-numbers.current {
	color: var(--color-white);
	background: var(--color-blue);
	font-weight: 700;
}

/* Article detail (spec 3.8) – Figma 957:831 Novinky detail (2026-11-11). Panels and sharing reuse the position
   detail (Figma 886:804, job.css loaded on articles). Rhythm 1920: banner → 60 → meta strip 1370 × 78 → 61 → text
   column 892 | 40 | side panels 438 (60 apart) → 60 → Mohlo by vás také zajímat (heading, 43, cards) → 103 → footer.
   Text column: title H1 34/500/41 → 38 → perex 16/500/24 #595C65 → 49 → featured image 892 × 497 (radius 8) → 25 →
   caption 12/500/18 → 20 → content → 20 → box with sharing and tags. Under 1200px the panels follow the text. */
.article-meta {
	margin-top: 32px;
	padding: 16px;
	border-bottom: 1px solid var(--color-card-border);
	border-radius: var(--radius);
	background: var(--color-surface-light);
}

.article-meta .news-card__category {
	min-height: 29px;
	padding: 0 7px 0 5px;
	border-radius: 6px;
	color: inherit;
	background: var(--news-badge);
	text-decoration: none;
}

.article-meta a.news-card__category span {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition);
}

.article-meta a.news-card__category:hover span,
.article-meta a.news-card__category:focus-visible span {
	text-decoration-color: currentColor;
}

.article-layout {
	margin-top: 32px;
}

.article-main {
	gap: 20px;
}

.article__title {
	margin: 0;
	font-size: 34px;
	font-weight: 500;
	line-height: 41px;
}

.article__perex {
	margin: 38px 0 0;
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.5;
}

.article__image {
	margin: 49px 0 0;
}

.article__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 892 / 497;
	object-fit: cover;
	border-radius: var(--radius);
}

.article__image figcaption {
	margin-top: 25px;
	color: var(--color-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}

@media (max-width: 767px) {
	.article__title {
		font-size: var(--font-size-card-title);
		line-height: 1.2;
	}

	.article__perex,
	.article__image {
		margin-top: 24px;
	}

	.article__image figcaption {
		margin-top: 12px;
	}
}

/* Box with sharing and tags (961:645): 1px #E0E5ED, radius 12, padding 18, rows 8 apart; tags 12/500/18 #595C65. */
.article-footer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	border: 1px solid var(--color-share-border);
	border-radius: 12px;
}

.article-share > span {
	font-weight: 700;
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	color: var(--color-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}

.article-tags__list {
	display: contents;
	list-style: none;
}

.article-tags__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
	transition: color var(--transition), text-decoration-color var(--transition);
}

.article-tags__link:hover,
.article-tags__link:focus-visible {
	color: var(--color-blue);
	text-decoration-color: currentColor;
}

/* Contact panel (960:689): name navy, button as wide as its text (246). */
.article-contact .job-panel__name {
	margin-top: 32px;
	color: var(--color-navy);
}

.article-contact .job-panel__button {
	width: auto;
	max-width: 100%;
	margin-top: 30px;
	padding-inline: 24px;
}

/* Call-to-action (960:900): refresh-cw 32 orange next to the title 21/700/27, 27 apart, button full width. */
.article-cta .job-overview__title {
	margin-bottom: 27px;
	line-height: 27px;
}

.article-cta__text {
	margin: 0;
}

.article-cta__button {
	box-sizing: border-box;
	width: 100%;
	max-width: 390px;
	margin-top: 27px;
}

.article-cta .button:focus-visible {
	outline-color: var(--color-white);
}

/* Most read articles (960:873): category as a badge (29px, radius 6, padding 0 8, 13/700 upper case, category colour
   on its badge fill), title (link), date. */
.job-panel .article-popular__category {
	display: flex;
	margin-bottom: 4px;
}

.article-popular__category span {
	display: inline-flex;
	align-items: center;
	min-height: 29px;
	padding: 0 8px;
	border-radius: 6px;
	color: var(--news-accent);
	background: var(--news-badge);
	font-size: var(--font-size-more);
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.65px;
	text-transform: uppercase;
}

.article-popular__link {
	display: block;
	text-decoration: none;
}

.article-popular__link:hover,
.article-popular__link:focus-visible {
	text-decoration: underline;
}

/* 1024–1199px: the text column would be only ~475px next to the panels (position detail) – long articles and
   tables need the width, the panels follow the text up to 1200px. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mohlo by vás také zajímat – section heading left, the Novinky grid of 3 cards. */
.article-related {
	padding-bottom: 56px;
}

.article-related__title {
	margin-bottom: 32px;
	text-align: left;
}

/* Search results (no design, 2026-10-26): compact cards without a photo for every type – type (13/700 navy, upper
   case) and where it is on the site, title 20/700, description max. 3 lines, "Více informací". 2 columns from
   1024px. Card and hover as the Novinky card. */
.search-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 24px;
	border-radius: var(--radius);
	background: var(--color-surface-light);
	transition: background-color var(--transition), box-shadow var(--transition);
}

/* Hover: mouse and keyboard from 768px only (2026-11-11 – see .card-link in main.css). */
@media (hover: hover) and (min-width: 768px) {
	.search-card:is(:hover, :has(:focus-visible)) {
		background: var(--color-white);
		box-shadow: var(--shadow-button-hover);
	}

	.search-card:is(:hover, :has(:focus-visible)) .search-card__more .icon {
		transform: translateX(var(--hover-arrow-shift));
	}
}

.search-card:has(.search-card__link:focus-visible) {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.search-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin: 0;
	color: var(--color-text);
	font-size: var(--font-size-more);
	line-height: 20px;
}

.search-card__type {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-navy);
	font-weight: 700;
	letter-spacing: 0.65px;
	text-transform: uppercase;
}

.search-card__type .icon {
	width: 16px;
	height: 16px;
	color: var(--color-orange);
}

.search-card__title {
	margin: 10px 0 0;
	color: var(--color-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.search-card__link {
	color: inherit;
	text-decoration: none;
}

.search-card__link:focus-visible {
	outline: none;
}

.search-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius);
}

.search-card__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 8px 0 0;
	color: var(--color-text);
}

.search-card__more {
	margin-top: auto;
	padding-top: 16px;
}

/* Empty state (not in the design, 2026-10-26): box in the card style (#F1F4F8, radius 8), centred – icon 40px orange
   (stroke 2 as the meta icons), title as the card title, text, primary button. */
.news-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 24px;
	border-radius: var(--radius);
	background: var(--color-surface-light);
	text-align: center;
}

.news-empty__icon {
	width: 40px;
	height: 40px;
	color: var(--color-orange);
}

.news-empty__title {
	margin: 24px 0 0;
	color: var(--color-navy);
	font-size: var(--font-size-card-title);
	font-weight: 700;
	line-height: 1.2;
}

.news-empty__text {
	max-width: 530px;
	margin: 13px 0 0;
	color: var(--color-text);
}

.news-empty__button {
	margin-top: 28px;
}

@media (max-width: 767px) {
	/* Narrower items so two fit in a row (WF mobile has 3 short rows); not in the design. */
	.news-filter {
		padding: 12px 12px calc(12px - var(--news-filter-border));
	}

	.news-filter__list {
		gap: 8px;
	}

	.news-filter__item {
		padding-inline: 11px;
	}

	.news-card {
		padding: 16px 16px 21px;
	}

	.news-card--featured {
		margin-bottom: 24px;
	}

	.news-card__button,
	.news-empty__button {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.news {
		padding-block: 73px;
	}

	.news-filter {
		margin-bottom: 73px;
	}

	.news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.news .pagination .nav-links {
		margin-top: 36px;
	}

	.news-empty {
		padding: 64px 32px;
	}
}

@media (min-width: 1024px) {
	.article-meta {
		margin-top: 60px;
		padding: 24px;
	}

	.article-layout {
		gap: 40px;
		margin-top: 61px;
		padding-bottom: 60px;
	}

	.article-side {
		gap: 60px;
	}

	.article-popular {
		margin-top: 0;
	}

	.article-related {
		padding-bottom: 103px;
	}

	.article-related__title {
		margin-bottom: 43px;
	}

	.search-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.news-card--featured {
		display: grid;
		grid-template-columns: minmax(0, 680fr) minmax(0, 610fr);
		gap: 32px;
		align-items: center;
		padding: 23px 24px 24px;
	}

	.news-card--featured.news-card--no-image {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-card--featured .news-card__media {
		margin-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.news__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}