/* ============================================================
 * Hull Velger
 * Frontend styles. All selectors are scoped under .hv-root.
 * ============================================================ */

.hv-root {
	/* Design tokens */
	--hv-bg:           #F5F0E6;          /* cream page bg */
	--hv-surface:      #F0E9DC;          /* slightly deeper cream for selected list row */
	--hv-ink:          #1A1814;          /* primary text */
	--hv-ink-soft:     #5C544A;          /* secondary text */
	--hv-ink-muted:    #A39A8A;          /* tertiary / disabled */
	--hv-line:         rgba(26, 24, 20, 0.08);
	--hv-accent:       #B8895A;          /* gold/brown for active bar and graphic blocks */
	--hv-accent-deep:  #8A6240;          /* darker accent for text on cream (passes WCAG 4.7:1) */
	--hv-accent-soft:  rgba(184, 137, 90, 0.20);
	--hv-pill-dark:    #1F2A23;          /* dark green pill */
	--hv-pill-ink:     #F5F0E6;
	--hv-bar-rest:     #E5DCC8;          /* unselected bar color */
	--hv-bar-rest-hover: #D9CFB7;
	--hv-white:        #ffffff;

	--hv-radius-md:    14px;
	--hv-radius-lg:    24px;
	--hv-radius-pill:  999px;

	--hv-font-serif:   "Instrument Serif", "Georgia", "Times New Roman", serif;
	--hv-font-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	--hv-white-soft:   #FFFFFFB8;        /* 72% white for hero text */

	--hv-ease:         cubic-bezier(0.32, 0.72, 0, 1);

	color: var(--hv-ink);
	font-family: var(--hv-font-sans);
	background: var(--hv-bg);
	padding: 32px;
	border-radius: var(--hv-radius-lg);

	/* Reset some host theme inheritances */
	line-height: 1.5;
	box-sizing: border-box;
}
.hv-root *,
.hv-root *::before,
.hv-root *::after { box-sizing: border-box; }

/* Fake-thin Instrument Serif (the font only ships in Regular).
 * The transparent stroke nudges subpixel rendering and makes glyphs feel lighter.
 * The explicit font-weight: 400 prevents host themes from forcing faux-bold on
 * headings (h2.hv-card-title in particular). */
.hv-root .hv-list-num,
.hv-root .hv-list-name,
.hv-root .hv-card-bignum,
.hv-root .hv-card-title,
.hv-root .hv-stat-value {
	-webkit-text-stroke: 0.4px transparent;
	font-weight: 400;
}

/* -----------------------------------------------
 * Layout
 * ----------------------------------------------- */
.hv-grid-main {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 900px) {
	.hv-root { padding: 20px 16px; }

	/* Single column; let the inner halves dissolve so we can re-order
	 * their children at the grid-main level (tabs, list, hero, bars). */
	.hv-grid-main {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.hv-left, .hv-right { display: contents; }

	.hv-tabs { order: 1; margin-bottom: 14px; }
	.hv-hero { order: 2; margin-bottom: 14px; }
	.hv-bars { order: 3; margin-top: 0; margin-bottom: 22px; }
	.hv-list { order: 4; }

	/* Compact list on mobile */
	.hv-list-item {
		grid-template-columns: 32px 1fr auto;
		column-gap: 12px;
		padding: 12px 10px;
	}
	.hv-list-num { font-size: 17px; }
	.hv-list-name { font-size: 18px; }
	.hv-list-meta { font-size: 12px; }
}

/* -----------------------------------------------
 * Tab pills
 * ----------------------------------------------- */
.hv-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
}
.hv-tab {
	flex: 1;
	font-family: var(--hv-font-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.005em;
	padding: 12px 22px;
	border-radius: var(--hv-radius-pill);
	border: 1px solid var(--hv-line);
	background: transparent;
	color: var(--hv-ink);
	cursor: pointer;
	transition: background 220ms var(--hv-ease), color 220ms var(--hv-ease), border-color 220ms var(--hv-ease);
}
.hv-tab:hover { background: rgba(26, 24, 20, 0.04); }
.hv-tab.is-active {
	background: var(--hv-pill-dark);
	color: var(--hv-pill-ink);
	border-color: var(--hv-pill-dark);
}
.hv-tab:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: 2px;
}

/* -----------------------------------------------
 * Hole list
 * ----------------------------------------------- */
