/* ============================================================================
   CARROSSEL DE VEÍCULOS EM DESTAQUE (topo alternativo ao banner) — par de
   partials/featured_carousel.php. O MOTOR é o do banner slider (.bnr +
   banner-slider.js); aqui só vestimos o conteúdo do slide.

   Duas colunas no desktop (foto | ficha) e empilhado no celular. Cores todas de
   variaveis.css, então o carrossel acompanha o tema do cliente sem CSS por-site.
   ========================================================================== */

.fhero {
    background: var(--vehicles-bg-color, #f7f7f7);
    border-bottom: 3px solid var(--main-primary-color);
}

/* A LARGURA vem do container do site (`wrap wrap--bigger` no markup) — aqui só o
   respiro vertical/lateral. Antes havia `max-width: 1280px` fixo: o topo terminava
   bem antes da barra de filtros logo abaixo e o conjunto parecia comprimido no meio. */
.fhero__wrap {
    padding: clamp(16px, 2vw, 30px) clamp(16px, 2vw, 28px);
}

/* O componente de banner esconde o overflow (setas ficam dentro do quadro). */
.fhero__slider { --bnr-accent: var(--main-primary-color); }

/* Os slides têm alturas diferentes (ficha com mais ou menos specs) e o viewport fica
   do tamanho do MAIOR. Centrar o cartão no slide evita que o mais curto deixe uma
   faixa morta embaixo, entre o cartão e os dots. */
.fhero .bnr__slide { display: flex; align-items: center; }
.fhero__card { width: 100%; }

/* Cada slide é um cartão de duas colunas. O padding lateral é o que separa as setas
   do conteúdo (elas ficam sobrepostas nas bordas do quadro): com 56px fixos a seta
   encostava na foto em tela larga. */
.fhero__card {
    display: grid;
    /* A moldura da foto tem teto de 640px; coluna igual à da ficha deixa a sobra
       (quando há) pequena e o conjunto equilibrado. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 76px);
    align-items: center;
    padding: 8px clamp(64px, 6vw, 124px);
}

/* Um destaque só: o motor não desenha setas, então o vão que existia para elas viraria
   espaço morto nas duas pontas — o cartão volta a usar a faixa quase toda. */
.fhero__slider.bnr--single .fhero__card { padding-left: clamp(8px, 1.5vw, 28px); padding-right: clamp(8px, 1.5vw, 28px); }

/* A FOTO — por que MOLDURA + foto inteira, e não `cover` como nos cards:
   o cache do template guarda a foto em no máximo 600×600 (`ImageCacheService`) e a
   maioria das lojas fotografa com o celular EM PÉ (338×600, 450×600 são os tamanhos
   reais da base). Numa caixa deitada de ~790px o `cover` AMPLIAVA a foto 2,3× — daí a
   cara de foto esticada/borrada — e ainda escondia 63% do veículo, sempre a faixa do
   meio. Diferente do card (miniatura numa grade), aqui a foto é o maior elemento da
   página e mostra UM veículo: ampliar pixel e cortar o carro é o pior dos mundos.

   Então a moldura tem tamanho ESTÁVEL (o layout não pula entre slides, que têm fotos
   de proporções diferentes) e a foto entra inteira, no tamanho nativo: sem upscale,
   sem recorte, sem distorção. O teto de 640px é o do próprio cache — passar disso é
   ampliar pixel. Ver a memória `enquadramento-imagens-frota`. */
.fhero__photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Os DOIS tetos são o do cache (600px de lado maior): assim a foto em pé aparece
       em tamanho nativo CHEIO (338×600 mostra 338×600, não 270×480) e a deitada
       (600×450) preenche a largura. Nunca ampliar, nunca cortar. */
    width: min(100%, 640px);
    height: clamp(300px, 30vw, 560px);
    margin-inline: auto;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* A sobra da moldura (foto em pé numa moldura mais larga) recebe a PRÓPRIA foto
   desfocada, em vez de uma faixa branca — mesmo arquivo, já carregado pela <img>, então
   não há requisição a mais. `inset` negativo esconde a borda clara que o blur cria.
   `--fhero-foto` vem inline do partial; sem ele, fica só o fundo branco. */
.fhero__photo::before {
    content: '';
    position: absolute;
    inset: -6%;
    background-image: var(--fhero-foto);
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.15) brightness(.92);
    z-index: 0;
}

/* Vence `.bnr__slide img` (banner-slider.css), onde a imagem É o slide inteiro e leva
   `aspect-ratio` + `cover` — os dois teriam de morrer aqui. */
.fhero .fhero__photo img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
}

.fhero__info { min-width: 0; color: var(--main-text-color); }

.fhero__brand {
    margin: 0 0 6px;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--main-primary-color);
}

/* Tipografia acompanhando a largura: a ficha divide o palco com uma foto de até
   520px de altura, então texto de 16px/20px deixava a coluna parecendo vazia. */
.fhero__title { margin: 0 0 clamp(12px, 1.4vw, 20px); font-size: clamp(22px, 2.7vw, 40px); line-height: 1.15; }
.fhero__title a { color: inherit; text-decoration: none; }
.fhero__title a:hover { text-decoration: underline; }

.fhero__specs { list-style: none; margin: 0 0 clamp(12px, 1.4vw, 20px); padding: 0; }
.fhero__specs li { padding: clamp(3px, .4vw, 6px) 0; font-size: clamp(16px, 1.15vw, 20px); }
.fhero__specs li span { font-weight: 600; }

.fhero__price {
    margin: 0 0 clamp(16px, 1.8vw, 26px);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 700;
    color: var(--main-primary-color);
}

.fhero__cta {
    display: inline-block;
    height: auto;
    padding: clamp(10px, 1vw, 15px) clamp(24px, 2.4vw, 42px);
    font-size: clamp(16px, 1.1vw, 19px);
}

/* Setas: no desktop ficam nas laterais do cartão (o padding lateral dele reserva o
   espaço) e ganham um respiro da borda; os dots do motor seguem no rodapé do slider. */
.fhero .bnr__arrow { width: clamp(44px, 3.4vw, 56px); height: clamp(44px, 3.4vw, 56px); }
.fhero .bnr__arrow--prev { left: clamp(8px, 1.4vw, 26px); }
.fhero .bnr__arrow--next { right: clamp(8px, 1.4vw, 26px); }
.fhero .bnr__dots { position: static; margin-top: 8px; }
.fhero .bnr__dot { background: rgba(0, 0, 0, .22); }
.fhero .bnr__dot:hover { background: rgba(0, 0, 0, .4); }

@media (max-width: 60em) {
    .fhero__card {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 8px 8px 4px;
        text-align: center;
    }
    /* Empilhado, a moldura fica mais baixa (4/3 no celular ocuparia a tela toda antes
       da ficha). A foto segue inteira dentro dela — a regra é da MOLDURA, não da <img>,
       senão volta o `aspect-ratio` na imagem e com ele o esticamento. */
    .fhero__photo { width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 260px; }
    .fhero__specs li { display: inline-block; margin: 0 8px; }
    /* Empilhado, as setas cobririam a foto: descem para a faixa dos dots. */
    .fhero .bnr__arrow { top: auto; bottom: 0; transform: none; width: 34px; height: 34px; }
    .fhero .bnr__arrow--prev { left: 4px; }
    .fhero .bnr__arrow--next { right: 4px; }
}