/* ============================================================
   Мобильная версия (до 767 px; часть правил — планшет до 1024 px)

   Подключается последним (functions.php, km-mobile): переопределяет
   прежние стили только на узком экране, десктоп не меняется.
   По итогам аудита на 360 / 414 / 768 px.
   ============================================================ */

/* ---------- Планшет ---------- */
@media (max-width: 1024px) {
	.film-grid { --card-min: 150px; }
}

@media (max-width: 767px) {

	/* ---------- База ---------- */

	:root { --gutter: 16px; }
	/* страховка от горизонтальной прокрутки; clip, а не hidden — sticky продолжает работать */
	html, body { overflow-x: clip; }
	body { font-size: 1rem; line-height: 1.55; -webkit-text-size-adjust: 100%; }

	.section { padding-block: var(--sp-10); }
	.section--tight { padding-block: var(--sp-8); }

	h1,
	.film-title,
	.person-name { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: break-word; }

	/* ---------- Шапка: компактная, кнопки 44 px ---------- */

	.header__inner { gap: var(--sp-2); }
	.logo { min-height: 44px; }
	.logo img { width: 30px; height: 30px; }
	.icon-btn { width: 44px; height: 44px; }
	.header__tools { gap: var(--sp-2); }

	.mobile-menu {
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: var(--sh-lg);
	}
	.mobile-menu__nav a { min-height: 48px; display: flex; align-items: center; padding: 0; }
	.mobile-search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); position: relative; }
	.mobile-search input {
		flex: 1;
		min-width: 0;
		height: 44px;
		padding: 0 var(--sp-4);
		font-size: 1rem; /* меньше 16 px — iOS масштабирует страницу при фокусе */
		color: var(--text);
		background: var(--surface-2);
		border: 1px solid var(--border-strong);
		border-radius: var(--r-sm);
	}
	.mobile-search button { height: 44px; }

	/* ---------- Заголовки секций и ленты ---------- */

	.section-head { flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-5); }
	.section-head > div:first-child { flex: 1 1 100%; min-width: 0; }
	.section-head h2 { font-size: var(--fs-2xl); }
	.section-head > div:last-child:not(:first-child) { flex-wrap: wrap; }
	/* стрелки ленты не нужны на тач-экране — лента листается пальцем */
	.rail-nav { display: none; }
	.rail { grid-auto-columns: 140px; }

	/* ---------- Главная: hero короче ---------- */

	.hero__inner,
	.hero--drift .hero__inner { padding-block: var(--sp-8) var(--sp-8); }
	.hero__title,
	.hero--drift .hero__title { font-size: 2rem; line-height: 1.1; }
	.hero__lead,
	.hero--drift .hero__lead { font-size: 1rem; margin-top: var(--sp-3); }
	.hero__actions,
	.hero--drift .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
	.hero__stats,
	.hero--drift .hero__stats { gap: var(--sp-6); margin-top: var(--sp-6); }
	/* летающие постеры за текстом на узком экране мешают читать */
	.drift { display: none; }

	/* ---------- Кнопки, чипы, поля: цель касания 44 px ---------- */

	.btn { min-height: 44px; }
	.btn--sm { min-height: 40px; }
	.select { min-height: 44px; font-size: 1rem; }
	.chip,
	.qchip { min-height: 40px; display: inline-flex; align-items: center; }
	.view-switch .view-switch__btn,
	.view-switch button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	.abc__item { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
	.pagination a,
	.pagination span { height: 44px; min-width: 40px; padding: 0 4px; }
	.breadcrumbs { font-size: var(--fs-sm); }
	.breadcrumbs a { display: inline-block; padding-block: 6px; }
	.premiere-nav__link { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-md); }
	.tabs__btn { min-height: 44px; white-space: nowrap; flex: 0 0 auto; }
	.section-head__link { padding-block: 12px; }
	.film-genres a,
	.film-collections a { min-height: 36px; display: inline-flex; align-items: center; }
	.facts__more { display: inline-flex; align-items: center; min-height: 44px; }

	/* мелкий текст: не меньше 12 px */
	.mc__rating,
	.rating,
	.aw-state { font-size: 0.75rem; }

	/* ---------- Каталог: панель и сетка по 2 постера ---------- */

	.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
	.toolbar__count { margin-left: auto; }
	.toolbar__right { display: flex; flex: 1 1 100%; gap: var(--sp-2); }
	.toolbar__right .select { flex: 1; min-width: 0; }

	.film-grid,
	.film-grid--dense,
	.film-grid--wide,
	.filmography-grid,
	.persons-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-5) var(--sp-3);
	}
	.mc__title { font-size: var(--fs-md); line-height: 1.3; }

	.role-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-block: var(--sp-5); }

	/* ---------- Страница фильма ---------- */

	.film-hero { padding-block: var(--sp-4) var(--sp-8); }
	.film-layout { gap: var(--sp-5); }
	/* постер и кнопки — в одну строку, а не постер на пол-экрана */
	.film-poster {
		display: grid;
		grid-template-columns: 128px minmax(0, 1fr);
		column-gap: var(--sp-4);
		align-items: start;
		max-width: none;
	}
	.film-poster > * { grid-column: 2; }
	.film-poster > .film-poster__img { grid-column: 1; grid-row: 1 / span 4; width: 100%; }
	.film-poster__actions { margin-top: 0; flex-wrap: wrap; }
	.film-poster__src { margin-top: var(--sp-3); }
	.film-trailer-btn { margin: 0 0 var(--sp-3); }

	/* инфо-блок: подпись слева, значение справа — вдвое короче столбика */
	.film-info { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); }
	.film-info dt { margin-top: 0; font-size: var(--fs-sm); }

	.tabs { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
	.frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); }
	.people-grid .pc__name,
	.pc__name { font-size: var(--fs-sm); line-height: 1.25; }

	/* связанное в статье: строки жмутся, счётчик фильмов уезжает */
	.film-row { grid-template-columns: 68px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); }
	.person-row { grid-template-columns: 68px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); }
	.person-row__count { display: none; }

	/* ---------- Страница персоны ---------- */

	.person-hero { padding-block: var(--sp-4) var(--sp-8); }
	.person-layout > aside {
		display: grid;
		grid-template-columns: 128px minmax(0, 1fr);
		column-gap: var(--sp-4);
		align-items: start;
	}
	.person-layout > aside .person-photo { width: 100%; max-width: 100%; }
	.person-layout > aside > div:not(.person-photo) { margin-top: 0 !important; }

	/* ---------- Подвал ---------- */

	.footer { padding-block: var(--sp-10) calc(var(--sp-8) + env(safe-area-inset-bottom)); }
	.footer__grid { gap: var(--sp-6); }
	.footer__cols a { display: inline-block; padding-block: 5px; }
	.footer__cols--years { grid-template-columns: repeat(4, max-content); column-gap: var(--sp-5); }

	/* подвал: колонки «Жанры» и «Разделы» — по тапу (details) */
	.footer__col-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-4);
		width: 100%;
		margin-bottom: 0;
		padding-block: var(--sp-3);
		font-size: var(--fs-sm);
		letter-spacing: 0.04em;
		color: var(--text-secondary);
		cursor: pointer;
	}
	/* шеврон: две стороны рамки, повёрнутые на 45° */
	.footer__col-title::after {
		content: "";
		flex: none;
		width: 8px; height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--dur-fast, .15s) var(--ease, ease);
	}
	.footer__col[open] > .footer__col-title::after { transform: rotate(-135deg); }
	.footer__col[open] > .footer__col-title { margin-bottom: var(--sp-2); }
	.footer__col > .footer__cols { padding-bottom: var(--sp-2); }
	/* на узком экране три колонки жанров не читаются — берём две */
	.footer__cols--genres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }

	/* ---------- Юридические ссылки: столбиком, без точек ---------- */
	/*
	 * Точки-разделители на узком экране не нужны: строки и так порознь.
	 * Каждая ссылка — с новой строки (копирайт, «Информация о проекте»,
	 * дисклеймер и оба документа), поэтому flex-ряды складываем
	 * в колонку.
	 */
	.footer .dot { display: none; }
	.footer__legal-copy,
	.footer__legal-links {
		flex-direction: column;
		gap: var(--sp-2);
	}
}

/* очень узкие экраны (≤ 360): в каталоге персон — по 2, в касте — по 2 */
@media (max-width: 380px) {
	.people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.film-poster,
	.person-layout > aside { grid-template-columns: 112px minmax(0, 1fr); }
}

/* Планшет 768–1023: пункты меню переносились в 2–3 строки и вылезали за край
   (scrollWidth 777 при 768). Меню доступно через бургер, поиск остаётся в шапке. */
@media (min-width: 768px) and (max-width: 1023px) {
	.header__nav { display: none; }
	.header__tools { margin-left: auto; }
}

/* Поиск в мобильном меню нужен только там, где спрятан поиск в шапке. */
@media (min-width: 768px) {
	.mobile-search { display: none; }
}