.hv-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.hv-list-item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	column-gap: 16px;
	padding: 18px 16px;
	border-radius: 12px;
	cursor: pointer;
	border-bottom: 1px solid var(--hv-line);
	transition: background 220ms var(--hv-ease);
	user-select: none;
}
.hv-list-item:last-child { border-bottom: none; }
.hv-list-item[data-group="in"] { display: none; }
.hv-list[data-active-group="in"] .hv-list-item[data-group="out"] { display: none; }
.hv-list[data-active-group="in"] .hv-list-item[data-group="in"] { display: grid; }

.hv-list-item:hover { background: rgba(26, 24, 20, 0.03); }
.hv-list-item.is-selected { background: var(--hv-surface); }
.hv-list-item:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: -2px;
}

.hv-list-num {
	font-family: var(--hv-font-serif);
	font-size: 22px;
	color: var(--hv-ink-muted);
	font-variant-numeric: lining-nums;
	line-height: 1;
}
.hv-list-item.is-selected .hv-list-num { color: var(--hv-accent-deep); }

.hv-list-name {
	font-family: var(--hv-font-serif);
	font-size: 22px;
	line-height: 1.15;
	color: var(--hv-ink);
}
.hv-list-meta {
	font-family: var(--hv-font-sans);
	font-size: 14px;
	color: var(--hv-ink-soft);
	white-space: nowrap;
}

/* -----------------------------------------------
 * Hero card — portrait map + editorial info panel
 *
 * Cards stack via CSS grid (single grid cell, all cards
 * occupy 1/-1) so the hero auto-sizes to content without
 * absolute positioning. Active card uses opacity for
 * crossfade. This fixes the mobile-collapse bug from v1.3.
 * ----------------------------------------------- */
.hv-hero {
	position: relative;
	display: grid;
	width: 100%;
	border-radius: var(--hv-radius-lg);
	overflow: hidden;
	background: var(--hv-surface);
	isolation: isolate;
}

.hv-card {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 360ms var(--hv-ease);
	display: grid;
	grid-template-columns: minmax(280px, 1fr) 1.35fr;
	gap: 0;
}
.hv-card.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

/* MAP COLUMN */
.hv-card-map {
	background: #FBFAF4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	overflow: hidden;
	position: relative;
	min-height: 420px;
}

.hv-card-map-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transform: scale(1.015);
	transition: transform 700ms var(--hv-ease);
}
.hv-card.is-active .hv-card-map-img { transform: scale(1); }

