/**
 * News and Updates page.
 *
 * Every rule is scoped under .ij-news, so no other page is affected — the
 * .newscard and .postcard-t class names are shared with the blog grid, and an
 * unscoped hover rule here would reach into it.
 *
 * Layout lives in the template's inline styles, as on every other redesigned
 * page. This file carries only what an inline style attribute cannot express:
 * the hover transitions and the grid's breakpoints.
 */

.ij-news { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }

.ij-news .postcard-t {
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-news .newscard {
	transition:
		transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-news .newscard:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-overlay);
}

.ij-news .newscard:hover .postcard-t {
	color: var(--brand-green-dark);
}

.ij-news .newscard-cta {
	transition:
		background 200ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-news .newscard-cta:hover,
.ij-news .newscard-cta:focus-visible {
	background: var(--brand-green-dark);
	border-color: var(--brand-green-dark);
}

/* The pill is the card's only link, so its focus ring is the card's. */
.ij-news .newscard-cta:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 3px;
}

/**
 * A card lifting under the pointer is decoration; a reader who has asked for
 * less motion still gets the colour change, which is what conveys the state.
 */
@media (prefers-reduced-motion: reduce) {
	.ij-news .newscard,
	.ij-news .newscard-cta,
	.ij-news .postcard-t {
		transition: none;
	}

	.ij-news .newscard:hover {
		transform: none;
	}
}

@media (max-width: 860px) {
	.ij-news .events-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 560px) {
	.ij-news .events-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}