@charset "UTF-8";
/* CSS Document */


/* ----- Aktuality + Blog ----- */



#aktuality-main {
	padding-top: 30px;
}

#blog-main {
	padding-top: 80px;
	border-bottom: 1px solid var(--cnx-greylight);
	padding-bottom: 60px;
}

.aktualita-velka {
	display: flex;
	gap: 50px;
	border-bottom: 1px solid var(--cnx-greylight);
	padding: 50px 0;
}

.clanek-velky {
	display: flex;
	gap: 50px;
	margin-bottom: 60px;
}

.aktualita-velka img {
	max-width: 380px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.clanek-velky img {
	max-width: 680px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.aktualita-velka h3 {
	max-width: 600px;
}

.aktualita-velka div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

.clanek-velky div {
	max-width: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

.clanek-velky h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.aktualita-velka p, .clanek-velky p {
	max-width: 900px;
	margin: 0;
}

.date, .autor {
	color: var(--cnx-greydark);
	font-weight: var(--medium);
}

.clanek-velky .button {
	margin-top: 20px;
	width: max-content;
}


#dalsi-aktuality, #dalsi-clanky {
	padding-top: 100px;
}

h2 {
	margin-bottom: 80px;
}


.aktuality-vypis, .blog-vypis {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-gap: 20px;
}

.aktuality-karta img, .blog-karta img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.aktuality-karta div, .blog-karta div {
	height: 150px;
	padding-top: 25px;
}

.aktualita-nazev, .blog-nazev {
    display: block;
    font-family: var(--font-kyberna);
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 10px;
}

.aktualita-datum, .blog-autor {
	display: block;
	font-weight: var(--medium);
	color: var(--cnx-greydark);
}

.aktuality-karta:hover, .blog-karta:hover {
	transform: translateY(-6px);
	transition: 0.2s;
}

.aktuality-karta:hover .aktualita-nazev, .blog-karta:hover .blog-nazev {
	color: var(--cnx-main);
}

.loadmore {
	padding-top: 60px;
	text-align: center;
}



/* ----- Aktuality - detail ----- */



#aktualita-detail .container {
	padding-top: 50px;
	display: flex;
	gap: 60px;
}

.aktualita-image {
	max-width: 420px;
}

.aktualita-image img {
	max-width: 100%;
}

.aktualita-content {
	max-width: 720px;
}

.aktualita-content button {
	font-size: 1rem;
	background: none;
	border-width: 0 0 1px 0;
	cursor: pointer;
	margin-bottom: 20px;
}

.aktualita-content h2 {
	margin-bottom: 10px;
}

.aktualita-content .date {
	margin: 0 0 20px;
}

.aktualita-content p + p {
	margin-top: 15px;
}



/* ----- Blog - detail ----- */



#clanek-detail .container {
	margin-top: -150px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.clanek-image {
	width: 100%;
}

.clanek-image img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
	margin-bottom: 30px;
	width: 100%;
	max-height: 60vh;
	-webkit-box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.10);
	-moz-box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.10);
	box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.10);
}

.clanek-main {
	max-width: 1200px;
}

.clanek-top {
	max-width: 1000px;
}

.clanek-top h1 {
    font-size: 2rem;
    line-height: 3rem;
    color: var(--cnx-black);
    background: none;
    text-transform: none;
    padding: 0;
	user-select: text;
	max-width: 900px;
}

.clanek-top h1::selection {
	background-color: var(--cnx-main);
	color: #ffffff;
}

.clanek-top button {
	font-size: 1rem;
	background: none;
	border-width: 0 0 1px 0;
	cursor: pointer;
	margin-bottom: 20px;
}

.clanek-top .autor {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 18px 0 24px;
}

.clanek-top .autor img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 36px;
	border-radius: 50%;
}

.clanek-top .perex {
	font-size: 1.125rem;
	line-height: 2.125rem;
	font-weight: var(--medium);
	margin-bottom: 40px;
}

.clanek-content {
	padding-top: 30px;
	max-width: 720px;
	transform: translateX(250px);
}



/* ----- Responz – Tablet ----- */



@media screen and (max-width: 1199px) {
	
	.clanek-velky, .aktualita-velka {
		flex-direction: column;
	}
	
	.clanek-velky img {
		max-width: 100%;
	}
	
	.aktuality-vypis, .blog-vypis {
		grid-template-columns: 1fr 1fr;
	}
	
	#aktualita-detail .container {
		flex-direction: column;
	}
	
	#clanek-detail .container {
		margin-top: -130px;
	}
	
	.clanek-image img {
		aspect-ratio: 3 / 2;
	}
	
	.clanek-top h1 {
		font-size: 1.625rem;
		line-height: 2.375rem;

	}
	
	.clanek-content {
		transform: translateX(0);
	}
	
	
}




/* ----- Responz – Mobil ----- */



@media screen and (max-width: 599px) {
	
	
	.aktuality-vypis, .blog-vypis {
		grid-template-columns: 100%;
	}
	
	#clanek-detail .container {
		margin-top: -100px;
	}
	
	
}