/* cat.css — стили страниц-категорий Фазы 5 (build_pages.py). Скоупим под .cat-page, чтобы НЕ задеть
   Tilda-хедер/футер. Переиспользуем .av-grid/.av-card/.seo-art из arenda.css. Токены — из car.css. */
.cat-page main{background:#fff}
/* ───── МОБАЙЛ: герой категории — авто на ВСЮ ШИРИНУ, контент опущен, скруглённый низ-карточки (по ТЗ) ─────
   Фон-картинка (композиция авто) живёт на .tn-atom элемента 1775553130982000001 — таргетим её.
   #d8d8dc = студийный цвет фона композиции (заливка верх/низ при background-size:100% auto, без боковых полей).

   ★ КАК TILDA МАСШТАБИРУЕТ ГЕРОЙ (ключ к этим правилам): контент-группы артборда зумятся (zoom, НЕ transform)
   на коэф. `viewport / design-ширина` (design = 375 для 376–479, и 320 для ≤375), а высота САМОГО артборда
   НЕ зумится. Поэтому: позиции групп задаём КОНСТАНТАМИ-px (zoom их сам масштабирует), а высоту артборда — в
   `vw` (чтобы шла за зумленным контентом, иначе на широких телефонах кнопка вылезает за артборд и обрезается).

   Группы ОПУЩЕНЫ через top (НЕ transform — анимация бегущей строки на внутр.треке, transform её ломает):
   крошки → отступ → бегущая строка → отступ → авто на всю ширину → ~52px → H1+подзаголовок → кнопка.
   СКРУГЛЕНИЕ НИЗА: даём border-radius самому .t396__artboard (у него overflow:hidden) — он обрезает фон по
   скруглённой форме (надёжно, артборд в предсказуемом не-зум контексте); фон-элемент просто заведомо высокий. */
@media(max-width:479px){
  .cat-page #rec2127307841 .t396__artboard{border-radius:0 0 50px 50px!important;}
  .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"],
  .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"] .tn-atom{height:760px!important;}
  .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"] .tn-atom{
    background-color:var(--hf,#d8d8dc)!important;background-size:auto 117%!important;
    background-position:center 94%!important;background-repeat:no-repeat!important;}
  .cat-page #rec2127307841 .t396__group[class*="1775522018499000002"]{top:133px!important;} /* бегущая строка (зазор крошки→строка ~½) */
  .cat-page #rec2127307841 .tn-elem[data-elem-id="1775550822244000001"]{top:136px!important;}/* её линия */
  .cat-page #rec2127307841 .t396__group[class*="1775521225523000003"]{top:512px!important;} /* H1+подзаголовок (зазор кольцо→H1 ≈52px) */
  .cat-page #rec2127307841 .t396__group[class*="1775834532983000001"]{top:673px!important;} /* кнопка */
  .cat-page #rec2127307841 .t396__group[class*="1775522904882000002"]{top:673px!important;} /* кнопка (hover-копия) */
}
/* высота артборда в vw = под зум контента: 376–479 (design 375) → 200vw; ≤375 (design 320) → 228vw */
@media(min-width:376px) and (max-width:479px){ .cat-page #rec2127307841 .t396__artboard{height:200vw!important;} }
@media(max-width:375px){ .cat-page #rec2127307841 .t396__artboard{height:228vw!important;} }
/* 480–639px: Tilda-артборд тут ТЯНЕТСЯ непрерывно (832→1040), контент НЕ двигаем (зазор и так большой) —
   только авто на всю ширину + заливка + скругление низа. */
@media(min-width:480px) and (max-width:639px){
  .cat-page #rec2127307841 .t396__artboard{border-radius:0 0 50px 50px!important;}
  .cat-page #rec2127307841 .tn-elem[data-elem-id="1775553130982000001"] .tn-atom{
    background-color:var(--hf,#d8d8dc)!important;background-size:auto 117%!important;
    background-position:center 94%!important;background-repeat:no-repeat!important;}
}
/* Планшет 640–959 НЕ трогаем — контейнер почти квадратный, портретная композиция в cover (как было). */
/* Мобилка (≤639): СЕКЦИЯ героя = серая студийная карточка целиком. Заливку/скругление/клип вешаем на сам
   РЕКОРД #rec2127307841 (а НЕ только на фон-элемент Tilda) — Tilda-JS на полной загрузке пересчитывает свои
   .tn-elem по data-полям и может сдвинуть фон так, что верх (зона крошек) останется БЕЗ заливки (белая полоса).
   Фон на рекорде это исключает: серый гарантированно от верха до низа. + скруглённый низ + отступ до след.блока. */
@media(max-width:639px){
  .cat-page #rec2127307841{background:var(--hf,#d8d8dc)!important;border-radius:0 0 50px 50px!important;
    position:relative!important;margin-bottom:24px!important;}
  /* ::before заливает серым ВВЕРХ от карточки (bottom:100%) — перекрывает «белую полосу» в зоне крошек, где бы
     Tilda ни поставила верх hero (у заказчицы артборд valign=center/scale двигает контент → сверху белело).
     Тянется до 200px вверх (под хедер); хедер-пилюля непрозрачна, лишний серый под ней не виден. */
  .cat-page #rec2127307841::before{content:""!important;position:absolute!important;left:0!important;right:0!important;
    bottom:100%!important;height:200px!important;background:var(--hf,#d8d8dc)!important;}
}
/* ★ВАЖНО: шрифт Inter Tight + CSS-переменные задаются ЛОКАЛЬНО на .av-fleet в arenda.css. Наши обёртки
   (.cat-fleet/.cat-content и т.д.) вне .av-fleet → без этого блока контент рендерится СЕРИФОМ (Times) и
   .av-card-переменные не резолвятся. Объявляем шрифт+токены на наших контейнерах. */
.cat-content,.cat-fleet,.seo-faq,.cat-links{
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  --ac:#cefe46;--ink:#202020;--dark:#1d1d1d;--plate:#f0f2f3;--plate2:#e7ebec;--muted:#8b8f93;--white:#fff;
}
.cat-content *,.cat-fleet *,.seo-faq *,.cat-links *{box-sizing:border-box}
/* перебить глобальный Tilda-цвет ссылок (#ff8562 оранжевый) внутри нашего контента */
.cat-content a,.cat-fleet a,.cat-links a{color:inherit!important}
.av-card__name a{color:var(--ink)!important;text-decoration:none}
.cat-content{max-width:1240px;margin:0 auto;padding:96px clamp(16px,4vw,40px) 0}
@media(max-width:760px){.cat-content{padding-top:78px}}

/* хлебные крошки. МОБАЙЛ (≤959): НАЛОЖЕНЫ на фон героя (абсолютно), видимы в зазоре между хедером и
   бейджами-преимуществами — не отдельной полоской и не спрятаны под хедер. ДЕСКТОП (≥960): абсолютно
   в нижне-левой пустой зоне героя. */
.cat-bcwrap{font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --muted:#8b8f93;--ink:#202020}
.cat-bcwrap .cat-bc{margin-bottom:0}
.cat-bcwrap--desk{display:none}
@media(max-width:959px){
  .cat-bcwrap--mob{position:absolute;left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);
    z-index:7;max-width:none;margin:0;padding:0}
  .cat-bcwrap--mob .cat-bc{margin:0;font-size:13px}
}
@media(max-width:479px){ .cat-bcwrap--mob{top:95px} }              /* телефоны: герой высокий, бегущая строка опущена до ~160 */
@media(min-width:480px) and (max-width:959px){ .cat-bcwrap--mob{top:108px} } /* крупные/планшет: хедер выше */
@media(min-width:960px){
  .cat-bcwrap--mob{display:none}
  .cat-bcwrap--desk{display:block;position:absolute;z-index:6;left:clamp(16px,5vw,90px);bottom:42px}
}
.cat-bc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:22px}
.cat-bc a{color:var(--muted)!important;text-decoration:none;transition:color .15s}
.cat-bc a:hover{color:var(--ink)!important}
.cat-bc span[aria-current]{color:var(--ink);font-weight:600}
.cat-bc>span{opacity:.5}

/* герой категории */
.cat-hero{margin-bottom:30px}
.cat-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#1d1d1d;background:#cefe46;border-radius:100px;padding:6px 14px;margin-bottom:16px}
.cat-h1{font-size:clamp(30px,4.6vw,52px);line-height:1.05;font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:-.02em}
.cat-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:#42474b;max-width:880px;margin:0}

/* заголовки секций */
.cat-h2{font-size:clamp(24px,3vw,34px);line-height:1.1;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}

/* каталог категории — переиспользуем .av-grid/.av-card из arenda.css */
.cat-fleet{max-width:1240px;margin:8px auto 0;padding:18px 0 10px}
.cat-fleet .av-grid{margin-top:18px}

/* SEO-статья и FAQ идут полной шириной — у .seo-art свои стили в arenda.css.
   FAQ — нативный аккордеон в фирменном стиле. */
.seo-faq{max-width:1240px;margin:10px auto 0;padding:20px clamp(16px,4vw,40px) 40px}
.seo-faq__list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.seo-faq__item{background:var(--plate);border-radius:18px;padding:4px 22px;transition:background .15s}
.seo-faq__item[open]{background:var(--plate2)}
.seo-faq__q{font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;padding:18px 30px 18px 0;position:relative}
.seo-faq__q::-webkit-details-marker{display:none}
.seo-faq__q::after{content:"";position:absolute;right:2px;top:50%;width:11px;height:11px;
  border-right:2px solid #1d1d1d;border-bottom:2px solid #1d1d1d;transform:translateY(-65%) rotate(45deg);transition:transform .2s}
.seo-faq__item[open] .seo-faq__q::after{transform:translateY(-35%) rotate(225deg)}
.seo-faq__a{padding:0 0 18px;color:#42474b;font-size:16px;line-height:1.55}
.seo-faq__a p{margin:0}

/* SEO-перелинковка категорий внизу */
.cat-links{max-width:1240px;margin:0 auto;padding:10px clamp(16px,4vw,40px) 60px}
.cat-links__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:18px}
.cat-links__col h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 10px}
.cat-links__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cat-links__col a{color:#5a5f64;text-decoration:none;font-size:14px;transition:color .15s}
.cat-links__col a:hover{color:#1d1d1d}
.cat-links__col li.is-sub a{padding-left:12px;font-size:13px;color:#8b8f93}
.cat-links a.is-cur{color:#1d1d1d;font-weight:700}
.cat-links__col h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 10px}