/**
 * Continent Hub
 * Wanderlust Design System tokens, scoped to .hw-hub.
 *
 * Note on selectors: anything that colours an <a> is written as
 * `.hw-hub a.hw-hub__thing`, not `.hw-hub__thing`. The base `.hw-hub a` rule
 * is element + class, so a plain class selector loses to it and the link
 * colour wins over the component colour. That's what made button labels
 * disappear into their own background.
 */

.hw-hub {
	/* Primary */
	--hw-orange: #F25621;
	--hw-orange-dark: #CA3B0C;
	--hw-orange-light: #FF7D52;
	--hw-orange-lightest: #FEF0EC;

	/* Accents */
	--hw-blue: #2F59E7;
	--hw-blue-dark: #1D3B9A;
	--hw-blue-lightest: #E7EDFD;
	--hw-green: #18A85B;
	--hw-green-dark: #10703E;
	--hw-green-lightest: #E3FAEE;
	--hw-teal: #00B5A5;
	--hw-teal-dark: #00756B;
	--hw-teal-lightest: #DFFAF6;
	--hw-purple: #8B3DE9;
	--hw-purple-dark: #5B15B0;
	--hw-purple-lightest: #F3ECFC;
	--hw-pink: #D1157A;
	--hw-pink-lightest: #FEEBF3;
	--hw-sunset: #E5AD13;
	--hw-sunset-lightest: #FEF6DF;

	/* Ink */
	--hw-ink-darker: #121417;
	--hw-ink-dark: #31363F;
	--hw-ink: #636C7D;
	--hw-ink-light: #A9AFBB;
	--hw-ink-lighter: #DDDFE4;
	--hw-ink-lightest: #F1F2F4;
	--hw-paper: #FFFFFF;

	--hw-font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--hw-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--hw-shadow-md: 0 6px 20px rgba(29, 29, 27, 0.10);
	--hw-shadow-lg: 0 16px 40px rgba(29, 29, 27, 0.14);

	font-family: var(--hw-font-body);
	color: var(--hw-ink-darker);
	background: var(--hw-paper);
	overflow-x: hidden;

	/* Breaks out of whatever the theme wraps the template in. Most themes put
	   page content inside a constrained container, which would squeeze these
	   full-width bands into an article column. This pins the page to the
	   viewport regardless of the parent's width, and does nothing when the
	   parent is already full width. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	padding: 0;
}

.hw-hub *,
.hw-hub *::before,
.hw-hub *::after { box-sizing: border-box; }

.hw-hub__wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.hw-hub section { padding: 88px 0; }
.hw-hub h1, .hw-hub h2, .hw-hub h3, .hw-hub h4 { font-family: var(--hw-font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.hw-hub p { margin: 0 0 18px; text-wrap: pretty; }

/* Links inherit their component's colour; only prose links are orange. */
.hw-hub a { color: inherit; text-decoration: none; }
.hw-hub p > a,
.hw-hub .hw-hub__faq-answer a { color: var(--hw-orange); text-decoration: underline; }
.hw-hub p > a:hover,
.hw-hub .hw-hub__faq-answer a:hover { color: var(--hw-orange-dark); }

.hw-hub__icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.hw-hub__eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-orange); margin-bottom: 14px; }
.hw-hub__lede { font-size: 17px; line-height: 1.6; color: var(--hw-ink); max-width: 620px; margin: 0 0 40px; }

/* ---------- Buttons ---------- */
.hw-hub a.hw-hub__btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; padding: 14px 26px; border-radius: 999px; background: var(--hw-orange); color: #fff; text-decoration: none; }
.hw-hub a.hw-hub__btn:hover { background: var(--hw-orange-dark); color: #fff; }
.hw-hub a.hw-hub__btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; padding: 13px 26px; }
.hw-hub a.hw-hub__btn--ghost:hover { background: #fff; color: var(--hw-ink-darker); }
.hw-hub a.hw-hub__btn--light { background: #fff; color: var(--hw-orange-dark); }
.hw-hub a.hw-hub__btn--light:hover { background: var(--hw-orange-lightest); color: var(--hw-orange-dark); }
.hw-hub a.hw-hub__textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--hw-orange); }
.hw-hub a.hw-hub__textlink:hover { color: var(--hw-orange-dark); }

