/* ─────────────────────────────────────────────────────────────────────────────
   sport-edition.css: a página /mitsubishi/outlander-phev/sport-edition
   ─────────────────────────────────────────────────────────────────────────────
   Só o que esta página tem de seu: o herói com um render em vez de uma
   fotografia, os dois logótipos com a mesma altura, os renders com
   transparência nas secções claras e a lista de equipamento em colunas. O
   resto vem do site (`styles.css`), do kit (`modelo_*.css`) e do Outlander
   (`outlander_seccoes.css`). Prefixo `se-`.
   ────────────────────────────────────────────────────────────────────────── */

/* ── O herói ──────────────────────────────────────────────────────────────── */

/* Sem fotografia de fundo: o degradê escuro faz de estúdio, e o render vive
   dentro do conteúdo do herói (`.se-hero__palco`), entre o botão e os quatro
   destaques. Atrás do texto, como uma fotografia, ficava tapado por ele. O
   escurecimento do `.model-hero` continua por cima do degradê. */
.se-hero .hero-overlay {
    background:
        radial-gradient(ellipse 70% 55% at 50% 78%, rgba(90, 96, 102, .55), rgba(20, 21, 23, 0) 70%),
        linear-gradient(180deg, #17181a 0%, #0b0c0d 100%);
}

.se-hero__palco {
    width: min(100%, 1100px);
    margin: 14px auto 0;
}

.se-hero__palco .se-hero__carro {
    display: block;
    width: 100%;
    height: auto;
    max-height: 34vh;
    margin: 0 auto;
    object-fit: contain;
    object-position: 50% 100%;
}

/* O herói do site pede altura de ecrã inteiro; com o carro lá dentro o
   conteúdo pode pedir mais, e cresce em vez de cortar. */
.se-hero.full-h { height: auto; min-height: 100vh; }

/* Os dois logótipos lado a lado, com a mesma altura. O wrapper `.model-logo`
   do site mede a largura do desenho; aqui são dois, e é a altura que os
   iguala. */
.se-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: none;
}

/* Com o `.se-hero` à frente para vencer o `.headline-svg-wrapper.model-logo img`
   do site, que fixa a altura do logótipo de um modelo. */
.se-hero .se-logos img {
    width: auto;
    height: 40px;
    max-width: none;
    max-height: none;
}

@media (min-width: 768px) {
    .se-hero .se-logos img { height: 52px; }
}

/* ── Renders nas secções claras ───────────────────────────────────────────── */

/* O `.image-container .bg-image` do site recorta a fotografia à caixa; um
   render com transparência não se recorta. */
.se-render-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 30px 20px 0;
}

.se-render-wrap .se-render {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
}

.se-render-wrap--fila { padding: 20px; }

.se-render-wrap--fila .se-render { max-width: 640px; }

/* ── A lista de equipamento ───────────────────────────────────────────────── */

/* As cores são as de contexto do kit do Outlander (`--ol-ctx-*`): a lista
   vive numa secção escura e noutra clara, e é a secção que as re-aponta. */

.se-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ol-space-4) var(--ol-space-5);
    margin-top: var(--ol-space-4);
}

@media (min-width: 700px) {
    .se-lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
    .se-lista--completa { grid-template-columns: repeat(3, 1fr); }
}

.se-lista__titulo {
    display: flex;
    align-items: baseline;
    gap: var(--ol-space-2);
    margin: 0 0 var(--ol-space-2) 0;
    padding: 0 0 var(--ol-space-1) 0;
    border-bottom: 1px solid var(--ol-ctx-rule);
    font-size: var(--ol-text-strong);
    line-height: var(--ol-leading-tight);
    font-weight: 600;
}

.se-lista__conta {
    font-size: var(--ol-text-mini);
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--ol-ctx-meta);
}

.se-lista__itens {
    margin: 0;
    padding: 0;
    list-style: none;
}

.se-lista__itens li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: var(--ol-text-small);
    line-height: var(--ol-leading-body);
    font-weight: 300;
    color: var(--ol-ctx-text);
}

/* O visto é decorativo: quem ouve a página recebe a lista, e a lista chega. */
.se-lista__itens li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 10px;
    height: 5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .75;
}