/**
 * OsteoLux responsive and viewport stabilisation layer.
 * Loaded after the legacy-compatible component stylesheet.
 *
 * @package OsteoLux
 * @since 1.1.1
 */

:root {
	--max: 1320px;
	--ol-content: 1320px;
	--ol-page-gutter: clamp(22px, 4vw, 64px);
	--ol-section-space: clamp(40px, 5.2vw, 76px);
	--ol-header-height: 76px;
}

html {
	min-width: 320px;
}

body {
	min-width: 320px;
	overflow-wrap: normal;
	word-break: normal;
}

.container {
	width: min(var(--ol-content), calc(100% - (var(--ol-page-gutter) * 2)));
	max-width: none;
	margin-inline: auto;
}

main,
section,
header,
footer,
nav,
aside,
article,
div {
	min-width: 0;
}

img,
video,
iframe,
svg {
	max-width: 100%;
}

.prose a,
.content a,
.olLegal a,
.entry-content a,
.olFooter a {
	overflow-wrap: anywhere;
}

.title,
.heroA-title,
.heroB h2,
.hero h1,
.hero h2,
.sectionHead h2,
.cta h2 {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
 * Top bar
 * -------------------------------------------------------------------------- */
.topbar {
	position: relative;
	z-index: 220;
	background: rgba(255, 255, 255, 0.88);
	border-bottom: 1px solid rgba(16, 26, 21, 0.08);
	backdrop-filter: blur(14px);
}

.topbarInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding-block: 8px;
	font-size: 0.78rem;
	color: rgba(16, 26, 21, 0.76);
}

.olTopbarContacts {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.topbarChip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	max-width: 100%;
	padding: 7px 12px;
	white-space: nowrap;
	box-shadow: 0 8px 22px rgba(16, 26, 21, 0.07);
}

.topbarChip a {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	color: rgba(16, 26, 21, 0.82);
	text-decoration: none;
}

.topbarIcon {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	border-radius: 50%;
	background: rgba(144, 166, 155, 0.16);
	color: #315b4d;
	font-size: 0.78rem;
	font-style: normal;
}

.topbarMobileLabel {
	display: none;
}

.topbarNote {
	margin-left: auto;
}

/* --------------------------------------------------------------------------
 * Header and navigation
 * -------------------------------------------------------------------------- */
.siteHeader {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(248, 249, 246, 0.95);
	border-bottom: 1px solid rgba(16, 26, 21, 0.09);
	backdrop-filter: blur(16px);
}

.siteHeader .nav {
	display: grid;
	grid-template-columns: minmax(230px, 0.9fr) minmax(0, auto) auto;
	align-items: center;
	gap: clamp(10px, 1.2vw, 22px);
	min-height: var(--ol-header-height);
	padding-block: 10px;
}

.siteHeader .brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	max-width: 360px;
}

.siteHeader .brandLogo,
.siteHeader .mark {
	flex: 0 0 auto;
}

.siteHeader .brandLogo img,
.siteHeader .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 148px;
	max-height: 58px;
	object-fit: contain;
}

.siteHeader .brandText {
	display: block;
	min-width: 0;
}

.siteHeader .brandText strong,
.siteHeader .brandText > span {
	display: block;
	overflow-wrap: normal;
	word-break: normal;
}

.siteHeader .brandText strong {
	font-size: clamp(0.82rem, 0.85vw, 0.95rem);
	line-height: 1.2;
}

.siteHeader .brandText > span {
	max-width: 29ch;
	font-size: 0.75rem;
	line-height: 1.42;
}

.siteHeader nav.links {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.siteHeader nav.links .navLinks {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: clamp(1px, 0.38vw, 7px);
	min-width: 0;
}

.siteHeader nav.links .navLinks > li {
	flex: 0 0 auto;
}

.siteHeader nav.links .navLinks > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 9px clamp(7px, 0.68vw, 12px);
	font-size: clamp(0.75rem, 0.72vw, 0.82rem);
	line-height: 1.15;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}

.siteHeader .navCta {
	justify-self: end;
	max-width: 220px;
	min-height: 44px;
	padding-inline: 16px;
	font-size: 0.78rem;
	white-space: nowrap;
}

.navToggle {
	display: none;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	padding: 0;
	color: #15251e;
	cursor: pointer;
}

/* Desktop dropdowns remain usable without affecting the first level width. */
.siteHeader .navLinks .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	display: none;
	width: max-content;
	min-width: 220px;
	max-width: min(320px, calc(100vw - 32px));
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid rgba(16, 26, 21, 0.1);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 48px rgba(16, 26, 21, 0.14);
}

