/* ==========================================================================
   GUIDE PAGES — page layout and content components
   (data table, source note, callout, process list, checklist, area card,
   page footer note, related pages, section navigation)
   ========================================================================== */

/* ---- Page header -------------------------------------------------------- */
.da-page-head {
	padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
	background: var(--da-surface);
	border-bottom: 1px solid var(--da-rule);
}

.da-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--da-space-1) var(--da-space-2);
	margin: 0 0 var(--da-space-5);
	padding: 0;
	list-style: none;
	color: var(--da-text-muted);
	font-size: var(--da-fs-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.da-breadcrumb li + li::before {
	content: "/";
	margin-right: var(--da-space-2);
	color: var(--da-rule-strong);
	opacity: 0.35;
}

.da-breadcrumb a {
	color: var(--da-sage-strong);
	text-decoration: none;
}

.da-breadcrumb a:hover {
	color: var(--da-accent);
	text-decoration: underline;
}

.da-page-head__title {
	max-width: 22ch;
	font-size: var(--da-fs-3xl);
	font-weight: 360;
	line-height: 1.04;
	letter-spacing: -0.022em;
	font-variation-settings: "opsz" 144;
}

.da-page-head__updated {
	margin-top: var(--da-space-5);
	color: var(--da-text-muted);
	font-size: var(--da-fs-sm);
}

.da-page-head__updated time {
	color: var(--da-ink);
	font-weight: 500;
}

.da-page-figure {
	margin-bottom: var(--da-space-6);
}

/* Guide-page photos keep their own ratio; portrait photos stay narrower. */
.da-page-figure .da-media--portrait {
	max-width: 26rem;
}

/* Legal Notice: list of photograph sources. */
.da-photo-sources {
	padding-left: 1.2em;
}

/* ---- Body: text column + section navigation ----------------------------- */
.da-guide-article {
	background: var(--da-white);
}

.da-page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--da-space-7);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem);
}

@media (min-width: 1024px) {
	.da-page-layout {
		grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
		gap: var(--da-space-9);
		align-items: start;
	}
}

.da-page-content {
	min-width: 0;
	max-width: 46rem;
}

.da-page-content > * + * {
	margin-top: var(--da-space-5);
}

.da-page-content > h2 {
	margin-top: var(--da-space-8);
	margin-bottom: calc(-1 * var(--da-space-2));
	font-size: var(--da-fs-xl);
	font-variation-settings: "opsz" 72;
	scroll-margin-top: calc(var(--da-header-h) + 1.5rem);
}

.da-page-content > h2:first-child {
	margin-top: 0;
}

.da-page-content > p,
.da-page-content > ul {
	max-width: var(--da-measure);
}

.da-page-content .da-lede {
	margin-bottom: var(--da-space-6);
}

.da-page-content a:not(.da-btn) {
	color: var(--da-ink);
	text-decoration-color: var(--da-terracotta);
}

.da-page-content a:not(.da-btn):hover {
	color: var(--da-accent);
}

/* Section navigation (desktop only; the related block covers mobile). */
.da-page-aside {
	display: none;
}

@media (min-width: 1024px) {
	.da-page-aside {
		display: block;
		position: sticky;
		top: calc(var(--da-header-h) + var(--da-space-6));
		padding-left: var(--da-space-6);
		border-left: 1px solid var(--da-rule);
	}
}

.da-page-aside__title {
	margin-bottom: var(--da-space-3);
	color: var(--da-sage-strong);
	font-size: var(--da-fs-xs);
	font-weight: 600;
	letter-spacing: var(--da-tracking-caps);
	text-transform: uppercase;
}

.da-page-aside__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--da-fs-sm);
}

.da-page-aside__list li + li {
	margin-top: var(--da-space-2);
}

.da-page-aside__list a {
	color: var(--da-text);
	text-decoration: none;
}

.da-page-aside__list a:hover {
	color: var(--da-accent);
	text-decoration: underline;
}

.da-page-aside__list .is-current {
	color: var(--da-ink);
	font-weight: 600;
}

/* ---- 1. Data table ------------------------------------------------------ */
.da-table {
	margin: var(--da-space-6) 0 var(--da-space-6);
}

.da-page-content > .da-table {
	margin-top: var(--da-space-6);
}

.da-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-top: 2px solid var(--da-ink);
	border-bottom: 1px solid var(--da-rule);
}

.da-table__scroll:focus-visible {
	outline-offset: 2px;
}

.da-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--da-fs-sm);
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1.45;
}

.da-table--wide table {
	min-width: 38rem;
}

.da-table th,
.da-table td {
	padding: 0.7rem 0.9rem 0.7rem 0;
	border-bottom: 1px solid var(--da-rule);
	text-align: left;
	vertical-align: top;
}

.da-table th:last-child,
.da-table td:last-child {
	padding-right: 0;
}

