/* City hero (DESIGN.md 5L): a postcard from the city stamped with its own leaf, and the Next up ticket tucked in front of it */
.wfg-ct-visual { display: grid; width: min(100%, 500px); justify-self: end; }
.wfg-ct-post { position: relative; width: 92%; justify-self: end; padding: 10px; border-radius: 6px; background: var(--wfg-paper); rotate: 2deg; box-shadow: 0 28px 48px -24px rgb(0 0 0 / .75); }
.wfg-ct-post__pic { aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; }

.wfg-ct-post__pic--seed { display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 100%, #CFE3A8, #E7F0D8 70%); }
.wfg-ct-seed { width: 40%; height: auto; overflow: visible; }
.wfg-ct-stamp { position: absolute; top: -20px; right: -16px; width: 82px; rotate: 7deg; filter: drop-shadow(0 5px 6px rgb(0 0 0 / .3)); }
.wfg-ct-stamp__paper { display: block; padding: 7px; background: var(--wfg-paper); -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 3.4px, #0000 94%, #000) -5px -5px / 10px 10px round; mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 3.4px, #0000 94%, #000) -5px -5px / 10px 10px round; }
.wfg-ct-stamp__in { display: grid; place-items: center; aspect-ratio: 5 / 6; background: color-mix(in srgb, var(--lf, var(--wfg-accent)) 26%, var(--wfg-paper)); }
.wfg-ct-stamp__leaf { width: 74%; height: auto; overflow: visible; rotate: 32deg; }
.wfg-ct-next { --stub: 118px; --notch: 10px; position: relative; z-index: 2; display: flex; width: min(94%, 420px); margin-top: -58px; rotate: -2.5deg; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .32)); color: var(--wfg-ink); text-align: left; }
.wfg-ct-next__in { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); border-radius: 14px; background: var(--wfg-paper); -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
.wfg-ct-next__main { display: grid; align-content: center; justify-items: start; gap: 4px; min-width: 0; padding: 14px 14px 16px 18px; }
.wfg-ct-next__chip { margin: 0 0 4px; padding: .2em .75em; border-radius: var(--wfg-pill); background: var(--wfg-accent); color: var(--wfg-on-accent); font: 700 .8rem/1.2 var(--wfg-font-body); }
.wfg-ct-next__title { margin: 0 0 2px; font: var(--wfg-display-weight) 1.2rem/1.2 var(--wfg-font-display); color: var(--wfg-primary); }
.wfg-ct-next__title a { color: inherit; text-decoration: none; }
.wfg-ct-next__title a:hover { text-decoration: underline; text-decoration-color: var(--wfg-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.wfg-ct-next__meta { display: flex; align-items: center; gap: .45em; margin: 0; font-size: .88rem; line-height: 1.35; color: var(--wfg-muted); }
.wfg-ct-next__meta .wfg-ico { width: 1em; height: 1em; flex: none; color: var(--wfg-eyebrow); }
.wfg-ct-next__stub { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 12px 12px 14px; text-align: center; background: color-mix(in srgb, var(--wfg-soft) 55%, var(--wfg-paper)); }
.wfg-ct-next__stub::before { content: ""; position: absolute; left: 0; top: calc(var(--notch) + 6px); bottom: calc(var(--notch) + 6px); border-left: 2px dashed color-mix(in srgb, var(--wfg-primary) 30%, transparent); }
.wfg-ct-next__stub .wfg-wo-price { font-size: 1.6rem; }
.wfg-ct-next__stub p { margin: 0; }
.wfg-ct-next__left { font-size: .8rem; font-weight: 700; color: #A6431F; }
.wfg-ct-next__stub .wfg-btn { width: 100%; margin-top: 6px; padding-inline: .7em; }
@media (width < 940px) {
	.wfg-ct-visual { justify-self: center; width: min(100%, 460px); }
}
@media (width < 640px) {
	.wfg-ct-visual { width: min(100%, 390px); }
	.wfg-ct-post { width: 90%; padding: 8px; }
	.wfg-ct-post__pic { aspect-ratio: 3 / 2; }
	.wfg-ct-stamp { width: 64px; top: -14px; right: -6px; }
	.wfg-ct-next { --stub: 108px; width: 100%; margin-top: -44px; rotate: -1.5deg; }
	.wfg-ct-next__main { padding: 12px 10px 14px 14px; }
	.wfg-ct-next__title { font-size: 1.08rem; }
	.wfg-ct-next__stub { padding: 10px 8px 12px; }
	.wfg-ct-next__stub .wfg-wo-price { font-size: 1.4rem; }
	.wfg-ct-next__stub .wfg-wo-mem { font-size: .76rem; }
}