.siteHeader .navLinks .menu-item-has-children {
	position: relative;
}

.siteHeader .navLinks .menu-item-has-children:hover > .sub-menu,
.siteHeader .navLinks .menu-item-has-children:focus-within > .sub-menu {
	display: grid;
	gap: 4px;
}

.siteHeader .navLinks .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	white-space: normal;
}

/* Mobile drawer. */
.drawerInner {
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(430px, 92vw);
	max-width: none;
	max-height: 100dvh;
	margin: 0;
	padding-top: env(safe-area-inset-top);
	border: 0;
	border-left: 1px solid rgba(16, 26, 21, 0.1);
	border-radius: 26px 0 0 26px;
	background: rgba(255, 255, 255, 0.98);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.drawerTop {
	position: sticky;
	top: 0;
	z-index: 2;
	background: rgba(255, 255, 255, 0.97);
}

.drawerLinks,
.drawerLinks .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drawerLinks {
	display: grid;
	gap: 8px;
}

.drawerLinks a {
	min-height: 48px;
	font-size: 1rem;
	font-weight: 650;
}

.drawerLinks .sub-menu {
	display: grid;
	gap: 6px;
	margin: 6px 0 0 14px;
}

.drawerLinks .sub-menu a {
	min-height: 44px;
	font-size: 0.92rem;
	font-weight: 550;
}

.drawerCta {
	padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
 * Global page geometry
 * -------------------------------------------------------------------------- */
.page {
	padding-top: clamp(22px, 3.4vw, 48px);
}

section {
	padding-block: var(--ol-section-space);
}

.hero,
.heroB-shell,
.foldCard,
.mapBand {
	width: 100%;
}

.heroInner,
.heroA-grid,
.heroB-inner,
.foldInner,
.layout,
.contentGrid,
.split,
.cv,
.cvLayout,
.mapsGrid,
.mapGrid,
.faqGrid,
.grid3,
.gridPosts,
.olCards,
.olGalGrid {
	min-width: 0;
}

.heroA-grid {
	grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
	gap: clamp(28px, 4.4vw, 68px);
}

.heroA-grid > :only-child,
.heroInner > :only-child,
.heroB-inner > :only-child,
.foldInner > :only-child,
.layout > :only-child,
.contentGrid > :only-child,
.split > :only-child {
	grid-column: 1 / -1;
	width: 100%;
}

.heroA-grid > .heroA-copy:only-child,
.heroInner > section:only-child,
.heroInner > header:only-child {
	max-width: 920px;
}

.heroA-grid > .heroA-copy:only-child {
	padding-block: clamp(28px, 5vw, 76px);
}

.heroA-title {
	max-width: 17ch;
	font-size: clamp(2.65rem, 4.7vw, 5rem);
	line-height: 1.01;
}

.heroA-lead {
	max-width: 66ch;
	font-size: clamp(1rem, 1.1vw, 1.16rem);
	line-height: 1.72;
}

.heroA-media,
.heroVisual,
.portrait,
.circleFrame {
	min-width: 0;
}

.heroA-media img,
.heroVisual img,
.portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.heroInner {
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
	gap: clamp(24px, 3vw, 46px);
}

.heroInner > section,
.heroInner > header,
.heroInner > aside,
.heroA-grid > *,
.heroB-inner > *,
.foldInner > *,
.layout > *,
.contentGrid > *,
.split > *,
.cv > *,
.cvLayout > *,
.mapsGrid > *,
.mapGrid > * {
	min-width: 0;
}

.hero .title,
.fold .title {
	font-size: clamp(2.5rem, 4.6vw, 4.75rem);
	line-height: 1.03;
}

.hero .lead,
.hero .subtitle,
.fold .lead {
	max-width: 68ch;
	font-size: clamp(1rem, 1.05vw, 1.15rem);
	line-height: 1.72;
}

.sectionHead {
	gap: 24px;
}

.sectionHead > * {
	min-width: 0;
}

.grid3,
.olCards,
.gridPosts {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.7vw, 24px);
}

.mapGrid,
.mapsCards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.olGalGrid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
}

.card,
.olCard,
.mapCard,
.olMapCard,
.item,
.heroPanel,
.wizard {
	max-width: 100%;
}

.prose,
.content,
.entry-content {
	font-size: clamp(0.98rem, 0.3vw + 0.91rem, 1.08rem);
	line-height: 1.78;
}

.prose img,
.content img,
.entry-content img {
	height: auto;
}

.prose table,
.content table,
.entry-content table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

iframe {
	width: 100%;
}

input,
select,
textarea,
.ff-el-form-control {
	max-width: 100%;
}