/* ---------- Hero ---------- */
.hw-hub__hero { position: relative; isolation: isolate; background: var(--hw-ink-darker); padding: 0; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.hw-hub__hero--plain { background: linear-gradient(140deg, var(--hw-teal-dark), var(--hw-ink-darker) 70%); }
.hw-hub__hero-bg { position: absolute; inset: 0; z-index: -2; }
.hw-hub__hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-hub__hero-bg .hw-hub__illustration { object-fit: contain; object-position: right center; padding: 6% 4%; }

/* The image should read as a photograph, not as a dark panel. The scrim is
   the least that keeps white text legible: a soft pool at the bottom-left
   where the copy sits, and nothing much anywhere else. Text-shadow does the
   rest, so the picture stays bright. */
.hw-hub__hero-veil { position: absolute; inset: 0; z-index: -1; }

.hw-hub__hero--veil-light .hw-hub__hero-veil { background:
	linear-gradient(to top, rgba(18, 20, 23, 0.62) 0%, rgba(18, 20, 23, 0.28) 38%, rgba(18, 20, 23, 0) 70%),
	linear-gradient(to right, rgba(18, 20, 23, 0.42) 0%, rgba(18, 20, 23, 0.12) 45%, rgba(18, 20, 23, 0) 72%); }

.hw-hub__hero--veil-medium .hw-hub__hero-veil { background:
	linear-gradient(to top, rgba(18, 20, 23, 0.78) 0%, rgba(18, 20, 23, 0.42) 42%, rgba(18, 20, 23, 0.05) 75%),
	linear-gradient(to right, rgba(18, 20, 23, 0.6) 0%, rgba(18, 20, 23, 0.28) 48%, rgba(18, 20, 23, 0) 80%); }

.hw-hub__hero--veil-strong .hw-hub__hero-veil { background:
	linear-gradient(to top, rgba(18, 20, 23, 0.88) 0%, rgba(18, 20, 23, 0.6) 45%, rgba(18, 20, 23, 0.2) 80%),
	linear-gradient(to right, rgba(18, 20, 23, 0.8) 0%, rgba(18, 20, 23, 0.45) 50%, rgba(18, 20, 23, 0.1) 85%); }

.hw-hub__hero h1,
.hw-hub__hero-intro,
.hw-hub__crumbs { text-shadow: 0 1px 12px rgba(18, 20, 23, 0.55); }

.hw-hub__hero-inner { position: relative; padding-top: 96px; padding-bottom: 40px; width: 100%; }
.hw-hub__hero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; margin-bottom: 20px; max-width: 16ch; }
.hw-hub__hero-intro { font-size: 19px; line-height: 1.55; color: var(--hw-ink-lighter); max-width: 52ch; margin-bottom: 28px; }
.hw-hub__crumbs { font-size: 13px; font-weight: 600; color: var(--hw-ink-light); margin-bottom: 20px; }
.hw-hub .hw-hub__crumbs a { color: var(--hw-ink-light); }
.hw-hub .hw-hub__crumbs a:hover { color: #fff; }
.hw-hub__crumbs span[aria-current] { color: #fff; }
.hw-hub__hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }

/* Stat chips, sitting on the image itself. */
.hw-hub__hero-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.hw-hub__hero-stat { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); border-radius: 14px; padding: 16px 22px; min-width: 132px; }
.hw-hub__hero-stat-value { font-family: var(--hw-font-display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.hw-hub__hero-stat-label { font-size: 13px; line-height: 1.35; color: var(--hw-ink-lighter); margin-top: 6px; max-width: 18ch; }
.hw-hub__hero-stats > .hw-hub__hero-stat:nth-child(4n+1) .hw-hub__hero-stat-value { color: var(--hw-orange-light); }
.hw-hub__hero-stats > .hw-hub__hero-stat:nth-child(4n+2) .hw-hub__hero-stat-value { color: var(--hw-teal); }
.hw-hub__hero-stats > .hw-hub__hero-stat:nth-child(4n+3) .hw-hub__hero-stat-value { color: var(--hw-sunset); }
.hw-hub__hero-stats > .hw-hub__hero-stat:nth-child(4n+4) .hw-hub__hero-stat-value { color: #F978B6; }

/* ---------- Jump nav ---------- */
.hw-hub__jump { position: sticky; top: 0; z-index: 400; background: #fff; border-bottom: 1px solid var(--hw-ink-lighter); padding: 0; }
.hw-hub__jump-inner { display: flex; align-items: center; gap: 6px; }
.hw-hub__jump-scroll { display: flex; gap: 4px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; flex: 1 1 auto; }
.hw-hub__jump-scroll::-webkit-scrollbar { display: none; }
.hw-hub__jump-btn { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--hw-ink-lighter); background: #fff; color: var(--hw-ink-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hw-hub__jump-btn:hover:not(:disabled) { border-color: var(--hw-orange); color: var(--hw-orange-dark); }
.hw-hub__jump-btn:disabled { opacity: 0.3; cursor: default; }
.hw-hub__jump-btn[hidden] { display: none; }
.hw-hub .hw-hub__jump a { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--hw-ink); padding: 16px 12px; border-bottom: 2px solid transparent; }
.hw-hub .hw-hub__jump a:hover { color: var(--hw-ink-darker); border-bottom-color: var(--hw-orange); }

/* ---------- Intro ---------- */
.hw-hub__intro { background: var(--hw-paper); }

.hw-hub__intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.hw-hub__intro-grid h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 24px; max-width: 16ch; }
.hw-hub__intro-grid p { font-size: 17px; line-height: 1.6; color: var(--hw-ink-dark); }
.hw-hub__cards { display: grid; gap: 16px; }
.hw-hub__card { display: flex; gap: 18px; border: 1px solid var(--hw-ink-lighter); border-radius: 12px; padding: 24px; border-left-width: 4px; }
.hw-hub__card:hover { box-shadow: var(--hw-shadow-md); }
.hw-hub__card-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.hw-hub__card h3 { font-size: 19px; margin-bottom: 6px; }
.hw-hub__card p { font-size: 15px; line-height: 1.5; color: var(--hw-ink); margin: 0; }

/* Accent cycle: Blue, Green, Orange, Purple, Pink. */
.hw-hub__cards .hw-hub__card:nth-child(5n+1) { border-left-color: var(--hw-blue); }
.hw-hub__cards .hw-hub__card:nth-child(5n+1) .hw-hub__card-icon { background: var(--hw-blue-lightest); color: var(--hw-blue-dark); }
.hw-hub__cards .hw-hub__card:nth-child(5n+2) { border-left-color: var(--hw-green); }
.hw-hub__cards .hw-hub__card:nth-child(5n+2) .hw-hub__card-icon { background: var(--hw-green-lightest); color: var(--hw-green-dark); }
.hw-hub__cards .hw-hub__card:nth-child(5n+3) { border-left-color: var(--hw-orange); }
.hw-hub__cards .hw-hub__card:nth-child(5n+3) .hw-hub__card-icon { background: var(--hw-orange-lightest); color: var(--hw-orange-dark); }
.hw-hub__cards .hw-hub__card:nth-child(5n+4) { border-left-color: var(--hw-purple); }
.hw-hub__cards .hw-hub__card:nth-child(5n+4) .hw-hub__card-icon { background: var(--hw-purple-lightest); color: var(--hw-purple-dark); }
.hw-hub__cards .hw-hub__card:nth-child(5n+5) { border-left-color: var(--hw-pink); }
.hw-hub__cards .hw-hub__card:nth-child(5n+5) .hw-hub__card-icon { background: var(--hw-pink-lightest); color: var(--hw-pink); }

/* ---------- Countries ---------- */
/* The featured countries sit on black so they read as the main entry point,
   with the full A-Z grid below them on light. */
.hw-hub section.hw-hub__countries { background: var(--hw-ink-lightest); padding-top: 0; }
.hw-hub__countries-top { background: var(--hw-ink-darker); padding: 88px 0 72px; margin-bottom: 72px; }
.hw-hub__countries-top h2 { color: #fff; }
.hw-hub__countries-top .hw-hub__eyebrow { color: var(--hw-orange-light); }
.hw-hub__countries-top .hw-hub__lede { color: var(--hw-ink-lighter); }
.hw-hub__countries-top .hw-hub__featured { margin-bottom: 0; }
.hw-hub__countries h2,
.hw-hub__when h2,
.hw-hub__costs h2,
.hw-hub__rail h2,
.hw-hub__events h2,
.hw-hub__reads h2,
.hw-hub__faqs h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
.hw-hub__featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 48px; }
.hw-hub__featured > * { display: block; background: #fff; border: 1px solid var(--hw-ink-lighter); border-radius: 16px; overflow: hidden; }
.hw-hub a.hw-hub__featured-card { color: var(--hw-ink-darker); }
.hw-hub a.hw-hub__featured-card:hover { box-shadow: var(--hw-shadow-lg); }
.hw-hub__thumb { position: relative; height: 180px; background: linear-gradient(140deg, var(--hw-teal-lightest), var(--hw-orange-lightest)); }
.hw-hub__featured > *:nth-child(3n+2) .hw-hub__thumb { background: linear-gradient(140deg, var(--hw-purple-lightest), var(--hw-blue-lightest)); }
.hw-hub__featured > *:nth-child(3n+3) .hw-hub__thumb { background: linear-gradient(140deg, var(--hw-sunset-lightest), var(--hw-pink-lightest)); }
.hw-hub__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-hub__featured-body { padding: 22px 24px 24px; }
.hw-hub__featured-body h3 { font-size: 26px; color: var(--hw-ink-darker); margin-bottom: 6px; }
.hw-hub__featured-body p { font-size: 14px; line-height: 1.45; color: var(--hw-ink); margin-bottom: 12px; }
.hw-hub__count { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-orange-dark); }
.hw-hub__region { margin-bottom: 36px; }
.hw-hub__region-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--hw-ink-lighter); }
.hw-hub__region-head h3 { font-size: 20px; display: flex; align-items: baseline; gap: 10px; }
.hw-hub__region-head h3::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--hw-blue); flex: 0 0 10px; }
.hw-hub__region:nth-child(5n+3) .hw-hub__region-head h3::before { background: var(--hw-green); }
.hw-hub__region:nth-child(5n+4) .hw-hub__region-head h3::before { background: var(--hw-orange); }
.hw-hub__region:nth-child(5n+5) .hw-hub__region-head h3::before { background: var(--hw-purple); }
.hw-hub__region:nth-child(5n+6) .hw-hub__region-head h3::before { background: var(--hw-pink); }
.hw-hub__region-head span { font-size: 13px; color: var(--hw-ink); }
.hw-hub__region-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hw-hub__country { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--hw-ink-lighter); border-radius: 12px; padding: 16px 18px; }
.hw-hub a.hw-hub__country { color: var(--hw-ink-darker); }
.hw-hub a.hw-hub__country:hover { border-color: var(--hw-orange); box-shadow: 0 2px 6px rgba(29, 29, 27, 0.08); }
.hw-hub__country-name { display: block; font-size: 15px; font-weight: 600; }
.hw-hub__country-count { display: block; font-size: 13px; color: var(--hw-ink); margin-top: 2px; }
div.hw-hub__country { opacity: 0.62; } /* nowhere to link at all — rare */
.hw-hub__country .hw-hub__icon { color: var(--hw-ink-light); }

