/**
 * Łompieś – poprawki czytelności i elementy mobilne.
 *
 * Zmienne dobrane z motywu YOOtheme (preset "fuse"):
 * akcent #6A7862, tło #F4F2EE, karta #FAF9F6, linia #E5E1D8,
 * tekst #5A5D55, nagłówki #33352F, Cormorant Garamond + Lato.
 */

:root {
	--s113-accent: #6a7862;
	--s113-accent-ink: #5a6752; /* akcent tekstowy – kontrast >= 4.5:1 */
	--s113-heading: #33352f;
	--s113-text: #4a4d44;
	--s113-muted: #6f7268;
	--s113-surface: #faf9f6;
	--s113-line: #e5e1d8;
	--s113-heading-font: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--s113-body-font: 'Lato', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--s113-callbar-height: 74px;
}

/* ------------------------------------------------------------------
 * 1. Czytelność tekstu
 * --------------------------------------------------------------- */

body {
	font-family: var(--s113-body-font);
	font-size: 17px;
	line-height: 1.65;
}

@media (max-width: 767px) {
	body {
		font-size: 16.5px;
	}
}

/* Opisy w kartach usług – jaśniejszy tekst na ciemnym tle sekcji. */
#tm-main .el-content:not(.uk-button) {
	line-height: 1.65;
}

/* Etykiety pomocnicze i daty. */
.el-meta,
.review-date {
	color: var(--s113-muted);
}

/* ------------------------------------------------------------------
 * 2. Kontrast przycisków głównych (WCAG AA: 4.5:1)
 * --------------------------------------------------------------- */

.uk-button-primary,
.el-content.uk-button-primary,
.tm-header .uk-button-default,
.tm-header .el-content.uk-button-default {
	color: #fff;
}

/* ------------------------------------------------------------------
 * 3. Kotwice – nagłówek nie zasłania początku sekcji
 * --------------------------------------------------------------- */

.s113-anchor {
	display: block;
	height: 0;
	overflow: hidden;
}

[id='uslugi'] {
	scroll-margin-top: 100px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------
 * 4. Blok "Najnowsze nekrologi" – karty jak w sekcji usług
 * --------------------------------------------------------------- */

.s113-latest {
	padding: 110px 0 110px;
}

.s113-latest__head {
	margin-bottom: 32px;
}

.s113-latest__eyebrow {
	font-size: 12.5px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgb(138, 154, 131);
}

.s113-latest__title {
	margin: 8px 0 0;
	font-family: var(--s113-heading-font);
	font-size: 46px;
	font-weight: 500;
	line-height: 1.12;
	color: var(--s113-heading);
}

.s113-latest__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 27px;
}

.s113-latest__card {
	background: var(--s113-surface);
	border: 1px solid var(--s113-line);
	border-radius: 4px;
	overflow: hidden;
}

.s113-latest__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px 30px 26px;
	color: inherit;
	text-decoration: none;
	box-sizing: border-box;
}

.s113-latest__card-link:hover,
.s113-latest__card-link:focus {
	color: inherit;
	text-decoration: none;
}

.s113-latest__photo {
	display: block;
	width: 74px;
	height: 74px;
	margin-bottom: 22px;
	overflow: hidden;
	border-radius: 50%;
	background: #eceade;
}

.s113-latest__photo img,
.s113-latest__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s113-latest__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.s113-latest__initials {
	font-family: var(--s113-heading-font);
	font-size: 28px;
	line-height: 1;
	color: rgb(138, 154, 131);
}

.s113-latest__card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.s113-latest__name {
	font-family: var(--s113-heading-font);
	font-size: 24px;
	line-height: 1.25;
	color: var(--s113-heading);
}

.s113-latest__name[lang="pl"] {
	text-transform: uppercase;
}

.s113-latest__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--s113-text);
}

.s113-latest__place {
	color: var(--s113-muted);
}

.s113-latest__cta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--s113-line);
	font-size: 14.5px;
	letter-spacing: 0.02em;
	color: var(--s113-accent-ink);
}

