/* My Page Listing block
   Brass Dark caps label, then rows separated by brass rules: 96px 4:5 photo (120px on phones), kicker in Brass Dark
   caps, bold name, one muted line. Rows link as a whole. No card: it sits on the linen sidebar.
--------------------------------------------- */

.block-page-listing {
	font-family: var(--wp--preset--font-family--secondary);
}
.block-page-listing .block-page-listing__label {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-optical-sizing: auto;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.15;
	color: var(--wp--preset--color--primary);
}
.block-page-listing .block-page-listing__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.block-page-listing__item {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--quaternary);
}
.block-page-listing__item:first-child {
	padding-top: 0;
	border-top: 0;
}
.block-page-listing__item:last-child {
	padding-bottom: 0;
}
.block-page-listing .block-page-listing__row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	color: var(--wp--preset--color--black);
	text-decoration: none;
}
.block-page-listing__image {
	display: block;
	line-height: 0;
}
.block-page-listing__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--border-radius--small);
	margin: 0;
	border: 0;
}
.block-page-listing__body {
	display: block;
	min-width: 0;
}
.block-page-listing__kicker {
	display: block;
	font-size: var(--wp--custom--caps--tiny);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-tiny);
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}
.block-page-listing__title {
	display: block;
	margin: 4px 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--black);
}
a.block-page-listing__row:is(:hover, :focus) .block-page-listing__title {
	color: var(--wp--preset--color--green);
}
.block-page-listing__text {
	display: block;
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--wp--custom--color--text-muted);
}
/* Phones: the rows fill more of the screen: a wider photo (120px) and a bigger name and line */
@media (max-width: 767px) {
	.block-page-listing:not(.is-style-tiles) .block-page-listing__row {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 18px;
	}
	.block-page-listing:not(.is-style-tiles) .block-page-listing__title {
		font-size: 1.375rem;
		line-height: 1.2;
	}
	.block-page-listing:not(.is-style-tiles) .block-page-listing__kicker {
		font-size: 0.8125rem;
	}
	.block-page-listing:not(.is-style-tiles) .block-page-listing__text {
		font-size: 1rem;
	}
}
.block-page-listing__note {
	font-size: 0.8125rem;
	color: var(--wp--custom--color--text-muted);
}

/* Tiles style ("My Programs" in the Before Footer area): a full-width linen band with the section
   padding above and below; the label is the section heading (Fraunces, brass rule to the right
   edge), then one ivory tile per page with a square photo and, underneath, the same dress as the
   sidebar rows: kicker in Brass Dark caps, bold Ink name, one muted line. 4 tiles across from
   tablet up, 2 on phones. The selectors start at .is-style-tiles alone because the editor puts the
   style class on the block's outer wrapper, the front end on the block itself. */
.block-page-listing.is-style-tiles:not(.has-background > *) {
	padding: var(--wp--custom--layout--section-padding) 0;
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 100vw var(--wp--preset--color--secondary); /* the band runs to the screen edges */
	clip-path: inset(0 -100vw);
}
/* "Band color: Dark green": the same band in Primary, the heading in ivory; the tiles stay ivory */
.block-page-listing.is-style-tiles.block-page-listing--dark:not(.has-background > *) {
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 100vw var(--wp--preset--color--primary);
}
.block-page-listing--dark.is-style-tiles .block-page-listing__label {
	color: var(--wp--preset--color--background);
}
/* (Touches the band before or after it: see the shared band rule in _blocks-core.scss) */
/* Inside a full-width Group with its own background the Group carries the band and its padding */
.has-background > .is-style-tiles {
	padding: 0 0 6px;
}
.is-style-tiles .block-page-listing__label {
	display: flex;
	align-items: center;
	gap: 24px;
	/* The band's padding is measured from this line's box, and Fraunces leaves about 0.36em of
	   air above its capitals, so an equal 48px top and bottom reads as deeper at the top. The
	   negative top margin trims that air, so the space above the letters matches the space
	   under the tiles. */
	margin: -0.36em 0 24px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	color: var(--wp--preset--color--black);
}
.is-style-tiles .block-page-listing__label::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--quaternary);
}
.is-style-tiles .block-page-listing__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
/* Phones: the tiles push out past the page's 30px gutters to 14px from the screen edge so each
   one has more room for its title and blurb */
@media (max-width: 767px) {
	.is-style-tiles .block-page-listing__list {
		margin-left: calc(14px - var(--wp--custom--layout--padding));
		margin-right: calc(14px - var(--wp--custom--layout--padding));
	}
	.is-style-tiles .block-page-listing__row {
		padding: 8px 8px 16px;
	}
}
.is-style-tiles .block-page-listing__item {
	padding: 0;
	border-top: 0;
}
.is-style-tiles .block-page-listing__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	height: 100%;
	box-sizing: border-box;
	padding: 12px 12px 18px;
	border-radius: var(--wp--custom--border-radius--small);
	background: var(--wp--preset--color--background);
}
.is-style-tiles .block-page-listing__image {
	width: 100%;
}
.is-style-tiles .block-page-listing__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0;
}
.is-style-tiles .block-page-listing__body {
	text-align: center;
}
.is-style-tiles .block-page-listing__kicker {
	margin-top: 14px;
}
.is-style-tiles .block-page-listing__title {
	margin: 14px 0 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--black);
}
.is-style-tiles .block-page-listing__kicker + .block-page-listing__title {
	margin-top: 4px;
}
.is-style-tiles .block-page-listing__text {
	margin-top: 6px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--wp--custom--color--text-muted);
}
@media (min-width: 768px) {
	.is-style-tiles .block-page-listing__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
	.is-style-tiles .block-page-listing__label {
		font-size: 2.25rem;
	}
}

/* Tiles hover: the same brass frame the recipe cards use, drawn just inside the photo, and the
   programme name picks up Brass Dark, so the whole tile reads as one link rather than a picture
   that happens to be clickable. */
.is-style-tiles .block-page-listing__image {
	position: relative;
}
/* The frame itself is the shared photo frame in _blocks-core.scss ("Brass photo frame"). */
.is-style-tiles a.block-page-listing__row:is(:hover, :focus-visible) .block-page-listing__title {
	color: var(--wp--preset--color--brass-dark);
}