/* Typography comes from the theme: variables in stylesheet.css, text sizes as in the product detail (.product_banner__content___text .p-small), card as .products_item */

/* Detail */
/* The theme header is position: absolute (103px on desktop), content has to clear it */
.news-detail,
.news-listing {
	padding: 150px 0 80px;
}

@media (max-width: 991px) {
	.news-detail,
	.news-listing {
		padding: 80px 0 50px;
	}
}

.news-frame {
	padding: 30px 20px;
	border: 1px solid var(--light-grey);
	color: var(--text-color);
}

/* .link with the theme's .link_with_arrow arrow, mirrored to point back */
.news-back {
	position: relative;
	margin-bottom: 25px;
	padding-left: 2.2rem;
}

.news-back::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc(50% - 0.5px);
	width: 20px;
	height: 1px;
	background: var(--text-color);
}

.news-back::after {
	content: '';
	position: absolute;
	left: 1px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-bottom: 1px solid var(--text-color);
	border-left: 1px solid var(--text-color);
	transform: translateY(-50%) rotate(45deg);
}

.news-intro {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: 40px;
}

.news-date {
	margin-bottom: 40px;
}

.news-block {
	margin-bottom: 40px;
}

.news-block:last-child {
	margin-bottom: 0;
}

.news-block-text p,
.news-block-text li {
	font-size: var(--lead-small-font-size);
	font-weight: var(--standard-font-weight);
	line-height: var(--lead-line-height);
}

.news-block-text p {
	margin-bottom: 20px;
}

.news-block-text ul,
.news-block-text ol {
	margin-bottom: 20px;
	padding-left: 1.2em;
}

.news-block-text b,
.news-block-text strong {
	font-weight: var(--h2-font-weight);
}

.news-block-text h1,
.news-block-text h2,
.news-block-text h3,
.news-block-text h4 {
	margin: 40px 0 20px;
	font-family: var(--font-secondary-extended);
	font-size: var(--h3-font-size);
	font-weight: var(--h3-font-weight);
	line-height: var(--h3-line-height);
	text-transform: uppercase;
}

.news-block-text > :first-child {
	margin-top: 0;
}

.news-block-text > :last-child {
	margin-bottom: 0;
}

.news-block img {
	max-width: 100%;
	height: auto;
}

.news-block-photo img {
	display: block;
	width: 100%;
}

.news-block-products .products_item {
	margin-bottom: 0;
	padding: 15px;
}

@media (max-width: 991px) {
	.news-block-text p,
	.news-block-text li {
		font-size: var(--lead-small-font-size--lg);
	}
}

@media (max-width: 767px) {
	.news-block-text p,
	.news-block-text li {
		font-size: var(--lead-small-font-size--md);
	}
}

@media (max-width: 575px) {
	.news-block-text p,
	.news-block-text li {
		font-size: var(--lead-small-font-size--sm);
		font-weight: var(--standard-font-weight2);
	}
}

@media (min-width: 992px) {
	.news-frame {
		padding: 50px 60px;
	}

	/* product_new.twig columns assume a full-width row; three per row fit the narrow detail column */
	.news-block-products .row > [class*="col-"] {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

/* Homepage section: same frame, alignment and text styles as .products_item right below it */
.news-card {
	display: flex;
	flex-direction: column;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 15px;
	border: 1px solid rgba(0, 0, 0, 0);
	color: var(--text-color);
	text-align: center;
}

.news-card:hover,
.news-card:focus {
	border-color: var(--light-grey);
	color: var(--text-color);
	text-decoration: none;
}

.news-card-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--light-grey);
}

.news-card-date {
	margin: 3rem 0 11px;
}

.news-card-perex {
	margin: 0;
}

@media (min-width: 992px) {
	.news-card {
		padding: 30px;
	}
}

.news-more {
	margin-top: 20px;
}

.news-pagination .pagination {
	display: inline-flex;
	margin-top: 20px;
}

/* "Akce" label: black, square, gold (theme --beige) text, left-aligned under the image (cards and detail) */
.news-badge {
	display: inline-block;
	padding: 7px 12px 6px;
	background: var(--black);
	color: var(--beige);
	font-family: var(--font-secondary-extended);
	font-size: 14px;
	font-weight: var(--h3-font-weight);
	line-height: 1;
	text-transform: uppercase;
	border-radius: 0;
}

.news-card .news-badge {
	align-self: flex-start;
	margin-top: 15px;
}

.news-badge + .news-card-date {
	margin-top: 25px;
}

/* In the detail the image has its own bottom margin; without an intro image the label sits above the title */
.news-intro + .news-badge {
	margin-top: -20px;
}

.news-frame .news-badge {
	margin-bottom: 20px;
}

/* The theme's .button:hover turns the border white (made for dark backgrounds); on the beige homepage fill it black instead, like "Do košíku" */
.news-more a.button {
	border-color: var(--text-color);
	transition: background-color 0.2s, color 0.2s;
}

.news-more a.button:not(.disabled):hover,
.news-more a.button:focus {
	background-color: var(--black);
	border-color: var(--black);
	color: var(--light-beige);
}