/* O carrossel dos destaques da L200 (/mitsubishi/l200)

   As medidas vêm de um carrossel de referência, medido a 1440 e a 390:

     cartão     57% da largura do ecrã a partir de 769px (818px a 1440) e 85% no
                telemóvel (332px a 390), com os cantos a 28px
     proporção  1,42 para 1 em ecrã largo, 2 para 3 no telemóvel
     folga      30px em ecrã largo, 15px no telemóvel
     desvio     o primeiro cartão arranca alinhado com a coluna (141px a 1440,
                29px a 390) e o seguinte espreita à direita

   O contentor tem a largura do ecrã, por isso o carrossel sai dos limites da
   página; o desvio do primeiro e do último cartão é o `padding-inline` da cabeça
   (`--l200-dest-g`), que o `l200-destaques.js` lê para o dar ao Swiper.
   Escreve-se primeiro para o telemóvel: a base, sem @media, é o ecrã estreito. */

.l200-dest {
    --l200-dest-g: max(16px, 7.4vw);
    padding-block: 56px 48px;
    background: var(--main-background-color, #0e0e12);
    color: #fff;
    overflow-x: clip;
}

.l200-dest__cabeca {
    padding-inline: var(--l200-dest-g);
}

.l200-dest__titulo {
    margin: 0 0 20px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    color: #fff;
}

/* As setas só existem em ecrã largo: no telemóvel o carrossel arrasta-se com o
   dedo e as bolinhas dizem onde se está e levam a cada cartão. */
.l200-dest__setas {
    display: none;
}

.l200-dest__seta {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 20px;
    color: #fff;
    background: transparent;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .25s ease, opacity .25s ease;
}

.l200-dest__seta:hover { border-color: #fff; }

.l200-dest__seta:focus-visible,
.l200-dest__bolinha:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.l200-dest__seta:disabled,
.l200-dest__seta.swiper-button-disabled {
    opacity: .3;
    cursor: default;
    border-color: rgb(255 255 255 / .35);
}

.l200-dest__pista {
    overflow: hidden;
    padding-block: 4px;
}

/* Sem JavaScript o Swiper não arranca: a pista rola com o dedo, cartão a cartão. */
@media (scripting: none) {
    .l200-dest__pista { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--l200-dest-g); }
    .l200-dest__setas { display: none; }
    .l200-dest__pista .swiper-wrapper { padding-inline: var(--l200-dest-g); gap: 15px; }
    .l200-dest__cartao { scroll-snap-align: start; flex: none; }
}

.l200-dest__cartao {
    position: relative;
    width: min(85vw, 460px);
    aspect-ratio: 2 / 3;
    max-height: 78dvh;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    background: #16161b; /* ds-ok: a base do cartão, por baixo da fotografia */
}

.l200-dest__cartao picture,
.l200-dest__cartao img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.l200-dest__cartao img { object-fit: cover; }

/* O texto assenta sobre um degradê do preto, e o nível dele mede-se no pior
   fotograma: a praia, de céu claro, é a que manda. */
.l200-dest__cartao::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .8) 38%, rgb(0 0 0 / 0) 76%); /* ds-ok: degradê do texto sobre a fotografia, medido no pior fotograma */
    pointer-events: none;
}

.l200-dest__texto {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 24px;
}

.l200-dest__nome {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    color: #fff;
}

.l200-dest__frase {
    max-width: 60ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: rgb(255 255 255 / .94);
}

/* As bolinhas: o alvo tem 24px de lado ou mais, e o desenho vive no
   `background-clip`, para o toque acertar sem a bolinha crescer. */
.l200-dest__bolas {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.l200-dest__bolinha {
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    padding: 8px;
    background: rgb(255 255 255 / .4);
    background-clip: content-box;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.l200-dest__bolinha.is-ativa {
    width: 28px;
    background-color: #fff;
    background-clip: content-box;
}

.l200-dest__nota {
    width: min(60ch, calc(100% - 2 * var(--l200-dest-g)));
    margin: 20px auto 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: rgb(255 255 255 / .65);
}

@media (prefers-reduced-motion: reduce) {
    .l200-dest__seta,
    .l200-dest__bolinha { transition: none; }
}

/* Do telemóvel para cima */

@media (min-width: 481px) {
    .l200-dest__titulo { font-size: 34px; }
}

@media (min-width: 769px) {
    .l200-dest {
        --l200-dest-g: min(9.8vw, 200px);
        padding-block: 88px 64px;
    }

    .l200-dest__titulo {
        margin-bottom: 12px;
        font-size: 40px;
    }

    .l200-dest__setas {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-bottom: 20px;
    }

    .l200-dest__cartao {
        width: min(57vw, 1000px);
        aspect-ratio: 1.42 / 1;
    }

    .l200-dest__texto { padding: 30px; }

    .l200-dest__nome { font-size: 34px; }

    .l200-dest__frase { font-size: 17px; }

    .l200-dest__bolas { margin-top: 20px; }
}