/* ---------- Hostels carousel ---------- */
.hw-hub__hostels { background: var(--hw-paper); }
.hw-hub__hostels-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.hw-hub__hostels-head h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
.hw-hub__hostels-head p { font-size: 17px; line-height: 1.6; color: var(--hw-ink); max-width: 60ch; margin: 0; }
.hw-hub__carousel-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.hw-hub__carousel-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hw-ink-lighter); background: #fff; color: var(--hw-ink-darker); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hw-hub__carousel-btn:hover:not(:disabled) { border-color: var(--hw-orange); color: var(--hw-orange-dark); background: var(--hw-orange-lightest); }
.hw-hub__carousel-btn:disabled { opacity: 0.35; cursor: default; }

.hw-hub__carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.hw-hub__carousel::-webkit-scrollbar { display: none; }
.hw-hub__carousel > * { flex: 0 0 272px; scroll-snap-align: start; background: #fff; border: 1px solid var(--hw-ink-lighter); border-radius: 16px; overflow: hidden; }
.hw-hub a.hw-hub__hostel { color: var(--hw-ink-darker); }
.hw-hub a.hw-hub__hostel:hover { box-shadow: var(--hw-shadow-lg); }
.hw-hub__hostel-photo { position: relative; height: 180px; background: linear-gradient(140deg, var(--hw-teal-lightest), var(--hw-orange-lightest)); }
.hw-hub__hostel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-hub__hostel-rating { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; background: rgba(18, 20, 23, 0.82); backdrop-filter: blur(6px); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.hw-hub__hostel-rating .hw-hub__icon { color: var(--hw-sunset); }
.hw-hub__hostel-rating strong { font-weight: 700; }
.hw-hub__hostel-rating span { color: var(--hw-ink-light); font-size: 12px; }
.hw-hub__hostel-price { font-size: 14px; color: var(--hw-ink); margin-bottom: 12px; }
.hw-hub__hostel-price strong { color: var(--hw-ink-darker); font-weight: 700; }
.hw-hub__hostel-body { padding: 18px 20px 22px; }
.hw-hub__hostel-body h3 { font-size: 18px; line-height: 1.25; margin-bottom: 8px; }
.hw-hub__hostel-place { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--hw-ink); margin-bottom: 10px; }
.hw-hub__hostel-body p { font-size: 14px; line-height: 1.5; color: var(--hw-ink); margin-bottom: 12px; }
.hw-hub__hostel-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--hw-orange-dark); }
.hw-hub__hostels-cta { margin-top: 28px; }

/* ---------- Seasons ---------- */
.hw-hub__seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.hw-hub__season { border: 1px solid var(--hw-ink-lighter); border-radius: 16px; overflow: hidden; }
.hw-hub__season-head { padding: 20px 22px; border-bottom: 1px solid var(--hw-ink-lighter); }
.hw-hub__season:nth-child(4n+1) .hw-hub__season-head { background: var(--hw-green-lightest); }
.hw-hub__season:nth-child(4n+2) .hw-hub__season-head { background: var(--hw-sunset-lightest); }
.hw-hub__season:nth-child(4n+3) .hw-hub__season-head { background: var(--hw-orange-lightest); }
.hw-hub__season:nth-child(4n+4) .hw-hub__season-head { background: var(--hw-blue-lightest); }
.hw-hub__season-name { font-family: var(--hw-font-display); font-weight: 700; font-size: 22px; }
.hw-hub__season-months { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-ink); margin-top: 6px; }
.hw-hub__tag { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #fff; }
.hw-hub__tag--green { color: var(--hw-green-dark); }
.hw-hub__tag--amber { color: #8A6100; }
.hw-hub__tag--blue { color: var(--hw-blue-dark); }
.hw-hub__season-body { padding: 20px 22px; }
.hw-hub__season-body p { font-size: 15px; line-height: 1.5; color: var(--hw-ink-dark); margin-bottom: 14px; }
.hw-hub__season-body ul { list-style: none; margin: 0; padding: 0; }
.hw-hub__season-body li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--hw-ink); margin-bottom: 8px; }
.hw-hub__season-body li::before { content: "·"; font-weight: 700; }
.hw-hub__season:nth-child(4n+1) .hw-hub__season-body li::before { color: var(--hw-green); }
.hw-hub__season:nth-child(4n+2) .hw-hub__season-body li::before { color: var(--hw-sunset); }
.hw-hub__season:nth-child(4n+3) .hw-hub__season-body li::before { color: var(--hw-orange); }
.hw-hub__season:nth-child(4n+4) .hw-hub__season-body li::before { color: var(--hw-blue); }

/* ---------- Costs ---------- */
.hw-hub__costs { background: var(--hw-teal-lightest); }
.hw-hub__costs .hw-hub__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
.hw-hub__costs .hw-hub__eyebrow { color: var(--hw-teal-dark); }
.hw-hub__costs p { font-size: 17px; line-height: 1.6; color: var(--hw-ink-dark); }
.hw-hub__money { display: grid; gap: 10px; margin-top: 28px; }
.hw-hub .hw-hub__money a { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-radius: 12px; padding: 16px 18px; font-size: 15px; font-weight: 600; color: var(--hw-ink-darker); text-decoration: none; }
.hw-hub .hw-hub__money a:hover { color: var(--hw-teal-dark); box-shadow: 0 2px 6px rgba(29, 29, 27, 0.08); }
.hw-hub__table { background: #fff; border-radius: 16px; padding: 8px 28px 20px; }
.hw-hub__row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hw-ink-lightest); align-items: baseline; }
.hw-hub__row--head { border-bottom: 1px solid var(--hw-ink-lighter); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-ink); }
.hw-hub__row-region { font-size: 15px; font-weight: 600; }
.hw-hub__row-examples { font-size: 13px; color: var(--hw-ink); margin-top: 2px; }
.hw-hub__row-dorm { font-size: 16px; font-weight: 700; }
.hw-hub__row-daily { font-size: 16px; font-weight: 700; color: var(--hw-teal-dark); }
.hw-hub__note { font-size: 13px; line-height: 1.45; color: var(--hw-ink); margin: 18px 0 0; }

