/* Longituudandmestik Block
 * Timeline diagram: REL/RR/RSR dataset bars, linked by three overlaid
 * ID layers (dwelling/building, spatial unit, person), built entirely
 * on CSS Grid — bars and layers occupy the same grid cells and are
 * separated only by z-index, so the layers visually "sandwich" the bars.
 */

.longituudandmestik {
	padding: var(--space-2xl) 0;
}

.longituudandmestik__heading {
	font-family: var(--font-heading);
	color: var(--color-primary);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--space-sm);
}

.longituudandmestik__description {
	color: var(--color-text-secondary);
	max-width: 760px;
	margin: 0 0 var(--space-xl);
	font-size: var(--font-size-md);
	line-height: 1.6;
}

.rel-diagram {
	position: relative;
}

.rel-diagram__scroll {
	padding-bottom: var(--space-sm);
}

.rel-diagram__stage {
	position: relative;
	display: grid;
	grid-template-columns:
		minmax(0, 1fr) minmax(6px, 0.4fr) minmax(0, 1fr) minmax(6px, 0.4fr)
		repeat(15, minmax(0, 1fr));
	grid-template-rows: 28px 52px 26px 52px 26px 52px 60px 34px 22px 28px;
	column-gap: clamp(2px, 0.6vw, 6px);
	width: 100%;
	padding: 0 var(--space-sm);
	box-sizing: border-box;
}

/* ---- Dataset bars ---- */

