/**
 * Discover Wrexham — components.
 * Depends on tokens.css.
 */

/* =====================================================================
 * Base
 * ================================================================== */
body {
	background: var(--dw-bg);
	color: var(--dw-text);
	font-family: var(--dw-font-body);
	font-size: var(--dw-text-base);
	line-height: var(--dw-leading-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .dw-display {
	font-family: var(--dw-font-display);
	font-weight: 800;
	line-height: var(--dw-leading-head);
	letter-spacing: var(--dw-tracking-tight);
	text-wrap: balance;
}

.dw-container {
	max-width: var(--dw-container);
	margin-inline: auto;
	padding-inline: var(--dw-gutter);
}

/* The eyebrow label used above every section heading. */
.dw-eyebrow {
	font-family: var(--dw-font-display);
	font-size: var(--dw-text-xs);
	font-weight: 700;
	letter-spacing: var(--dw-tracking-label);
	text-transform: uppercase;
	color: var(--dw-red);
	display: flex;
	align-items: center;
	gap: var(--dw-2);
}
.dw-eyebrow::before {
	content: '';
	width: 24px;
	height: 3px;
	background: var(--dw-red);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--dw-red);
	outline-offset: 2px;
	border-radius: var(--dw-radius-sm);
}

/* =====================================================================
 * Buttons
 * ================================================================== */
.dw-btn {
	--btn-bg: var(--dw-onyx);
	--btn-fg: var(--dw-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dw-2);
	padding: var(--dw-3) var(--dw-5);
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 2px solid var(--btn-bg);
	border-radius: var(--dw-radius);
	font-family: var(--dw-font-display);
	font-size: var(--dw-text-sm);
	font-weight: 700;
	letter-spacing: var(--dw-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dw-dur) var(--dw-ease), transform var(--dw-dur) var(--dw-ease), box-shadow var(--dw-dur) var(--dw-ease);
}
.dw-btn:hover { transform: translateY(-1px); }
.dw-btn:active { transform: translateY(0); }

.dw-btn--primary {
	--btn-bg: var(--dw-red);
	--btn-fg: var(--dw-white);
	box-shadow: var(--dw-shadow-red);
}
.dw-btn--primary:hover { --btn-bg: var(--dw-red-hover); }

.dw-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--dw-text);
	border-color: currentColor;
}
.dw-btn--ghost:hover { --btn-bg: color-mix(in srgb, currentColor 12%, transparent); }

/* The affiliate CTA. Deliberately the largest control on the page — it is
   the only element on a stay listing that earns revenue. */
.dw-btn--lg {
	width: 100%;
	flex-direction: column;
	gap: 2px;
	padding: var(--dw-4) var(--dw-5);
	font-size: var(--dw-text-base);
}
.dw-btn__sub {
	font-family: var(--dw-font-body);
	font-size: var(--dw-text-xs);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.85;
}

/* =====================================================================
 * Badges
 * ================================================================== */
.dw-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--dw-1);
	padding: 4px var(--dw-2);
	border-radius: var(--dw-radius-sm);
	font-family: var(--dw-font-display);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: var(--dw-tracking-label);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Paid placement. Red, angled, unmistakably an advert. */
.dw-badge--featured {
	background: var(--dw-red);
	color: var(--dw-white);
	box-shadow: var(--dw-shadow-sm);
}

.dw-badge--premier {
	background: var(--dw-onyx);
	color: var(--dw-white);
	border-left: 3px solid var(--dw-red);
}

/* Editorial trust. Green, quiet, and visually incapable of being confused
   with the paid badge — which is the entire point of it. */
.dw-badge--verified {
	background: var(--dw-verified-tint);
	color: var(--dw-verified);
	border: 1px solid currentColor;
}

.dw-badge--matchday {
	background: var(--dw-onyx);
	color: var(--dw-white);
}

/* Legally required disclosure wherever paid results are pinned. */
.dw-promoted-note {
	font-size: var(--dw-text-xs);
	color: var(--dw-text-muted);
	margin: 0 0 var(--dw-4);
}

/* =====================================================================
 * Listing card
 * ================================================================== */
