/*
 * Base - the few rules every page shares. Section styles live in sections/<name>.css.
 *
 * Values are the design's (theme.json presets); the two layout widths are read from the frames:
 *   1176 px content container (132 px each side at 1440), 1340 px wide box (consult and footer,
 *   50 px each side at 1440). Side gutter below those widths: 20 px (intake mobile default).
 * The root block gap is 0 (theme.json): no block gets spacing it did not ask for.
 */

:root {
	--mn-gutter: 20px;
	--mn-content: 1176px;
	--mn-wide: 1340px;
	/* The drawn header/footer rules are fractional strokes; see header.css and footer.css. */
	--mn-rule-footer: rgb(66 66 66 / 0.2);
}

/* The homepage header is laid over the hero; its containing block is the site wrapper. */
.wp-site-blocks {
	position: relative;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

/*
 * Shared container for any unit: the drawn 1176 px content width, centred, never closer than the
 * 20 px gutter to the viewport edge.
 */
.mn-container {
	width: min(var(--mn-content), 100% - 2 * var(--mn-gutter));
	margin-inline: auto;
}

.mn-container--wide {
	width: min(var(--mn-wide), 100% - 2 * var(--mn-gutter));
	margin-inline: auto;
}

/* Images inside the chrome parts are plain figures: no theme margin. */
.mn-header .wp-block-image,
.mn-footer .wp-block-image,
.mn-consult .wp-block-image {
	margin: 0;
}

/* ---- Plain templates (index, singular, search, 404): type and colour from the tokens ---- */

.mn-plain {
	width: min(var(--mn-content), 100% - 2 * var(--mn-gutter));
	margin-inline: auto;
	padding-block: 15px 120px;
}

/* The page-title style the design draws (416:953): Geist 400, 70/122, C07. */
.mn-plain .mn-plain__title {
	margin: 0 0 32px;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-18);
	line-height: 122px;
	color: var(--wp--preset--color--c-07);
}

.mn-plain .mn-plain__item-title {
	margin: 32px 0 8px;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-12);
	line-height: 36.4px;
}

.mn-plain .mn-plain__item-title a {
	color: var(--wp--preset--color--c-03);
}

.mn-plain .mn-plain__content > * + *,
.mn-plain .mn-plain__excerpt p,
.mn-plain .mn-plain__text,
.mn-plain .mn-plain__empty {
	margin-block: 0 16px;
}

.mn-plain .mn-plain__pagination {
	margin-top: 48px;
	gap: 16px;
}

.mn-plain .mn-plain__search {
	max-width: 520px;
	margin-block: 0 32px;
}

@media (max-width: 781px) {
	.mn-plain .mn-plain__title {
		font-size: var(--wp--preset--font-size--s-14);
		line-height: 51px;
	}
}

/*
 * An empty list says so (R18). A Query Loop with nothing to show prints its own "no results" block; the
 * delivered lists (home projects, Atlikti darbai, Akcijos, Naujienos, Straipsniai) each hold one short
 * Lithuanian line there, in the body type the category pages use (Geist 500, 18/28, #424242). The words are
 * block content, so the client edits them like any paragraph.
 */
.mn-empty-note {
	margin: 0;
	padding-block: 24px;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-04);
	line-height: 28px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-02);
}

/*
 * Keyboard focus on a button: the ring goes round the WHOLE pill. Every gold button on the site is a
 * core/button whose pill is the .wp-block-button box and whose link is only the label (stretched over
 * the pill), so the browser's own ring circled the words alone. The same holds for a core/button set
 * to the <button> tag (Galerija's "Rodyti daugiau"), so the label is matched by its class, not its
 * tag. The ring itself is the browser's (outline-style auto): no focus style is drawn in the design.
 * Without :has() support the label keeps its own ring.
 */
.wp-block-button:has(> .wp-block-button__link:focus-visible) {
	/* the user agent's own :focus-visible ring (Firefox reads the first line, Chromium and WebKit the second) */
	outline: 1px auto Highlight;
	outline: 1px auto -webkit-focus-ring-color;
	outline-offset: 2px;
}

