/* =========================================================
   Toyota-Yug — main stylesheet
   Mobile-first, CSS Grid/Flexbox, custom properties.
   ========================================================= */

:root {
	--ty-bg: #ffffff;
	--ty-bg-soft: #f4f5f7;
	--ty-ink: #16181d;
	--ty-ink-soft: #565b66;
	--ty-line: #e6e8ec;
	--ty-primary: #e11d2e;
	--ty-primary-dark: #b3141f;
	--ty-primary-soft: #fdeceb;
	--ty-dark: #14161b;
	--ty-dark-soft: #1f222a;
	--ty-white: #ffffff;
	--ty-radius: 14px;
	--ty-radius-sm: 8px;
	--ty-shadow: 0 10px 30px rgba(20, 22, 27, .08);
	--ty-shadow-sm: 0 4px 14px rgba(20, 22, 27, .06);
	--ty-container: 1220px;
	--ty-font: 'Manrope', 'Golos Text', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--ty-transition: .2s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; max-width: 100%; }
body {
	margin: 0;
	font-family: var(--ty-font);
	color: var(--ty-ink);
	background: var(--ty-bg);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.skip-link {
	position: fixed; top: -60px; left: 0;
	background: var(--ty-primary); color: #fff;
	padding: .75em 1.25em; z-index: 1000;
	transition: top var(--ty-transition);
}
.skip-link:focus { top: 0; }

.container {
	width: 100%;
	max-width: var(--ty-container);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Buttons ---------- */
.ty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .85em 1.6em;
	border-radius: 999px;
	font-weight: 700;
	font-size: .95rem;
	border: 2px solid transparent;
	transition: transform var(--ty-transition), background var(--ty-transition), color var(--ty-transition), box-shadow var(--ty-transition);
	white-space: nowrap;
}
.ty-btn--primary {
	background: var(--ty-primary);
	color: #fff;
	box-shadow: 0 8px 20px rgba(225, 29, 46, .28);
}
.ty-btn--primary:hover { background: var(--ty-primary-dark); transform: translateY(-1px); }
.ty-btn--ghost {
	background: transparent;
	color: var(--ty-ink);
	border-color: var(--ty-line);
}
.ty-btn--ghost:hover { border-color: var(--ty-primary); color: var(--ty-primary); }

.ty-link {
	color: var(--ty-primary);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: .3em;
}
.ty-link::after { content: '→'; transition: transform var(--ty-transition); }
.ty-link:hover::after { transform: translateX(3px); }

/* ---------- Header ----------
   Mobile-first: the base rules below (no media query) are the phone
   layout — off-canvas nav, burger visible, phone number tucked inside
   the nav panel. From 1140px up there is reliably enough room for the
   logo + all 6 menu links + phone + CTA button in one row (measured
   with generous padding), so that's where it switches to inline nav.
   From 1400px up everything gets a little more breathing room again
   since there's plenty of space to spare on large screens. */
.ty-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.9);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--ty-line);
	transition: box-shadow var(--ty-transition), padding var(--ty-transition);
}
.ty-header.is-scrolled {
	box-shadow: 0 8px 24px rgba(20, 22, 27, .08);
	background: rgba(255,255,255,.97);
}
.ty-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1rem;
	padding: .85em 0;
	transition: padding var(--ty-transition);
}
.ty-header.is-scrolled .ty-header__inner { padding: .55em 0; }
.ty-header__brand { flex-shrink: 0; min-width: 0; }
.ty-header__brand img { max-height: 44px; width: auto; transition: max-height var(--ty-transition); }
.ty-header.is-scrolled .ty-header__brand img { max-height: 36px; }
.ty-header__site-title {
	font-size: 1.15rem;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 42vw;
}

/* Off-canvas nav panel (mobile default) */
.ty-main-nav {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(300px, 84vw);
	height: 100vh;
	height: 100dvh;
	background: #fff;
	padding: 78px 22px 20px;
	transform: translateX(100%);
	transition: transform .28s ease;
	box-shadow: -10px 0 30px rgba(0,0,0,.15);
	overflow-y: auto;
	scrollbar-width: thin;
	z-index: 90;
}
.ty-main-nav::-webkit-scrollbar { width: 4px; }
.ty-main-nav.is-open { transform: translateX(0); }