.dw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--dw-white);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius-lg);
	overflow: hidden;
	transition: transform var(--dw-dur) var(--dw-ease), box-shadow var(--dw-dur) var(--dw-ease);
}
.dw-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--dw-shadow-lg);
}

/* Featured cards are structurally louder, not just badged: heavier border,
   red top rule, tinted body. A visitor should be able to tell a paid result
   from a standard one without reading a word. */
.dw-card--featured {
	border: 2px solid var(--dw-red);
	box-shadow: var(--dw-shadow-red);
}
.dw-card--featured .dw-card__body { background: var(--dw-red-tint); }

.dw-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--dw-paper);
	overflow: hidden;
}
.dw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--dw-ease);
}
.dw-card:hover .dw-card__media img { transform: scale(1.04); }

.dw-card__badges {
	position: absolute;
	top: var(--dw-3);
	left: var(--dw-3);
	display: flex;
	gap: var(--dw-2);
	flex-wrap: wrap;
}

.dw-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--dw-2);
	padding: var(--dw-4);
	flex: 1;
}

.dw-card__kicker {
	font-family: var(--dw-font-display);
	font-size: var(--dw-text-xs);
	font-weight: 700;
	letter-spacing: var(--dw-tracking-label);
	text-transform: uppercase;
	color: var(--dw-text-muted);
}

.dw-card__title {
	font-size: var(--dw-text-xl);
	margin: 0;
}
.dw-card__title a {
	color: inherit;
	text-decoration: none;
}
/* Stretched link: the whole card is the hit area, but only the title is in
   the accessibility tree as the link. */
.dw-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.dw-card__tagline {
	font-size: var(--dw-text-sm);
	color: var(--dw-text-muted);
	margin: 0;
}

.dw-card__meta {
	display: flex;
	align-items: center;
	gap: var(--dw-3);
	margin-top: auto;
	padding-top: var(--dw-3);
	border-top: 1px solid var(--dw-border);
	font-size: var(--dw-text-sm);
}

.dw-card__rating { font-weight: 700; }
.dw-card__distance { color: var(--dw-text-muted); }
.dw-card__price { margin-left: auto; font-weight: 700; letter-spacing: 0.05em; }

/* =====================================================================
 * Filter bar
 * ================================================================== */
.dw-filters {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: var(--dw-3);
	align-items: center;
	padding: var(--dw-3) var(--dw-gutter);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--dw-border);
}

.dw-filters__group {
	display: flex;
	align-items: center;
	gap: var(--dw-2);
}

.dw-chip {
	padding: var(--dw-2) var(--dw-3);
	background: var(--dw-white);
	border: 1px solid var(--dw-border);
	border-radius: 999px;
	font-size: var(--dw-text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--dw-dur) var(--dw-ease);
}
.dw-chip:hover { border-color: var(--dw-onyx); }
.dw-chip[aria-pressed='true'] {
	background: var(--dw-onyx);
	border-color: var(--dw-onyx);
	color: var(--dw-white);
}

.dw-select {
	padding: var(--dw-2) var(--dw-3);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
	background: var(--dw-white);
	font-family: var(--dw-font-body);
	font-size: var(--dw-text-sm);
}

/* =====================================================================
 * Hero
 * ================================================================== */
.dw-hero {
	position: relative;
	min-height: min(88vh, 780px);
	display: grid;
	align-content: end;
	padding: var(--dw-9) 0 var(--dw-7);
	background: var(--dw-onyx);
	color: var(--dw-white);
	overflow: hidden;
}

.dw-hero__media {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

/* Keeps the headline legible over any photograph without washing the
   image out to grey. */
.dw-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17,17,17,0.35) 0%, rgba(17,17,17,0.55) 45%, rgba(17,17,17,0.95) 100%);
}

.dw-hero__inner { position: relative; z-index: 1; }

.dw-hero__title {
	font-size: var(--dw-text-hero);
	font-weight: 900;
	font-stretch: 112%;
	line-height: var(--dw-leading-hero);
	letter-spacing: var(--dw-tracking-hero);
	text-transform: uppercase;
	margin: 0 0 var(--dw-4);
	max-width: 16ch;
}
.dw-hero__title em {
	font-style: normal;
	color: var(--dw-red);
	display: block;
}

