/**
 * Blog, the list — one section of the design.
 *
 * Every measurement here was read from the design file. Colour and type that
 * the Style tab can carry are left to it.
 */

.custom-blog-list {
	--custom-blog-ground: #faf6ea;
	--custom-blog-foot: #bca48b;

	width: 100%;
}

/* The page's name, in the band every page gives its name. */
.custom-blog-list__name {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 96px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	background-color: var( --custom-blog-ground );
	box-sizing: border-box;
}

.custom-blog-list__heading {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

/* The list itself, and what closes it. The ground turns under the foot of it. */
.custom-blog-list__band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 96px;
	width: 100%;
	padding: 0 calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) ) 96px;
	background-image: linear-gradient(
		179.61deg,
		var( --custom-blog-ground ) 56.886%,
		var( --custom-blog-foot ) 100.21%
	);
	box-sizing: border-box;
}

.custom-blog-list__cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	column-gap: 24px;
	row-gap: 96px;
	width: 100%;
	max-width: 1344px;
}

/* The pages. Square, so they are not read as the round buttons the design
   gives to what a press sends somewhere. */
.custom-blog-list__pages {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.custom-blog-list__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	transition:
		background-color 300ms ease-in-out,
		color 300ms ease-in-out,
		opacity 300ms ease-in-out;
}

.custom-blog-list__page--break {
	border-color: transparent;
	cursor: default;
}

/* A step with nowhere to go keeps its place and refuses the press. */
.custom-blog-list__page--shut {
	opacity: 0.4;
	cursor: default;
}

.custom-blog-list__page:not( .custom-blog-list__page--break ):not( .custom-blog-list__page--shut ):not( .custom-blog-list__page--here ):hover {
	opacity: 0.7;
}

/* A state is its own thing to say. A theme's rule on a bare element under a
   pseudo-class outranks a class that only spoke for the resting state, so what
   the press looks like while it is pressed is said here too. */
.custom-blog-list__page:not( .custom-blog-list__page--here ):hover,
.custom-blog-list__page:not( .custom-blog-list__page--here ):focus,
.custom-blog-list__page:not( .custom-blog-list__page--here ):active,
.custom-blog-list__field:hover,
.custom-blog-list__field:focus,
.custom-blog-list__field:active {
	background: none;
	color: inherit;
	border-color: currentColor;
}

.custom-blog-list__page:focus-visible,
.custom-blog-list__field:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom-blog-list__go {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
}

.custom-blog-list__field {
	width: 72px;
	height: 40px;
	padding: 0 8px;
	border: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	box-sizing: border-box;
	appearance: textfield;
}

/* The default ring goes, and one drawn in the band's own ink stands in its
   place: a press nobody can see they have reached is worse than an ugly one. */
.custom-blog-list__field:focus:not( :focus-visible ) {
	outline: none;
}

/* What closes the page off. */
.custom-blog-list__close {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
}

.custom-blog-list__invite {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.custom-blog-list__follow {
	margin: 0;
	width: 206px;
	text-align: center;
}

.custom-blog-list__handle {
	/* The pill is filled with the section's own ink, so the anchor has to say
	   it takes that ink — a link left unsaid takes the theme's. */
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 36px;
	background-color: currentColor;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
}

/* The pill is the ink; what stands on it is the ground behind the section. */
.custom-blog-list__handle svg,
.custom-blog-list__handle span {
	color: var( --custom-blog-ground );
}

.custom-blog-list__handle svg {
	display: block;
	flex: 0 0 auto;
}

.custom-blog-list__handle:hover,
.custom-blog-list__handle:focus,
.custom-blog-list__press:hover,
.custom-blog-list__press:focus {
	color: inherit;
}

.custom-blog-list__handle:hover,
.custom-blog-list__press:hover {
	opacity: 0.7;
}

.custom-blog-list__press {
	color: inherit;
	text-align: center;
	text-decoration: underline;
	text-underline-position: from-font;
	transition: opacity 300ms ease-in-out;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-blog-list__page,
	.custom-blog-list__handle,
	.custom-blog-list__press {
		transition: none;
	}
}

/* Tablet and mobile — the file draws one of them (11001:2575): the name in
   a band the heroes of the contact and events pages share, then the cards
   one to a row, 20 in from either edge and 76 apart, and 38 under the last
   the pages and the way to follow, 38 apart, with 38 left under them. The
   name's band takes the shared figures, and the cards' band the 14 that
   with the 34 under the name comes to the 48 the file draws between name
   and first card. Tablet is not drawn; it takes the same figures, and the
   cards two to a row, 24 apart across and 48 down. */
@media ( max-width: 1024px ) {
	.custom-blog-list__name {
		padding: 10px 16px 34px;
	}

	.custom-blog-list__band {
		gap: 38px;
		padding: 14px 20px 38px;
	}

	.custom-blog-list__cards {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 76px;
	}

	.custom-blog-list__pages {
		gap: 6px;
	}

	.custom-blog-list__page {
		min-width: 32px;
		height: 32px;
		padding: 0 6px;
	}

	.custom-blog-list__go {
		gap: 6px;
		margin-left: 6px;
	}

	.custom-blog-list__field {
		width: 56px;
		height: 32px;
	}

	.custom-blog-list__close {
		gap: 24px;
	}

	.custom-blog-list__handle {
		gap: 6px;
		padding: 6px 12px;
	}

	.custom-blog-list__handle svg {
		width: 16px;
		height: 16px;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-blog-list__name {
		padding: 48px 16px 72px;
	}

	.custom-blog-list__band {
		padding: 24px 20px 48px;
	}

	.custom-blog-list__cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: 24px;
		row-gap: 48px;
	}
}