/* ---------- Getting around ---------- */
.hw-hub__rail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-bottom: 48px; }
.hw-hub__rail-grid p { font-size: 17px; line-height: 1.6; color: var(--hw-ink-dark); }
.hw-hub__rail-media { position: relative; min-height: 340px; border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, var(--hw-blue-lightest), var(--hw-purple-lightest)); }
.hw-hub__rail-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-hub__routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.hw-hub__route { border: 1px solid var(--hw-ink-lighter); border-top: 4px solid var(--hw-blue); border-radius: 16px; padding: 26px; }
.hw-hub__routes > .hw-hub__route:nth-child(3n+2) { border-top-color: var(--hw-green); }
.hw-hub__routes > .hw-hub__route:nth-child(3n+3) { border-top-color: var(--hw-purple); }
.hw-hub__route-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-ink); }
.hw-hub__route h3 { font-size: 21px; margin-bottom: 10px; }
.hw-hub__route p { font-size: 15px; line-height: 1.5; color: var(--hw-ink); margin-bottom: 14px; }
.hw-hub__route-stops { font-size: 14px; font-weight: 600; color: var(--hw-ink-dark); }

/* ---------- What's on ---------- */
.hw-hub__events { background: var(--hw-ink-darker); }
.hw-hub__events .hw-hub__eyebrow { color: var(--hw-orange-light); }
.hw-hub__events h2 { color: #fff; }
.hw-hub__events-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.hw-hub__events-head p { font-size: 17px; line-height: 1.6; color: var(--hw-ink-light); max-width: 60ch; margin: 0; }
.hw-hub__events-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hw-hub__events .hw-hub__carousel-btn { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.hw-hub__events .hw-hub__carousel-btn:hover:not(:disabled) { background: #fff; color: var(--hw-ink-darker); border-color: #fff; }
.hw-hub__events .hw-hub__carousel > .hw-hub__event-card { background: var(--hw-ink-dark); }
.hw-hub__events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hw-hub__event { background: var(--hw-ink-dark); border-radius: 12px; padding: 24px; }
.hw-hub__event-month { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-orange-light); margin-bottom: 12px; }
.hw-hub__events-grid > .hw-hub__event:nth-child(4n+2) .hw-hub__event-month { color: var(--hw-teal); }
.hw-hub__events-grid > .hw-hub__event:nth-child(4n+3) .hw-hub__event-month { color: var(--hw-sunset); }
.hw-hub__events-grid > .hw-hub__event:nth-child(4n+4) .hw-hub__event-month { color: #F978B6; }
.hw-hub__event h3 { font-size: 19px; color: #fff; margin-bottom: 4px; }
.hw-hub__event-place { font-size: 13px; font-weight: 600; color: var(--hw-ink-light); margin-bottom: 12px; }
.hw-hub__event p { font-size: 14px; line-height: 1.45; color: var(--hw-ink-lighter); margin: 0; }
.hw-hub__pills { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hw-hub .hw-hub__pills a { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 999px; text-decoration: none; }
.hw-hub .hw-hub__pills a:hover { background: #fff; color: var(--hw-ink-darker); }

/* ---------- Article rows ---------- */
.hw-hub__reads { padding-bottom: 32px; }
.hw-hub__row-block { padding: 0 0 56px; }
.hw-hub__row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--hw-ink-lighter); }
.hw-hub__row-head h3 { font-size: 24px; margin-bottom: 6px; }
.hw-hub__row-head p { font-size: 15px; line-height: 1.5; color: var(--hw-ink); margin: 0; max-width: 70ch; }
.hw-hub a.hw-hub__seeall { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 1px solid var(--hw-ink-lighter); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--hw-ink-darker); white-space: nowrap; text-decoration: none; }
.hw-hub a.hw-hub__seeall:hover { border-color: var(--hw-orange); color: var(--hw-orange-dark); background: var(--hw-orange-lightest); }
.hw-hub__articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.hw-hub a.hw-hub__article { display: block; background: #fff; border: 1px solid var(--hw-ink-lighter); border-radius: 12px; overflow: hidden; color: var(--hw-ink-darker); }
.hw-hub a.hw-hub__article:hover { box-shadow: var(--hw-shadow-md); }
.hw-hub__article .hw-hub__thumb { height: 170px; }
.hw-hub__article-body { padding: 20px; }
.hw-hub__article-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.hw-hub__article-tag { color: var(--hw-orange-dark); }
.hw-hub__article-tag--muted { color: var(--hw-ink-light); }
.hw-hub__row-block:nth-of-type(3n+2) .hw-hub__article-tag { color: var(--hw-blue-dark); }
.hw-hub__row-block:nth-of-type(3n+3) .hw-hub__article-tag { color: var(--hw-teal-dark); }
.hw-hub__row-block:nth-of-type(3n+2) .hw-hub__article-tag--muted,
.hw-hub__row-block:nth-of-type(3n+3) .hw-hub__article-tag--muted { color: var(--hw-ink-light); }
.hw-hub__article h4 { font-size: 17px; line-height: 1.3; color: var(--hw-ink-darker); margin-bottom: 10px; }
.hw-hub__article-meta { font-size: 13px; color: var(--hw-ink); }

/* Empty article row. */
.hw-hub__empty { font-size: 15px; color: var(--hw-ink); background: var(--hw-ink-lightest); border-radius: 12px; padding: 32px 28px; margin: 0 0 12px; text-align: center; }

/* Editor-only note on an empty article row. */
.hw-hub__notice { font-size: 14px; line-height: 1.5; color: var(--hw-ink-dark); background: var(--hw-sunset-lightest); border-left: 4px solid var(--hw-sunset); border-radius: 8px; padding: 14px 18px; margin: 0; }

/* Illustrations only go where no image can be set, so nothing here is a
   placeholder waiting to be replaced: empty states, the all-articles band,
   the FAQ heading and the CTA panel. */
.hw-hub__all-art { flex: 0 0 auto; }
.hw-hub__all-art .hw-hub__illustration { width: 96px; height: 96px; }
.hw-hub__faq-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.hw-hub__faq-art { flex: 0 0 auto; }
.hw-hub__faq-art .hw-hub__illustration { width: 104px; height: 104px; }

.hw-hub__illustration { display: block; }
.hw-hub__art-panel { display: flex; align-items: center; justify-content: center; padding: 32px; }
.hw-hub__art-panel .hw-hub__illustration { width: 100%; max-width: 280px; height: auto; }
.hw-hub__empty .hw-hub__illustration { width: 72px; height: 72px; margin: 0 auto 12px; }
.hw-hub__cta-art { display: flex; align-items: center; justify-content: center; }
.hw-hub__cta-art .hw-hub__illustration { width: 100%; max-width: 240px; height: auto; }

/* ---------- All articles ---------- */
.hw-hub__all { padding: 16px 0 56px; }
.hw-hub__all-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; border: 1px solid var(--hw-ink-lighter); border-left: 4px solid var(--hw-purple); border-radius: 24px; padding: 40px; }
.hw-hub__all-inner h3 { font-size: 28px; margin-bottom: 8px; }
.hw-hub__all-inner p { font-size: 16px; line-height: 1.55; color: var(--hw-ink); margin: 0; max-width: 60ch; }
.hw-hub__all-inner > div:nth-child(2) { flex: 1 1 auto; }

/* ---------- Types of trip ---------- */
.hw-hub__trips { padding: 72px 0 80px; background: var(--hw-purple-lightest); }
.hw-hub__trips-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid rgba(91, 21, 176, 0.18); }
.hw-hub__trips-head h3 { font-size: 24px; }
.hw-hub__trips-head span { font-size: 14px; color: var(--hw-ink); }
.hw-hub__trips-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.hw-hub a.hw-hub__trip { display: block; text-align: center; background: #fff; border: 1px solid transparent; border-radius: 16px; padding: 26px 16px; color: var(--hw-ink-darker); }
.hw-hub__trip-icon { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 999px; background: var(--hw-ink-lightest); display: flex; align-items: center; justify-content: center; }
.hw-hub__trip-label { font-family: var(--hw-font-display); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.hw-hub__trip-count { font-size: 13px; color: var(--hw-ink); }

.hw-hub__trips-grid > a:nth-child(6n+1) .hw-hub__trip-icon { background: var(--hw-blue-lightest); color: var(--hw-blue-dark); }
.hw-hub a.hw-hub__trip:nth-child(6n+1):hover { background: var(--hw-blue-lightest); border-color: var(--hw-blue); }
.hw-hub__trips-grid > a:nth-child(6n+2) .hw-hub__trip-icon { background: var(--hw-green-lightest); color: var(--hw-green-dark); }
.hw-hub a.hw-hub__trip:nth-child(6n+2):hover { background: var(--hw-green-lightest); border-color: var(--hw-green); }
.hw-hub__trips-grid > a:nth-child(6n+3) .hw-hub__trip-icon { background: var(--hw-orange-lightest); color: var(--hw-orange-dark); }
.hw-hub a.hw-hub__trip:nth-child(6n+3):hover { background: var(--hw-orange-lightest); border-color: var(--hw-orange); }
.hw-hub__trips-grid > a:nth-child(6n+4) .hw-hub__trip-icon { background: var(--hw-purple-lightest); color: var(--hw-purple-dark); }
.hw-hub a.hw-hub__trip:nth-child(6n+4):hover { background: var(--hw-purple-lightest); border-color: var(--hw-purple); }
.hw-hub__trips-grid > a:nth-child(6n+5) .hw-hub__trip-icon { background: var(--hw-pink-lightest); color: var(--hw-pink); }
.hw-hub a.hw-hub__trip:nth-child(6n+5):hover { background: var(--hw-pink-lightest); border-color: var(--hw-pink); }
.hw-hub__trips-grid > a:nth-child(6n+6) .hw-hub__trip-icon { background: var(--hw-teal-lightest); color: var(--hw-teal-dark); }
.hw-hub a.hw-hub__trip:nth-child(6n+6):hover { background: var(--hw-teal-lightest); border-color: var(--hw-teal); }

/* ---------- FAQs ---------- */
.hw-hub__faqs { background: var(--hw-ink-lightest); }
.hw-hub__faqs .hw-hub__wrap { max-width: 860px; }
.hw-hub__faq-list { display: grid; gap: 12px; }
.hw-hub__faq { background: #fff; border-radius: 12px; overflow: hidden; }
.hw-hub__faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; cursor: pointer; list-style: none; }
.hw-hub__faq summary::-webkit-details-marker { display: none; }
.hw-hub__faq summary span:first-child { font-family: var(--hw-font-display); font-weight: 700; font-size: 17px; }
.hw-hub__faq-plus { flex: 0 0 auto; font-size: 24px; line-height: 1; color: var(--hw-orange); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.hw-hub__faq[open] .hw-hub__faq-plus { transform: rotate(45deg); }
.hw-hub__faq[open] summary { background: var(--hw-orange-lightest); }
.hw-hub__faq-answer { padding: 20px 24px 24px; font-size: 16px; line-height: 1.6; color: var(--hw-ink-dark); }

/* ---------- Closing CTA ---------- */
.hw-hub__cta { background: var(--hw-ink-lightest); padding: 0 0 88px; }
.hw-hub__cta-inner { background: var(--hw-orange); border-radius: 24px; padding: 56px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hw-hub__cta-inner h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; color: #fff; margin-bottom: 14px; }
.hw-hub__cta-inner p { font-size: 17px; line-height: 1.6; color: #fff; max-width: 48ch; margin-bottom: 28px; }
.hw-hub__cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hw-hub__newsletter { background: #fff; border-radius: 16px; padding: 28px; }
.hw-hub__newsletter-title { font-family: var(--hw-font-display); font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.hw-hub__newsletter p { font-size: 15px; line-height: 1.5; color: var(--hw-ink); margin-bottom: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.hw-hub__intro-grid,
	.hw-hub__rail-grid,
	.hw-hub__cta-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hw-hub__costs .hw-hub__wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hw-hub__rail-media { min-height: 260px; }
	.hw-hub__hero { min-height: 560px; }
	.hw-hub__hero-veil { background:
		linear-gradient(to top, rgba(18, 20, 23, 0.8) 0%, rgba(18, 20, 23, 0.45) 50%, rgba(18, 20, 23, 0.12) 100%) !important; }
	.hw-hub__stats .hw-hub__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hw-hub__region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hw-hub__trips-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.hw-hub__wrap { padding: 0 20px; }
	.hw-hub section { padding: 56px 0; }
	.hw-hub__hero { min-height: 520px; }
	.hw-hub__hero-inner { padding-top: 64px; padding-bottom: 32px; }
	.hw-hub__hero-actions { margin-bottom: 28px; }
	.hw-hub__hero-stat { padding: 12px 16px; min-width: 0; flex: 1 1 128px; }
	.hw-hub__hero-stat-value { font-size: 26px; }
	.hw-hub__region-grid,
	.hw-hub__trips-grid { grid-template-columns: minmax(0, 1fr); }
	.hw-hub__carousel > * { flex-basis: 78%; }
	.hw-hub__carousel-nav { display: none; }
	.hw-hub__cta-inner,
	.hw-hub__all-inner,
	.hw-hub__table { padding: 28px; }
	.hw-hub__faq-art,
	.hw-hub__all-art { display: none; }
	.hw-hub__row { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 0.6fr)); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.hw-hub * { transition: none !important; }
}

/* =========================================================================
   Country hub
   ========================================================================= */

.hw-hub__hero-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-orange-light); margin-bottom: 14px; }

/* ---------- Overview and facts ---------- */
.hw-hub__overview-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.hw-hub__overview-grid h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 24px; max-width: 18ch; }
.hw-hub__overview-grid p { font-size: 17px; line-height: 1.65; color: var(--hw-ink-dark); }
.hw-hub__facts { background: var(--hw-ink-lightest); border-radius: 16px; padding: 28px 30px; position: sticky; top: 76px; }
.hw-hub__facts h3 { font-size: 18px; margin-bottom: 16px; }
.hw-hub__facts dl { margin: 0; }
.hw-hub__fact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--hw-ink-lighter); }
.hw-hub__fact:first-child { border-top: 0; padding-top: 0; }
.hw-hub__fact dt { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hw-ink); }
.hw-hub__fact dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--hw-ink-darker); }