/* Footer remains balanced with two or three populated columns. */
.olFooter .foot {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
}

.olFooter .foot > :only-child {
	grid-column: 1 / -1;
	max-width: 760px;
}

/* --------------------------------------------------------------------------
 * Compact desktop: keep the full navigation, hide only the competing CTA.
 * The menu toggle remains strictly a mobile/tablet control below 981px.
 * -------------------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1279px) {
	:root {
		--ol-page-gutter: 22px;
	}

	.siteHeader .nav {
		grid-template-columns: minmax(165px, 0.48fr) minmax(0, 1fr) auto;
		gap: 8px;
	}

	.siteHeader .brand {
		gap: 9px;
		max-width: 205px;
	}

	.siteHeader .mark {
		width: 40px;
		height: 40px;
		border-radius: 13px;
	}

	.siteHeader .brandText > span {
		display: none;
	}

	.siteHeader nav.links .navLinks {
		gap: 0;
	}

	.siteHeader nav.links .navLinks > li > a {
		padding-inline: clamp(5px, 0.55vw, 8px);
		font-size: clamp(0.69rem, 0.86vw, 0.77rem);
	}

	.siteHeader .navCta {
		display: none;
	}

	.navToggle {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Tablet and mobile navigation/layout
 * -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	:root {
		--ol-page-gutter: clamp(18px, 4vw, 34px);
		--ol-section-space: clamp(34px, 6vw, 58px);
		--ol-header-height: 68px;
	}

	.topbarInner {
		min-height: 52px;
	}

	.siteHeader .nav {
		display: flex;
		min-height: var(--ol-header-height);
		padding-block: 9px;
	}

	.siteHeader nav.links,
	.siteHeader .navCta {
		display: none;
	}

	.navToggle {
		display: inline-flex;
		margin-left: auto;
	}

	.siteHeader .brand {
		max-width: calc(100% - 62px);
	}

	.heroA-grid,
	.heroB-inner,
	.heroInner,
	.foldInner,
	.layout,
	.cv,
	.cvLayout,
	.contentGrid,
	.split,
	.mapsGrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.heroA-grid,
	.heroInner,
	.foldInner {
		gap: 24px;
	}

	.heroA-grid > .heroA-copy:only-child,
	.heroInner > section:only-child,
	.heroInner > header:only-child {
		max-width: 820px;
	}

	.heroA-media,
	.heroVisual,
	.portrait,
	.circleFrame {
		width: 100%;
		max-width: 760px;
		margin-inline: auto;
	}

	.heroA-media img,
	.heroVisual img,
	.portrait img {
		max-height: 620px;
	}

	.side,
	.index,
	.cvSide {
		position: static;
		top: auto;
	}

	.grid3,
	.olCards,
	.gridPosts,
	.olGalGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.olFooter .foot {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.olFooter .foot > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.mapsGrid,
	.mapGrid,
	.mapsCards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* CV: content before portrait on narrow screens. */
	body[class*="template-curriculum"] .heroInner > section {
		order: 1;
	}

	body[class*="template-curriculum"] .heroInner > .portrait {
		order: 2;
	}
}

