.articlelist--grid {
	padding: 1rem 10%;
	box-sizing: border-box;
}

.articlelist--grid-max-width {
	max-width: var(--archive-grid-max-width, none);
	margin-right: auto;
	margin-left: auto;
}

.archive-grid {
	display: grid;
	grid-template-columns: repeat(var(--archive-grid-columns-desktop, 3), minmax(0, 1fr));
	column-gap: var(--archive-grid-gap-horizontal, 1.5rem);
	row-gap: var(--archive-grid-gap-vertical, 1.5rem);
}

/*
 * Packed editorial grids.
 *
 * PHP resolves a deterministic placement map for desktop, tablet and mobile.
 * The first four posts may request square 2x2, 3x3 or 4x4 footprints; all
 * later 1x1 posts fill the remaining holes from the top-left. Explicit
 * placement keeps the result predictable without relying on grid-auto-flow:
 * dense, which can reorder featured cards in surprising ways.
 */
.articlelist--grid-packed .archive-entry--packed {
	grid-column: var(--archive-grid-col-desktop, auto) / span var(--archive-grid-span-desktop, 1);
	grid-row: var(--archive-grid-row-desktop, auto) / span var(--archive-grid-span-desktop, 1);
}

/*
 * Overlay row geometry for packed featured cards.
 *
 * Each invisible row sizer is one grid-column wide and therefore has the same
 * height as a normal 1x1 Overlay card at the selected ratio. This establishes
 * the implicit row tracks even when a 4x4 hero occupies the full width and no
 * ordinary card is present to size those rows. Featured cards then stretch to
 * their assigned grid area, so the area height automatically includes every
 * intervening row gap.
 */
.articlelist--grid-packed.articlelist--preset-grid-image-overlay .archive-grid__row-sizer {
	display: var(--archive-grid-sizer-display-desktop, none);
	grid-column: 1;
	grid-row: var(--archive-grid-sizer-row-desktop, auto);
	width: 100%;
	min-width: 0;
	aspect-ratio: var(--archive-grid-card-ratio, 4 / 3);
	visibility: hidden;
	pointer-events: none;
}

.articlelist--grid-packed.articlelist--preset-grid-image-overlay .archive-entry--grid-overlay.archive-entry--featured {
	align-self: stretch;
	height: auto;
	min-height: 0;
	aspect-ratio: auto;
}

.articlelist--grid-natural-height .archive-grid {
	align-items: start;
}

.archive-entry--grid {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	background: var(--archive-grid-card-background, #fff);
	border: var(--archive-grid-card-border-width, 1px) solid var(--archive-grid-card-border-colour, #ddd);
	border-radius: var(--archive-grid-card-border-radius, 0);
	box-shadow: var(--archive-grid-card-shadow, none);
	overflow: hidden;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

/*
 * Equal-height stretching belongs only to the Image Above layout. Overlay
 * cards are sized by their selected image ratio and must not inherit a row
 * height from neighbouring content.
 */
.articlelist--grid-equal-height .archive-entry--grid-image-above,
.articlelist--grid-equal-height .archive-entry--grid-image-above > .archive-entry__card-link,
.articlelist--grid-equal-height .archive-entry--grid-image-above > .archive-entry__inner,
.articlelist--grid-equal-height .archive-entry--grid-image-above > .archive-entry__card-link > .archive-entry__inner {
	height: 100%;
}

.archive-entry__card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.archive-entry__card-link:hover,
.archive-entry__card-link:focus,
.archive-entry__card-link:visited {
	color: inherit;
	text-decoration: none;
}

.archive-entry--grid .archive-entry__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--archive-grid-card-background, #fff);
}

.archive-entry--grid .archive-entry__media {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--archive-grid-card-background, #fff);
}

.archive-entry--grid .archive-entry__image-link {
	display: block;
}

.archive-entry--grid .archive-entry__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: var(--archive-grid-image-ratio, 4 / 3);
	object-fit: var(--archive-grid-image-fit, cover);
	object-position: var(--archive-grid-image-position, center center);
	transition: transform 220ms ease, opacity 220ms ease;
}

.archive-entry--grid .archive-entry__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	padding: var(--archive-grid-content-padding, 1.25rem);
}

