/* Top Stories — the #2 and #3 stories, directly under the hero.

   PHONES ONLY, and hidden by default rather than shown by default: the desktop
   homepage composition is approved and frozen, so the safe direction is for
   this to appear only where it has been designed, never to leak upward if a
   breakpoint is ever edited.

   THE BREAKPOINT IS 781.98, NOT 782. The section renders between the hero's
   column and the briefing's, so it is a flex child of `.wp-block-columns`.
   WordPress switches that container to `flex-wrap:nowrap` at `min-width:782px`,
   and `max-width:782px` matches at 782 as well -- so at exactly that width the
   cluster became a third column and the two real ones collapsed to 218px and
   145px. Stopping just below core's breakpoint is what keeps the handover
   clean; measured 781 stacked, 782 side by side, with no width showing three.
   Everything else on the phone still turns over at the 782 in header.css.

   VISUALLY DISTINCT FROM TRENDING NOW ON PURPOSE. Trending numbers each row in
   a filled red square and puts the thumbnail on the left. This does the
   opposite: a large outline numeral in the hairline grey, text next, thumbnail
   last. Two ranked lists on one page have to be told apart at a glance, or the
   second one reads as a repeat of the first. */

.tsp-tops { display: none; }

/* The section sits between the hero's column and the briefing's, so it is a
   flex child of a wrapping row whose real columns are `flex-basis:100%` on the
   phone. Without a basis of its own it would try to share a line with one of
   them; with it, it takes a line of its own and stacks in DOM order. Scoped to
   the direct-child case, which only ever arises from this injection. */
.wp-block-columns > .tsp-tops {
	flex-basis: 100%;
	min-width: 0;
}

@media (max-width: 781.98px) {

	/* NO HORIZONTAL PADDING OF ITS OWN. The section is a child of the columns
	   row now, and that row already carries the page gutter: its own 16px on top
	   of that started the text at 36px while the hero's edge sits at 20px, so
	   the left rule of the composition broke for one section and resumed after
	   it. The 16px also cost the headline column width it could not spare. */
	.tsp-tops {
		display: block;
		margin: 20px 0 0;
		padding: 0;
	}

	.tsp-tops__h {
		/* v1.10.422: display serif — "TOP STORIES" names a section of the
		   publication. This rule lives inside the phone media query, which is
		   why it was the last Inter editorial heading left on the site after the
		   desktop sweep came back clean: it simply does not exist above 782px. */
		font-family: var(--ts-font-display, Georgia, serif);
		font-size: 12.5px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--ts-ink, #16181F);
		margin: 0 0 10px;
	}

	.tsp-tops__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* A hairline between rows, not a card each. The cluster is two stories --
	   giving each one a bordered, shadowed surface would make a two-item list
	   look heavier than the hero above it. */
	.tsp-tops__item + .tsp-tops__item {
		border-top: 1px solid var(--ts-hairline, #E8E5DE);
	}

	/* The rank column is 28px, not 34. Two digits at 26px need about 26, and the
	   six spare pixels are worth more in the headline than as air beside a
	   marker nobody reads. */
	.tsp-tops__item {
		display: grid;
		grid-template-columns: 28px minmax(0, 1fr);
		align-items: start;
		column-gap: 10px;
		padding: 12px 0;
	}

	.tsp-tops__rank {
		font-family: var(--ts-font-display, Georgia, serif);
		font-size: 26px;
		font-weight: 700;
		line-height: 1;
		/* Light enough to read as a marker rather than as content, and it never
		   competes with the red Trending squares further down the page. */
		color: #C9CDD6;
		white-space: nowrap;
	}

	/* Thumbnail 66px, gap 10. Measured at 390 the headline column was 186px and
	   BOTH items clamped mid-word -- "expand their creativ...", "faces concerns
	   over..." -- which is the one thing a supporting cluster cannot afford,
	   since the headline is all it has. Dropping the section padding, six
	   pixels of rank and ten of thumbnail returns the column to 236px without
	   making a single card taller. The picture is still large enough to
	   identify the story and still clearly subordinate to the hero. */
	.tsp-tops__link {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 66px;
		column-gap: 10px;
		align-items: start;
		text-decoration: none;
		color: inherit;
		min-width: 0;
	}

	.tsp-tops__body { min-width: 0; }

	.tsp-tops__cat {
		display: block;
		font-family: var(--ts-font-ui, Inter, system-ui, sans-serif);
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--ts-red, #C8102E);
		margin: 0 0 3px;
	}

	/* FIVE lines, and one value for the whole phone range on purpose.

	   A clamp is a MAXIMUM, not a height: a headline that needs four lines still
	   renders four. Measured at 390 the section is 332px whether the clamp is 4
	   or 5, because the live headlines need exactly four there. So raising it
	   costs nothing where four is enough and rescues the widths where it is not.

	   That matters because four was only ever enough from about 389px up. The
	   column is 236px at 390 but 221px at 375 and 207px at 361, and the same
	   headline needs five lines across all of that. A clamp of 4 therefore cut
	   every headline between 361 and 388 -- a band that contains 375, which is
	   the iPhone SE, 6, 7, 8 and 12/13 mini. One value spanning the range is
	   both smaller and more stable than a breakpoint drawn around today's
	   headline lengths, and it leaves no cliff to fall off at 360/361.

	   At 320 an exceptionally long headline still clamps at five of six lines.
	   That is deliberate: the sixth would push the cluster past 400px on the
	   narrowest phone there is. */
	.tsp-tops__title {
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-family: var(--ts-font-display, Georgia, serif);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
		color: var(--ts-ink, #16181F);
	}

	.tsp-tops__time {
		display: block;
		margin-top: 4px;
		font-family: var(--ts-font-ui, Inter, system-ui, sans-serif);
		font-size: 11.5px;
		color: var(--ts-muted, #676E7B);
	}

	.tsp-tops__thumb {
		display: block;
		width: 66px;
		aspect-ratio: 1 / 1;
		border-radius: 6px;
		overflow: hidden;
		background: var(--ts-wash, #F6F4EF);
	}
	.tsp-tops__thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.tsp-tops__link:focus-visible {
		outline: 2px solid var(--ts-red, #C8102E);
		outline-offset: 3px;
		border-radius: 4px;
	}

	/* 320: the thumbnail yields first, because a headline that wraps to five
	   lines costs more than a slightly smaller picture. */
	@media (max-width: 360px) {
		.tsp-tops__item { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; }
		.tsp-tops__rank { font-size: 22px; }
		.tsp-tops__link { grid-template-columns: minmax(0, 1fr) 58px; column-gap: 9px; }
		.tsp-tops__thumb { width: 58px; }

		/* The clamp is 5 for the whole phone range now, so this tier only sets
		   the type size. */
		.tsp-tops__title { font-size: 15px; }
	}
}