.ty-main-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.ty-main-nav__list a {
	font-weight: 600;
	font-size: .95rem;
	padding: .7em 0;
	display: block;
	position: relative;
	color: var(--ty-ink);
	border-bottom: 1px solid var(--ty-line);
}
.ty-main-nav__list a::after {
	content: '';
	position: absolute; left: 0; right: 100%; bottom: -1px;
	height: 2px; background: var(--ty-primary);
	transition: right var(--ty-transition);
}
.ty-main-nav__list a:hover::after,
.ty-main-nav__list .current-menu-item a::after { right: 0; }

.ty-main-nav__mobile-contacts {
	display: block;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ty-line);
}
.ty-main-nav__mobile-contacts .ty-phone-block__number { display: block; font-size: 1.1rem; font-weight: 800; }
.ty-main-nav__mobile-contacts .ty-phone-block__hours { display: block; margin: .3em 0 .8em; color: var(--ty-ink-soft); font-size: .82rem; }
.ty-main-nav__socials { display: flex; gap: .5rem; }
.ty-main-nav__socials .ty-social {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--ty-bg-soft); color: var(--ty-ink);
}

.ty-header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-shrink: 0; }
.ty-header__actions .ty-phone-block { display: none; }
.ty-header__actions .ty-btn--primary { padding: .65em 1.1em; font-size: .82rem; white-space: nowrap; }

.ty-phone-block {
	display: flex;
	align-items: center;
	gap: .5em;
	color: var(--ty-ink);
}
.ty-phone-block__icon {
	flex-shrink: 0;
	color: var(--ty-primary);
	background: var(--ty-primary-soft);
	border-radius: 50%;
	padding: 7px;
	box-sizing: content-box;
	display: flex;
}
.ty-phone-block__icon svg { width: 16px; height: 16px; }
.ty-phone-block__text { display: flex; flex-direction: column; line-height: 1.2; }
.ty-phone-block__number { font-weight: 800; font-size: .9rem; white-space: nowrap; }
.ty-phone-block:hover .ty-phone-block__number { color: var(--ty-primary); }
.ty-phone-block__hours { font-size: .7rem; color: var(--ty-ink-soft); white-space: nowrap; }

.ty-burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border: 1px solid var(--ty-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ty-ink);
	flex-shrink: 0;
	padding: 0;
}
.ty-burger__icon { display: block; }
.ty-burger__icon--close { display: none; }
.ty-burger[aria-expanded="true"] .ty-burger__icon--open { display: none; }
.ty-burger[aria-expanded="true"] .ty-burger__icon--close { display: block; }

/* Desktop: from here on there is reliable room for one inline row */
@media (min-width: 1140px) {
	.ty-header__inner { gap: 1.8rem; padding: 1.1em 0; }
	.ty-header.is-scrolled .ty-header__inner { padding: .65em 0; }
	.ty-header__brand img { max-height: 54px; }
	.ty-header.is-scrolled .ty-header__brand img { max-height: 42px; }
	.ty-header__site-title { max-width: none; }

	.ty-main-nav {
		position: static;
		top: auto; right: auto; bottom: auto;
		width: auto; height: auto;
		background: transparent;
		padding: 0;
		transform: none;
		box-shadow: none;
		overflow: visible;
		z-index: auto;
	}
	.ty-main-nav__list { flex-direction: row; flex-wrap: nowrap; gap: 1.35rem; }
	.ty-main-nav__list a { padding: .4em 0; border-bottom: 0; white-space: nowrap; }
	.ty-main-nav__mobile-contacts { display: none; }

	.ty-header__actions { gap: 1rem; }
	.ty-header__actions .ty-phone-block { display: flex; }
	.ty-header__actions .ty-btn--primary { padding: .75em 1.4em; font-size: .9rem; }
	.ty-phone-block__number { font-size: 1rem; }
	.ty-phone-block__hours { font-size: .74rem; }

	.ty-burger { display: none; }
}

/* Large desktop: a little extra breathing room where there's plenty of space */
@media (min-width: 1400px) {
	.ty-header__inner { gap: 2.2rem; }
	.ty-main-nav__list { gap: 1.7rem; }
	.ty-main-nav__list a { font-size: 1rem; }
	.ty-header__actions { gap: 1.2rem; }
	.ty-phone-block__number { font-size: 1.05rem; }
}

/* ---------- Breadcrumbs ---------- */
.ty-breadcrumbs {
	background: var(--ty-bg-soft);
	font-size: .85rem;
	color: var(--ty-ink-soft);
}
.ty-breadcrumbs .container { padding-top: .6em; padding-bottom: .6em; }
.ty-breadcrumbs a { color: var(--ty-ink-soft); }
.ty-breadcrumbs a:hover { color: var(--ty-primary); }
.ty-breadcrumbs span:last-child { color: var(--ty-ink); font-weight: 600; }

