/* TDL Akustik GmbH
   ------------------------------------------------------------------
   Sobstvennyh stilej u sajta ne bylo: on stojal na konstruktore
   mywebsite-editor, vsja vjorstka na chuzhom CDN, v arhiv ne popala.
   Poetomu palitru i vjorstku delaem svoi.

   Fotografij v arhive net ni odnoj - stroim na tipografike, setke
   i cvete. Vid strogij, inzhenernyj: firma zanimaetsja suhim
   stroitelstvom, akustikoj i protivopozharnoj zaschitoj.
   ------------------------------------------------------------------ */

:root {
	--fon:        #ffffff;
	--fon-tih:    #f4f5f7;
	--fon-tjomn:  #1c2530;
	--tekst:      #1a1f26;
	--tekst-tih:  #545c66;
	--akcent:     #b8442c;   /* kirpichnyj: stroitelstvo, ne "korporativnyj sinij" */
	--granica:    #dfe2e7;
	--granica-tm: #33404f;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: var(--tekst);
	background: var(--fon);
	-webkit-text-size-adjust: 100%;
}

.obolochka {
	max-width: 1080px;
	margin: 0 auto;
	padding-inline: 24px;
}

a { color: var(--akcent); }

/* ---------- shapka ---------- */

.shapka {
	background: var(--fon-tjomn);
	color: #fff;
}

.shapka__ryad {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-block: 22px;
	flex-wrap: wrap;
}

/* monogramma vmesto logotipa - ego v arhive net */
.shapka__znak {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	text-decoration: none;
	background: var(--akcent);
}

.shapka__znak:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.shapka__imja { flex: 1 1 auto; min-width: 0; }

.shapka__nazvanie {
	margin: 0 0 4px;
	font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.65rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.shapka__nazvanie span { font-weight: 400; color: #9aa4b0; }

.shapka__nazvanie a { color: inherit; text-decoration: none; }
.shapka__nazvanie a:hover { color: var(--akcent); }

.shapka__delo {
	margin: 0;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	color: #9aa4b0;
}

.shapka__gorod {
	margin: 0;
	margin-left: auto;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9aa4b0;
}

/* ---------- menju ---------- */

.menu {
	background: var(--fon-tjomn);
	border-top: 1px solid var(--granica-tm);
}

.menu__ryad { display: flex; flex-wrap: wrap; gap: 0 30px; }

.menu__ryad a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 4px 0;
	font-size: 0.97rem;
	font-weight: 600;
	color: #c6ccd4;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.menu__ryad a:hover { color: #fff; border-bottom-color: var(--granica-tm); }
.menu__ryad a[aria-current="page"] { color: #fff; border-bottom-color: var(--akcent); }
.menu__ryad a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- vvodnyj ekran ---------- */

.vvod {
	background: var(--fon-tih);
	border-bottom: 1px solid var(--granica);
}

.vvod__ryad {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	padding-block: 52px;
}

.vvod__glavnoe {
	margin: 0 0 18px;
	font-size: clamp(1.2rem, 1.02rem + 0.85vw, 1.5rem);
	line-height: 1.42;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.vvod__tekst p:last-child { margin: 0; color: var(--tekst-tih); }

/* perechen napravlenij - vmesto kartinki */
.vvod__spisok {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--akcent);
}

.vvod__spisok li {
	padding: 13px 0 13px 2px;
	border-bottom: 1px solid var(--granica);
	font-weight: 600;
	font-size: 1.02rem;
}

/* ---------- polosy ---------- */

.polosa { padding-block: 46px; }
.polosa--tjomnaja { background: var(--fon-tih); }

.zagolovok {
	margin: 0 0 20px;
	font-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.38rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	padding-bottom: 9px;
	border-bottom: 2px solid var(--akcent);
}

.polosa p { margin: 0 0 14px; }
.shirokij { max-width: 68ch; }

/* dva stolbca dlja dlinnogo teksta */
.kolonki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 40px;
}

.kolonki p { margin: 0 0 14px; }

/* ---------- objekty na glavnoj ---------- */

.objekty {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 780px;
	border-top: 1px solid var(--granica);
}

.objekty li {
	display: grid;
	grid-template-columns: minmax(0, 28ch) 1fr;
	gap: 4px 28px;
	align-items: baseline;
	padding: 13px 0;
	border-bottom: 1px solid var(--granica);
	font-size: 0.97rem;
	line-height: 1.5;
}

.objekty strong { font-weight: 600; }
.objekty li > br { display: none; }
/* opisanie idet vtoroj kolonkoj, a ne pod nazvaniem */
.objekty li { color: var(--tekst-tih); }
.objekty strong { color: var(--tekst); }

/* ---------- vnutrennie stranicy ---------- */

main.obolochka { padding-block: 42px 16px; }

.blok { margin-bottom: 42px; max-width: 70ch; }

.blok h1 {
	margin: 0 0 20px;
	font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	padding-bottom: 11px;
	border-bottom: 2px solid var(--akcent);
}

.blok h2 {
	margin: 0 0 16px;
	font-size: 1.15rem;
	font-weight: 700;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--granica);
}

.blok p { margin: 0 0 15px; }

.vedushchij {
	font-size: 1.1rem;
	line-height: 1.55;
	font-weight: 600;
}

/* ---------- perechen uslug ---------- */

.uslugi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 32px;
	max-width: none;
}