.dw-hero__lede {
	font-size: var(--dw-text-lg);
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.86);
	margin: 0 0 var(--dw-6);
}

/* =====================================================================
 * Single listing
 * ================================================================== */
.dw-listing {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--dw-7);
}
@media (min-width: 60rem) {
	.dw-listing { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.dw-booking-panel {
	position: sticky;
	top: var(--dw-5);
	padding: var(--dw-5);
	background: var(--dw-white);
	border: 2px solid var(--dw-onyx);
	border-radius: var(--dw-radius-lg);
	box-shadow: var(--dw-shadow);
}

.dw-booking-panel__rate {
	font-family: var(--dw-font-display);
	font-size: var(--dw-text-3xl);
	font-weight: 900;
	letter-spacing: var(--dw-tracking-tight);
	line-height: 1;
}
.dw-booking-panel__rate small {
	display: block;
	font-family: var(--dw-font-body);
	font-size: var(--dw-text-sm);
	font-weight: 400;
	color: var(--dw-text-muted);
	letter-spacing: 0;
}

.dw-affiliate-disclosure {
	margin: var(--dw-3) 0 0;
	font-size: var(--dw-text-xs);
	color: var(--dw-text-muted);
	line-height: 1.45;
}

.dw-grid {
	display: grid;
	gap: var(--dw-5);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* =====================================================================
 * Site chrome
 * ================================================================== */
.dw-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: var(--dw-3) var(--dw-4);
	background: var(--dw-red);
	color: var(--dw-white);
	font-weight: 700;
}
.dw-skip:focus {
	left: var(--dw-4);
	top: var(--dw-4);
}

.dw-site-header {
	background: var(--dw-bg);
	color: var(--dw-text);
	border-bottom: 1px solid var(--dw-border);
	position: sticky;
	top: 0;
	z-index: 40;
}

.dw-site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--dw-5);
	min-height: 4.5rem;
	flex-wrap: wrap;
}

.dw-brand {
	display: flex;
	align-items: center;
	gap: var(--dw-3);
	color: inherit;
	text-decoration: none;
	margin-inline-end: auto;
}

/* The mark is a red bar rather than a logo file — the wordmark carries the
   identity, and a placeholder image in the header would be worse than none. */
.dw-brand__mark {
	width: 6px;
	height: 2rem;
	background: var(--dw-red);
	flex: none;
}

.dw-brand__name {
	display: block;
	font-family: var(--dw-font-display);
	font-weight: 900;
	font-stretch: 112%;
	font-size: var(--dw-text-lg);
	letter-spacing: var(--dw-tracking-tight);
	text-transform: uppercase;
	line-height: 1;
}
.dw-brand__region {
	display: block;
	font-size: var(--dw-text-xs);
	letter-spacing: var(--dw-tracking-label);
	text-transform: uppercase;
	color: var(--dw-text-muted);
}

.dw-nav__list {
	display: flex;
	align-items: center;
	gap: var(--dw-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.dw-nav__list a {
	color: inherit;
	text-decoration: none;
	font-family: var(--dw-font-display);
	font-weight: 700;
	font-size: var(--dw-text-sm);
	letter-spacing: var(--dw-tracking-wide);
	text-transform: uppercase;
	padding-block: var(--dw-2);
	border-bottom: 2px solid transparent;
	transition: border-color var(--dw-dur) var(--dw-ease);
}
.dw-nav__list a:hover,
.dw-nav__list .current-menu-item > a,
.dw-nav__list .current-menu-parent > a {
	border-bottom-color: var(--dw-red);
}

.dw-site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--dw-3);
}

.dw-site-search input {
	width: 12rem;
	max-width: 100%;
	padding: var(--dw-2) var(--dw-3);
	background: transparent;
	color: inherit;
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
	font: inherit;
	font-size: var(--dw-text-sm);
}
.dw-site-search input::placeholder { color: var(--dw-text-muted); }

@media (max-width: 60rem) {
	.dw-site-header { position: static; }
	.dw-site-header__inner { padding-block: var(--dw-3); }
	.dw-nav { order: 3; width: 100%; }
	.dw-nav__list { gap: var(--dw-4); overflow-x: auto; }
	.dw-site-search { display: none; }
	.dw-site-header__cta { font-size: var(--dw-text-xs); }
}