/* ---------- Sections ---------- */
.ty-section { padding: 56px 0; }
.ty-section:nth-of-type(even) { background: var(--ty-bg-soft); }
.ty-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 28px;
}
.ty-section__head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ty-section__head h2 a:hover { color: var(--ty-primary); }
.ty-section__cta { text-align: center; margin-top: 32px; }
.ty-section__head-links { display: flex; align-items: center; gap: 1rem; }
.ty-rss { color: var(--ty-ink-soft); font-size: .85rem; }

/* ---------- Hero / About ---------- */
.ty-hero-about { padding-top: 40px; }
.ty-hero-about__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}
.ty-hero-about__text h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.ty-hero-about__body { color: var(--ty-ink-soft); margin-bottom: 1.6em; }
.ty-hero-about__media img {
	border-radius: var(--ty-radius);
	box-shadow: var(--ty-shadow);
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4/3;
}

/* ---------- Services ---------- */
.ty-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}
.ty-service-card {
	background: #fff;
	border-radius: var(--ty-radius);
	overflow: hidden;
	box-shadow: var(--ty-shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform var(--ty-transition), box-shadow var(--ty-transition);
	border: 1px solid var(--ty-line);
}
.ty-service-card:hover { transform: translateY(-4px); box-shadow: var(--ty-shadow); }
.ty-service-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--ty-bg-soft); }
.ty-service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ty-service-card__media--placeholder {
	display: flex; align-items: center; justify-content: center;
	color: var(--ty-primary);
	background: var(--ty-primary-soft);
}
.ty-service-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: .4rem; }
.ty-service-card__title { font-weight: 700; font-size: 1.02rem; }
.ty-price { color: var(--ty-primary); font-weight: 800; font-size: .95rem; }

/* ---------- Articles ---------- */
.ty-articles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
}
.ty-articles__grid--list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ty-article-card {
	background: #fff;
	border-radius: var(--ty-radius);
	overflow: hidden;
	box-shadow: var(--ty-shadow-sm);
	border: 1px solid var(--ty-line);
	display: flex;
	flex-direction: column;
}
.ty-article-card__media { aspect-ratio: 4/3; background: var(--ty-bg-soft); overflow: hidden; }
.ty-article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ty-article-card:hover .ty-article-card__media img { transform: scale(1.05); }
.ty-article-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.ty-article-card__body time { color: var(--ty-ink-soft); font-size: .8rem; }
.ty-article-card__body h3, .ty-article-card__body h2 { font-size: 1.05rem; margin: 0; }
.ty-article-card__excerpt { color: var(--ty-ink-soft); font-size: .92rem; }

/* ---------- Gallery ---------- */
.ty-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}
.ty-gallery__item {
	position: relative;
	display: block;
	border-radius: var(--ty-radius-sm);
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--ty-bg-soft);
}
.ty-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ty-gallery__item:hover img { transform: scale(1.08); }
.ty-gallery__caption {
	position: absolute; inset: auto 0 0 0;
	padding: 10px 12px 8px;
	font-size: .8rem; font-weight: 600; color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
	opacity: 0;
	transition: opacity var(--ty-transition);
}
.ty-gallery__item:hover .ty-gallery__caption { opacity: 1; }

.ty-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(10,10,12,.92);
	display: flex; align-items: center; justify-content: center;
	flex-direction: column;
	padding: 40px 20px;
}
.ty-lightbox[hidden] { display: none; }
.ty-lightbox__image { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: 8px; }
.ty-lightbox__caption { color: #fff; margin-top: 14px; font-size: .9rem; }
.ty-lightbox__close, .ty-lightbox__prev, .ty-lightbox__next {
	position: absolute;
	background: rgba(255,255,255,.1);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 44px; height: 44px;
	font-size: 1.6rem;
	display: flex; align-items: center; justify-content: center;
}
.ty-lightbox__close { top: 20px; right: 20px; }
.ty-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.ty-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.ty-lightbox__close:hover, .ty-lightbox__prev:hover, .ty-lightbox__next:hover { background: var(--ty-primary); }

/* ---------- Contact strip / Map ---------- */
.ty-contact__strip {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.ty-contact__item {
	background: #fff;
	border: 1px solid var(--ty-line);
	border-radius: var(--ty-radius);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: .4em;
}
.ty-contact__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ty-ink-soft); }
.ty-contact__value { font-weight: 700; font-size: 1.05rem; }
.ty-contact__value--link:hover { color: var(--ty-primary); }

