/*
 * Skeleton responsive — hero + navbar (итерация 0).
 */

/* Заголовок «iTarasov.ru» для узкого экрана — по умолчанию скрыт */
.navbar-brand_title { display: none; }

@media (max-width: 1200px) {
	.hero-block { min-height: 360px; }
	.hero-row {
		min-height: 360px;
		padding: 30px 0 60px;
	}
	.hero-photo {
		max-height: 260px;
		margin-right: 24px;
	}
	.hero-name { font-size: 28px; }
	.hero-role { font-size: 18px; }
	.hero-tagline { font-size: 15px; }
	body { padding-top: 56px; }
	[id^="section-"]:not(#section-hero)::before {
		height: 56px;
		margin-top: -56px;
	}
	#section-hero { scroll-margin-top: 56px; }
	.navbar-default .navbar-nav > li > a {
		padding: 15px 9px;
		font-size: 14px;
	}
	.navbar-brand img { max-height: 36px; }
	/* section-experience: без лесенки — блоки по центру; картинки experience-img-top/bottom скрыть */
	#section-experience .experience-timeline {
		--exp-offset: 0;
		--exp-right-margin: 0;
	}
	#section-experience .experience-block {
		margin-right: auto !important;
		margin-left: auto !important;
	}
	#section-experience .experience-img.experience-img-top,
	#section-experience .experience-img.experience-img-bottom {
		display: none !important;
	}
}

@media (max-width: 992px) {
	.hero-row {
		flex-direction: column;
		text-align: center;
		padding: 24px 15px 48px;
	}
	.hero-photo-wrap {
		margin-right: 0;
		margin-bottom: 20px;
	}
	.hero-photo { max-height: 240px; }
	.hero-content { max-width: 100%; }
	.hero-buttons {
		justify-content: center;
		flex-wrap: wrap;
	}
	.hero-buttons .btn-hero-primary,
	.hero-buttons .btn-hero-outline {
		flex: 0 1 auto;
		min-width: 186px;
	}
	/* Кнопки в контактах — перенос при нехватке ширины */
	.contact-buttons .btn {
		flex: 0 1 auto;
		min-width: 186px;
	}
	.navbar-brand { display: none; }
	/* Hero: уменьшить отступ сверху у колонки с картинкой */
	.hero-col-image {
		margin-top: 20px;
	}
	/* Меню: выравнивание по центру */
	.navbar .navbar-collapse {
		text-align: center;
	}
	.navbar .navbar-nav {
		display: inline-block;
		float: none;
		margin: 0 auto;
	}
	.navbar-default .navbar-nav > li > a {
		padding: 12px 6px;
		font-size: 13px;
	}
	.navbar-default .navbar-nav > li:not(:last-child)::after {
		color: rgba(0,0,0,0.4);
		font-weight: 400;
		margin-left: 2px;
	}
	/* section-experience: без лесенки — просто блоки; убрать картинки experience-img-top/bottom */
	#section-experience .experience-timeline {
		--exp-offset: 0;
		--exp-right-margin: 0;
	}
	#section-experience .experience-block {
		margin-right: auto !important;
		margin-left: auto !important;
	}
	#section-experience .experience-img.experience-img-top,
	#section-experience .experience-img.experience-img-bottom {
		display: none !important;
	}
	/* Образование: убрать поднятие картинки (margin-top у колонки) */
	#section-education .education-image-col {
		margin-top: 0;
	}
	/* section-service: плашки под формой, без ограничения высоты секции */
	#section-service .service-two-cols {
		align-items: flex-start;
	}
	#section-service .service-two-cols .service-plaques-col {
		display: flex !important;
		flex-direction: column;
		gap: 24px;
		margin-top: 24px;
	}
	#section-service .service-plaques-col .service-plaque {
		flex: 0 0 auto;
		min-height: auto;
	}
	/* Hero: ряд карточек ролей — на всю ширину экрана */
	.row.hero-roles-row {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}
	/* Образование: отступ сверху у блока с картинкой */
	#section-education .education-image-wrap {
		margin-top: 24px;
	}
}

