/* Data Table
   Centered head (title / subtitle / italic note) over a gold hairline grid with
   a footer-green header row — the same gold-rule language as the floorplans
   grid and the FAQ rules, with the pricing cards' green.

   Narrow screens: the table scrolls inside .data-table--scroll only.
   overscroll-behavior-x keeps that swipe from chaining to the page, and
   white-space: nowrap makes the table overflow rather than squash. */

.data-table--section {
	color: var(--color-text-black);
}

/* ---- Head ------------------------------------------------------------- */

.data-table--head {
	max-width: 760px;
	margin: 0 auto 35px;
	text-align: center;
}

.data-table--title {
	margin: 0 0 0.4em;
	font-family: 'ABC Whyte Inktrap', sans-serif;
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.15;
}

.data-table--subtitle {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gold);
}

.data-table--note {
	margin: 0.6em 0 0;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--color-hero-grey);
}

/* ---- Scroll frame ----------------------------------------------------- */

.data-table--hint {
	margin: 0 0 10px;
	text-align: right;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-gold);
}

.data-table--scroll {
	overflow-x: auto;
	/* Contain the swipe: at the ends of the table the gesture stops here
	   instead of continuing on to scroll the page. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--color-gold) transparent;
}

/* Only a tab stop while it overflows — data-table.js adds/removes tabindex. */
.data-table--scroll:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 4px;
}

.data-table--scroll::-webkit-scrollbar {
	height: 6px;
}

.data-table--scroll::-webkit-scrollbar-track {
	/* text-black at 8% — a hairline track that reads on cream or green */
	background: rgba(60, 68, 29, 0.08);
}

.data-table--scroll::-webkit-scrollbar-thumb {
	background: var(--color-gold);
}

/* ---- Table ------------------------------------------------------------ */

.data-table--table {
	width: 100%;
	border-collapse: collapse;
	font-family: 'ABC Whyte Inktrap', sans-serif;
}

.data-table--table th,
.data-table--table td {
	padding: 13px 16px;
	border: 1px solid var(--color-gold);
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.3;
	/* Keep figures on one line so the table overflows (and scrolls) rather
	   than wrapping into an unreadable squash on phones. */
	white-space: nowrap;
	/* Floor the column width so cells stay comfortable instead of compressing
	   to fit — this is what makes the phone scroll a decisive slide rather
	   than a 40px twitch, and keeps the type at a readable size. */
	min-width: 108px;
}

.data-table--table thead th {
	background: var(--color-footer-green);
	color: var(--color-text-white);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-color: var(--color-footer-green);
}

/* First column is a label rather than a figure, so left-align it. Scoped past
   the element in the cell selector above, which would otherwise win. */
.data-table--table thead th:first-child,
.data-table--table th.data-table--row-header {
	text-align: left;
}

.data-table--table th.data-table--row-header {
	font-weight: 500;
}

/* Pin the label column so the row stays identified while the figures scroll.
   border-collapse leaves a sticky cell's own borders liable to be clipped at
   the scroll container's edge, so both side rules are drawn as inset shadows
   that travel with the cell. */
.data-table--table thead th:first-child,
.data-table--table tbody th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 150px;
	box-shadow: inset 1px 0 0 var(--color-gold), inset -1px 0 0 var(--color-gold);
}

.data-table--table tbody th:first-child {
	background: var(--color-body-cream);
}

.data-table--table thead th:first-child {
	z-index: 2;
	box-shadow: inset 1px 0 0 var(--color-footer-green), inset -1px 0 0 var(--color-footer-green);
}

/* ---- Breakpoints ------------------------------------------------------ */

@media (max-width: 755px) {
	.data-table--table th,
	.data-table--table td {
		padding: 12px 14px;
	}

	.data-table--table thead th {
		letter-spacing: 0.08em;
	}
}

@media (min-width: 992px) {
	.data-table--head {
		margin-bottom: 45px;
	}

	.data-table--title {
		font-size: 2.5rem;
	}

	.data-table--table th,
	.data-table--table td {
		padding: 16px 24px;
		font-size: 1rem;
	}
}