/* =====================================================================
 * Footer
 * ================================================================== */
.dw-site-footer {
	background: var(--dw-bg);
	color: var(--dw-text);
	margin-top: var(--dw-9);
	padding-block: var(--dw-8) var(--dw-5);
}

.dw-site-footer__inner {
	display: grid;
	gap: var(--dw-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.dw-site-footer__brand { grid-column: span 2; }
@media (max-width: 48rem) {
	.dw-site-footer__brand { grid-column: auto; }
}

.dw-site-footer__blurb {
	max-width: 34ch;
	color: var(--dw-text-muted);
	margin: var(--dw-3) 0 0;
}

.dw-site-footer__heading {
	font-size: var(--dw-text-sm);
	letter-spacing: var(--dw-tracking-wide);
	text-transform: uppercase;
	margin: 0 0 var(--dw-3);
}

.dw-site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dw-2);
}
.dw-site-footer__nav a {
	color: var(--dw-text-muted);
	text-decoration: none;
	font-size: var(--dw-text-sm);
}
.dw-site-footer__nav a:hover {
	color: var(--dw-text);
	text-decoration: underline;
}

.dw-site-footer__legal {
	margin-top: var(--dw-7);
	padding-top: var(--dw-4);
	border-top: 1px solid var(--dw-border);
	display: flex;
	justify-content: space-between;
	gap: var(--dw-4);
	flex-wrap: wrap;
	font-size: var(--dw-text-xs);
	color: var(--dw-text-muted);
}
.dw-site-footer__legal p { margin: 0; max-width: 62ch; }

/* =====================================================================
 * Fallback templates — index, page, search, 404
 * ================================================================== */
.dw-main { display: block; }

.dw-archive-head { padding-block: var(--dw-7) var(--dw-5); }
.dw-archive-head__title {
	font-size: var(--dw-text-4xl);
	text-transform: uppercase;
	font-stretch: 112%;
	margin: var(--dw-3) 0 0;
}
.dw-archive-head__lede {
	max-width: 60ch;
	font-size: var(--dw-text-lg);
	color: var(--dw-text-muted);
}
.dw-archive-head__count {
	font-size: var(--dw-text-sm);
	color: var(--dw-text-muted);
	margin: var(--dw-2) 0 0;
}

.dw-archive { padding-bottom: var(--dw-8); }

.dw-page__head { padding-block: var(--dw-7) var(--dw-5); }
.dw-page__title {
	font-size: var(--dw-text-4xl);
	text-transform: uppercase;
	font-stretch: 112%;
	margin: 0;
}

.dw-prose {
	max-width: 68ch;
	padding-bottom: var(--dw-8);
}
.dw-prose > * + * { margin-top: var(--dw-4); }
.dw-prose h2 { font-size: var(--dw-text-2xl); margin-top: var(--dw-6); }
.dw-prose h3 { font-size: var(--dw-text-xl); margin-top: var(--dw-5); }
.dw-prose a { color: var(--dw-red); }
.dw-prose img { max-width: 100%; height: auto; border-radius: var(--dw-radius); }

.dw-result {
	padding: var(--dw-4) 0;
	border-top: 1px solid var(--dw-border);
}
.dw-result__title {
	font-size: var(--dw-text-xl);
	margin: 0 0 var(--dw-2);
}
.dw-result__title a { color: inherit; text-decoration: none; }
.dw-result__title a:hover { color: var(--dw-red); }
.dw-result__excerpt { margin: 0; color: var(--dw-text-muted); }

.dw-empty {
	padding-block: var(--dw-8);
	max-width: 56ch;
}
.dw-empty h2, .dw-empty__title {
	font-size: var(--dw-text-3xl);
	text-transform: uppercase;
	font-stretch: 112%;
	margin: var(--dw-3) 0 var(--dw-3);
}
.dw-empty__lede {
	font-size: var(--dw-text-lg);
	color: var(--dw-text-muted);
	margin: 0 0 var(--dw-5);
}
.dw-empty--404 { padding-block: var(--dw-9); }