/* ---------- Cities ---------- */
.hw-hub__cities { background: var(--hw-ink-lightest); }
.hw-hub__cities h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
.hw-hub__city-list { display: grid; gap: 20px; }
.hw-hub__city-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); background: #fff; border: 1px solid var(--hw-ink-lighter); border-radius: 20px; overflow: hidden; }
.hw-hub__city-row:hover { box-shadow: var(--hw-shadow-md); }
.hw-hub__city-photo { position: relative; min-height: 280px; background: linear-gradient(140deg, var(--hw-teal-lightest), var(--hw-orange-lightest)); }
.hw-hub__city-list > .hw-hub__city-row:nth-child(3n+2) .hw-hub__city-photo { background: linear-gradient(140deg, var(--hw-purple-lightest), var(--hw-blue-lightest)); }
.hw-hub__city-list > .hw-hub__city-row:nth-child(3n+3) .hw-hub__city-photo { background: linear-gradient(140deg, var(--hw-sunset-lightest), var(--hw-pink-lightest)); }
.hw-hub__city-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-hub__city-content { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.hw-hub__city-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.hw-hub__city-content h3 { font-size: 28px; margin-bottom: 8px; }
.hw-hub__city-blurb { font-size: 16px; line-height: 1.55; color: var(--hw-ink-dark); margin-bottom: 14px; max-width: 54ch; }
.hw-hub__city-stats { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hw-teal-dark); margin-bottom: 12px; }
.hw-hub__city-quote { position: relative; margin: 0; padding: 14px 16px 12px 34px; background: var(--hw-ink-lightest); border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--hw-ink-dark); max-width: 60ch; }
.hw-hub__city-quote::before { content: "\201C"; position: absolute; left: 12px; top: 10px; font-family: var(--hw-font-display); font-size: 34px; line-height: 1; color: var(--hw-orange); opacity: 0.55; }
.hw-hub__city-quote p { margin: 0; font-style: italic; }
.hw-hub__city-quote p::before { content: "\201C"; }
.hw-hub__city-quote p::after { content: "\201D"; }
.hw-hub__city-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hw-ink-light); }
.hw-hub a.hw-hub__city-btn { flex: 0 0 auto; white-space: nowrap; }

