/* Page specific styles */

/* ── O texto do herói sobre o filme ──────────────────────────────────────────
   ESTE BLOCO MUDOU DE CASA a 2026-09-03. As regras que aqui estavam faziam o
   escurecimento do herói desta página, e faziam-no bem: os oito valores são
   medidos no pior de nove fotogramas do filme, com o texto pintado de
   transparente antes de fotografar. Antes da correcção, o bloco dos destaques
   (benefícios fiscais, CO₂, tracção, autonomia) dava 1,32:1.

   O que estava errado era o ESCOPO. Os selectores eram `.hero:not(.carousel-slide)
   .hero-overlay::after`, `.hero .hero-content` e `.hero { overflow: hidden }`,
   sem uma única classe desta página: valiam para qualquer herói de qualquer
   página que carregasse esta folha. Hoje é só esta, mas isso é uma coincidência
   que se paga caro no dia em que deixar de ser.

   Os mesmos oito valores estão agora em `_modelo/assets/css/modelo_heroi.css`,
   presos a `.model-hero--video`, e servem também o Grandis, o Eclipse Cross EV, o
   ASX e o Pajero, que tinham fundo em filme e nenhuma protecção nenhuma.
   ─────────────────────────────────────────────────────────────────────────── */

/* .hero-overlay:after tint removido (background): escurecimento via gradientes. */

.comparisonSection {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 0 50px 0;
}

.comparisonImage {
    width: 100%;
    height: 0;
}

.comparisonImage img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the container while maintaining its aspect ratio */
}

/* O ESTADO DE REPOUSO E O VISIVEL.
   Estas duas regras tinham `translateX(100%)` e `translateX(-100%)`, e so o
   GSAP as trazia de volta ao rolar. Resultado: com `prefers-reduced-motion`,
   com o JavaScript bloqueado ou com a rede a falhar, a fotografia do carro
   ficava uma largura de ecra para fora e ninguem a via. O `gsap.fromTo` do fim
   da pagina escreve o ponto de partida quando for para animar, e so entao. */
.afterImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.afterImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Aspect ratios */
@media (max-width: 767px) {
    .comparisonSection {
        margin: 0 0 50px 0;
        padding-bottom: 100%;
        /* Maintain 1:1 aspect ratio on mobile */
    }
}

@media (min-width: 768px) {
    .comparisonSection {
        margin: 0 0 50px 0;
        padding-bottom: 56.25%;
        /* Maintain 16:9 aspect ratio on desktop */
    }
}

.news-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 150px 25px;
    background-color: #ffffff;
    color: #000000;
}

.news-section h2 {
    margin: 0 0 25px 0;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
}

.news-section p {
    margin: 0;
    max-width: 700px;
    font-weight: 400;
    text-align: center;
}

/* Video iframe */
.video-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background-color: #000000;
}

.video-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* As grelhas de imagens põem a página a andar para o lado: em todas as
   larguras.
   ─────────────────────────────────────────────────────────────────────────
   O `.row` do Bootstrap traz `margin-inline: -12px`, e conta com o `padding`
   de um `.container` à volta para o compensar. Aqui os `.row` estão soltos
   dentro de um `<section>` sem padding nenhum: os 12px de cada lado ficam por
   compensar, a linha passa a medir 414px numa janela de 390, e o corpo da
   página ganha 12px de rolamento horizontal. Medido em 390, 768 e 1600: em
   todas.
   As colunas destas grelhas já têm o `padding` reescrito aqui em baixo
   (10px, e zero no lado de fora), por isso zerar a margem não desencosta nada:
   as fotografias ficam encostadas à janela, que é o que o desenho quer.
   O `.model-section-separator` («Gostou do novo Outlander PHEV?») é também um
   `.row`, mas pendurado directamente no <body>: daí não bastar o selector de
   cima. É este que sobrava depois de arrumar os outros. */
section > .row,
.model-section-separator {
    margin-left: 0;
    margin-right: 0;
}

.image-container:first-child:not(.no-padding) {
    padding: 10px 10px 10px 0;
}

.image-container:last-child:not(.no-padding) {
    padding: 10px 0 10px 10px;
}

.image-container .bg-image {
    max-height: 100dvh;
}

.no-padding {
    padding: 0;
}

.model-section-separator {
    padding: 150px 0;
    text-align: center;
    background-color: #404040;
}

.model-section-separator .title {
    margin: 0 0 25px 0;
    padding: 0 5%;
    font-size: 25px;
    line-height: 30px;
    font-weight: 700;
    color: #ffffff;
}

.model-section-separator button,
.model-section-separator a {
    margin: 10px 3px 0 0 !important;
}

.model-section-separator button:last-child,
.model-section-separator a:last-child {
    margin: 10px 0 0 0 !important;
}