.dw-pagination {
	margin-top: var(--dw-7);
	padding-top: var(--dw-5);
	border-top: 1px solid var(--dw-border);
}
.dw-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dw-2);
	align-items: center;
}
.dw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--dw-2);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
	color: inherit;
	text-decoration: none;
	font-family: var(--dw-font-display);
	font-weight: 700;
	font-size: var(--dw-text-sm);
}
.dw-pagination .page-numbers:hover { border-color: var(--dw-onyx); }
.dw-pagination .page-numbers.current {
	background: var(--dw-onyx);
	border-color: var(--dw-onyx);
	color: var(--dw-white);
}
.dw-pagination .page-numbers.dots { border-color: transparent; }

/* Hero controls — shared by the homepage hero, the 404 and the empty state. */
.dw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dw-3);
	margin-bottom: var(--dw-5);
}

.dw-hero__search {
	display: flex;
	gap: var(--dw-2);
	max-width: 34rem;
	margin-bottom: var(--dw-5);
}
.dw-hero__search input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--dw-3) var(--dw-4);
	font: inherit;
	color: var(--dw-onyx);
	background: var(--dw-white);
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-radius);
}

/* =====================================================================
 * Sections
 * ================================================================== */
.dw-section {
	padding-block: var(--dw-8);
	background: var(--dw-bg);
	color: var(--dw-text);
}

.dw-section__title {
	font-size: var(--dw-text-3xl);
	text-transform: uppercase;
	font-stretch: 108%;
	margin: var(--dw-3) 0 var(--dw-4);
	max-width: 24ch;
}

.dw-section__lede {
	font-size: var(--dw-text-lg);
	color: var(--dw-text-muted);
	max-width: 56ch;
	margin: 0 0 var(--dw-6);
}

/* Paid inventory gets a sunken surface rather than a red one. Red behind a
   whole section would read as an alert, and would compete with the badges
   that are doing the actual signalling. */
.dw-section--featured { background: var(--dw-bg-sunken); }

.dw-matchday { padding-block: var(--dw-9); }

.dw-nearby {
	border-top: 1px solid var(--dw-border);
	background: var(--dw-bg-sunken);
}

/* The disclosure line. Deliberately plain — a styled-up "ad" label gets
   pattern-matched as decoration and stops being read. */
.dw-promoted-note {
	font-size: var(--dw-text-sm);
	color: var(--dw-text-muted);
	margin: 0 0 var(--dw-5);
	display: flex;
	align-items: center;
	gap: var(--dw-2);
	flex-wrap: wrap;
}

/* =====================================================================
 * Homepage — the three doors
 * ================================================================== */
