/* ==========================================================================
   geo-interior.css — shared styling for redesigned INTERIOR pages (the ones
   that used base_breadcrumb.html): a dark breadcrumb band + a light <main>.
   Loaded from base_geo_page.html. Design tokens (--geo-*) come from
   geo-chrome.css (loaded globally by base.html). Everything is scoped under
   .geo-crumb / .geo-interior so it never touches the un-ported bingo pages.
   ========================================================================== */

/* ----- Breadcrumb band (replaces .single-page-header on ported pages) ----- */
.geo-crumb {
	background: linear-gradient(120deg, #101820 0%, #16222e 60%, #0f2733 100%);
	color: #fff;
}
.geo-crumb-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 18px 24px 16px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.geo-crumb-main {
	min-width: 0;
}

/* Right-hand header actions (page tab switch, etc.) inside the dark band */
.geo-crumb-actions,
.geo-crumb-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.geo-crumb-tabs a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	background: rgba(255, 255, 255, .08);
	color: #c8d2dd;
	white-space: nowrap;
}
.geo-crumb-tabs a:hover {
	background: rgba(40, 171, 227, .2);
	color: #fff;
}
.geo-crumb-tabs a.is-active {
	background: var(--geo-accent);
	color: var(--geo-accent-ink);
	font-weight: 700;
}
@media (max-width: 640px) {
	.geo-crumb-tabs a { padding: 7px 12px; font-size: 12.5px; }
}
.geo-crumb-trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	background: none;
	font-size: 12px;
	color: #8fa3b5;
}
.geo-crumb-trail .breadcrumb-item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #8fa3b5;
}
.geo-crumb-trail .breadcrumb-item + .breadcrumb-item::before {
	content: "\F285"; /* bi-chevron-right */
	font-family: "bootstrap-icons";
	font-size: 9px;
	color: #8fa3b5;
	padding: 0;
	float: none;
}
.geo-crumb-trail .breadcrumb-item a { color: #8fa3b5; text-decoration: none; }
.geo-crumb-trail .breadcrumb-item a:hover { color: var(--geo-accent); }
.geo-crumb-trail .breadcrumb-item.active { color: #c8d2dd; }
.geo-crumb-title {
	margin: 0;
	font-family: var(--geo-font-head);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .3px;
	color: #fff;
}

/* ----- Light content area + main ----- */
.geo-interior {
	background: var(--geo-page-bg);
	font-family: var(--geo-font-body);
	color: var(--geo-ink);
}
.geo-main {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 32px 24px 48px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.geo-main h4 {
	margin: 0;
	font-family: var(--geo-font-head);
	font-size: 19px;
	font-weight: 700;
	color: var(--geo-ink);
}
.geo-main p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--geo-ink-soft);
}
.geo-main p:last-child { margin-bottom: 0; }
.geo-main a { color: var(--geo-link); text-decoration: none; }
.geo-main a:hover { color: var(--geo-accent); }
.geo-main mark {
	background: rgba(40, 171, 227, .18);
	color: var(--geo-link);
	padding: 0 3px;
	border-radius: 3px;
}
.geo-main .bi-patch-check { color: var(--geo-accent); }

/* generic section, prose block, centered heading */
.geo-sect { display: flex; flex-direction: column; gap: 14px; }
.geo-center { text-align: center; }

/* media row: image + text (Control center) */
.geo-media {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 36px;
	align-items: center;
}
.geo-media-img { display: flex; justify-content: center; }
.geo-media-img img {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 6px rgba(40, 171, 227, .15);
}

/* gray rounded panel (Main functions / Galileo section) */
.geo-panel {
	background: #eef1f5;
	border-radius: 12px;
	padding: 28px 30px;
	margin: 22px 0;
}
.geo-panel h4 + p { margin-top: 6px; }

/* three-column layout inside a panel */
.geo-cols3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 18px;
}
.geo-cols3 > div { display: flex; flex-direction: column; }

