/**
 * Trending this week: homepage, hubs and [hw_trending].
 * Self-contained, so it looks the same wherever it is placed.
 */
.hw-trend {
	--hwt-orange: #F25621;
	--hwt-orange-dark: #CA3B0C;
	--hwt-ink-darker: #121417;
	--hwt-ink: #636C7D;
	--hwt-ink-lighter: #DDDFE4;
	--hwt-ink-lightest: #F1F2F4;
	font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--hwt-ink-darker);
	padding: 64px 0;
}
.hw-trend *, .hw-trend *::before, .hw-trend *::after { box-sizing: border-box; }
.hw-trend__wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.hw-trend h2.hw-trend__title { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; margin: 0 0 8px; color: var(--hwt-ink-darker); }
.hw-trend p.hw-trend__intro { margin: 0 0 24px; color: var(--hwt-ink); font-size: 17px; }
.hw-trend ol.hw-trend__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.hw-trend__intro + ol.hw-trend__list { margin-top: 0; }
.hw-trend li.hw-trend__item { margin: 0; padding: 0; }
.hw-trend li.hw-trend__item::before, .hw-trend li.hw-trend__item::marker { content: none; }
.hw-trend a.hw-trend__card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--hwt-ink-lighter); border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.hw-trend a.hw-trend__card:hover { box-shadow: 0 6px 20px rgba(29, 29, 27, 0.10); transform: translateY(-2px); color: inherit; }
.hw-trend__img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--hwt-ink-lightest); }
.hw-trend__img img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.hw-trend__img--none { background: linear-gradient(135deg, #FEF0EC, #FBD5C6); }
.hw-trend__rank { position: absolute; top: 10px; left: 10px; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 999px; background: var(--hwt-orange); color: #fff; font: 700 15px/32px "Poppins", ui-sans-serif, system-ui, sans-serif; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.hw-trend__body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; }
.hw-trend__name { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.25; }
.hw-trend__where { font-size: 14px; color: var(--hwt-ink); }

/* On a hub: a lighter band before the closing call to action. */
.hw-trend--hub { background: var(--hwt-ink-lightest); }
.hw-trend--hub a.hw-trend__card { border-color: transparent; }

/* Inside an article: the article sets the width. */
.hw-trend--inline { padding: 24px 0; }
.hw-trend--inline .hw-trend__wrap { padding: 0; }
.hw-trend--inline h2.hw-trend__title { font-size: 26px; }
.hw-trend--inline ol.hw-trend__list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

@media (max-width: 640px) {
	.hw-trend { padding: 44px 0; }
	.hw-trend__wrap { padding: 0 16px; }
	.hw-trend ol.hw-trend__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 0 6px; }
	.hw-trend li.hw-trend__item { flex: 0 0 62%; scroll-snap-align: start; }
	.hw-trend__name { font-size: 17px; }
}