.dw-doors {
	display: grid;
	gap: var(--dw-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	padding-block: var(--dw-8);
}

.dw-door {
	display: flex;
	flex-direction: column;
	gap: var(--dw-2);
	padding: var(--dw-6) var(--dw-5) var(--dw-5);
	background: var(--dw-white);
	border: 1px solid var(--dw-border);
	border-top: 4px solid var(--dw-onyx);
	border-radius: var(--dw-radius);
	color: inherit;
	text-decoration: none;
	transition: transform var(--dw-dur) var(--dw-ease),
	            box-shadow var(--dw-dur) var(--dw-ease),
	            border-top-color var(--dw-dur) var(--dw-ease);
}
.dw-door:hover {
	transform: translateY(-3px);
	box-shadow: var(--dw-shadow-lg);
	border-top-color: var(--dw-red);
}

.dw-door__kicker {
	font-family: var(--dw-font-display);
	font-size: var(--dw-text-xs);
	font-weight: 700;
	letter-spacing: var(--dw-tracking-label);
	text-transform: uppercase;
	color: var(--dw-text-muted);
	margin: 0;
}

.dw-door__title {
	font-size: var(--dw-text-2xl);
	margin: 0;
	max-width: 18ch;
}

.dw-door__copy {
	color: var(--dw-text-muted);
	margin: 0;
	flex: 1 1 auto;
}

.dw-door__cta {
	font-family: var(--dw-font-display);
	font-weight: 700;
	font-size: var(--dw-text-sm);
	letter-spacing: var(--dw-tracking-wide);
	text-transform: uppercase;
	color: var(--dw-red);
	margin-top: var(--dw-3);
}

/* =====================================================================
 * Homepage — business CTA
 * ================================================================== */
.dw-business-cta {
	background: var(--dw-bg-sunken);
	border-top: 1px solid var(--dw-border);
}

.dw-business-cta__inner {
	display: grid;
	gap: var(--dw-7);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56rem) {
	.dw-business-cta__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.dw-business-cta__inner > div > p { max-width: 52ch; color: var(--dw-text-muted); }

.dw-business-cta__points {
	list-style: none;
	margin: 0;
	padding: var(--dw-5);
	display: grid;
	gap: var(--dw-4);
	background: var(--dw-white);
	border: 2px solid var(--dw-onyx);
	border-radius: var(--dw-radius-lg);
}
.dw-business-cta__points li {
	padding-left: var(--dw-5);
	position: relative;
	color: var(--dw-text-muted);
}
.dw-business-cta__points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 12px;
	height: 3px;
	background: var(--dw-red);
}
.dw-business-cta__points strong { color: var(--dw-text); }

/* =====================================================================
 * Single listing — hero
 * ================================================================== */
.dw-single { display: block; }

/* Shorter than the homepage hero: on a listing the photograph is evidence,
   not a statement, and the booking panel needs to be reachable without a
   scroll on a laptop. */
.dw-hero--listing { min-height: min(60vh, 34rem); }

.dw-hero__title--listing {
	font-size: var(--dw-text-4xl);
	max-width: 20ch;
	margin-bottom: var(--dw-3);
}

.dw-card__badges--hero {
	margin-bottom: var(--dw-4);
	display: flex;
	gap: var(--dw-2);
	flex-wrap: wrap;
}

.dw-hero__meta {
	display: flex;
	gap: var(--dw-4);
	flex-wrap: wrap;
	font-size: var(--dw-text-sm);
	color: rgba(255, 255, 255, 0.8);
}

/* =====================================================================
 * Single listing — columns
 * ================================================================== */
.dw-listing { padding-block: var(--dw-7) var(--dw-8); }

.dw-listing__main > * + * { margin-top: var(--dw-7); }

.dw-listing__aside { min-width: 0; }
@media (max-width: 60rem) {
	/* Sticky is pointless in a single column — it just eats the viewport. */
	.dw-listing__aside .dw-booking-panel { position: static; }
}

.dw-listing__main h2 {
	font-size: var(--dw-text-2xl);
	text-transform: uppercase;
	font-stretch: 106%;
	margin: 0 0 var(--dw-4);
}

/* =====================================================================
 * Gallery
 * ================================================================== */
.dw-gallery {
	display: grid;
	gap: var(--dw-2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.dw-gallery img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--dw-radius);
	display: block;
}
/* First frame gets the width it deserves once there is a grid to break out
   of — a uniform grid of eight tiles reads as a contact sheet. */
@media (min-width: 40rem) {
	.dw-gallery img:first-child {
		grid-column: span 2;
		grid-row: span 2;
		aspect-ratio: 1 / 1;
	}
}

/* =====================================================================
 * Opening hours
 * ================================================================== */
.dw-hours {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--dw-text-sm);
}
.dw-hours th,
.dw-hours td {
	padding: var(--dw-3) var(--dw-2);
	text-align: left;
	border-bottom: 1px solid var(--dw-border);
	font-weight: 400;
}
.dw-hours td { text-align: right; font-variant-numeric: tabular-nums; }

.dw-hours tr.is-today {
	background: var(--dw-red-tint);
}
.dw-hours tr.is-today th,
.dw-hours tr.is-today td { font-weight: 700; }

.dw-hours__today {
	display: inline-block;
	margin-left: var(--dw-2);
	padding: 1px var(--dw-2);
	background: var(--dw-red);
	color: var(--dw-white);
	border-radius: var(--dw-radius-sm);
	font-family: var(--dw-font-display);
	font-size: var(--dw-text-xs);
	letter-spacing: var(--dw-tracking-wide);
	text-transform: uppercase;
}

.dw-hours__closed { color: var(--dw-text-muted); }

.dw-hours__notes,
.dw-hours__seasonal {
	margin: var(--dw-3) 0 0;
	font-size: var(--dw-text-sm);
	color: var(--dw-text-muted);
}
.dw-hours__seasonal {
	padding: var(--dw-3);
	background: var(--dw-bg-sunken);
	border-left: 3px solid var(--dw-red);
}

