/*
 * Popular posts with thumbnails (dnews 2.0, design spec section 8 and the
 * prototype's .pop): the lead keeps its large image and an 18px title; rows 2
 * to 5 are "rank numeral, 72 x 44 thumbnail, title". The plugin's
 * popular-posts.css styles the thumbs variant as circles; this file overrides
 * it with doubled classes. Numerals are decorative (the list is an <ol>).
 * Loaded with the Popular Posts block.
 */
.dnews-popular.dnews-popular--thumbs .dnews-popular__item {
	display: grid;
	grid-template-columns: 28px 72px minmax(0, 1fr); /* Exempt from the spacing scale: rank (28px) and thumbnail (72px) columns from the design. */
	column-gap: var(--wp--preset--spacing--space-3);
	align-items: center;
	min-height: 64px; /* Exempt from the spacing scale: row height from the design. */
	margin: 0;
	padding: var(--wp--preset--spacing--space-3) 0;
	border-block-start: 1px solid var(--wp--preset--color--line-strong);
}

/* Rank numeral: 24px / 800 in the decor role, in the first column. */
.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead)::before {
	position: static;
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--rank-decor);
	content: counter(dnews-popular);
	font-size: 24px; /* Exempt from the type scale: decorative rank numeral. */
	font-weight: 800; /* Exempt from the type scale: decorative rank numeral. */
	line-height: 1;
}

.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead):hover::before {
	background: none;
	color: var(--wp--preset--color--accent-text);
}

.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) > .dnews-popular__title,
.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) > .dnews-popular__views {
	grid-column: 3;
}

/*
 * A post with no featured image prints no thumbnail link, so its row drops the
 * 72px column and the title sits right after the rank. Needs :has(); where it
 * is unsupported the row keeps the empty column (the layout above).
 */
.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead):not(:has(.dnews-popular__thumb)) {
	grid-template-columns: 28px minmax(0, 1fr); /* Exempt from the spacing scale: rank column from the design. */
}

.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead):not(:has(.dnews-popular__thumb)) > .dnews-popular__title,
.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead):not(:has(.dnews-popular__thumb)) > .dnews-popular__views {
	grid-column: 2;
}

.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) > .dnews-popular__thumb {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 72px; /* Exempt from the spacing scale: thumbnail size from the design. */
	height: 44px; /* Exempt from the spacing scale: thumbnail size from the design. */
	border-radius: var(--wp--custom--radius--control);
}

.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) .dnews-popular__img {
	width: 72px; /* Exempt from the spacing scale: thumbnail size from the design. */
	height: 44px; /* Exempt from the spacing scale: thumbnail size from the design. */
	aspect-ratio: auto;
}

/* Lead: full-width 16:9 image, 18px title, no rank numeral. */
.dnews-popular.dnews-popular--thumbs .dnews-popular__item--lead {
	display: block;
	min-height: 0;
	padding: 0 0 var(--wp--preset--spacing--space-4);
	border-block-start: 0;
}

.dnews-popular.dnews-popular--thumbs .dnews-popular__item--lead::before,
.dnews-popular.dnews-popular--thumbs .dnews-popular__item--lead::after {
	content: none;
}

.dnews-popular--thumbs .dnews-popular__item--lead .dnews-popular__thumb {
	border-radius: var(--wp--custom--radius--image);
}

.dnews-popular--thumbs .dnews-popular__item--lead .dnews-popular__title {
	margin: var(--wp--preset--spacing--space-2) 0 var(--wp--preset--spacing--space-1);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.3;
}

.dnews-popular--thumbs .dnews-popular__item--lead .dnews-popular__views {
	margin-inline-end: 0;
}

/* Titles: 14px / 700, the whole row is the link. */
.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) .dnews-popular__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}

.dnews-popular--thumbs .dnews-popular__title a {
	color: var(--wp--preset--color--heading);
}

.dnews-popular--thumbs .dnews-popular__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dnews-popular--thumbs .dnews-popular__item:hover .dnews-popular__title a,
.dnews-popular--thumbs .dnews-popular__title a:focus-visible {
	color: var(--wp--preset--color--accent-text);
}

/*
 * Narrow sidebars (the archive split at tablet widths is about 205px): the
 * thumbnail column would leave the title almost no room, so it drops out below
 * 260px and long words may break.
 */
.dnews-popular.dnews-popular--thumbs {
	container-type: inline-size;
}

.dnews-popular--thumbs .dnews-popular__title {
	overflow-wrap: anywhere;
}

@container (max-width: 259px) {

	.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) {
		grid-template-columns: 28px minmax(0, 1fr); /* Exempt from the spacing scale: rank column from the design. */
	}

	.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) > .dnews-popular__thumb {
		display: none;
	}

	.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) > .dnews-popular__title,
	.dnews-popular.dnews-popular--thumbs .dnews-popular__item:not(.dnews-popular__item--lead) > .dnews-popular__views {
		grid-column: 2;
	}
}