.da-table thead th {
	padding-top: 0.85rem;
	color: var(--da-text-muted);
	font-size: var(--da-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.da-table tbody th {
	color: var(--da-ink);
	font-weight: 500;
}

.da-table td {
	color: var(--da-text);
}

.da-table tbody tr:last-child > * {
	border-bottom: 0;
}

.da-table--numeric thead th:not(:first-child),
.da-table--numeric td {
	text-align: right;
	white-space: nowrap;
}

.da-table--numeric-last thead th:last-child,
.da-table--numeric-last td:last-child {
	text-align: right;
	white-space: nowrap;
}

/* The row the copy emphasises. */
.da-table tr.is-highlight > * {
	background: var(--da-sage-tint);
	color: var(--da-ink);
	font-weight: 600;
}

.da-table tr.is-highlight > :first-child {
	box-shadow: inset 3px 0 0 var(--da-sage-strong);
	padding-left: 0.75rem;
}

.da-table tr.is-highlight > :last-child {
	padding-right: 0.75rem;
}

.da-table thead th a,
.da-table tbody th a {
	color: inherit;
}

/* ---- 2. Source note ----------------------------------------------------- */
.da-source {
	color: var(--da-text-muted);
	font-size: var(--da-fs-xs);
	font-style: italic;
	line-height: 1.55;
}

.da-table .da-source {
	margin-top: var(--da-space-3);
	max-width: var(--da-measure);
}

.da-page-content > .da-source {
	margin-top: var(--da-space-3);
}

.da-source a {
	color: inherit !important;
	text-decoration-color: currentColor !important;
}

/* ---- 3. Editorial callout ----------------------------------------------- */
.da-callout {
	max-width: 40rem;
	margin: var(--da-space-7) 0 !important;
	padding: var(--da-space-5) 0;
	border-top: 1px solid var(--da-rule-strong);
	border-bottom: 1px solid var(--da-rule);
	color: var(--da-ink);
	font-family: var(--da-font-serif);
	font-size: var(--da-fs-lg);
	line-height: 1.4;
	font-variation-settings: "opsz" 36;
}

.da-callout strong {
	font-weight: 600;
}

/* ---- 4. Numbered process list ------------------------------------------- */
.da-steps,
.da-prose .da-steps {
	margin: var(--da-space-6) 0 !important;
	padding: 0;
	list-style: none;
}

.da-prose .da-steps li + li {
	margin-top: 0;
}

.da-steps__item {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--da-space-4);
	padding: var(--da-space-5) 0;
	border-top: 1px solid var(--da-rule);
}

.da-steps__item:last-child {
	border-bottom: 1px solid var(--da-rule);
}

.da-steps__num {
	color: var(--da-terracotta);
	font-family: var(--da-font-serif);
	font-size: var(--da-fs-2xl);
	font-weight: 300;
	line-height: 0.9;
	font-variant-numeric: lining-nums;
	font-variation-settings: "opsz" 144;
}

.da-steps__title {
	margin-bottom: var(--da-space-2);
	color: var(--da-ink);
	font-family: var(--da-font-serif);
	font-size: var(--da-fs-md);
	line-height: 1.3;
}

.da-steps__body p {
	max-width: 60ch;
}

@media (min-width: 600px) {
	.da-steps__item {
		grid-template-columns: 4.5rem minmax(0, 1fr);
	}
}

/* ---- 5. Checklist ------------------------------------------------------- */
.da-checklist {
	margin: var(--da-space-5) 0 0 !important;
	padding: 0 !important;
	list-style: none;
	border-top: 1px solid var(--da-rule);
}

.da-checklist li {
	position: relative;
	margin: 0 !important;
	padding: var(--da-space-3) 0 var(--da-space-3) var(--da-space-7);
	border-bottom: 1px solid var(--da-rule);
}

.da-checklist li::before {
	content: "";
	position: absolute;
	top: 1.05em;
	left: 0.35rem;
	width: 0.45rem;
	height: 0.8rem;
	border-right: 2px solid var(--da-sage-strong);
	border-bottom: 2px solid var(--da-sage-strong);
	transform: rotate(40deg);
}

/* Plain prose list (e.g. residency routes). */
.da-routes {
	padding-left: 1.2em;
}

.da-routes li + li {
	margin-top: var(--da-space-3);
}

/* ---- 6. Area cards ------------------------------------------------------ */
.da-areas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--da-space-6) var(--da-grid-gap);
	margin: var(--da-space-7) 0 var(--da-space-4) !important;
}