/* source / references block */
.geo-source {
	border-top: 1px solid var(--geo-border);
	padding-top: 12px;
	margin-top: 8px;
}
.geo-source p { font-size: 13px; line-height: 1.7; color: #6b7a8c; }
.geo-source a { word-break: break-all; }

/* ----- Contacts page ----- */
.geo-contact-grid {
	display: grid;
	grid-template-columns: minmax(300px, 380px) 1fr;
	gap: 16px;
	align-items: stretch;
}
.geo-info-card {
	background: #fff;
	border: 1px solid var(--geo-border);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.geo-info-card h4 { font-size: 16px; }
.geo-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.geo-info-list li {
	display: flex;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--geo-ink-soft);
}
.geo-info-list .bi { color: var(--geo-link); font-size: 16px; margin-top: 1px; flex: none; }
.geo-info-socials { display: flex; gap: 10px; }
.geo-info-socials a {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1.5px solid #d4dde6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #546475;
	font-size: 14px;
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.geo-info-socials a:hover {
	background: var(--geo-accent);
	border-color: var(--geo-accent);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(40, 171, 227, .4);
}
.geo-map-card {
	background: #fff;
	border: 1px solid var(--geo-border);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
	overflow: hidden;
	display: flex;
	min-height: 520px;
}
.geo-map-card .geo-map { flex: 1; z-index: 1; }

/* ----- Technical processing parameters -----
   That page keeps its original markup (data tables, Bootstrap accordion with
   base64 images from the view, extract links) untouched for safety; the
   redesign is applied here as scoped overrides of the old bingo containers. */
.geo-tpp .geo-main { gap: 22px; }
.geo-tpp .container { max-width: none; width: auto; margin: 0; padding: 0; }
.geo-tpp .row { margin: 0; }
.geo-tpp .col-md-12 { padding: 0; }
.geo-tpp .section-sm { padding: 0; margin: 0; }
.geo-tpp section.bg-gray {
	background: #eef1f5;
	border-radius: 12px;
	padding: 26px 28px;
}
.geo-tpp h4 { margin: 0 0 12px; }
.geo-tpp h4.text-monospace { font-family: var(--geo-font-mono); }
.geo-tpp p { margin: 0 0 12px; }
.geo-tpp .glyphicon-triangle-right { color: var(--geo-accent); }
/* separator between the ITRF2020 / UCS-2000 / ETRS89 blocks inside one panel */
.geo-tpp .geo-divider { height: 1px; background: #dde3ea; margin: 22px 0; }

/* data tables */
.geo-tpp .table_tech_proc_param { margin: 6px 0 12px; }
.geo-tpp table.table {
	background: #fff;
	margin: 0;
	font-size: 13.5px;
	border-radius: 10px;
	overflow: hidden;
}
.geo-tpp table.table th {
	background: #f7f9fc;
	color: #5b6b7c;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .6px;
	vertical-align: middle;
}
.geo-tpp table.table td { vertical-align: middle; color: var(--geo-ink-soft); }
/* strip Bootstrap's .table-bordered cell borders -> clean row-separated look */
.geo-tpp .table_tech_proc_param table td,
.geo-tpp .table_tech_proc_param table th { border: 0; }
.geo-tpp .table_tech_proc_param table { border: 1px solid var(--geo-border); }
.geo-tpp .table_tech_proc_param table thead th { border-bottom: 1px solid var(--geo-border); }
.geo-tpp .table_tech_proc_param table tbody td { border-bottom: 1px solid #f0f3f7; }
.geo-tpp .table_tech_proc_param table tbody tr:hover td { background: #f4f9fd; }

/* Helmert parameters card — compact, content-width box centred in the panel
   (matches the design's align-self:center), NOT stretched to full width. */
.geo-tpp .geo-helmert {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--geo-border);
	border-radius: 10px;
	padding: 16px 24px;
	font-family: var(--geo-font-mono);
	font-size: 14px;
	color: var(--geo-ink);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.geo-tpp .geo-helmert p { margin: 0; padding: 2px 0; white-space: nowrap; }
.geo-tpp .geo-helmert .bi { color: var(--geo-accent); font-size: 11px; margin-right: 5px; }

/* geodetic database extract cards (design's hover-overlay grid) */
.geo-tpp .geo-extracts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
}
.geo-tpp .extract-card {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--geo-border);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
	transition: transform .25s ease, box-shadow .25s ease;
}
.geo-tpp .extract-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(16, 24, 40, .16);
}
.geo-tpp .extract-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: filter .3s ease;
}
.geo-tpp .extract-card:hover .extract-thumb { filter: blur(3px) brightness(.7); }
.geo-tpp .extract-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	opacity: 0;
	transition: opacity .3s ease;
}
.geo-tpp .extract-card:hover .extract-overlay,
.geo-tpp .extract-card:focus .extract-overlay { opacity: 1; }
.geo-tpp .extract-label {
	background: var(--geo-accent);
	color: var(--geo-accent-ink);
	font-weight: 700;
	font-size: 12.5px;
	text-align: center;
	padding: 9px 14px;
	border-radius: 20px;
}
/* touch devices have no hover: keep the label visible so cards stay labelled */
@media (hover: none) {
	.geo-tpp .extract-overlay { opacity: 1; align-items: flex-end; }
	.geo-tpp .extract-card:hover .extract-thumb { filter: none; }
}

/* UQG2025 accordion polish */
.geo-tpp #accordion_uqg2025 .card { border: 1px solid var(--geo-border); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.geo-tpp #accordion_uqg2025 .card-header a { font-weight: 600; font-size: 14.5px; color: var(--geo-ink); }
.geo-tpp #accordion_uqg2025 .nav-pills .nav-link { border-radius: 20px; color: var(--geo-link); }
.geo-tpp #accordion_uqg2025 .nav-pills .nav-link.active { background: var(--geo-accent); color: var(--geo-accent-ink); }

/* ----- Responsive ----- */
@media (max-width: 1024px) {
	.geo-cols3 { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 900px) {
	.geo-media { grid-template-columns: 1fr; gap: 24px; text-align: center; }
	.geo-media .geo-prose, .geo-media > div { text-align: left; }
	.geo-contact-grid { grid-template-columns: 1fr; }
	.geo-map-card { min-height: 360px; }
}
@media (max-width: 640px) {
	.geo-crumb-wrap { padding: 16px 16px 14px; }
	.geo-crumb-title { font-size: 21px; }
	.geo-main { padding: 24px 16px 36px; }
	.geo-panel { padding: 22px 18px; }
}