.rel-diagram__bar {
	border-radius: 0;
	cursor: pointer;
	transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.rel-diagram__bar[data-clickable="0"] {
	cursor: default;
}

.rel-diagram__bar:hover[data-clickable="1"] {
	filter: brightness(1.08);
}

.rel-diagram__bar.is-active {
	box-shadow: 0 0 0 3px var(--color-primary-dark) inset;
	filter: brightness(1.1);
}

.rel-diagram__bar:focus-visible {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: -3px;
}

.rel-diagram__bar--census {
	grid-row: 1 / 8;
	background: linear-gradient(180deg, color-mix(in srgb, #adce8f 60%, white) 0%, #adce8f 100%);
	z-index: 1;
}

.rel-diagram__bar--register {
	grid-row: 3 / 8;
	background: var(--color-border-medium);
	z-index: 1;
}

.rel-diagram__bar--register-tall {
	grid-row: 1 / 8;
	background: var(--color-border-medium);
	z-index: 1;
}

/* ---- Linking layers ---- */

.rel-diagram__band {
	z-index: 2;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-md);
	box-shadow: 0 4px 10px rgba(3, 3, 40, 0.2);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.rel-diagram__band:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(3, 3, 40, 0.28);
}

.rel-diagram__band.is-active {
	box-shadow: 0 0 0 3px var(--color-white) inset, 0 4px 10px rgba(3, 3, 40, 0.2);
	filter: brightness(1.1);
}

.rel-diagram__band:focus-visible {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 2px;
}

.rel-diagram__band span {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	text-align: center;
	white-space: nowrap;
	line-height: 1.15;
}

.rel-diagram__band span small {
	display: block;
	font-weight: var(--font-weight-normal);
	font-size: 0.65rem;
	line-height: 1.15;
	opacity: 0.85;
}

.rel-diagram__band--dwelling {
	grid-row: 2 / 3;
	background: var(--color-teal);
}

.rel-diagram__band--spatial {
	grid-row: 4 / 5;
	background: var(--color-primary);
}

.rel-diagram__band--person {
	grid-row: 6 / 7;
	background: var(--color-accent);
}

/* ---- Backward link arrow (dwelling ID reaches back to REL 2000) ---- */

.rel-diagram__back-arrow {
	grid-row: 2 / 3;
	align-self: center;
	justify-self: center;
	color: var(--color-teal);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
}

/* ---- Bar / group labels ---- */

.rel-diagram__group-label {
	grid-row: 8 / 9;
	align-self: start;
	padding-top: 6px;
	text-align: center;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
}

/* ---- Timeline axis ---- */

.rel-diagram__axis {
	grid-row: 9 / 10;
	grid-column: 1 / 20;
	align-self: center;
	position: relative;
	height: 0;
	border-top: 2px solid var(--color-border-dark);
}

.rel-diagram__axis::after {
	content: '';
	position: absolute;
	right: -2px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 9px;
	border-color: transparent transparent transparent var(--color-border-dark);
}

.rel-diagram__year {
	grid-row: 10 / 11;
	padding-top: 4px;
	text-align: left;
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	font-size: var(--font-size-sm);
}

@media screen and (max-width: 850px) {
	.longituudandmestik__heading {
		font-size: var(--font-size-xl);
	}
}

/* ---- Edit mode: per-bar "pole klikitav" checkbox row ---- */

.rel-diagram__stage.is-editable {
	grid-template-rows: 28px 52px 26px 52px 26px 52px 60px 34px 22px 28px 26px;
}

.rel-diagram__not-clickable {
	grid-row: 11 / 12;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rel-diagram__not-clickable input {
	margin: 0;
	cursor: pointer;
}

/* ---- Text panel below the diagram ---- */

.longituudandmestik-panel {
	max-width: 760px;
	margin: var(--space-xl) auto 0;
	text-align: center;
}

.longituudandmestik-panel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
}

.longituudandmestik-panel__arrow {
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	color: var(--color-primary);
	font-size: var(--font-size-2xl);
	line-height: 1;
	padding: var(--space-xs) var(--space-sm);
	transition: color 0.2s ease, transform 0.2s ease;
}

.longituudandmestik-panel__arrow:hover,
.longituudandmestik-panel__arrow:focus,
.longituudandmestik-panel__arrow:active {
	background: transparent;
	outline: none;
	box-shadow: none;
}

.longituudandmestik-panel__arrow:hover {
	color: var(--color-primary-hover);
	transform: scale(1.15);
}

.longituudandmestik-panel__arrow:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

.longituudandmestik-panel__arrow:disabled {
	color: var(--color-border-medium);
	cursor: default;
	transform: none;
}

.longituudandmestik-panel__title {
	font-family: var(--font-heading);
	color: var(--color-primary);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	margin: 0;
	flex: 1;
	min-height: 1.3em;
}

.longituudandmestik-panel__text {
	margin-top: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	background: var(--color-white);
	border: 1px solid var(--color-border-medium);
	border-radius: 0;
	text-align: left;
	color: var(--color-text-secondary);
	font-size: var(--font-size-md);
	line-height: 1.6;
	min-height: 7em;
}

.longituudandmestik-panel[data-editable="1"] .longituudandmestik-panel__title {
	outline: 1px dashed var(--color-border-medium);
	outline-offset: 4px;
	cursor: text;
	border-radius: 2px;
}

.longituudandmestik-panel[data-editable="1"] .longituudandmestik-panel__text {
	cursor: text;
	border-color: var(--color-border-dark);
}

.longituudandmestik-panel[data-editable="1"] .longituudandmestik-panel__title:focus {
	outline: 1px dashed var(--color-primary);
}

.longituudandmestik-panel[data-editable="1"] .longituudandmestik-panel__text:focus {
	outline: none;
	border-color: var(--color-primary);
	background: var(--color-white);
}

.longituudandmestik-panel[data-editable="1"] .longituudandmestik-panel__title:empty::before {
	content: 'Kliki ja kirjuta pealkiri…';
	color: var(--color-text-tertiary);
	font-weight: var(--font-weight-normal);
}

.longituudandmestik-panel[data-editable="1"] .longituudandmestik-panel__text:empty::before {
	content: 'Kliki ja kirjuta tekst selle elemendi kohta…';
	color: var(--color-text-tertiary);
	font-style: italic;
}