@import url("_pages-common.css");
/* /v-nalichii/ — task 05: dark hero with a bento of own Velart photos (A3 + A6), grid of cars on sale,
   "Недавно проданы" rail on the light seamless background (A4). */
.stock-hero { padding-top: calc(var(--va-header-h) + clamp(32px, 5vw, 80px)); }
.stock-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px) var(--va-col-gap); align-items: stretch; }
.stock-hero__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.stock-hero__title { max-width: 16ch; font-size: var(--va-fs-h2); }
.stock-hero__lead { max-width: 40ch; }
.stock-hero__facts { display: grid; gap: 0; margin: auto 0 0; }
.stock-hero__facts > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.stock-hero__facts dd { margin: 0; }
.stock-hero__facts b { font: 300 var(--va-fs-h3)/.9 var(--va-font-display); font-variant-numeric: tabular-nums; margin-right: 6px; }
.stock-hero__bento { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: 6px; min-height: clamp(420px, 44vw, 720px); }
.stock-shot { position: relative; display: block; min-height: 0; color: var(--va-paper); text-decoration: none; }
.stock-shot--0 { grid-row: 1 / span 2; }
.stock-shot__media { position: absolute; inset: 0; border-radius: var(--va-radius); }
.stock-shot__media img { transition: transform 1.2s var(--va-ease-out); }
.stock-shot:hover .stock-shot__media img { transform: scale(1.04); }
.stock-shot__media::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgb(var(--va-ink-c) / .7), rgb(var(--va-ink-c) / 0)); pointer-events: none; }
.stock-shot__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font: 500 var(--va-fs-small)/1.3 var(--va-font-text); }
.stock-shot__cap .va-num { font: 500 var(--va-fs-lead)/1 var(--va-font-display); letter-spacing: 0; }
.stock-shot--0 .stock-shot__cap .va-num { font-size: var(--va-fs-h3); }
.stock-shot:focus-visible { outline: 2px solid var(--va-paper); outline-offset: 3px; border-radius: var(--va-radius); }

.stock__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; margin-bottom: clamp(28px, 3vw, 48px); }
.stock__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--va-card-gap); } /* equal cards, equal photos */
.stock-sold__note { max-width: 44ch; margin: 0; }
.stock-sold__rail { display: flex; gap: var(--va-col-gap); overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--va-gutter) 12px; scroll-padding: 0 var(--va-gutter); scrollbar-width: thin; }
.stock-sold__rail > .car-card { flex: 0 0 clamp(260px, 24vw, 380px); scroll-snap-align: start; }
.stock-sold__rail > .car-card .car-card__media { filter: grayscale(.35); }
.stock-sold__rail:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
@media (min-width: 1680px) { .stock-sold__rail { padding-inline: calc((100vw - 1680px) / 2 + var(--va-gutter)); } }
@media (max-width: 1100px) {
	.stock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stock-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.stock-hero__title { max-width: 12ch; }
	.stock-hero__bento { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
	.stock-hero__bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
	.stock-shot--0 { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
	.stock-shot--1, .stock-shot--2 { aspect-ratio: 1; }
	.stock-shot--1 .stock-shot__cap .va-num, .stock-shot--2 .stock-shot__cap .va-num { display: none; }
	.stock__grid { grid-template-columns: minmax(0, 1fr); }
	.stock-sold__rail > .car-card { flex-basis: 78%; }
}