/* Itineraries: however many that city has, from one to five. */
.hw-hub__itineraries { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 20px; border-top: 1px solid var(--hw-ink-lighter); }
.hw-hub__itineraries-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-ink); margin-right: 4px; }
.hw-hub a.hw-hub__itinerary { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hw-ink-lighter); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--hw-ink-darker); background: #fff; }
.hw-hub a.hw-hub__itinerary:hover { border-color: var(--hw-orange); background: var(--hw-orange-lightest); color: var(--hw-orange-dark); }
.hw-hub a.hw-hub__itinerary .hw-hub__icon { color: var(--hw-orange); }

/* ---------- Trip types ---------- */
.hw-hub__triptypes h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
.hw-hub__trip-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.hw-hub__trip-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hw-ink-lighter); background: #fff; border-radius: 999px; padding: 11px 20px; font-family: var(--hw-font-display); font-size: 15px; font-weight: 700; color: var(--hw-ink-dark); cursor: pointer; }
.hw-hub__trip-tab:hover { border-color: var(--hw-ink); color: var(--hw-ink-darker); }
.hw-hub__trip-tab.is-active { color: #fff; border-color: transparent; }
.hw-hub__trip-tab--blue.is-active { background: var(--hw-blue); }
.hw-hub__trip-tab--green.is-active { background: var(--hw-green); }
.hw-hub__trip-tab--purple.is-active { background: var(--hw-purple); }
.hw-hub__trip-tab--pink.is-active { background: var(--hw-pink); }
.hw-hub__trip-tab--teal.is-active { background: var(--hw-teal); }
.hw-hub__trip-tab--sunset.is-active { background: var(--hw-sunset); color: var(--hw-ink-darker); }
.hw-hub__trip-tab--orange.is-active { background: var(--hw-orange); }

.hw-hub__trip-panel { border-radius: 24px; padding: 40px; }
.hw-hub__trip-panel--blue { background: var(--hw-blue-lightest); }
.hw-hub__trip-panel--green { background: var(--hw-green-lightest); }
.hw-hub__trip-panel--purple { background: var(--hw-purple-lightest); }
.hw-hub__trip-panel--pink { background: var(--hw-pink-lightest); }
.hw-hub__trip-panel--teal { background: var(--hw-teal-lightest); }
.hw-hub__trip-panel--sunset { background: var(--hw-sunset-lightest); }
.hw-hub__trip-panel--orange { background: var(--hw-orange-lightest); }
.hw-hub__trip-head { margin-bottom: 28px; }
.hw-hub__trip-head h3 { font-size: 26px; margin-bottom: 8px; }
.hw-hub__trip-head p { font-size: 17px; line-height: 1.55; color: var(--hw-ink-dark); margin: 0; max-width: 70ch; }
.hw-hub__trip-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.hw-hub__trip-cols h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-ink); margin-bottom: 12px; }
.hw-hub__trip-cols ul { list-style: none; margin: 0; padding: 0; }
.hw-hub__trip-cols li { font-size: 15px; line-height: 1.5; color: var(--hw-ink-darker); padding: 8px 0 8px 18px; position: relative; border-top: 1px solid rgba(18, 20, 23, 0.08); }
.hw-hub__trip-cols li:first-child { border-top: 0; }
.hw-hub__trip-cols li::before { content: "·"; position: absolute; left: 4px; font-weight: 700; }
.hw-hub .hw-hub__trip-cities a { color: var(--hw-orange-dark); font-weight: 600; }
.hw-hub .hw-hub__trip-cities a:hover { text-decoration: underline; }