@media (max-width: 768px) {
	body { padding-top: 50px; }
	[id^="section-"]:not(#section-hero)::before {
		height: 50px;
		margin-top: -50px;
	}
	#section-hero { scroll-margin-top: 50px; }
	/* Hero: отступ от меню до картинки*/
	.hero-section-light {
		padding-top: 5px;
	}
	.hero-row {
		padding-top: 0;
	}
	.hero-col-image {
		margin-top: 0;
		display: flex;
		padding-left: 20px;
		justify-content: center;
		align-items: flex-start;
	}
	/* Hero: плашки «опыт» — одинаковая ширина, по центру */
	.hero-experience-row {
		/* width: 100%; */
		justify-content: center;
		padding-left: 15px;
		padding-right: 15px;
	}
	 .hero-experience-plate {
		flex: 1 1 0;
		min-width: 200px;
	}
	/* Hero: карточки ролей — на всю ширину, минимальные боковые отступы как в Навыках (15px) */
	#section-hero .hero-roles-row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	.hero-role-card {
		margin-left: 5px;
		margin-right: 5px;
		width: 100%;
		box-sizing: border-box;
	}
	/* Мобильная шапка: логотип слева, заголовок по центру, гамбургер справа */
	.navbar-brand_text { display: none !important; }
	.navbar-brand {
		display: block !important;
		order: 0;
		margin-left: 15px;
		padding: 8px 0;
	}
	.navbar-brand img {
		max-height: 28px;
		width: auto;
	}
	.navbar-header {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
	}
	.navbar-brand_title {
		display: block !important;
		order: 1;
		flex: 1;
		position: static;
		left: auto;
		right: auto;
		text-align: center;
		margin: 0;
		padding: 10px 8px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		pointer-events: none;
	}
	.navbar-header .navbar-toggle {
		order: 2;
		position: relative;
		z-index: 1;
		margin-right: 15px;
	}
	.navbar-default .navbar-toggle {
		border-color: #333;
	}
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #333;
	}
	.navbar-default .navbar-toggle:hover,
	.navbar-default .navbar-toggle:focus {
		background-color: #f5f5f5;
	}
	.navbar-nav .dropdown-menu li a {
		padding: 10px 20px;
	}
	/* В свёрнутом меню разделитель « | » не показывать */
	.navbar-default .navbar-nav > li:not(:last-child)::after {
		content: none;
	}
	/* section-experience: без лесенки, без картинок (как для 992px) */
	#section-experience .experience-timeline {
		--exp-offset: 0;
		--exp-right-margin: 0;
	}
	#section-experience .experience-block {
		margin-right: auto !important;
		margin-left: auto !important;
	}
	#section-experience .experience-img-top,
	#section-experience .experience-img-bottom {
		display: none !important;
	}
	/* Hero: на узком экране не использовать 100vw — убирает горизонтальную прокрутку на мобильном */
	.row.hero-roles-row {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}
	/* section-service: отступ между формой и плашками; плашки показывать */
	#section-service .service-two-cols .consultation-form-col {
		margin-bottom: 24px;
	}
	#section-service .service-two-cols .service-plaques-col {
		display: flex !important;
		flex-direction: column;
		gap: 24px;
		margin-top: 24px;
	}
	/* Контакты: отступ после заголовка «Контакты» */
	#section-contact .contact-heading {
		margin-bottom: 1em;
	}
	/* Кнопки hero и контактов — на всю ширину с минимальными боковыми отступами */
	.hero-buttons .btn-hero-primary,
	.hero-buttons .btn-hero-outline {
		width: 100%;
		flex: 1 1 100%;
		min-width: 0;
	}
	.contact-buttons {
		max-width: none;
		width: 100%;
	}
	.contact-buttons .btn {
		width: 100%;
		flex: 1 1 100%;
		min-width: 0;
	}
}