.uslugi li {
	padding: 12px 0 12px 22px;
	border-bottom: 1px solid var(--granica);
	position: relative;
	font-weight: 600;
}

.uslugi li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 1.28em;
	width: 9px;
	height: 2px;
	background: var(--akcent);
}

.blok:has(.uslugi), .blok:has(.spisok-objektov),
.blok:has(.snimok), .blok:has(.snimki) { max-width: none; }

/* ---------- spisok objektov ---------- */

.spisok-objektov {
	max-width: 780px;
	border-top: 1px solid var(--granica);
}

.objekt {
	display: grid;
	grid-template-columns: minmax(0, 28ch) 1fr;
	gap: 4px 28px;
	align-items: baseline;
	padding: 15px 0;
	border-bottom: 1px solid var(--granica);
}

.objekt h2 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	padding: 0;
	border: 0;
}

.objekt p { margin: 0; font-size: 0.95rem; color: var(--tekst-tih); line-height: 1.5; }

/* ---------- ssylki "dalshe" ---------- */

.dalshe { margin: 0; padding-top: 26px; font-size: 0.95rem; }

.dalshe a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	font-weight: 600;
	color: var(--akcent);
	text-decoration: none;
	border-bottom: 1px solid var(--granica);
	padding-bottom: 3px;
}

.dalshe a::after { content: "\203A"; font-size: 1.2em; line-height: 1; }
.dalshe a:hover, .dalshe a:focus-visible { border-bottom-color: var(--akcent); }

/* ---------- podval ---------- */

.podval {
	margin-top: 10px;
	padding-block: 30px 34px;
	background: var(--fon-tjomn);
	color: #9aa4b0;
	font-size: 0.92rem;
}

.podval__ryad {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.podval p { margin: 0; line-height: 1.6; }
.podval strong { color: #fff; font-weight: 600; }
.podval a { color: #c6ccd4; }
.podval a:hover { color: #fff; }

/* ---------- snimki ---------- */

.snimok {
	margin: 0 0 26px;
}

.snimok img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--fon-tih);
}

.snimok figcaption {
	margin-top: 10px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--tekst-tih);
}

/* lenta snimkov: 2D-setka bez brejkpointov */
.snimki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-bottom: 30px;
}

.snimki .snimok { margin: 0; }

/* odinochnyj snimok ne tjanetsja na vsju shirinu */
.snimki--odin { grid-template-columns: repeat(auto-fit, minmax(280px, 520px)); }

/* poslednij snimok v sekcii ne dobavljaet otstup k paddingu sekcii */
.snimok:last-child { margin-bottom: 0; }

/* snimok srazu posle setki objektov ne dolzhen lipnut k kartochkam */
.spisok-objektov + .snimok,
.snimki + .snimok { margin-top: 30px; }

/* adres rjadom so snimkom */
.adres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 30px 40px;
	align-items: start;
}

.adres address {
	font-style: normal;
	line-height: 1.7;
}

.adres address strong { display: block; margin-bottom: 4px; }

.adres > div { max-width: 62ch; }

.snimok--vedushchij { max-width: 860px; }

/* ---------- telefon ---------- */

@media (max-width: 820px) {
	.vvod__ryad { grid-template-columns: 1fr; gap: 30px; padding-block: 34px; }
}

@media (max-width: 600px) {
	.shapka__ryad { gap: 14px; padding-block: 18px; }
	.shapka__znak { width: 52px; height: 52px; font-size: 1rem; }
	.shapka__gorod { margin-left: 0; width: 100%; }
	.menu__ryad { gap: 0 20px; }
	.polosa { padding-block: 32px; }
	.objekty li { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
	.snimki { gap: 18px; }
	.adres { gap: 22px; }
	.objekt { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}