/* ==========================================================================
   Home page (marketplace/host-pages/home.js). Class prefix .ia-*; colours and
   type come from the tokens in theme.css, so both themes work unchanged.
   ========================================================================== */

/* The hero is full-bleed, so the page container steps aside; each section brings its own. */
.mp-main:has(> .ia-home) { max-width: none; padding: 0; }
.ia-home { padding-bottom: var(--mp-space-6); overflow-x: clip; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.ia-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--mp-border); }
.ia-hero::before {
    content: ""; position: absolute; z-index: -1; inset: auto auto -30% -10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
    background: radial-gradient(closest-side, rgba(255, 122, 24, 0.2), transparent); pointer-events: none;
}
.ia-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; align-items: stretch; padding-block: 56px 72px; }
.ia-hero__h1 {
    font-size: clamp(54px, 8.4vw, 124px); font-style: italic; font-weight: 800; text-transform: uppercase;
    line-height: 0.98; letter-spacing: -0.005em; margin-left: -0.02em;
}
.ia-hero__h1 span { display: block; }
.ia-hero__lead { margin-top: 20px; max-width: 46ch; font-size: 1.125rem; color: var(--mp-fg-muted); }
.ia-hero__stock { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.9375rem; color: var(--mp-fg-muted); font-variant-numeric: tabular-nums; }

.ia-finder {
    margin-top: 28px; padding: 20px; border-radius: var(--mp-radius-lg);
    background: color-mix(in srgb, var(--mp-surface) 78%, transparent); border: 1px solid var(--mp-border-strong);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.ia-finder__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-weight: 600; color: var(--mp-fg-muted); }
.ia-finder__title .mp-i { color: var(--mp-primary-text); stroke-width: 2; }
.ia-finder__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ia-finder__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.ia-finder__row .mp-btn { margin-left: auto; }
.ia-finder__seasons { display: flex; flex-wrap: wrap; gap: 8px; }

.ia-hero__visual { position: relative; min-height: 600px; }
.ia-hero__slash { position: absolute; inset: 0; z-index: 2; background: var(--mp-primary); clip-path: polygon(13% 0, calc(13% + 12px) 0, 12px 100%, 0 100%); }
.ia-hero__photo {
    position: absolute; inset: 0; clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
    background: #17181b url("img/hero-tread.jpg") center / cover no-repeat; filter: saturate(0.9) contrast(1.1) brightness(1.35);
}
.ia-hero__photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(13, 14, 16, 0.8), transparent 36%), linear-gradient(0deg, rgba(13, 14, 16, 0.92), transparent 34%);
}
.ia-hero__cap { position: absolute; left: 11%; right: 0; bottom: 0; z-index: 3; display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 28px 24px 28px 40px; }
.ia-hero__cap h3 { font-size: 1.875rem; font-weight: 600; }
.ia-hero__cap p { margin-top: 6px; font-size: 0.875rem; color: var(--mp-fg-muted); }

@media (max-width: 1100px) {
    .ia-hero__grid { grid-template-columns: 1fr; gap: 32px; padding-block: 0 56px; }
    .ia-hero__visual { order: -1; min-height: 360px; margin-inline: calc(var(--mp-gutter) * -1); }
    .ia-hero__photo { clip-path: none; }
    .ia-hero__slash { inset: auto 0 0 0; height: 5px; clip-path: none; }
    .ia-hero__cap { left: 0; padding: 20px var(--mp-gutter); }
}
@media (max-width: 520px) {
    .ia-hero__visual { min-height: 260px; }
    .ia-hero__cap h3 { font-size: 1.375rem; }
    .ia-hero__cap .mp-btn { display: none; }
    .ia-hero__h1 { font-size: 15vw; }
    .ia-finder { padding: 14px; }
    .ia-finder__grid { gap: 8px; }
    .ia-finder__row .mp-btn { margin-left: 0; width: 100%; }
    /* Three selects share the phone width: trim the padding so "Любой" is not clipped. */
    .ia-finder .mp-select { padding-inline: 10px 26px; }
    .ia-finder .mp-sel > .mp-i { right: 7px; width: 16px; height: 16px; }
}

/* ── Sections ────────────────────────────────────────────────────────── */
.ia-sec { padding-top: var(--mp-space-8); }
.ia-sec__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.ia-h2 { font-size: clamp(30px, 4vw, 44px); }
.ia-sec__lead { margin-top: 8px; max-width: 54ch; color: var(--mp-fg-muted); }

