/* ===========================================================================
   News listing page, design canvas "QMS - Ressurser - Nyheter" (2026-11-11)
   ===========================================================================
   Loaded only on pages whose content has the `cq-news--page` band (see
   inc/page-nyheter.php): /no/nyheter/ and /news/. The "Siste nytt" list on
   /no/ressurser/ keeps the shared .cq-news styles in style.css.

   - List band on white; each card is one link (the title is stretched over
     it) with title, date and a one-line excerpt on the left and the
     "Les kunngjøringen" pill on the right. Below 600px the pill drops under the
     text and the excerpt gets two lines.
   - assets/js/page-nyheter.js shows six cards and adds "Vis flere nyheter".
   - "Utforsk andre ressurser": three tiles (articles, courses, FAQ), title only.
   Breakpoints as on the other canvas pages: tablet below 1024px, phone below 600px. */

.cq-main {
	--cq-nl-ease: cubic-bezier(.2, 0, 0, 1);
}

/* --- List band ---------------------------------------------------------- */

.wp-block-post-content > .cq-band--white.cq-news.cq-news--page {
	padding-block: 48px 96px;
}

.cq-news.cq-news--page .cq-news__list {
	gap: 20px;
	margin-block-start: 0;
}

/* The block layout's own gap margin on each card: the list gap spaces them. */
.cq-news.cq-news--page .cq-news__list > li {
	margin-block: 0;
}

.cq-news.cq-news--page .cq-news__card {
	align-items: center;
	column-gap: 40px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 28px 32px;
	row-gap: 8px;
}

.cq-news.cq-news--page .cq-news__card:focus-within {
	border-color: var(--cq-sky);
}

.cq-news.cq-news--page .cq-news__title,
.cq-news.cq-news--page .cq-news__date {
	grid-column: 1;
	margin: 0;
}

.cq-news.cq-news--page .cq-news__title {
	font-size: 20px;
}

.cq-news.cq-news--page .cq-news__date {
	color: #3f4947;
}

/* The excerpt block's two paragraphs join the card grid. */
.cq-news.cq-news--page .cq-news__body {
	display: contents;
}

.cq-news.cq-news--page .cq-news__body .wp-block-post-excerpt__excerpt {
	grid-column: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cq-news.cq-news--page .wp-block-post-excerpt__more-text {
	grid-column: 2;
	grid-row: 1 / span 3;
	margin: 0;
}

.cq-news.cq-news--page .wp-block-post-excerpt__more-link {
	border-color: #c4c7c5;
	padding: 0 20px;
	white-space: nowrap;
}

/* Cards past the current batch (set by the script). */
.cq-news.cq-news--page .cq-news__list > [hidden] {
	display: none !important;
}

/* "Vis flere nyheter" (made by the script). */
.cq-news-more {
	display: flex;
	justify-content: center;
	margin-block-start: 32px;
	padding-block-start: 8px;
}

.cq-news-more__btn {
	background: #ffffff;
	border: 1px solid #727272;
	border-radius: var(--cq-radius-pill);
	color: var(--cq-ink);
	cursor: pointer;
	font: 500 18px/1 var(--wp--preset--font-family--roboto, "Roboto", system-ui, sans-serif);
	min-height: 56px;
	padding: 0 32px;
	transition: background-color 120ms var(--cq-nl-ease), border-color 120ms var(--cq-nl-ease);
}

.cq-news-more__btn:hover {
	background: var(--cq-mist);
	border-color: var(--cq-ink);
}

.cq-news-more__btn:focus-visible {
	outline: 2px solid var(--cq-blue);
	outline-offset: 2px;
}

/* --- Links ---------------------------------------------------------------
   style.css underlines every .cq-main link on hover; here the card or tile
   shows the hover (border, pill, title colour), as on the canvas. */
.cq-main .cq-news--page a:not(.wp-element-button):not(.wp-block-navigation-item__content):is(:hover, :focus-visible),
.cq-main .cq-more-res a:not(.wp-element-button):not(.wp-block-navigation-item__content):is(:hover, :focus-visible) {
	text-decoration: none;
}

/* --- "Utforsk andre ressurser" ------------------------------------------------ */

.wp-block-post-content > .cq-band--white.cq-more-res.cq-more-res {
	border-top: 1px solid var(--cq-border);
	padding-block: clamp(64px, 8vw, 96px);
}

.cq-more-res > h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	letter-spacing: -0.016em;
	line-height: 1.15;
	margin-block: 0;
}


.cq-more-res__nav {
	margin-block-start: 32px;
}

.cq-more-res__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.cq-more-res__tile {
	background: #ffffff;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-lg);
	box-sizing: border-box;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 24px;
	text-decoration: none;
	transition: background-color 120ms var(--cq-nl-ease), border-color 120ms var(--cq-nl-ease), box-shadow 120ms var(--cq-nl-ease);
}

/* Same hover as the news cards above (style.css .cq-news__card:hover). */
.cq-more-res__tile:hover {
	background-color: var(--cq-wash, #f8faff);
	border-color: var(--cq-sky);
	box-shadow: var(--cq-shadow-sm);
}

.cq-more-res__tile:focus-visible {
	border-color: var(--cq-sky);
}

/* A tile only changes its border and title on hover, not the link colour. */
.cq-more-res a.cq-more-res__tile,
.cq-more-res a.cq-more-res__tile:hover,
.cq-more-res a.cq-more-res__tile:focus {
	color: inherit;
}

.cq-more-res__tile:focus-visible {
	outline: 2px solid var(--cq-blue);
	outline-offset: 2px;
}

.cq-more-res__icon {
	color: var(--cq-blue);
	flex: none;
}

.cq-more-res__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cq-more-res__title {
	align-items: center;
	color: var(--cq-ink);
	display: flex;
	font-size: 18px;
	font-weight: 500;
	gap: 8px;
	justify-content: space-between;
	line-height: 1.35;
}

.cq-more-res__arrow {
	flex: none;
	transition: transform 120ms var(--cq-nl-ease);
}

.cq-more-res__tile:hover .cq-more-res__arrow {
	color: var(--cq-blue);
}

.cq-more-res__tile:hover .cq-more-res__arrow {
	transform: translateX(3px);
}


@media (max-width: 1023.98px) {
	.cq-more-res__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599.98px) {
	.wp-block-post-content > .cq-band--white.cq-news.cq-news--page {
		padding-block: 32px 64px;
	}

	.cq-news.cq-news--page .cq-news__card {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px;
	}

	.cq-news.cq-news--page .cq-news__body .wp-block-post-excerpt__excerpt {
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		white-space: normal;
	}

	.cq-news.cq-news--page .wp-block-post-excerpt__more-text {
		grid-column: 1;
		grid-row: auto;
		margin-block-start: 8px;
	}

	.cq-news-more__btn {
		font-size: 16px;
		width: 100%;
	}

	.cq-more-res__tile {
		align-items: center;
		flex-direction: row;
		gap: 16px;
		padding: 16px 20px;
	}

	.cq-more-res__text {
		flex: 1;
		gap: 2px;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cq-news-more__btn,
	.cq-more-res__tile,
	.cq-more-res__arrow {
		transition: none;
	}
}