.articlelist--grid-align-left .archive-entry__content {
	text-align: left;
}

.articlelist--grid-align-centre .archive-entry__content {
	text-align: center;
}

.articlelist--grid-align-right .archive-entry__content {
	text-align: right;
}

.archive-entry--grid .archive-entry-header,
.archive-entry--grid .archive-entry-title,
.archive-entry--grid .archive-entry-title a,
.archive-entry--grid .archive-entry-summary,
.archive-entry--grid .archive-entry-summary p,
.archive-entry--grid .archive-entry__read-more {
	min-width: 0;
	max-width: 100%;
}

/*
 * Grid text must wrap within the card before Auto-fit considers reducing the
 * font size. Explicitly reset white-space and permit very long unbroken words
 * or URLs to break rather than escaping into the neighbouring grid column.
 */
.archive-entry--grid .archive-entry-title,
.archive-entry--grid .archive-entry-title a,
.archive-entry--grid .archive-entry-summary,
.archive-entry--grid .archive-entry-summary p,
.archive-entry--grid .archive-entry__read-more-link {
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
}

.archive-entry--grid .archive-entry-title {
	width: 100%;
	margin: 0 0 0.75rem;
}

.archive-entry--grid .archive-entry-title a {
	display: inline;
}

.articlelist--grid-custom-title-size .archive-entry--grid .archive-entry-title {
	font-size: var(--archive-grid-title-font-size);
}

.articlelist--grid-custom-excerpt-size .archive-entry--grid .archive-entry-summary,
.articlelist--grid-custom-excerpt-size .archive-entry--grid .archive-entry-summary p {
	font-size: var(--archive-grid-excerpt-font-size);
}

.articlelist--grid-custom-read-more-size .archive-entry--grid .archive-entry__read-more-link {
	font-size: var(--archive-grid-read-more-font-size);
}

.archive-entry--grid .archive-entry-title:last-child {
	margin-bottom: 0;
}

.archive-entry--grid .archive-entry-title a {
	color: inherit;
	text-decoration: none;
}

.archive-entry--grid .archive-entry-summary p:first-child {
	margin-top: 0;
}

.archive-entry--grid .archive-entry-summary p:last-child {
	margin-bottom: 0;
}

.archive-entry--grid .archive-entry__read-more {
	margin-top: 1rem;
}

.archive-entry--read-more-bottom .archive-entry__read-more {
	margin-top: auto;
	padding-top: 1rem;
}

.archive-entry--grid .archive-entry__read-more--left {
	text-align: left;
}

.archive-entry--grid .archive-entry__read-more--centre {
	text-align: center;
}

.archive-entry--grid .archive-entry__read-more--right {
	text-align: right;
}