/* Season tiles: a tread crop under a dark gradient. */
.ia-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ia-tile {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: end; min-height: 380px; padding: 20px;
    overflow: hidden; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); color: #f3f1ed;
}
.ia-tile:hover { text-decoration: none; }
.ia-tile__bg {
    position: absolute; inset: 0; z-index: -2; background: #17181b center / cover no-repeat; filter: contrast(1.1) brightness(1.35);
    transition: transform 600ms var(--mp-ease);
}
.ia-tile--summer .ia-tile__bg { background-image: url("img/season-summer.jpg"); }
.ia-tile--winter .ia-tile__bg { background-image: url("img/season-winter.jpg"); }
.ia-tile--studless .ia-tile__bg { background-image: url("img/season-studless.jpg"); }
.ia-tile--allSeason .ia-tile__bg { background-image: url("img/season-all.jpg"); }
.ia-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 11, 13, 0.94) 6%, rgba(10, 11, 13, 0.1) 62%); }
.ia-tile:hover .ia-tile__bg { transform: scale(1.06); }
.ia-tile__ico { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--mp-primary); color: var(--mp-primary-fg); }
.ia-tile__ico .mp-i { width: 26px; height: 26px; }
.ia-tile h3 { font-size: 2.125rem; font-weight: 700; }
.ia-tile p { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 0.875rem; color: #c0c4cb; }
.ia-tile p .mp-i { color: #ff8d3a; transition: translate var(--mp-dur) var(--mp-ease); }
.ia-tile:hover p .mp-i { translate: 4px 0; }
@media (max-width: 1100px) { .ia-tiles { grid-template-columns: repeat(2, 1fr); } .ia-tile { min-height: 300px; } }
@media (max-width: 520px) {
    .ia-tiles { gap: 10px; }
    .ia-tile { min-height: 230px; padding: 14px; }
    .ia-tile h3 { font-size: 1.5rem; }
    .ia-tile__ico { width: 40px; height: 40px; }
}

/* Popular sizes. */
.ia-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.ia-size {
    display: inline-flex; align-items: baseline; gap: 10px; min-height: 56px; padding: 10px 20px; border-radius: 14px;
    border: 1px solid var(--mp-border-strong); background: var(--mp-surface); color: var(--mp-fg);
    font: italic 700 28px/1 var(--mp-font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
    transition: border-color var(--mp-dur), background-color var(--mp-dur), transform var(--mp-dur-fast) var(--mp-ease);
}
.ia-size small { font: 500 13px/1 var(--mp-font-text); font-style: normal; color: var(--mp-fg-muted); }
.ia-size:hover { border-color: var(--mp-primary); background: var(--mp-surface-2); text-decoration: none; }
.ia-size:active { transform: scale(0.96); }

/* Brands. */
.ia-brands { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); border-top: 1px solid var(--mp-border); border-left: 1px solid var(--mp-border); }
.ia-brands a {
    display: grid; place-items: center; min-height: 88px; padding: 8px; text-align: center; overflow-wrap: anywhere;
    border-right: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); color: var(--mp-fg-subtle);
    font: 700 26px/1 var(--mp-font-display); letter-spacing: 0.06em; text-transform: uppercase;
    transition: color var(--mp-dur), background-color var(--mp-dur);
}
.ia-brands a:hover { color: var(--mp-fg); background: var(--mp-surface); text-decoration: none; }
@media (max-width: 900px) { .ia-brands { grid-template-columns: repeat(min(var(--cols, 6), 3), 1fr); } .ia-brands a { font-size: 21px; min-height: 72px; } }

/* Hits rail: scroll-snapping row that bleeds to the screen edge. */
.ia-rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; padding: 0 var(--mp-gutter) 4px;
    margin-inline: calc(var(--mp-gutter) * -1); scroll-snap-type: x mandatory; scroll-padding-inline: var(--mp-gutter); scrollbar-width: none;
}
.ia-rail::-webkit-scrollbar { display: none; }
.ia-rail > * { scroll-snap-align: start; }
.ia-rail-nav { display: flex; gap: 8px; }
@media (max-width: 1100px) { .ia-rail { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 760px) { .ia-rail { grid-auto-columns: 72%; } .ia-rail-nav { display: none; } }

/* Benefits. */
.ia-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ia-benefit { padding: 24px; border-radius: var(--mp-radius-lg); background: var(--mp-surface); border: 1px solid var(--mp-border); }
[data-theme="light"] .ia-benefit { border-color: transparent; box-shadow: var(--mp-shadow-card); }
a.ia-benefit { display: block; color: inherit; transition: border-color var(--mp-dur) var(--mp-ease); }
a.ia-benefit:hover { border-color: var(--mp-primary); text-decoration: none; }
.ia-benefit .mp-i { width: 30px; height: 30px; color: var(--mp-primary-text); }
.ia-benefit h3 { margin-block: 16px 8px; font-size: 1.625rem; }
.ia-benefit p { font-size: 0.9375rem; color: var(--mp-fg-muted); }
@media (max-width: 1100px) { .ia-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ia-benefits { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ia-brands a { font-size: 17px; letter-spacing: 0.03em; } }

@media (prefers-reduced-motion: reduce) {
    .ia-tile__bg { transition: none; }
    .ia-tile:hover .ia-tile__bg { transform: none; }
}