/* ---------- Content blocks ---------- */
.hw-hub__block--tint { background: var(--hw-ink-lightest); }
.hw-hub__block-badge { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 8px 16px 8px 12px; margin-bottom: 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.hw-hub__block--blue .hw-hub__block-badge { background: var(--hw-blue-lightest); color: var(--hw-blue-dark); }
.hw-hub__block--green .hw-hub__block-badge { background: var(--hw-green-lightest); color: var(--hw-green-dark); }
.hw-hub__block--purple .hw-hub__block-badge { background: var(--hw-purple-lightest); color: var(--hw-purple-dark); }
.hw-hub__block--pink .hw-hub__block-badge { background: var(--hw-pink-lightest); color: var(--hw-pink); }
.hw-hub__block--teal .hw-hub__block-badge { background: var(--hw-teal-lightest); color: var(--hw-teal-dark); }
.hw-hub__block--sunset .hw-hub__block-badge { background: var(--hw-sunset-lightest); color: #8A6100; }
.hw-hub__block--orange .hw-hub__block-badge { background: var(--hw-orange-lightest); color: var(--hw-orange-dark); }
.hw-hub__points-art { background: #fff; padding: 20px; display: flex; justify-content: center; }
.hw-hub__block--tint .hw-hub__points-art { background: var(--hw-paper); }
.hw-hub__points-art .hw-hub__illustration { width: 120px; height: 120px; }
.hw-hub__block--blue .hw-hub__point-label { color: var(--hw-blue-dark); }
.hw-hub__block--green .hw-hub__point-label { color: var(--hw-green-dark); }
.hw-hub__block--purple .hw-hub__point-label { color: var(--hw-purple-dark); }
.hw-hub__block--pink .hw-hub__point-label { color: var(--hw-pink); }
.hw-hub__block--teal .hw-hub__point-label { color: var(--hw-teal-dark); }
.hw-hub__block--sunset .hw-hub__point-label { color: #8A6100; }
.hw-hub__block-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-bottom: 44px; }
.hw-hub__block-copy h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; margin-bottom: 20px; max-width: 18ch; }
.hw-hub__block-copy p { font-size: 17px; line-height: 1.65; color: var(--hw-ink-dark); }
.hw-hub__points { display: grid; gap: 2px; background: var(--hw-ink-lighter); border-radius: 16px; overflow: hidden; }
.hw-hub__point { background: #fff; padding: 18px 22px; }
.hw-hub__block--tint .hw-hub__point { background: var(--hw-paper); }
.hw-hub__point-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-orange-dark); margin-bottom: 4px; }
.hw-hub__point-detail { font-size: 15px; line-height: 1.5; color: var(--hw-ink-dark); }

/* ---------- Article carousels under each section ---------- */
.hw-hub__reading { margin-top: 8px; }
.hw-hub__reading--compact { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(18, 20, 23, 0.08); }
.hw-hub__reading-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.hw-hub__reading-head h3 { font-size: 18px; }
.hw-hub__reading-actions { display: flex; align-items: center; gap: 10px; }
.hw-hub__reading .hw-hub__carousel > * { flex: 0 0 248px; }
.hw-hub__reading .hw-hub__article .hw-hub__thumb { height: 150px; }
.hw-hub__reading .hw-hub__article-body { padding: 16px 18px 20px; }

@media (max-width: 1024px) {
	.hw-hub__city-row { grid-template-columns: minmax(0, 1fr); }
	.hw-hub__city-photo { min-height: 220px; }
	.hw-hub__city-content { padding: 26px; }
	.hw-hub__city-main { flex-direction: column; gap: 18px; }
	.hw-hub__overview-grid,
	.hw-hub__block-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hw-hub__facts { position: static; }
	.hw-hub__trip-panel { padding: 28px; }
}

@media (max-width: 640px) {
	.hw-hub__fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.hw-hub__trip-panel { padding: 22px; border-radius: 18px; }
	.hw-hub__reading .hw-hub__carousel > * { flex-basis: 74%; }
}

/* ---------- Country events ---------- */
.hw-hub__events-country { background: var(--hw-ink-darker); }
.hw-hub__events-country .hw-hub__eyebrow { color: var(--hw-orange-light); }
.hw-hub__events-country h2 { color: #fff; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
.hw-hub__events-country .hw-hub__events-head p { color: var(--hw-ink-light); font-size: 17px; line-height: 1.6; max-width: 62ch; margin: 0; }
.hw-hub__events-country .hw-hub__carousel-btn { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.hw-hub__events-country .hw-hub__carousel-btn:hover:not(:disabled) { background: #fff; color: var(--hw-ink-darker); border-color: #fff; }
.hw-hub__carousel > .hw-hub__event-card { flex: 0 0 268px; background: var(--hw-ink-dark); border: 0; border-radius: 16px; overflow: hidden; }
.hw-hub a.hw-hub__event-card { color: #fff; }
.hw-hub a.hw-hub__event-card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.hw-hub__event-photo { position: relative; height: 160px; background: linear-gradient(140deg, var(--hw-purple), var(--hw-ink-dark)); }
.hw-hub__event-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-hub__event-pick { position: absolute; top: 12px; left: 12px; background: var(--hw-sunset); color: var(--hw-ink-darker); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 999px; }
.hw-hub__event-body { padding: 18px 20px 22px; }
.hw-hub__event-when { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-orange-light); margin-bottom: 8px; }
.hw-hub__event-body h3 { font-size: 18px; line-height: 1.25; color: #fff; margin-bottom: 8px; }
.hw-hub__event-place { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--hw-ink-light); margin-bottom: 10px; }
.hw-hub__event-body p { font-size: 14px; line-height: 1.5; color: var(--hw-ink-lighter); margin: 0; }

/* ---------- Live data on city cards ---------- */
.hw-hub__city-stats { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hw-teal-dark); margin-bottom: 12px; }
.hw-hub__city-quote { position: relative; margin: 0 0 14px; padding: 14px 16px 12px 34px; background: var(--hw-ink-lightest); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--hw-ink-dark); }
.hw-hub__city-quote::before { content: "\201C"; position: absolute; left: 12px; top: 10px; font-family: var(--hw-font-display); font-size: 34px; line-height: 1; color: var(--hw-orange); opacity: 0.55; }
.hw-hub__city-quote p { margin: 0; font-style: italic; }
.hw-hub__city-quote p::before { content: "\201C"; }
.hw-hub__city-quote p::after { content: "\201D"; }
.hw-hub__city-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hw-ink-light); }
.hw-hub__hostel-eco { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; background: var(--hw-green); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }

/* ---------- When to go ---------- */
.hw-hub__season-strip { background: var(--hw-ink-lightest); }
.hw-hub__season-strip h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
/* Columns align from the top so every bar sits on the same baseline. Aligning
   to the bottom instead let a long note push its own month's bar upward. */
.hw-hub__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: start; margin-bottom: 18px; }
.hw-hub__month { text-align: center; }
.hw-hub__month-bar-wrap { height: 170px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.hw-hub__month-temp { font-size: 12px; font-weight: 700; color: var(--hw-ink); }
.hw-hub__month-bar { width: 100%; border-radius: 8px 8px 0 0; min-height: 20px; }
.hw-hub__month-bar--1 { background: var(--hw-teal); }
.hw-hub__month-bar--2 { background: var(--hw-green); }
.hw-hub__month-bar--3 { background: var(--hw-sunset); }
.hw-hub__month-bar--4 { background: var(--hw-orange); }
.hw-hub__month-bar--5 { background: var(--hw-orange-dark); }
.hw-hub__month-name { font-family: var(--hw-font-display); font-weight: 700; font-size: 13px; margin-top: 10px; }
.hw-hub__month-note { font-size: 11px; line-height: 1.35; color: var(--hw-ink); margin-top: 4px; }
.hw-hub__months-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--hw-ink); }
.hw-hub__key-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.hw-hub__key-swatch--1 { background: var(--hw-teal); }
.hw-hub__key-swatch--3 { background: var(--hw-sunset); }
.hw-hub__key-swatch--5 { background: var(--hw-orange-dark); }