.ty-map { margin-top: 36px; border-radius: var(--ty-radius); overflow: hidden; box-shadow: var(--ty-shadow-sm); }
.ty-map iframe { width: 100%; display: block; border: 0; }

.ty-footer__map { line-height: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ty-footer__map iframe { width: 100%; height: 340px; display: block; border: 0; filter: grayscale(.2) contrast(1.05); }

/* ---------- Documents ---------- */
.ty-documents__list { display: grid; gap: 10px; }
.ty-documents__item a {
	display: flex; align-items: center; gap: 12px;
	background: #fff; border: 1px solid var(--ty-line);
	border-radius: var(--ty-radius-sm);
	padding: 12px 16px;
	transition: border-color var(--ty-transition), box-shadow var(--ty-transition);
}
.ty-documents__item a:hover { border-color: var(--ty-primary); box-shadow: var(--ty-shadow-sm); }
.ty-documents__ext {
	background: var(--ty-primary-soft); color: var(--ty-primary);
	font-size: .72rem; font-weight: 800; padding: .3em .6em; border-radius: 6px;
}
.ty-documents__title { font-weight: 600; flex: 1; }
.ty-documents__size { color: var(--ty-ink-soft); font-size: .82rem; }

/* ---------- Generic pages ---------- */
.ty-page { padding: 48px 0; }
.ty-page--narrow { max-width: 820px; }
.ty-page__title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.ty-page__meta { color: var(--ty-ink-soft); margin-top: -.6em; }
.ty-page__thumb { margin: 20px 0; border-radius: var(--ty-radius); overflow: hidden; }
.ty-page__content { color: var(--ty-ink-soft); }
.ty-page__content p { margin-bottom: 1.2em; }
.ty-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 24px; }
.ty-tag { background: var(--ty-bg-soft); border-radius: 999px; padding: .4em .9em; font-size: .82rem; }
.ty-404 { text-align: center; padding: 100px 0; }

/* ---------- Comments ---------- */
.ty-comments { margin-top: 48px; border-top: 1px solid var(--ty-line); padding-top: 32px; }
.ty-comments__list { display: grid; gap: 18px; margin-bottom: 24px; }
.ty-comments__list .comment-body { background: var(--ty-bg-soft); border-radius: var(--ty-radius-sm); padding: 16px; }
.comment-form p { margin-bottom: 12px; }
.comment-form input, .comment-form textarea { width: 100%; padding: .8em 1em; border: 1px solid var(--ty-line); border-radius: var(--ty-radius-sm); }

/* ---------- Pagination ---------- */
.ty-pagination { margin-top: 32px; display: flex; justify-content: center; gap: .5rem; }
.ty-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; border-radius: 8px;
	border: 1px solid var(--ty-line);
}
.ty-pagination .page-numbers.current { background: var(--ty-primary); color: #fff; border-color: var(--ty-primary); }

/* ---------- Footer ---------- */
.ty-footer { background: var(--ty-dark); color: #b8bdc7; margin-top: 40px; }
.ty-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding: 56px 0 36px;
}
.ty-footer__title { color: #fff; font-weight: 700; margin-bottom: .8em; }
.ty-footer__col p { margin-bottom: .5em; }
.ty-footer__col a:hover { color: #fff; }
.ty-footer__menu { display: grid; gap: .5rem; }
.ty-footer__socials { display: flex; gap: .6rem; }
.ty-footer__socials .ty-social {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,.08); color: #fff;
	transition: background var(--ty-transition);
}
.ty-footer__socials .ty-social:hover { background: var(--ty-primary); }
.ty-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.ty-footer__bottom-inner {
	padding: 18px 0;
	font-size: .82rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
}
.ty-footer__policy-link { color: #9199a6; }
.ty-footer__policy-link:hover { color: #fff; }

/* ---------- Responsive (non-header sections) ---------- */
@media (min-width: 700px) {
	.ty-hero-about__grid { grid-template-columns: 1.1fr .9fr; }
	.ty-contact__strip { grid-template-columns: repeat(3, 1fr); }
	.ty-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.ty-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
	.ty-section { padding: 40px 0; }
}

@media (max-width: 380px) {
	.container { padding: 0 14px; }
	.ty-header__inner { gap: .7rem; }
	.ty-header__actions { gap: .4rem; }
	.ty-header__actions .ty-btn--primary { padding: .6em .85em; font-size: .78rem; }
	.ty-burger { width: 38px; height: 38px; }
	.ty-header__site-title { max-width: 32vw; font-size: 1.05rem; }
}