/* Travel hub. Mobile first. */
.hub-feature { display: grid; gap: 1.2rem; margin: 0 0 3rem; }
.hub-feature__media { display: block; overflow: hidden; border-radius: 1.25rem; background: var(--beige, #eadfcf); }
.hub-feature__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hub-feature__title { margin: .2rem 0 .5rem; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.05; }
.hub-feature__title a { color: inherit; text-decoration: none; }
.hub-feature__text .btn { margin-top: .4rem; }

.hub-tiles { margin: 0 0 2.5rem; }
.hub-tiles__h { margin: 0 0 1rem; font-size: 1.6rem; }
.hub-tiles__list { display: flex; gap: .8rem; margin: 0; padding: 0 0 .6rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hub-tiles__list::-webkit-scrollbar { display: none; }
.hub-tiles__list li { flex: none; width: 9.5rem; scroll-snap-align: start; }
.hub-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1rem; background: var(--blush, #e8d0d0); color: var(--cream, #f8f6ed); text-decoration: none; }
.hub-tile img, .hub-tile__blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hub-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 24, 17, .86), rgba(40, 24, 17, .35) 45%, transparent 70%); }
.hub-tile:hover img, .hub-tile:focus-visible img { transform: scale(1.05); }
.hub-tile:focus-visible { outline: 3px solid var(--burgundy, #5c2a29); outline-offset: 3px; }
.hub-tile__label { text-shadow: 0 1px 6px rgba(40, 24, 17, .6); position: absolute; z-index: 1; left: .8rem; right: .8rem; bottom: .7rem; display: grid; gap: .1rem; }
.hub-tile__name { font: 1.35rem/1.05 var(--serif, Georgia); }
.hub-tile__n { font: 600 .66rem var(--sans, Arial); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

.hub-filters { display: grid; gap: .2rem; margin-bottom: 1rem; }
.hub-filters__row { display: grid; gap: .2rem; }
.hub-filters__label { font: 600 .66rem var(--sans, Arial); letter-spacing: .16em; text-transform: uppercase; color: var(--burgundy, #5c2a29); }
.hub-filters .pills { padding-bottom: .7rem; }

@media (min-width: 800px) {
	.hub-feature { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 3rem; }
	.hub-feature__media img { aspect-ratio: 16 / 11; }
	.hub-tiles__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); overflow: visible; }
	.hub-tiles__list li { width: auto; }
	.hub-filters__row { grid-template-columns: 4.5rem 1fr; align-items: center; gap: .5rem; }
	.hub-filters .pills { padding-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .hub-tile img { transition: none; } }