/* ─────────────────────────────────────────────────────────────────────────────
   outlander_mais.css: a grelha «Continue a conhecer o Outlander PHEV»
   ─────────────────────────────────────────────────────────────────────────────
   POR QUE É QUE ISTO É UM FICHEIRO À PARTE.

   A grelha fecha as SEIS páginas do modelo, e a página de ENTRADA é a única que
   não carrega o `outlander_seccoes.css`. Esse tem 20 KB comprimidos, quase todos
   de componentes que a entrada não usa; carregá-lo por causa de 52 linhas era
   pagar quinze vezes o que se leva.

   As alternativas eram piores. Copiar o bloco para o `outlander_phev_MY_25.css`
   punha o mesmo componente escrito em dois sítios, que é exactamente o defeito
   que o escurecimento do herói já tem e que se documentou lá como armadilha.
   Deixar a entrada sem CSS deixava a grelha a renderizar sem estilo nenhum: o
   `<picture>` fica `inline`, a caixa colapsa para a altura de uma linha e as
   fotografias transbordam.

   Por isso: um ficheiro pequeno, com os tokens de que o componente precisa e
   mais nada, carregado pelas seis páginas.

   OS TOKENS ESTÃO AQUI E NO `outlander_seccoes.css`, e é de propósito: os dois
   ficheiros têm de funcionar sozinhos. As declarações são as mesmas e vivem em
   `:where()` para não ganharem à folha grande quando as duas se carregam.
   ─────────────────────────────────────────────────────────────────────────── */

:where(.ol-more) {
    --ol-ink: #000000;
    --ol-paper: #ffffff;
    --ol-red: var(--mitsubishi-red, #ED0000);
    --ol-focus: var(--ol-paper);
    --ol-meta-on-dark: #9aa0a4;
    --ol-card-bg: #111315;

    --ol-space-2: 16px;
    --ol-space-3: 24px;
    --ol-space-4: 40px;
    --ol-space-5: 64px;

    --ol-radius: 6px;
    --ol-gutter: 20px;
    --ol-max-width: 1400px;

    --ol-text-meta:  13px;
    --ol-text-strong: 16px;
    --ol-text-title-2:  20px;

    --ol-leading-tight: 1.3;
    --ol-leading-medium: 1.45;
}

.ol-more {
    padding: var(--ol-space-5) var(--ol-gutter);
    background-color: var(--ol-ink);
    color: var(--ol-paper);
}

.ol-more__title {
    margin: 0 auto var(--ol-space-4) auto;
    max-width: var(--ol-max-width);
    font-size: var(--ol-text-title-2);
    line-height: var(--ol-leading-tight);
    font-weight: 600;
    text-align: center;
}

.ol-more__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ol-space-3);
    margin: 0 auto;
    max-width: var(--ol-max-width);
}

.ol-card {
    display: block;
    overflow: hidden;
    border-radius: var(--ol-radius);
    color: inherit;
    text-decoration: none;
    background-color: var(--ol-card-bg);
}

/* Uma proporção só para todos os cartões. As fotografias de origem vêm em 3:2,
   em 2:1 e uma em 1:1: deixadas em `height:auto`, as colunas ficavam com
   alturas diferentes e os títulos desalinhados a meio da grelha. O recorte é do
   CSS, não da escolha do ficheiro: o `ol_img()` continua a declarar as medidas
   reais, ou a página saltava enquanto as fotografias chegam. */
.ol-card picture {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.ol-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.ol-card:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .ol-card img { transition: none; }
    .ol-card:hover img { transform: none; }
}

.ol-card:focus-visible {
    outline: 2px solid var(--ol-focus);
    outline-offset: 3px;
}

.ol-card__text {
    display: block;
    padding: var(--ol-space-2) var(--ol-space-2) var(--ol-space-3) var(--ol-space-2);
}

.ol-card__title {
    display: block;
    font-size: var(--ol-text-strong);
    line-height: var(--ol-leading-tight);
    font-weight: 600;
}

.ol-card__sub {
    display: block;
    margin: 4px 0 0 0;
    font-size: var(--ol-text-meta);
    line-height: var(--ol-leading-medium);
    font-weight: 300;
    color: var(--ol-meta-on-dark);
}

@media (min-width: 700px) {
    .ol-more__grid { grid-template-columns: repeat(3, 1fr); }
}