.hv-card-map-placeholder {
	font-family: var(--hv-font-sans);
	font-size: 13px;
	color: var(--hv-ink-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* INFO COLUMN */
.hv-card-info {
	position: relative;
	background: var(--hv-bg);
	padding: 44px 48px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Decorative folio number */
.hv-card-bignum {
	position: absolute;
	top: 28px;
	right: 40px;
	font-family: var(--hv-font-serif);
	font-size: clamp(88px, 9vw, 128px);
	line-height: 0.9;
	color: var(--hv-ink-muted);
	opacity: 0.32;
	font-variant-numeric: lining-nums;
	letter-spacing: -0.035em;
	pointer-events: none;
	user-select: none;
}

/* Badge — uses deep accent for WCAG-compliant text contrast on cream */
.hv-card-badge {
	position: relative;
	display: inline-block;
	align-self: flex-start;
	font-family: var(--hv-font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hv-accent-deep);
	margin-bottom: 18px;
	padding: 0;
	background: none;
	border: none;
}

.hv-card-title {
	font-family: var(--hv-font-serif);
	font-size: clamp(40px, 4.4vw, 64px);
	line-height: 1.0;
	letter-spacing: -0.018em;
	margin: 0 0 16px;
	color: var(--hv-ink);
	text-wrap: balance;
	max-width: 14ch;
}

.hv-card-desc {
	font-family: var(--hv-font-sans);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	max-width: 42ch;
	color: var(--hv-ink-soft);
	text-wrap: pretty;
}

.hv-card-divider {
	height: 1px;
	width: 72px;
	background: var(--hv-accent);
	opacity: 0.6;
	margin: 28px 0 24px;
}

.hv-card-stats {
	display: grid;
	grid-template-columns: repeat(4, auto);
	gap: 8px 40px;
	margin: 0;
	padding: 0;
}
@media (max-width: 1100px) and (min-width: 901px) {
	.hv-card-stats { gap: 8px 24px; }
}

.hv-stat { margin: 0; }
.hv-stat-value {
	font-family: var(--hv-font-serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	color: var(--hv-ink);
	margin: 0 0 6px;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.hv-stat-label {
	font-family: var(--hv-font-sans);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--hv-ink-soft);
	margin: 0;
	text-transform: uppercase;
}

/* Sponsor block — subtle editorial credit */
.hv-card-sponsor {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--hv-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hv-card-sponsor-label {
	font-family: var(--hv-font-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hv-ink-soft);
}
.hv-card-sponsor-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--hv-ink);
	text-decoration: none;
	transition: opacity 200ms var(--hv-ease);
}
a.hv-card-sponsor-brand:hover { opacity: 0.7; }
.hv-card-sponsor-logo {
	max-height: 32px;
	max-width: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.hv-card-sponsor-name {
	font-family: var(--hv-font-serif);
	font-size: 19px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--hv-ink);
}

/* ============= MOBILE (≤900px) ============= */
@media (max-width: 900px) {
	.hv-card {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	.hv-card-map {
		aspect-ratio: 4 / 5;
		min-height: 0;
		padding: 20px;
	}
	.hv-card-info {
		padding: 28px 22px 24px;
	}
	.hv-card-bignum {
		top: 12px;
		right: 20px;
		font-size: clamp(56px, 18vw, 88px);
	}
	.hv-card-badge {
		margin-bottom: 14px;
	}
	.hv-card-title {
		font-size: clamp(32px, 8vw, 44px);
		max-width: none;
	}
	.hv-card-desc {
		font-size: 15px;
		max-width: none;
	}
	.hv-card-divider {
		margin: 22px 0 20px;
	}
	.hv-card-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 20px;
	}
	.hv-stat-value { font-size: 26px; }
	.hv-card-sponsor {
		margin-top: 22px;
		padding-top: 16px;
	}
	.hv-card-sponsor-name { font-size: 17px; }
}

/* -----------------------------------------------
 * Bars (par-height indicators, 18 buttons)
 * ----------------------------------------------- */
.hv-bars {
	display: grid;
	grid-template-columns: repeat(18, 1fr);
	gap: 8px;
	margin-top: 18px;
	align-items: end;
	height: 56px;
}
@media (max-width: 640px) {
	.hv-bars { gap: 4px; height: 44px; }
}

.hv-bar {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	padding: 0;
	border-radius: 6px;
	background: var(--hv-bar-rest);
	cursor: pointer;
	transition: background 200ms var(--hv-ease), height 320ms var(--hv-ease), transform 200ms var(--hv-ease);
	width: 100%;
}
.hv-bar:hover { background: var(--hv-bar-rest-hover); }
.hv-bar-par3 { height: 45%; }
.hv-bar-par4 { height: 72%; }
.hv-bar-par5 { height: 100%; }

.hv-bar.is-selected {
	background: var(--hv-accent);
}
.hv-bar.is-selected:hover { background: var(--hv-accent); }
.hv-bar:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: 3px;
}

/* -----------------------------------------------
 * Empty state (admin only)
 * ----------------------------------------------- */
.hv-empty {
	padding: 32px;
	border: 1px dashed var(--hv-line);
	border-radius: var(--hv-radius-md);
	background: var(--hv-bg);
	font-family: var(--hv-font-sans);
	color: var(--hv-ink-soft);
	text-align: center;
}
.hv-empty a {
	color: var(--hv-accent);
	font-weight: 500;
	text-decoration: underline;
}

/* -----------------------------------------------
 * Reduced motion
 * ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hv-root *,
	.hv-root *::before,
	.hv-root *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.hv-card-img { transform: scale(1) !important; }
}

/* ============================================================
 * Hull Tabell — scorecard view ([hull_tabell])
 *
 * Layout: 18 hole rows + summary rows (Ut, Inn, Ut, Totalt).
 * Columns: Hull, 5 tee colors (dots as headers), Par, Hcp.
 * Style: cream page, serif italic numbers, sparse horizontal rules only.
 * Mobile: horizontal scroll with sticky Hull column + fade edge affordance.
 * ============================================================ */

.hv-tabell {
	--hv-bg:           #F5F0E6;
	--hv-surface:      #EAE2D2;
	--hv-ink:          #1A1814;
	--hv-ink-soft:     #5C544A;
	--hv-ink-muted:    #8A7E68;
	--hv-line:         rgba(26, 24, 20, 0.10);
	--hv-radius-lg:    24px;
	--hv-font-serif:   "Instrument Serif", "Georgia", "Times New Roman", serif;
	--hv-font-sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	background: var(--hv-bg);
	color: var(--hv-ink);
	font-family: var(--hv-font-sans);
	padding: 40px 44px 32px;
	border-radius: var(--hv-radius-lg);
	box-sizing: border-box;
	line-height: 1.5;
}
.hv-tabell *, .hv-tabell *::before, .hv-tabell *::after { box-sizing: border-box; }

/* Scroll wrapper — enables horizontal scroll on narrow screens */
.hv-tabell-scroll {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.hv-tabell-card {
	width: 100%;
	min-width: 720px;                 /* forces scroll when container < ~720px */
	border-collapse: collapse;
	table-layout: fixed;
	font-variant-numeric: lining-nums tabular-nums;
}

/* Header cells */
.hv-tabell-card thead th {
	padding: 14px 6px 22px;
	font-family: var(--hv-font-serif);
	font-style: italic;
	font-size: 15px;
	font-weight: 400;
	color: var(--hv-ink-soft);
	text-align: center;
	vertical-align: middle;
	background: var(--hv-bg);
}
.hv-tabell-card thead .hv-tabell-col-hole {
	text-align: left;
	padding-left: 4px;
}

/* Colored tee dot */
.hv-tabell-dot {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	vertical-align: middle;
}
.hv-tabell-tee-label {
	/* Hide label visually — dot carries the meaning — but keep for screen readers. */
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Data cells */
.hv-tabell-card tbody td {
	padding: 12px 6px;
	text-align: center;
	font-family: var(--hv-font-serif);
	font-style: italic;
	font-size: 16px;
	font-weight: 400;
	color: var(--hv-ink);
	border-bottom: 1px solid var(--hv-line);
	vertical-align: middle;
}
.hv-tabell-card tbody td.hv-tabell-col-hole {
	text-align: left;
	padding-left: 4px;
	color: var(--hv-ink-soft);
}

/* Column widths — fixed layout */
.hv-tabell-col-hole { width: 60px; }
.hv-tabell-col-tee  { width: auto; }
.hv-tabell-col-num  { width: 62px; color: var(--hv-ink-soft) !important; }

/* Summary rows */
.hv-tabell-sum td {
	background: var(--hv-surface);
	color: var(--hv-ink) !important;
	border-bottom: none;
	padding-top: 14px;
	padding-bottom: 14px;
}
.hv-tabell-sum + tr td {
	/* Restore visual separation after a summary row */
	padding-top: 14px;
}
.hv-tabell-sum td.hv-tabell-col-hole {
	color: var(--hv-ink) !important;
	font-style: italic;
}
/* Round the summary row's outer corners subtly via first/last td */
.hv-tabell-sum td:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.hv-tabell-sum td:last-child  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

/* Scroll hint — visible only on small screens */
.hv-tabell-scroll-hint {
	display: none;
	font-family: var(--hv-font-sans);
	font-size: 12px;
	color: var(--hv-ink-muted);
	margin: 12px 0 0;
	text-align: right;
	letter-spacing: 0.02em;
}

@media (max-width: 760px) {
	.hv-tabell { padding: 24px 18px 20px; }

	/* Sticky Hull column so users always see which row they're on */
	.hv-tabell-card thead .hv-tabell-col-hole,
	.hv-tabell-card tbody td.hv-tabell-col-hole {
		position: sticky;
		left: 0;
		background: var(--hv-bg);
		z-index: 2;
	}
	.hv-tabell-sum td.hv-tabell-col-hole {
		background: var(--hv-surface);
	}

	.hv-tabell-card { min-width: 640px; }
	.hv-tabell-card thead th,
	.hv-tabell-card tbody td { font-size: 14px; padding: 10px 4px; }
	.hv-tabell-dot { width: 15px; height: 15px; }

	.hv-tabell-scroll-hint { display: block; }

	/* Right-edge fade to signal more content off-screen */
	.hv-tabell-scroll {
		mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
		-webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
	}
}