@media (min-width: 700px) {
	.da-areas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.da-area {
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-top: 2px solid var(--da-ink);
}

.da-area__figure {
	order: -1;
	margin-bottom: var(--da-space-4);
}

.da-area.has-image {
	border-top: 0;
}

.da-media--card {
	aspect-ratio: 3 / 2;
}

.da-area__body {
	padding-top: var(--da-space-4);
}

.da-area__name {
	font-size: var(--da-fs-lg);
	line-height: 1.2;
}

.da-area__tagline {
	margin-top: var(--da-space-1);
	color: var(--da-sage-strong);
	font-size: var(--da-fs-xs);
	font-weight: 600;
	letter-spacing: var(--da-tracking-caps);
	text-transform: uppercase;
}

.da-area__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--da-space-2);
	margin: var(--da-space-4) 0 var(--da-space-3);
	padding: var(--da-space-3) 0;
	border-top: 1px solid var(--da-rule);
	border-bottom: 1px solid var(--da-rule);
}

.da-area__price-label {
	color: var(--da-text-muted);
	font-size: var(--da-fs-xs);
}

.da-area__price-value {
	color: var(--da-ink);
	font-family: var(--da-font-serif);
	font-size: var(--da-fs-xl);
	line-height: 1;
	font-variant-numeric: lining-nums;
}

.da-area__text {
	font-size: var(--da-fs-sm);
}

/* Link from an area card to the area's own page. */
.da-area__more {
	margin-top: var(--da-space-3);
	font-size: var(--da-fs-sm);
	font-weight: 600;
}

.da-area__more a {
	color: var(--da-accent);
}

/* ---- 7. Page footer note ------------------------------------------------ */
.da-page-note {
	max-width: var(--da-measure);
	margin-top: var(--da-space-8) !important;
	padding-top: var(--da-space-4);
	border-top: 1px solid var(--da-rule);
	color: var(--da-text-muted);
	font-size: var(--da-fs-xs);
	font-style: italic;
	line-height: 1.55;
}

/* ---- "In this section" -------------------------------------------------- */
.da-page-children {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.da-page-children__title,
.da-related__title {
	margin-bottom: var(--da-space-5);
	color: var(--da-sage-strong);
	font-family: var(--da-font-sans);
	font-size: var(--da-fs-xs);
	font-weight: 600;
	letter-spacing: var(--da-tracking-caps);
	text-transform: uppercase;
}

@media (min-width: 960px) {
	.da-teasers__list--compact {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--da-grid-gap);
		border-bottom: 0;
	}

	.da-teasers__list--compact .da-teaser {
		border-bottom: 1px solid var(--da-rule);
		margin-bottom: -1px;
	}
}

/* ---- 8. Related pages --------------------------------------------------- */
.da-related {
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
	background: var(--da-white);
	border-top: 1px solid var(--da-rule);
}

.da-related__list {
	display: grid;
	gap: var(--da-space-5) var(--da-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.da-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.da-related__item {
	border-top: 2px solid var(--da-ink);
}

.da-related__link {
	display: grid;
	gap: var(--da-space-2);
	padding-top: var(--da-space-4);
	text-decoration: none;
}

.da-related__name {
	color: var(--da-ink);
	font-family: var(--da-font-serif);
	font-size: var(--da-fs-lg);
	line-height: 1.2;
	transition: color var(--da-dur) var(--da-ease);
}

.da-related__text {
	color: var(--da-text);
	font-size: var(--da-fs-sm);
}

.da-related__link:hover .da-related__name {
	color: var(--da-accent);
}

/* ---- Homepage additions ------------------------------------------------- */
.da-glance__more {
	display: inline-block;
	margin-top: var(--da-space-3);
	color: var(--da-ink);
	font-size: var(--da-fs-sm);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--da-terracotta);
	text-underline-offset: 0.3em;
}

.da-propertyed__body .da-teasers__list {
	margin-top: var(--da-space-7);
}

.da-propertyed__more {
	margin-top: var(--da-space-6);
}

.da-budget__footnote {
	margin: calc(-1 * var(--da-space-3)) 0 var(--da-space-6);
}

.da-dev-pending {
	display: grid;
	gap: var(--da-space-6);
}

.da-dev-pending .da-heading__title {
	max-width: 18ch;
}

@media (min-width: 960px) {
	.da-dev-pending {
		grid-template-columns: 5fr 6fr;
		gap: var(--da-space-9);
	}
}

.da-dev-pending__list {
	display: grid;
	gap: 0 var(--da-grid-gap);
	margin: var(--da-space-6) 0 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--da-ink);
}

@media (min-width: 600px) {
	.da-dev-pending__list {
		grid-template-columns: 1fr 1fr;
	}
}

.da-dev-pending__list li {
	padding: var(--da-space-3) 0;
	border-bottom: 1px solid var(--da-rule);
	color: var(--da-ink);
	font-size: var(--da-fs-sm);
	font-weight: 500;
}

/* Footer: four columns with the guides list. */
@media (min-width: 960px) {
	.da-footer__grid {
		grid-template-columns: 1.6fr 1fr 1.1fr 1.3fr;
		gap: var(--da-space-7);
	}
}

.da-footer__guides li + li {
	margin-top: var(--da-space-1);
}

.da-footer__guides a {
	text-decoration: none;
}

.da-footer__guides a:hover {
	text-decoration: underline;
}