/* wave4: планшет 481-1024 */

/* ============================================================
   Задача: привести главную к макету планшета (800px).
   Причина перебора по высоте (14900 vs 9873 в макете): все правки
   этого проекта под мобильные раскладки скоуплены в
   @media (max-width:480px), поэтому диапазон 481-1024 достаётся
   десктопным грид-раскладкам (figma-home.css), которые на такой
   узкой ширине физически не помещаются в 3(4) колонки и схлопываются
   в 1 колонку через собственные @media (max-width:860px) —
   в макете же на этой ширине у большинства блоков 2 колонки (у
   широких категорийных карточек — 3). Переопределяем только
   grid-template-columns у уже существующих сеток, макет/DOM не трогаем.
   ============================================================ */
@media (min-width:481px) and (max-width:1024px){

  /* ----- Плитки каталога специалистов (.ct): в макете 2 колонки -----
     НО только с 768px. На 481-767 карточка выходит 220-280px, а картинка
     внутри зафиксирована `flex:0 0 180px` — тексту оставалось ~40px, и
     заголовок «Здоровье и качество жизни» вставал вертикально, по букве
     в строке (замер: span 42x486 при окне 500px). Ниже 768 держим одну
     колонку: карточка 460px, тексту достаётся ~250px. */
  body .fg .cat__grid{
    grid-template-columns:minmax(0,1fr);
  }

  @media (min-width:768px){
    body .fg .cat__grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
  }

  /* ----- Широкие карточки (.cw «Магазины и шоппинг» и т.п.):
     в макете остаются в 3 колонки даже на планшете (карточка узкая —
     фото+заголовок, а не фото+текст, как у .ct) ----- */
  body .fg .cat__wide{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  /* ----- Блок цифр: в макете обе группы (4 и 3 значения) — по 2
     колонки в ряд ----- */
  body .fg .nums__grid--4,
  body .fg .nums__grid--3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* ----- Карточки статей блога (.bc): в макете 2 колонки, компактные
     карточки, а не одна широкая на всю ширину ----- */
  body .fg .blog__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* ----- Футер: в макете «Специалисты» и «Платформа» — две колонки
     рядом, блок с логотипом/слоганом/телефоном — над ними на всю
     ширину (тот же приём, что тема уже применяет для 1024-1101px в
     figma-home.css, здесь просто расширяем этот диапазон вниз, т.к.
     figma-home.css сама схлопывает всё в 1 колонку уже при <=860px) ----- */
  body .fg .ftr__in{
    grid-template-columns:1fr 1fr;
    gap:30px 40px;
  }
  body .fg .ftr__brand{
    grid-column:1/-1;
  }
  body .fg .ftr__two{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* ----- Первый экран: в макете заголовок+подзаголовок стоят НАД фото
     специалистов. figma-home.css на этой ширине переводит .hero__text в
     position:static (строка ~266), из-за чего он идёт в порядке разметки
     ПОСЛЕ .hero__img. Мобильный диапазон (gw2-mob.css, <=480px) чинит это
     через flex-column + order — переносим тот же приём на планшет. Гоча
     проекта: order нужно явно задать ОБОИМ детям .hero__in, иначе поедут. ----- */
  body .fg .hero__in{display:flex;flex-direction:column}
  body .fg .hero__text{order:1;text-align:center;padding:16px 0 6px}
  body .fg .hero__img{order:2}

  /* ----- Вкладки «Знакомьтесь!»: реальные классы в разметке —
     .meet_tabs/.meet_tab (одинарное подчёркивание, common-home), а НЕ
     .meet__tabs из мёртвого figma-home.css (там этот класс нигде в DOM не
     встречается — те правила ни на что не влияют). Дизайн вкладок на
     десктопе задаёт gw1-mid.css: текстовые пункты с подчёркиванием,
     flex-wrap не задан явно, поэтому остаётся flex-wrap:wrap из базового
     .meet_tabs в figma-redesign.css. На 1440 оба пункта помещаются в
     одну строку и wrap не срабатывает, но на планшете (~690px контейнер)
     их суммарная ширина (700px+ при font-size:20px) превышает контейнер
     и второй таб уходит на новую строку — из-за чего оба выглядят как
     полноширинные "активные" блоки. Фикс: nowrap + компактные размеры,
     чтобы оба текстовых таба уместились в один ряд, как в макете. Дизайн
     (подчёркивание, не пилюли) не меняем — это уже принято на десктопе.
     Классы meet_tabs/meet_tab не переименовываем — на них завязан
     figma-faq.js (переключение вкладок), проверено кликом в браузере. ----- */
  body.common-home .meet_tabs{
    flex-wrap:nowrap;
    gap:4px;
  }
  body.common-home .meet_tabs .meet_tab{
    margin:0 4px;
    padding:8px 4px 12px;
    flex:0 1 auto;
    min-width:0;
  }
  body.common-home .meet_tabs .meet_tab h2.home-widget-title{
    font-size:15px;
    white-space:normal;
  }

  /* ----- Цифры: третий (последний) элемент в nums__grid--3 при 2 колонках
     остаётся один в своём ряду и через grid по умолчанию прижат к левой
     колонке. В макете он отцентрован под всей шириной блока — растягиваем
     его на обе колонки (текст уже center благодаря .nums__grid) ----- */
  body .fg .nums__grid--3 .num:last-child{grid-column:1/-1}
}

/* ── Шапка и герой на планшете ────────────────────────────────────────────
   Судья дал планшету 68/100: на 800px шапка и герой рендерились сжатой
   ДЕСКТОПНОЙ раскладкой (логотип слева, иконка поиска, выпадашка языка,
   текстовая «Войти», заголовок по левому краю), тогда как в макете у
   планшета своя: бургер, логотип, одна кнопка-иконка, текст по центру.

   Решение переиспользует уже принятое мобильное: поиск и переключатель
   языка НЕ удаляются, а прячутся из шапки — они остаются рабочими внутри
   бургер-меню (.hdr__mobsearch / .hdr__moblang уже есть в header.tpl).
   Удалять рабочие элементы ради совпадения с картинкой на этом проекте
   запрещено. */
@media (min-width:481px) and (max-width:1024px){
	body .fg .hdr__right .hdr__icon{display:none}
	body .fg .hdr__right .hdr__langwrap{display:none}
	body .fg .hdr__right:has(.btn--primary) .btn--ghost{display:none}
	body .fg .hdr__right .btn{
		width:44px;height:44px;padding:0;border-radius:50%;
		font-size:0;display:inline-flex;align-items:center;justify-content:center;
	}
	body .fg .hdr__right .btn svg{flex:0 0 24px;margin:0;width:24px;height:24px}

	/* герой: текст над коллажем уже задан выше в этом файле, здесь centering */
	body .fg .hero__text{width:100%;max-width:none;text-align:center;padding:24px 16px 8px}
	body .fg .hero__title{margin:0 0 12px;letter-spacing:-.6px}
	body .fg .hero__sub{margin:0 auto}

	/* ----- must_fix_next: в макете планшета (1050:90678) заголовок/подзаголовок
	   первого экрана — теми же размерами, что на десктопе (64/25px). Сайт на 800px
	   наследовал уменьшение из figma-home.css @media(max-width:860px) (30/16px),
	   рассчитанного на мобильную ширину. Тот же селектор той же специфичности,
	   этот файл подключается позже figma-home.css/gw2-mob.css — переопределяем
	   размер шрифта именно для диапазона 481-1024, десктоп/мобилку не трогаем. ----- */
	body .fg .hero__title{font-size:64px}
	body .fg .hero__sub{font-size:25px;max-width:none}

	/* ----- Тап-таргеты <44px на планшете: доводим только интерактивные элементы
	   до ≥44px по высоте, скоуп — только этот диапазон. ----- */
	body .fg .hdr__burger{padding:15px 11px}
	body .fg .ai{height:44px;padding:0 16px}
	body .fg .chips a{height:44px}
	body.common-home .meet_tabs .meet_tab{padding:15px 4px 19px}
	body.common-home .sp-card .contacts_wrap .btn--ghost,
	body .fg .btn--ghost{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
	body.common-home .meet_block .sp-card .js-add-wishlist.sp-fav{min-height:44px;padding:15px 0}
	body.common-home .meet_block .sp-card .sp-stat--reviews{min-height:44px;display:inline-flex;align-items:center}

	/* ----- Поиск: в макете планшета (1050:90680 «Search Tab / Mob») кнопка
	   отправки — компактная круглая иконка-лупа (48px), без текста «Найти»,
	   рядом отдельная кнопка фильтра. Десктопная широкая кнопка с текстом
	   сюда не подходит — заменяем видом, увеличиваем и хиттарget заодно. ----- */
	body .fg .srch__btn{
		width:48px;height:48px;padding:0;border-radius:50%;
		flex:0 0 auto;font-size:0;justify-content:center;
	}
	body .fg .srch__btn svg{margin:0}
	body .fg .srch__filter{width:44px;height:44px}
}

/* Логотип по центру шапки, как в макете планшета (bar_home_tablet 01):
   слева бургер, по центру знак, справа круглая кнопка. Логотип центрируем
   абсолютным позиционированием, чтобы центр не зависел от ширины бургера
   и кнопки — иначе знак съезжает. */
@media (min-width:481px) and (max-width:1024px){
	body .fg .hdr__in{position:relative}
	body .fg .hdr__logo{
		position:absolute;left:50%;top:50%;
		transform:translate(-50%,-50%);
		margin:0;
	}
	body .fg .hdr__right{margin-left:auto}
}