/* ==========================================================================
   Адаптивний шар. Підключається ОСТАННІМ, щоб перебивати правила з
   однаковою специфічністю за порядком, без !important де це можливо.
   Нічого не видаляє — лише перевизначає те, що заважає звужуватись.
   ========================================================================== */

/* --- медіа не вилазять за контейнер ------------------------------------- */
#content img,
#right-column img,
#footer img {
	max-width: 100%;
	height: auto;
}

/* --- бейджі App Store / Google Play -------------------------------------
   Їхній контейнер має display:flex із жорсткою width:74px (успадковано
   з інлайн-стилю), тож два 90-піксельні бейджі стискались до 37px.
   Даємо контейнеру ширину за вмістом. */
#footer .logos-footer-container .u-s12,
#footer .u-s12 {
	width: auto;
	gap: 8px;
	flex-wrap: wrap;
}

#footer .u-s12 > div {
	flex: 0 0 auto;
}

/* --- стрічка забігів -----------------------------------------------------
   Полотно .timeline має фіксовані 1080px, а позначки часу спозиційовані
   абсолютно (left:NNNpx = час забігу). Раніше його тягав JS через
   transform: translate(). JS немає, тому вмикаємо нативну прокрутку. */
#timeline .timeline-container {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

#timeline .timeline-container .timeline {
	position: relative;
}

/* ==========================================================================
   <= 1280px — знімаємо жорсткі ширини десктопного каркаса
   ========================================================================== */
@media (max-width: 1280px) {

	#page {
		width: auto;
		max-width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}

	.full-page {
		width: auto;
		max-width: 100%;
	}

	#hdSpthdSpt {
		min-width: 0;
	}

	#snc-menu-desktop {
		min-width: 0;
	}

	#nav-tab-menu {
		min-width: 0;
	}

	#snc-menu-desktop .nav-tab-menu {
		min-width: 0;
	}

	.frm-login {
		min-width: 0;
	}

	/* --- шапка в звичайний потік ------------------------------------------
	   Обидві верхні смуги були position:fixed, а компенсував їх один
	   фіксований padding-top:83px на меню. Разом зі знятим min-width
	   .frm-login починає переноситись у другий ряд (нижче ~1120px), і
	   жорсткої height:80px перестає вистачати — панель входу лягала
	   поверх меню. Тому нижче 1280px шапка йде звичайним потоком. */
	.avertissement {
		height: auto;
	}

	#dgs-header.avert {
		position: static;
		height: auto;
	}

	#user-controls-container.fix {
		position: static;
		top: auto;
		width: auto;
	}

	#user-controls-container,
	.height-80px {
		height: auto;
	}

	#snc-menu-desktop.top11 {
		padding-top: 0;
	}
}

/* ==========================================================================
   <= 1100px — верхнє меню переноситься замість горизонтального скролу
   ========================================================================== */
@media (max-width: 1100px) {

	#snc-menu-desktop .nav-tab-menu {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	/* у списку стоїть width:90% — його центр не збігався з центром смуги,
	   тому ряди після переносу виглядали зсунутими вліво */
	#menuHoItems {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		column-gap: 6px;
		row-gap: 2px;
		box-sizing: border-box;
		padding: 0 8px;
	}

	/* у списків меню стоїть overflow:hidden — другий ряд пунктів обрізався б */
	#snc-menu-desktop ul {
		overflow: visible;
	}
}

/* ==========================================================================
   <= 1024px — права колонка стає під контент
   ========================================================================== */