/* =====================================================================
 * Map and address
 * ================================================================== */
/* No tile provider is wired yet, so the container must hold its own shape
   and say why it is empty rather than collapsing to nothing. */
.dw-map {
	min-height: 20rem;
	background: var(--dw-bg-sunken);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
	display: grid;
	place-items: center;
}
.dw-map:empty::after {
	content: 'Map loading…';
	font-size: var(--dw-text-sm);
	color: var(--dw-text-muted);
}

.dw-address {
	margin: var(--dw-4) 0 0;
	font-style: normal;
	font-size: var(--dw-text-lg);
}

.dw-transport {
	margin: var(--dw-2) 0 0;
	color: var(--dw-text-muted);
	font-size: var(--dw-text-sm);
	max-width: 60ch;
}

/* =====================================================================
 * Booking panel internals
 * ================================================================== */
.dw-availability { margin-top: var(--dw-4); }

.dw-availability__dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--dw-2);
}
.dw-availability label {
	display: block;
	font-size: var(--dw-text-xs);
	font-weight: 700;
	letter-spacing: var(--dw-tracking-wide);
	text-transform: uppercase;
	color: var(--dw-text-muted);
}
.dw-availability input,
.dw-availability select {
	width: 100%;
	margin-top: var(--dw-1);
	padding: var(--dw-2) var(--dw-3);
	font: inherit;
	font-size: var(--dw-text-sm);
	color: var(--dw-text);
	background: var(--dw-white);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
}
.dw-availability__guests { margin-top: var(--dw-3); }
.dw-availability .dw-btn { margin-top: var(--dw-4); }

.dw-booking-panel__alt {
	margin: var(--dw-3) 0 0;
	font-size: var(--dw-text-sm);
	color: var(--dw-text-muted);
}
.dw-booking-panel__alt a {
	color: var(--dw-text);
	margin-right: var(--dw-2);
}

.dw-good-to-know {
	list-style: none;
	margin: var(--dw-5) 0 0;
	padding: var(--dw-4) 0 0;
	border-top: 1px solid var(--dw-border);
	display: grid;
	gap: var(--dw-2);
	font-size: var(--dw-text-sm);
}
.dw-good-to-know li {
	padding-left: var(--dw-5);
	position: relative;
	color: var(--dw-text-muted);
}
.dw-good-to-know li::before {
	content: '•';
	position: absolute;
	left: var(--dw-2);
	color: var(--dw-red);
	font-weight: 700;
}

/* =====================================================================
 * Contact block
 * ================================================================== */
.dw-contact {
	margin-top: var(--dw-5);
	padding-top: var(--dw-4);
	border-top: 1px solid var(--dw-border);
	font-size: var(--dw-text-sm);
}

.dw-contact__heading {
	font-size: var(--dw-text-xs);
	letter-spacing: var(--dw-tracking-label);
	text-transform: uppercase;
	color: var(--dw-text-muted);
	margin: 0 0 var(--dw-2);
}
.dw-contact__heading + * { margin-bottom: var(--dw-4); }

.dw-contact__list,
.dw-contact__access {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dw-2);
}
.dw-contact__list a { color: var(--dw-text); }
.dw-contact__access li { color: var(--dw-verified); }

.dw-contact__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--dw-2);
}
.dw-contact__social a {
	display: inline-block;
	padding: var(--dw-1) var(--dw-3);
	border: 1px solid var(--dw-border);
	border-radius: 999px;
	color: var(--dw-text-muted);
	text-decoration: none;
	font-size: var(--dw-text-xs);
}
.dw-contact__social a:hover {
	border-color: var(--dw-onyx);
	color: var(--dw-text);
}

/* =====================================================================
 * Claim prompt
 * ================================================================== */
.dw-claim-btn {
	margin-top: var(--dw-6);
	font-weight: 400;
}
.dw-claim-btn strong { color: var(--dw-red); }

.dw-claim-note {
	margin-top: var(--dw-6);
	font-size: var(--dw-text-sm);
	color: var(--dw-text-muted);
}