/* ============================================================
   MIR — плитки «страна с ценой от» / «город с ценой от».
   Партиал: template-parts/mir-tiles.php

   НИЧЕГО НЕ ИЗОБРЕТЕНО. Донор — карточка автопарка .av-card (inc/fleet.php:20),
   её стили в assets/arenda.css:135-177 и адаптив :203-212. Каждое значение ниже
   скопировано оттуда, номер строки-источника стоит в комментарии.

   Почему свои классы .mir-tile*, а не прямое переиспользование .av-card:
   .av-card обслуживается клиентским фильтром автопарка (assets/arenda.js) и
   правится под автопарк (напр. arenda.css:1007 — min-height кнопки). Плитки мест
   не должны ни попадать в фильтр, ни ловить чужие правки.

   Сетка, обёртка и заголовок ПЕРЕИСПОЛЬЗУЮТСЯ как есть:
   .av-wrap (arenda.css:89), .av-head (:90), .av-eyebrow (:91), .av-title (:92),
   .av-grid (:135, адаптив :203 и :212). Эти правила в arenda.css не вложены
   в .av-fleet — работают в любой секции.
   ⚠️ А ВОТ ПЕРЕМЕННЫЕ ВЛОЖЕНЫ: --ac/--ink/--plate/... объявлены на .av-fleet
   (arenda.css:82-83). Вне .av-fleet они не существуют, и .av-title{color:var(--ink)}
   остался бы без цвета. Поэтому .mir-tiles объявляет ТЕ ЖЕ значения у себя.
   ============================================================ */

.mir-tiles{
  /* значения 1:1 с arenda.css:82-83 */
  --ac:#cefe46; --ink:#202020; --dark:#1d1d1d; --plate:#f0f2f3; --plate2:#e7ebec;
  --muted:#8b8f93; --white:#fff;
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; /* arenda.css:84 */
  background:#fff;color:var(--ink);padding:90px 0;                                        /* arenda.css:85 */
  -webkit-font-smoothing:antialiased;                                                     /* arenda.css:86 */
}
.mir-tiles,.mir-tiles *,.mir-tiles *::before,.mir-tiles *::after{box-sizing:border-box}   /* arenda.css:88 */

/* ---------- плитка = .av-card (arenda.css:136-138) ---------- */
.mir-tile{background:var(--plate);border-radius:32px;padding:18px;display:flex;flex-direction:column;
  transition:background .2s ease,transform .2s ease}
.mir-tile:hover{background:var(--plate2);transform:translateY(-3px)}

/* ---------- слот картинки = .av-card__media (arenda.css:139-140,143-145) ---------- */
.mir-tile__media{position:relative;background:var(--white);border-radius:22px;aspect-ratio:16/11;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden;
  text-decoration:none}
.mir-tile__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.mir-tile:hover .mir-tile__media--photo img{transform:scale(1.04)}

/* Плитка без картинки: подложка --plate2 (arenda.css:82) отличается тоном от плашки
   карточки --plate — пустой слот читается как задуманный, а не как непрогрузившееся фото.
   Никакого «фото скоро» и никакого битого <img>: в разметке его просто нет.
   Внутри — ПОЛНОЕ название места (монограмма давала «U» и Штатам, и Эмиратам).
   Размер, начертание и трекинг — заголовка .av-title (arenda.css:92),
   гашение непрозрачностью .55 — как у .av-eyebrow (arenda.css:91).
   Боковой отступ 18px — паддинг карточки .av-card (arenda.css:136). */
.mir-tile__media--blank{background:var(--plate2)}
.mir-tile__blank{font-size:clamp(28px,3.6vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.04;
  color:var(--ink);opacity:.55;text-align:center;padding:0 18px;overflow-wrap:anywhere}

/* ---------- бейдж «N cars» = .av-card__badge (arenda.css:154-155) ---------- */
.mir-tile__badge{position:absolute;top:12px;inset-inline-start:12px;background:var(--ac);color:var(--ink);
  font-size:13px;font-weight:600;padding:6px 13px;border-radius:30px}
/* число и слово — соседние узлы: «88 cars» ключом словаря быть не может (число меняется),
   переводится только отдельный узел «cars». Приём и грабля — из arenda_price_html()
   (inc/car-render.php:126-141). */
.mir-tile__badge b{font-weight:600}
.mir-tile__badge span{font-weight:600}

/* ---------- название = .av-card__head/.av-card__name (arenda.css:158-159) ---------- */
.mir-tile__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 4px}
.mir-tile__name{font-size:21px;font-weight:600;line-height:1.1;color:var(--ink)}
/* ссылка-заголовок: подчёркивание + стрелка ↗ (arenda.css:148-153).
   !important сохранён вместе со значениями — он там стоит против глобальных стилей Tilda
   (bundle.css), которые действуют и на нашу секцию. */
.mir-tile__name a{color:var(--ink)!important;text-decoration:underline!important;text-decoration-thickness:2px!important;
  text-underline-offset:3px;text-decoration-color:rgba(29,29,29,.28)!important}
.mir-tile__name a::after{content:"\2197";display:inline-block;margin-inline-start:.26em;font-weight:700;
  color:#7a9b00;transition:transform .2s ease}
.mir-tile__name a:hover{color:#7a9b00!important;text-decoration-color:#7a9b00!important}
.mir-tile__name a:hover::after{transform:translate(2px,-2px)}

/* ---------- цена «от» = .av-card__foot/.av-card__price (arenda.css:167-174) ---------- */
.mir-tile__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px 2px}
.mir-tile__price b{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
/* подпись «per day» — прямой потомок, как у донора: селектор без `>` красил бы и .cur
   внутри <b>, и цена разваливалась на три строки (arenda.css:169-173, приёмка Стамбула). */
.mir-tile__price>span{font-size:13px;color:var(--muted);display:block;line-height:1;margin-top:3px}
.mir-tile__price b .cur{display:inline;font-size:inherit;color:inherit;margin:0}          /* arenda.css:174 */
/* «from» — тот же кегль/цвет, что у подписи под ценой (arenda.css:173), но в строке с числом */
.mir-tile__price b .mir-tile__from{display:inline;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}

/* ---------- адаптив: брейкпоинты донора (arenda.css:203-212) ----------
   Саму сетку .av-grid перестраивает arenda.css (4 → 2 колонки на 1080, → 1 на 760).
   Здесь только вертикальные отступы секции — как у .av-fleet (:205 и :210). */
@media(max-width:1080px){
  .mir-tiles{padding:70px 0}
}
@media(max-width:760px){
  .mir-tiles{padding:28px 0 60px}
}

/* ---------- второй ряд: плитки КЛАССОВ сразу под плитками мест ----------
   Решение заказчицы 12.09.2026 (template-parts/mir-geo-blocks.php §3). Секция
   та же, поэтому её собственный верхний отступ сложился бы с нижним отступом
   первого ряда: 90+90 = 180 px между двумя рядами плиток на одной странице
   (значения .mir-tiles выше, arenda.css:85). Гасим верхний — промежуток
   остаётся 90/70/60 px по брейкпоинтам донора, ровно как между любыми двумя
   блоками страницы.
   Селектор смежный: если ряда мест нет (пустой список — партиал не рисует
   секцию вовсе), правило не срабатывает и у классов остаётся свой отступ. */
.mir-tiles + .mir-tiles--classes{padding-top:0}