/* Aktuality in the Stavtrans visual language. Layout pieces (st-wrap, st-hero-banner, st-bc, st-btn, st-card)
   and the colour variables come from the theme stylesheet; this file adds only what is specific to articles. */

/* ---- Article cards: listing and homepage ---- */

.fg-news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.fg-news-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--st-line);
	border-radius: 12px;
	color: var(--st-ink);
	text-decoration: none;
}

.fg-news-card:hover {
	color: var(--st-ink);
}

.fg-news-card:hover .fg-news-card-title {
	text-decoration: underline;
}

.fg-news-card:focus-visible {
	outline: 2px solid var(--st-navy);
	outline-offset: 2px;
}

.fg-news-card-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 12px;
	background: var(--st-soft);
}

/* An article without a photo gets the brand panel, so a row of cards keeps one height. */
span.fg-news-card-image {
	background: var(--st-navy) url("../../../../../image/catalog/figma/logo-white.svg") center / 46% auto no-repeat;
}

.fg-news-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fg-news-card-date {
	font-size: 12px;
	line-height: 16px;
	color: var(--st-muted);
}

.fg-news-card-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: -.24px;
	text-wrap: balance;
}

.fg-news-card-perex {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 16px;
	line-height: 24px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* ---- Listing ---- */

#fg-news-listing .fg-news-grid,
#fg-news-listing .fg-news-empty {
	margin-bottom: 60px;
}

#fg-news-listing .st-pager {
	margin: -36px 0 60px;
}

.fg-news-empty {
	font-size: 16px;
	line-height: 24px;
}

/* ---- Homepage section: same band rhythm as the product carousels ---- */

.fg-news-latest {
	padding: 80px 48px;
	background: #fff;
}

.fg-news-latest-in {
	max-width: var(--st-max);
	margin: 0 auto;
}

.fg-news-latest h2 {
	margin: 0 0 40px;
	font-size: 40px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -.4px;
	text-align: center;
}

.fg-news-more {
	margin-top: 40px;
	text-align: center;
}

/* ---- Article: the hero carries the title, the photo is the article's own ---- */

/* The category hero has a fixed height; a headline with a perex needs room to grow. */
.st-hero-banner.fg-news-hero {
	height: auto;
	min-height: var(--st-hero-h);
}

.st-hero-banner.fg-news-hero.is-plain {
	grid-template-columns: 1fr;
	min-height: 320px;
}

.fg-news-hero.is-plain .st-hero-copy-box {
	border-radius: 12px;
}

.fg-news-hero .st-hero-copy-box {
	gap: 32px;
}

/* The trail ends at the listing, which is a way back and not the current page. */
.st-bc.fg-news-trail li:last-child a {
	font-weight: 700;
}

.fg-news-hero-copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fg-news-date {
	font-size: 14px;
	line-height: 20px;
	color: var(--st-promo);
}

.fg-news-hero .st-hero-copy-box h1 {
	font-size: clamp(32px, 2.6vw, 50px);
	line-height: 1.16;
	text-wrap: balance;
}

.fg-news-lead {
	max-width: 60ch;
	margin: 0;
	color: #fff;
	font-size: 18px;
	line-height: 28px;
}

.fg-news-article {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 60px 0 40px;
}

.fg-news-article:empty {
	margin: 20px 0;
}

/* Reading column under 80 characters; photos get more room, product rows the full grid. */
.fg-news-block-text {
	width: min(100%, 760px);
	margin: 0 auto;
	font-size: 18px;
	line-height: 30px;
}

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

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

.fg-news-block-text p,
.fg-news-block-text ul,
.fg-news-block-text ol,
.fg-news-block-text blockquote,
.fg-news-block-text table {
	margin: 0 0 20px;
}

.fg-news-block-text h2 {
	margin: 40px 0 16px;
	font-size: 28px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: -.28px;
}

.fg-news-block-text h3 {
	margin: 32px 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
}

.fg-news-block-text a {
	color: var(--st-navy);
	text-decoration: underline;
}

.fg-news-block-text ul,
.fg-news-block-text ol {
	padding-left: 24px;
}

.fg-news-block-text li {
	margin-bottom: 8px;
}

.fg-news-block-text blockquote {
	padding-left: 20px;
	border-left: 4px solid var(--st-navy);
}

.fg-news-block-text img,
.fg-news-block-text iframe,
.fg-news-block-text video {
	max-width: 100%;
	border-radius: 12px;
}

.fg-news-block-text img {
	height: auto;
}

.fg-news-block-text table {
	width: 100%;
	border-collapse: collapse;
}

.fg-news-block-text th,
.fg-news-block-text td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--st-soft);
	text-align: left;
}

.fg-news-block-photo {
	width: min(100%, 1120px);
	margin: 0 auto;
}

.fg-news-block-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* A short product row sits centred under the text instead of hugging the left edge of a five-column grid. */
.fg-news-block-products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.fg-news-block-products > .st-card {
	flex: 1 1 300px;
	max-width: 355px;
}

.fg-news-back {
	display: flex;
	justify-content: center;
	margin: 0 0 60px;
}

@media (max-width: 1199px) {
	.fg-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The theme collapses the hero to one fixed-height column and the photo falls out of view;
	   an article keeps its photo, stacked under the headline. */
	.st-hero-banner.fg-news-hero,
	.st-hero-banner.fg-news-hero.is-plain {
		height: auto;
		min-height: 0;
	}

	/* The banner clips its own corners; a rounded box above the photo would notch the join. */
	.fg-news-hero .st-hero-copy-box {
		height: auto;
		border-radius: 0;
	}

	.fg-news-hero .st-hero-photo {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 767px) {
	.fg-news-grid {
		grid-template-columns: 1fr;
	}

	.fg-news-card-title {
		font-size: 20px;
		line-height: 28px;
	}

	.fg-news-latest {
		padding: 48px 16px;
	}

	.fg-news-latest h2 {
		margin-bottom: 24px;
		font-size: 26px;
		line-height: 32px;
	}

	.fg-news-more {
		margin-top: 24px;
	}

	#fg-news-listing .fg-news-grid,
	#fg-news-listing .fg-news-empty {
		margin-bottom: 40px;
	}

	.fg-news-article {
		gap: 28px;
		margin: 32px 0;
	}

	.fg-news-block-text {
		font-size: 16px;
		line-height: 26px;
	}

	.fg-news-block-text h2 {
		font-size: 24px;
		line-height: 32px;
	}

	.fg-news-back {
		margin-bottom: 40px;
	}
}