.s113-latest__card-link:hover .s113-latest__cta,
.s113-latest__card-link:focus .s113-latest__cta {
	color: var(--s113-heading);
}

.s113-latest__all {
	margin: 30px 0 0;
}

.s113-latest__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(106, 120, 98, 0.4);
	font-size: 15.5px;
	letter-spacing: 0.02em;
	color: var(--s113-accent-ink);
	text-decoration: none;
}

.s113-latest__link:hover,
.s113-latest__link:focus {
	color: var(--s113-heading);
	border-bottom-color: rgba(51, 53, 47, 0.4);
}

@media (max-width: 960px) {
	.s113-latest__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.s113-latest__title {
		font-size: 34px;
	}
}

@media (max-width: 640px) {
	.s113-latest {
		padding: 72px 0;
	}

	.s113-latest__grid {
		grid-template-columns: 1fr;
	}

	.s113-latest__card-link {
		padding: 24px 22px 22px;
	}

	.s113-latest__photo {
		width: 64px;
		height: 64px;
		margin-bottom: 18px;
	}
}

/* ------------------------------------------------------------------
 * 5. Link "Zobacz opinie w Google"
 * --------------------------------------------------------------- */

.s113-google {
	margin: 32px 0 0;
}

.s113-google__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--s113-accent-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(90, 103, 82, 0.35);
	padding-bottom: 2px;
}

.s113-google__link:hover,
.s113-google__link:focus {
	color: var(--s113-heading);
	border-bottom-color: rgba(51, 53, 47, 0.4);
}

/* ------------------------------------------------------------------
 * 6. Pasek "Zadzwoń – całodobowo" na telefonach
 * --------------------------------------------------------------- */

.s113-callbar {
	display: none;
}

@media (max-width: 767px) {
	.s113-callbar {
		display: block;
		position: fixed;
		z-index: 900;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(250, 249, 246, 0.97);
		border-top: 1px solid var(--s113-line);
		box-shadow: 0 -6px 20px rgba(47, 50, 44, 0.09);
	}

	.s113-callbar__button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 100%;
		min-height: 52px;
		padding: 14px 20px;
		border-radius: 2px;
		background: var(--s113-accent);
		color: #fff;
		font-family: var(--s113-body-font);
		font-size: 16.5px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.01em;
		text-align: center;
		text-decoration: none;
		box-sizing: border-box;
	}

	.s113-callbar__button:hover,
	.s113-callbar__button:focus {
		background: #5f6c58;
		color: #fff;
		text-decoration: none;
	}

	.s113-callbar__icon {
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
	}

	/* Stopka nie może schować się pod paskiem. */
	body.s113-has-callbar {
		padding-bottom: calc(var(--s113-callbar-height) + env(safe-area-inset-bottom, 0px));
	}
}

/* ------------------------------------------------------------------
 * 7. Dwa numery telefonu w nagłówku (desktop)
 * --------------------------------------------------------------- */

.tm-header .uk-navbar-nav > li > a {
	color: #1f1f1f;
}

.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a:focus {
	color: var(--s113-accent-ink);
}

body .uk-offcanvas-bar .uk-nav-default > li > a {
	color: #d6d5cd;
}

body .uk-offcanvas-bar .uk-nav-default > li > a:hover,
body .uk-offcanvas-bar .uk-nav-default > li > a:focus,
body .uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
	color: #fff;
}

.s113-header-phones {
	display: flex;
	align-items: center;
	gap: 18px;
	white-space: nowrap;
}

.s113-header-phones__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--s113-body-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: #1f1f1f;
	text-decoration: none;
}

.s113-header-phones__link:hover,
.s113-header-phones__link:focus {
	color: var(--s113-accent-ink);
	text-decoration: underline;
}

.s113-header-phones__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

@media (max-width: 1199px) {
	.s113-header-phones {
		gap: 12px;
	}

	.s113-header-phones__link {
		font-size: 14px;
	}
}