/*
 * Фото авто з каталогу (car-photo.mjs, profile/_car_photo.html.twig).
 *
 * Два розміри, як у застосунку: мініатюра без підпису й велике фото на всю
 * ширину з підписом в один рядок. Кадри в каталозі від 4:3 до 2:1, тож фото
 * заповнює рамку (cover) — смуги по краях читались як зламане фото. Тло й
 * заглушка жовті з зеленим силуетом: сірого тут немає ніде.
 */
.evb-car-photo { display: block; min-width: 0; }
.evb-car-photo[hidden] { display: none !important; }
.evb-car-photo__visual { position: relative; display: grid; place-items: center; overflow: hidden; background: #FFF6CC; }
.evb-car-photo__visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.evb-car-photo__glyph { display: block; width: 46%; height: auto; fill: #17803A; }

.evb-car-photo--thumb { flex: none; width: var(--car-thumb, 56px); }
.evb-car-photo--thumb .evb-car-photo__visual { aspect-ratio: 3 / 2; border-radius: 8px; }

.evb-car-photo--hero { width: 100%; }
.evb-car-photo--hero .evb-car-photo__visual { aspect-ratio: 2 / 1; max-height: 240px; border-radius: 12px; }
.evb-car-photo--hero .evb-car-photo__glyph { width: 64px; }
.evb-car-photo__credit { display: block; margin-top: 5px; overflow: hidden; color: #101828; font-size: 10px; font-weight: 500; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; }
.evb-car-photo__credit a { color: inherit; text-decoration: none; }
.evb-car-photo__credit a:hover, .evb-car-photo__credit a:focus-visible { text-decoration: underline; }

/* Гараж: фото — шапка картки, над назвою. */
.evb-garage__card > .evb-car-photo--hero { margin-bottom: 12px; }

/* Пікер: мініатюра в рядку результату, велике фото над версіями й на підтвердженні. */
.evb-picker__result:has(> .evb-car-photo) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; }
.evb-picker__result > .evb-car-photo { --car-thumb: 64px; grid-row: 1 / 3; }
.evb-picker__result:has(> .evb-car-photo) .evb-picker__result-name { align-self: end; min-width: 0; }
.evb-picker__result:has(> .evb-car-photo) .evb-picker__result-meta { align-self: start; color: #101828; font-weight: 600; white-space: normal; }
.evb-picker__chosen > .evb-car-photo--hero { margin-bottom: 10px; }
.evb-picker__summary > .evb-car-photo--hero { margin-bottom: 12px; }

/*
 * «Моє авто» в планувальнику й зоні досяжності: мініатюра ліворуч, підпис і
 * назва впритул одне під одним, перемикач праворуч — як у застосунку. Рядки
 * сітки притискаються до середини, щоб підпис і назву не розносило по краях.
 */
.evb-car-picker.evb-car-picker--card:has(> .evb-car-photo) { grid-template-columns: auto minmax(0, 1fr) auto; }
.evb-car-picker--card > .evb-car-photo { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.evb-car-picker.evb-car-picker--card:has(> .evb-car-photo) .evb-car-picker__label { grid-column: 2; align-self: end; }
.evb-car-picker.evb-car-picker--card:has(> .evb-car-photo) .evb-car-picker__name { grid-column: 2; align-self: start; margin-top: 2px; }
.evb-car-picker.evb-car-picker--card:has(> .evb-car-photo) .evb-car-picker__toggle { grid-column: 3; }

/*
 * Фільтри мапи: мініатюра в тому самому рядку, що назва й перемикач. Рядок
 * розкладає дітей через space-between, а колонка тексту центрувала підпис, —
 * тому текст тягнеться на всю середину й стоїть по лівому краю.
 */
.evb-planner-car-row > .evb-car-photo { --car-thumb: 56px; }
#offcanvasWithBackdrop #filterCarSection .evb-planner-car-text { flex: 1 1 auto !important; align-items: flex-start !important; min-width: 0; }
#offcanvasWithBackdrop #filterCarSection .evb-planner-car-title { color: #101828 !important; }
#offcanvasWithBackdrop #filterCarSection .evb-planner-car-note { max-width: 100%; }