/* ---------- Budget calculator ---------- */
.hw-hub__budget-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hw-hub__budget-grid h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 20px; }
.hw-hub__budget-grid p { font-size: 17px; line-height: 1.6; color: var(--hw-ink-dark); }
.hw-hub__calc { background: var(--hw-ink-darker); border-radius: 24px; padding: 32px; color: #fff; }
.hw-hub__calc-styles { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.hw-hub__calc-style { flex: 1 1 auto; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.hw-hub__calc-style.is-active { background: var(--hw-orange); border-color: var(--hw-orange); }
.hw-hub__calc-nights { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 13px; font-weight: 600; color: var(--hw-ink-lighter); }
.hw-hub__calc-nights input { width: 100%; accent-color: var(--hw-orange); }
.hw-hub__calc-nights output { font-family: var(--hw-font-display); font-weight: 700; font-size: 18px; color: #fff; min-width: 2ch; text-align: right; }
.hw-hub__calc-figure { font-family: var(--hw-font-display); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -0.03em; color: var(--hw-orange-light); }
.hw-hub__calc-per { font-size: 13px; color: var(--hw-ink-light); margin-top: 6px; }
.hw-hub__calc-total { padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.hw-hub__calc-breakdown { list-style: none; margin: 0; padding: 0; }
.hw-hub__calc-breakdown li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; color: var(--hw-ink-lighter); }
.hw-hub__calc-breakdown span:last-child { font-weight: 700; color: #fff; }

@media (max-width: 1024px) {
	.hw-hub__budget-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hw-hub__months { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 20px; }
}

@media (max-width: 640px) {
	.hw-hub__months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hw-hub__month-note { display: none; }
	.hw-hub__calc { padding: 24px; }
}

/* =========================================================================
   City hub
   ========================================================================= */

/* ---------- Neighbourhoods and map ---------- */
.hw-hub__areas { background: var(--hw-ink-lightest); }
.hw-hub__areas h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
.hw-hub__areas-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.hw-hub__areas-list { display: grid; gap: 14px; }
.hw-hub__area { background: #fff; border: 1px solid var(--hw-ink-lighter); border-radius: 14px; padding: 20px 22px; }
.hw-hub__area:target { border-color: var(--hw-orange); box-shadow: 0 0 0 3px var(--hw-orange-lightest); }
.hw-hub__area-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.hw-hub__area-head h3 { font-size: 20px; }
.hw-hub__area-suits { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hw-purple-dark); background: var(--hw-purple-lightest); border-radius: 999px; padding: 4px 12px; }
.hw-hub__area p { font-size: 15px; line-height: 1.55; color: var(--hw-ink-dark); margin-bottom: 12px; }
.hw-hub__area-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hw-hub__area-stats { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hw-teal-dark); }
.hw-hub a.hw-hub__area-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--hw-orange-dark); }

/* The map sticks while the list scrolls past it. */
.hw-hub__map-wrap { position: sticky; top: 76px; }
.hw-hub__map { height: 560px; border-radius: 16px; overflow: hidden; border: 1px solid var(--hw-ink-lighter); background: var(--hw-ink-lighter); z-index: 0; }
.hw-hub__map-note { font-size: 12px; color: var(--hw-ink-light); margin: 8px 0 0; }
.hw-hub__map .leaflet-container { font-family: var(--hw-font-body); }
.hw-hub__marker { background: var(--hw-orange); color: #fff; font-family: var(--hw-font-display); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(18, 20, 23, 0.3); border: 2px solid #fff; }
.hw-hub__marker:hover { background: var(--hw-orange-dark); }
.hw-hub__pin { display: block; width: 14px; height: 14px; border-radius: 999px; background: var(--hw-teal); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(18, 20, 23, 0.4); }
.hw-hub__pin:hover { background: var(--hw-teal-dark); }
.hw-hub__map .leaflet-popup-content { font-size: 13px; line-height: 1.4; }
.hw-hub__map .leaflet-popup-content a { color: var(--hw-orange-dark); font-weight: 600; }

/* ---------- Itineraries ---------- */
.hw-hub__itin h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
.hw-hub__itin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.hw-hub__itin-grid > * { display: block; background: #fff; border: 1px solid var(--hw-ink-lighter); border-radius: 16px; overflow: hidden; }
.hw-hub a.hw-hub__itin-card { color: var(--hw-ink-darker); }
.hw-hub a.hw-hub__itin-card:hover { box-shadow: var(--hw-shadow-lg); }
.hw-hub__itin-card .hw-hub__thumb { height: 150px; }
.hw-hub__itin-body { padding: 18px 20px 22px; }
.hw-hub__itin-label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--hw-font-display); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.hw-hub__itin-label .hw-hub__icon { color: var(--hw-orange); }
.hw-hub__itin-body p { font-size: 14px; line-height: 1.5; color: var(--hw-ink); margin: 0; }
.hw-hub__itin-missing { display: block; margin-top: 10px; font-size: 12px; color: #b32d2e; }

/* ---------- Day trips ---------- */
.hw-hub__daytrips h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin-bottom: 12px; }
/* auto-fill keeps the empty columns, so one or two day trips stay the size they would be in a full row instead of stretching. */
.hw-hub__trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-bottom: 8px; }
.hw-hub__trip-grid > * { display: block; background: #fff; border: 1px solid var(--hw-ink-lighter); border-radius: 16px; overflow: hidden; }
.hw-hub a.hw-hub__daytrip { color: var(--hw-ink-darker); }
.hw-hub a.hw-hub__daytrip:hover { box-shadow: var(--hw-shadow-md); }
.hw-hub__daytrip .hw-hub__thumb { height: 150px; }
.hw-hub__daytrip-body { padding: 18px 20px 22px; }
.hw-hub__daytrip-body h3 { font-size: 20px; margin-bottom: 8px; }
.hw-hub__daytrip-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--hw-ink); margin-bottom: 10px; }
.hw-hub__daytrip-body p { font-size: 14px; line-height: 1.5; color: var(--hw-ink); margin: 0; }

/* ---------- Editorial picks ---------- */
.hw-hub__picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 28px; }
.hw-hub__picks > * { display: block; background: var(--hw-orange-lightest); border: 1px solid transparent; border-radius: 14px; padding: 20px 22px; }
.hw-hub a.hw-hub__pick { color: var(--hw-ink-darker); }
.hw-hub a.hw-hub__pick:hover { border-color: var(--hw-orange); }
.hw-hub__pick-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hw-orange-dark); margin-bottom: 8px; }
.hw-hub__pick h3 { font-size: 19px; margin-bottom: 6px; }
.hw-hub__pick p { font-size: 14px; line-height: 1.5; color: var(--hw-ink-dark); margin: 0; }

.hw-hub__back { margin-top: 32px; }

@media (max-width: 1024px) {
	.hw-hub__areas-grid { grid-template-columns: minmax(0, 1fr); }
	.hw-hub__map-wrap { position: static; order: -1; }
	.hw-hub__map { height: 340px; }
}

/* ---------- Breadcrumbs, inside the hero ---------- */
.hw-hub__hero-crumbs { position: absolute; top: 28px; left: 0; right: 0; z-index: 2; }
.hw-hub__crumbs-inner { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.hw-hub a.hw-hub__crumbs-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 8px 16px; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hw-hub a.hw-hub__crumbs-back:hover { background: #fff; border-color: #fff; color: var(--hw-ink-darker); }
.hw-hub__crumbs-nav ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.hw-hub__crumbs-nav li { display: inline-flex; align-items: center; }
.hw-hub__crumbs-nav li + li::before { content: "/"; margin: 0 8px; color: rgba(255, 255, 255, 0.5); }
.hw-hub .hw-hub__crumbs-nav a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.hw-hub .hw-hub__crumbs-nav a:hover { color: #fff; text-decoration: underline; }
.hw-hub__crumbs-nav [aria-current="page"] { color: #fff; font-weight: 600; }
.hw-hub__hero--crumbs .hw-hub__hero-inner { padding-top: 120px; }
@media (max-width: 640px) {
	.hw-hub__hero-crumbs { top: 18px; }
	.hw-hub__crumbs-nav { display: none; }
	.hw-hub__hero--crumbs .hw-hub__hero-inner { padding-top: 88px; }
}

/* ---------- Event cards without a photo ---------- */
.hw-hub__event-card--text { display: flex; flex-direction: column; }
.hw-hub__event-badge { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 20px 20px 0; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: var(--hw-orange-light); }
.hw-hub__event-card--text .hw-hub__event-body { padding-top: 16px; }