.wp-block-button:has(> .wp-block-button__link:focus-visible) > .wp-block-button__link:focus-visible {
	outline: none;
}

/* ---- Shared carousel (assets/js/carousel.js). Sections set slide widths and gaps. ---- */

.mn-carousel,
[data-mn-carousel] {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mn-carousel::-webkit-scrollbar,
[data-mn-carousel]::-webkit-scrollbar {
	display: none;
}

.mn-carousel > *,
[data-mn-carousel] > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.mn-carousel.is-dragging,
[data-mn-carousel].is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

/* A looping row (carousel.js, R13) holds copies of its slides on both sides of the real ones. It is
 * cut at the line on the left (the script sets --mn-loop-clip: the track's left padding less room for a
 * focus ring), so at rest the copy of the last slide never shows as a sliver in the margin; a slide
 * slides out under that line instead of into the margin. Nothing is cut on the other three sides. The
 * copies are not part of the page's content: a screen reader and the keyboard skip them. */
.mn-carousel.is-looping,
[data-mn-carousel].is-looping {
	overflow-anchor: none;
	clip-path: inset(-8px -8px -8px var(--mn-loop-clip, 0px));
}

/* Reduced motion: a step or a reel coming into place jumps (carousel.js and reels.js scroll with
 * behavior 'auto', which reads this). */
@media (prefers-reduced-motion: reduce) {
	.mn-carousel,
	[data-mn-carousel] {
		scroll-behavior: auto;
	}
}

.mn-carousel-prev,
.mn-carousel-next,
[data-mn-prev],
[data-mn-next] {
	cursor: pointer;
}

.mn-carousel-prev[aria-disabled="true"],
.mn-carousel-next[aria-disabled="true"],
[data-mn-prev][aria-disabled="true"],
[data-mn-next][aria-disabled="true"] {
	cursor: default;
}

/* ---- Shared lightbox (assets/js/lightbox.js). Not drawn in the design: the mobile reference
 * pass (intake record) - a dark full-screen viewer, arrows, a counter. ---- */

.mn-lb-trigger {
	cursor: zoom-in;
}

html.mn-lb-open {
	overflow: hidden;
}

.mn-lb {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(0 0 0 / 0.9);
}

.mn-lb[hidden] {
	display: none;
}

.mn-lb__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 64px 72px;
	box-sizing: border-box;
}

.mn-lb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mn-lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.mn-lb__btn[hidden] {
	display: none;
}

.mn-lb__close {
	top: 12px;
	right: 12px;
}

.mn-lb__prev {
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
}

.mn-lb__next {
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.mn-lb__counter {
	position: absolute;
	left: 50%;
	bottom: 20px;
	margin: 0;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 16px;
	line-height: 20.8px;
	color: var(--wp--preset--color--c-01);
}

@media (max-width: 781px) {
	.mn-lb__stage {
		padding: 64px 12px;
	}

	.mn-lb__prev,
	.mn-lb__next {
		top: auto;
		bottom: 8px;
		transform: none;
	}
}

/* Card titles and names the client can lengthen (R8b item 7): a long Lithuanian compound word breaks
 * inside the card at 320 px instead of pushing the page sideways. `anywhere` (not break-word) also
 * lets the word shrink the column's min-content width, so a flex or grid card never grows past its
 * track. Short titles are unaffected: nothing breaks until a word cannot fit. */
.mn-cat-card__title,
.mn-sale-card__title,
.mn-gn-card__title,
.mn-work-card__title,
.mn-sol__name,
.mn-assort__name,
.mn-projects__card-title,
.mn-sv-card__title,
.mn-sv-card__subtitle,
.mn-how__card-title,
.mn-gn-step__title,
.mn-testimonials__name,
.mn-kt-branch__name,
.mn-kt-person__name {
	overflow-wrap: anywhere;
}