/* --------------------------------------------------------------------------
 * Phone layout
 * -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	:root {
		--ol-page-gutter: 14px;
		--ol-section-space: 38px;
		--ol-radius-lg: 24px;
	}

	.container {
		width: calc(100% - 28px);
	}

	.topbarInner {
		display: grid;
		grid-template-columns: 1fr;
		gap: 7px;
		padding-block: 8px;
	}

	.olTopbarContacts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
		width: 100%;
	}

	.topbarChip {
		justify-content: center;
		width: 100%;
		min-height: 42px;
		padding: 7px 10px;
		border-radius: 13px;
		box-shadow: none;
	}

	.topbarDesktopValue {
		display: none;
	}

	.topbarMobileLabel {
		display: inline;
		font-weight: 700;
	}

	.topbarNote {
		justify-content: flex-start;
		margin-left: 0;
		padding-inline: 12px;
		background: rgba(144, 166, 155, 0.11);
		white-space: normal;
		line-height: 1.35;
	}

	.siteHeader .brandText > span {
		display: none;
	}

	.siteHeader .brandText strong {
		font-size: 0.82rem;
	}

	.siteHeader .mark {
		width: 40px;
		height: 40px;
		border-radius: 13px;
	}

	.siteHeader .brandLogo img,
	.siteHeader .custom-logo {
		max-width: 120px;
		max-height: 46px;
	}

	.drawerInner {
		width: min(100%, 430px);
		border-radius: 20px 0 0 20px;
	}

	.page {
		padding-top: 18px;
	}

	section {
		padding-block: var(--ol-section-space);
	}

	.hero,
	.heroB-shell,
	.foldCard,
	.mapBand,
	.card,
	.olCard,
	.item,
	.wizard {
		border-radius: 22px;
	}

	.heroInner,
	.heroB-inner,
	.foldInner {
		padding: 20px;
	}

	.heroA {
		padding-top: 18px;
	}

	.heroA-grid {
		gap: 20px;
	}

	.heroA-grid > .heroA-copy:only-child {
		padding-block: 28px;
	}

	.heroA-title,
	.hero .title,
	.fold .title {
		max-width: 100%;
		font-size: clamp(2.15rem, 11vw, 3.35rem);
		line-height: 1.02;
	}

	.heroA-lead,
	.hero .lead,
	.hero .subtitle,
	.fold .lead {
		font-size: 1rem;
		line-height: 1.65;
	}

	.sectionHead {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.sectionHead > .btn,
	.sectionHead > a.btn {
		align-self: flex-start;
	}

	.grid3,
	.olCards,
	.gridPosts,
	.olGalGrid,
	.olFooter .foot,
	.faqGrid,
	.cv-highlights,
	.choiceGrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.heroCtas,
	.heroActions,
	.actionRow,
	.actionDock,
	.ctaActions,
	.sectionActions,
	.olMapActions,
	.drawerCta {
		align-items: stretch;
	}

	.heroCtas .btn,
	.heroActions .btn,
	.actionRow .btn,
	.actionDock .btn,
	.ctaActions .btn,
	.sectionActions .btn,
	.olMapActions .btn,
	.drawerCta .btn {
		width: 100%;
		white-space: normal;
		text-align: center;
	}

	/* Filters remain usable without creating very tall rows. */
	.heroPanel .chips,
	.side .chips,
	.galleryWrap .chips,
	.toc,
	.olIndex {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		max-width: 100%;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.heroPanel .chips .chip,
	.side .chips .chip,
	.galleryWrap .chips .chip,
	.toc .pill,
	.olIndex a {
		flex: 0 0 auto;
	}

	.heroPanel .row,
	.searchBar,
	.shareBar,
	.metaBar {
		flex-direction: column;
		align-items: stretch;
	}

	.heroPanel .search,
	.heroPanel input[type="search"] {
		width: 100%;
	}

	.foldRight,
	.wizard,
	.mapsInfo,
	.mapsCards {
		width: 100%;
	}

	.microRow {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.microPill {
		width: 100%;
		white-space: normal;
	}

	.olFooter .foot > :last-child:nth-child(odd) {
		grid-column: auto;
	}

	.olFooter .bottomline {
		align-items: flex-start;
		flex-direction: column;
	}

	.olBottomBar .inner {
		gap: 6px;
		padding-inline: 8px;
	}

	.olBottomBar a {
		min-width: 0;
		padding-inline: 8px;
		font-size: 0.78rem;
	}
}

@media (max-width: 420px) {
	:root {
		--ol-page-gutter: 12px;
	}

	.container {
		width: calc(100% - 24px);
	}

	.topbarNote {
		font-size: 0.72rem;
	}

	.siteHeader .brandText strong {
		max-width: 20ch;
		font-size: 0.77rem;
	}

	.navToggle {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	.drawerInner {
		width: 100%;
		border-left: 0;
		border-radius: 0;
	}

	.heroInner,
	.heroB-inner,
	.foldInner {
		padding: 17px;
	}

	.heroA-title,
	.hero .title,
	.fold .title {
		font-size: clamp(2rem, 11.5vw, 2.85rem);
	}

	.btn {
		min-height: 46px;
		padding: 11px 14px;
	}

	.card,
	.olCard,
	.item,
	.wizard {
		padding: 15px;
	}
}

/* Landscape phones: avoid a drawer taller than the viewport. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 980px) {
	.topbar {
		display: none;
	}

	.drawerInner {
		width: min(520px, 82vw);
	}
}

/* Explicit server-side state for heroes whose optional visual/panel is absent. */
.heroA-grid.oneCol,
.heroB-inner.oneCol,
.heroInner.oneCol {
	grid-template-columns: minmax(0, 1fr);
}

.heroA-grid.oneCol > *,
.heroB-inner.oneCol > *,
.heroInner.oneCol > * {
	grid-column: 1 / -1;
	width: 100%;
}

.heroA-grid.oneCol > .heroA-copy,
.heroInner.oneCol > section,
.heroInner.oneCol > header {
	max-width: 920px;
}