@media (max-width: 1024px) {

	#page > #content.col-12,
	#page > #right-column.col-4 {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}

/* ==========================================================================
   <= 900px — внутрішні колонки в стовпчик, таблиці прокручуються
   ========================================================================== */
@media (max-width: 900px) {

	/* --- жовта плашка попередження ---------------------------------------
	   Була position:fixed з height:10vh — на вузькому екрані 4 рядки тексту
	   туди не влазять і обрізаються, а герб (position:absolute; right:0)
	   накладався поверх тексту. Пускаємо блок у потік з висотою за вмістом. */
	/* позиціонування шапки вже знято в блоці <=1280; тут лише оформлення */
	#dgs-header.avert {
		padding: 10px 12px;
	}

	#dgs-header .dgs-link,
	#dgs-header .dgs-inner {
		height: auto;
	}

	#dgs-header .dgs-inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	#dgs-header .dgs-text {
		font-size: 14px;
		line-height: 1.3;
		text-align: center;
	}

	#dgs-header .dgs-text .dgs-l2 {
		font-size: 13px;
	}

	/* герб — у потік, а не поверх тексту */
	#dgs-header .dgs-logo {
		position: static;
		transform: none;
		height: 44px;
	}

	/* --- панель входу ----------------------------------------------------
	   .snc-header-form-parent — нерозривний flex шириною ~720px
	   (17em + 200px + 2x100px + відступи). Дозволяємо перенос. */
	/* Логотип (.bloc1) і перемикач TURF/SPORT (.bloc2) — в один ряд,
	   форма входу (.bloc3) — окремим рядом під ними. */
	.frm-login {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	.bloc1,
	.bloc2 {
		width: auto;
		flex: 0 1 auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 10px 0;
		box-sizing: border-box;
	}

	.bloc3 {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}

	/* обгортка перемикача має width:40% — це працює лише поки .bloc2
	   широкий. Коли він стиснувся до вмісту, .st-switch (210px) вилазив. */
	.bloc2 .hd-switch-sites {
		width: auto;
	}

	#user-controls-container,
	.height-80px {
		height: auto;
	}

	.float-rgt {
		float: none;
	}

	.snc-header-form-parent {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		width: 100%;
		max-width: 100%;
		margin: 0;
		box-sizing: border-box;
	}

	.snc-header-form-parent .snc-header-input-login,
	.snc-header-form-parent .snc-header-input-pass {
		width: 100%;
		max-width: 320px;
		margin: 0;
	}

	/* поля тягнуться за контейнером замість фіксованих 17em / 126px */
	.width-17,
	.snc-header-input-pass .withPassWord {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	.snc-header-form-parent .snc-header-btn .snc-header-signin-btn {
		margin-right: 8px;
	}

	#content .col-8-12,
	#content .col-4-12 {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 12px;
	}

	/* Це діаграма Ганта: назви іподромів ліворуч мають лишатись на одній
	   лінії з рядками часової сітки. Тому не переносимо їх над сіткою, а
	   лише звужуємо колонку; сітка при цьому гортається по горизонталі.
	   .timeline-container має margin-left:225px під колонку 250px —
	   зсув треба міняти разом із шириною, інакше рядки розповзаються. */
	#timeline .prog-meetings {
		float: left;
		width: 170px;
		margin-left: 0;
	}

	#timeline .timeline-container {
		margin-left: 170px;
	}

	#timeline .prog-meetings .prog-meeting-name span.meeting-info {
		padding-right: 4px;
	}

	/* широкі таблиці не ламають сторінку */
	.table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- вкладки заїздів (COURSES / 100% QUINTÉ / ...) --------------------
	   li мають float:left, а посилання всередині — жорсткі width:78px і
	   height:14px. Довгі підписи не вміщаються: текст вилазить за межі
	   пігулки, а ряди стоять за 17px один від одного й налазять.
	   Переводимо на flex із розміром за вмістом. */
	#programme nav ul.tabbed-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding-bottom: 1em;
	}

	#programme nav ul.tabbed-menu li {
		float: none;
		margin-right: 0;
	}

	#programme nav ul.tabbed-menu li a {
		display: block;
		width: auto;
		height: auto;
		padding: 6px 10px;
		line-height: 1.2;
		white-space: nowrap;
		box-sizing: border-box;
	}

	/* --- "Course évènement du jour" ---------------------------------------
	   .results (54%) і .photo (46%) стояли поруч — на вузькому екрані
	   колонка з конями і жокеями стискалась і текст ліз у два рядки.
	   Ставимо одне під одним. */
	#course-evenement .arrivee .results,
	#course-evenement .arrivee .photo {
		float: none;
		width: 100%;
		padding-right: 0;
	}

	#course-evenement .arrivee .photo > img {
		float: none;
		margin: 8px auto 3px;
		max-width: 100%;
		height: auto;
	}

	#course-evenement .race-description .race-informations {
		float: none;
		width: 100%;
	}

	/* --- "Prochaines courses" ---------------------------------------------
	   Три картки по 33.3% з жорсткою height:10.7em. Кнопка "Parier" має
	   position:absolute, але в .race немає position — вона зачіплялась
	   не за ту базу. Розкладаємо картки в стовпчик, кнопку — у потік. */
	#next-races-home-footer .race {
		float: none;
		width: 100%;
		height: auto;
		position: relative;
		border-right: 0;
		border-bottom: 1px solid #e9f2f1;
		overflow: hidden;
	}

	/* height:13px з app.min.css тримав вміст картки в 13px заввишки,
	   через що кнопка "Parier" вивалювалась під картку */
	#next-races-home-footer .race .next-race {
		width: auto;
		height: auto;
		overflow: hidden;
		float: none;
		display: block;
		padding-left: 10px;
	}

	#next-races-home-footer .race .next-race .button {
		position: static;
		margin-top: .5em;
	}

	/* --- таблиці заїздів (8 колонок) --------------------------------------
	   У 445px вони стискались і стовпці злипались. Робимо саму таблицю
	   прокручуваною, щоб вкладки над нею лишались на місці. */
	#programme table.ca {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#programme table.ca thead,
	#programme table.ca tbody {
		display: table;
		width: 100%;
		min-width: 620px;
	}

	/* підвал: чотири колонки по дві */
	#footer .row .col-4 {
		width: 49%;
		margin-right: 2%;
	}

	#footer .row .col-4:nth-child(2n) {
		margin-right: 0;
	}
}

/* ==========================================================================
   <= 640px — мобільний
   ========================================================================== */
@media (max-width: 640px) {

	/* .bloc1 (лого) і .bloc2 (перемикач) лишаються в одному ряду —
	   ширину їм не чіпаємо, інакше вони розповзуться в стовпчик */
	.bloc3 {
		width: 100%;
		flex: 0 0 100%;
		padding: 10px 0;
	}

	#page {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* підвал: чотири колонки в один стовпчик */
	#footer .row .col-4 {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 14px;
	}
}