.archive-entry--grid .archive-entry__read-more-link--button {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	background: var(--colour-primary, #005f73);
	color: #fff !important;
	text-decoration: none;
	border-radius: 0.25rem;
}

.archive-entry--grid .archive-entry__read-more-link--button:hover,
.archive-entry--grid .archive-entry__read-more-link--button:focus {
	background: var(--colour-primary-highlight, #ee9b00);
	color: #fff !important;
}

.archive-entry--grid .archive-entry__read-more-link--button:focus-visible,
.archive-entry__card-link:focus-visible {
	outline: 3px solid var(--colour-primary-highlight, #ee9b00);
	outline-offset: -3px;
}

/*
 * Image Overlay geometry.
 *
 * A normal 1x1 <article> is sized from the grid column and
 * --archive-grid-card-ratio. Packed featured cards instead stretch to their
 * explicit multi-row grid area, whose row heights are established by the
 * invisible row sizers above. In both cases every descendant layer is
 * positioned inside the established card box, so media, overlay and text
 * cannot enlarge it through intrinsic content dimensions.
 */
.archive-entry--grid-overlay {
	position: relative;
	align-self: start;
	width: 100%;
	min-width: 0;
	min-height: 0;
	aspect-ratio: var(--archive-grid-card-ratio, 4 / 3);
	isolation: isolate;
}

/* Whole-card links fill the already-sized overlay card without sizing it. */
.archive-entry--grid-overlay > .archive-entry__card-link {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: block;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
}

.archive-entry--grid-overlay > .archive-entry__inner,
.archive-entry--grid-overlay > .archive-entry__card-link > .archive-entry__inner {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	background: var(--archive-grid-card-background, #fff);
}

.archive-entry--grid-overlay .archive-entry__media {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
}

.archive-entry--grid-overlay .archive-entry__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.archive-entry--grid-overlay .archive-entry__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	aspect-ratio: auto;
	object-fit: var(--archive-grid-image-fit, cover);
	object-position: var(--archive-grid-image-position, center center);
}

.archive-entry--grid-overlay .archive-entry__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: var(--archive-grid-overlay-colour, #000);
	opacity: var(--archive-grid-overlay-opacity, 0.45);
	pointer-events: none;
}

.archive-entry--grid-overlay .archive-entry__content {
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	width: var(--archive-grid-overlay-content-width, 100%);
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
	min-height: 0;
	color: var(--archive-grid-overlay-text-colour, #fff);
}

/*
 * Auto-fit may deliberately increase the card height only after wrapping and
 * font reduction have both failed. Expansion happens on the article itself,
 * so the media, overlay, whole-card link and content all follow the same box.
 */
.articlelist--grid-auto-fit-text .archive-entry--grid-overlay.archive-entry--auto-fit-expanded {
	height: var(--archive-grid-auto-fit-height);
	min-height: var(--archive-grid-auto-fit-height);
	aspect-ratio: auto;
}

.archive-entry--grid-overlay .archive-entry-title,
.archive-entry--grid-overlay .archive-entry-title a,
.archive-entry--grid-overlay .archive-entry-summary,
.archive-entry--grid-overlay .archive-entry-summary p,
.archive-entry--grid-overlay .archive-entry__read-more-link--text {
	color: var(--archive-grid-overlay-text-colour, #fff);
}

.archive-entry--overlay-top-left .archive-entry__content {
	top: 0;
	left: 0;
}

.archive-entry--overlay-top-centre .archive-entry__content {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.archive-entry--overlay-top-right .archive-entry__content {
	top: 0;
	right: 0;
}

.archive-entry--overlay-centre-left .archive-entry__content {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.archive-entry--overlay-centre .archive-entry__content {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.archive-entry--overlay-centre-right .archive-entry__content {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.archive-entry--overlay-bottom-left .archive-entry__content {
	bottom: 0;
	left: 0;
}

.archive-entry--overlay-bottom-centre .archive-entry__content {
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.archive-entry--overlay-bottom-right .archive-entry__content {
	right: 0;
	bottom: 0;
}

/* Common hover overlay layer. */
.archive-entry__hover-overlay {
	position: absolute;
	z-index: 2;
	inset: 0;
	background: var(--archive-grid-overlay-colour, #000);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
}

.archive-entry--hover-zoom:hover .archive-entry__media img,
.archive-entry--hover-zoom:focus-within .archive-entry__media img {
	transform: scale(1.06);
}

.archive-entry--hover-lift:hover,
.archive-entry--hover-lift:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}

.archive-entry--hover-fade:hover .archive-entry__media img,
.archive-entry--hover-fade:focus-within .archive-entry__media img {
	opacity: 0.72;
}

.archive-entry--hover-colour-overlay:hover .archive-entry__hover-overlay,
.archive-entry--hover-colour-overlay:focus-within .archive-entry__hover-overlay {
	opacity: 0.35;
}

.archive-entry--grid-overlay.archive-entry--hover-colour-overlay:hover .archive-entry__overlay,
.archive-entry--grid-overlay.archive-entry--hover-colour-overlay:focus-within .archive-entry__overlay {
	opacity: calc(var(--archive-grid-overlay-opacity, 0.45) + 0.25);
}

.archive-entry--hover-border-highlight:hover,
.archive-entry--hover-border-highlight:focus-within {
	border-color: var(--colour-primary-highlight, #ee9b00);
}

@media (hover: hover) and (pointer: fine) {
	.archive-entry--grid-overlay.archive-entry--hover-text-reveal .archive-entry__content {
		opacity: 0;
		transition: opacity 220ms ease;
	}

	.archive-entry--grid-overlay.archive-entry--hover-text-reveal:hover .archive-entry__content,
	.archive-entry--grid-overlay.archive-entry--hover-text-reveal:focus-within .archive-entry__content {
		opacity: 1;
	}

	.archive-entry--grid-image-above.archive-entry--hover-text-reveal .archive-entry-summary,
	.archive-entry--grid-image-above.archive-entry--hover-text-reveal .archive-entry__read-more {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 220ms ease, transform 220ms ease;
	}

	.archive-entry--grid-image-above.archive-entry--hover-text-reveal:hover .archive-entry-summary,
	.archive-entry--grid-image-above.archive-entry--hover-text-reveal:hover .archive-entry__read-more,
	.archive-entry--grid-image-above.archive-entry--hover-text-reveal:focus-within .archive-entry-summary,
	.archive-entry--grid-image-above.archive-entry--hover-text-reveal:focus-within .archive-entry__read-more {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1024px) {
	.archive-grid {
		grid-template-columns: repeat(var(--archive-grid-columns-tablet, 2), minmax(0, 1fr));
	}

	.articlelist--grid-packed .archive-entry--packed {
		grid-column: var(--archive-grid-col-tablet, auto) / span var(--archive-grid-span-tablet, 1);
		grid-row: var(--archive-grid-row-tablet, auto) / span var(--archive-grid-span-tablet, 1);
	}

	.articlelist--grid-packed.articlelist--preset-grid-image-overlay .archive-grid__row-sizer {
		display: var(--archive-grid-sizer-display-tablet, none);
		grid-row: var(--archive-grid-sizer-row-tablet, auto);
	}
}

@media (max-width: 640px) {
	.archive-grid {
		grid-template-columns: repeat(var(--archive-grid-columns-mobile, 1), minmax(0, 1fr));
	}

	.articlelist--grid-packed .archive-entry--packed {
		grid-column: var(--archive-grid-col-mobile, auto) / span var(--archive-grid-span-mobile, 1);
		grid-row: var(--archive-grid-row-mobile, auto) / span var(--archive-grid-span-mobile, 1);
	}

	.articlelist--grid-packed.articlelist--preset-grid-image-overlay .archive-grid__row-sizer {
		display: var(--archive-grid-sizer-display-mobile, none);
		grid-row: var(--archive-grid-sizer-row-mobile, auto);
	}
}

@media (prefers-reduced-motion: reduce) {
	.archive-entry--grid,
	.archive-entry--grid .archive-entry__media img,
	.archive-entry__hover-overlay,
	.archive-entry--hover-text-reveal .archive-entry__content,
	.archive-entry--hover-text-reveal .archive-entry-summary,
	.archive-entry--hover-text-reveal .archive-entry__read-more {
		transition: none !important;
	}

	.archive-entry--hover-lift:hover,
	.archive-entry--hover-lift:focus-within,
	.archive-entry--hover-zoom:hover .archive-entry__media img,
	.archive-entry--hover-zoom:focus-within .archive-entry__media img {
		transform: none;
	}
}