/* ==========================================================================
   SHALIMAR PRAIA HOTEL - OPORTUNIDADES NA HOME: MODO DESTAQUE
   Arquivo: css/oportunidades-destaque.css
   Carregado por views/home.php. Complementa css/oportunidades-home.css.

   - 1 ou 2 oportunidades ativas: cards largos, com a imagem inteira (sem corte).
   - 3 ou mais: continua o carrossel, agora também sem cortar a imagem.
   ========================================================================== */

/* === CARROSSEL (3 ou mais): imagem inteira, sem corte ===
   Só em telas largas (3 cards por vez). No tablet e no celular o Style.css deixa os slides
   com a largura do conteúdo, então ali o carrossel continua como era. */
@media (min-width: 993px) {
    .oportunidades-home-section .opportunitiesSwiper .oportunidade-imagem {
        height: auto;
    }

    .oportunidades-home-section .opportunitiesSwiper .oportunidade-imagem img {
        display: block;
        height: auto;
        object-fit: contain;
    }
}

/* === MODO DESTAQUE (1 ou 2): estrutura === */
.oportunidades-home-section .oportunidades-destaque {
    display: grid;
    gap: 28px;
    padding: 10px 0 20px;
}

.oportunidades-home-section .oportunidades-destaque--1 {
    grid-template-columns: minmax(0, 1fr);
}

.oportunidades-home-section .oportunidades-destaque--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oportunidades-home-section .oportunidade-card--destaque {
    height: auto;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 60, 126, 0.10);
}

.oportunidades-home-section .oportunidade-card--destaque:hover {
    box-shadow: 0 12px 34px rgba(0, 60, 126, 0.16);
}

/* Imagem inteira, na proporção original */
.oportunidades-home-section .oportunidade-card--destaque .oportunidade-imagem {
    height: auto;
}

.oportunidades-home-section .oportunidade-card--destaque .oportunidade-imagem img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 720px;
    object-fit: cover; /* só corta se a arte for muito vertical */
}

.oportunidades-home-section .oportunidade-card--destaque .oportunidade-badge {
    bottom: 16px;
    left: 16px;
    padding: 7px 14px;
    font-size: 0.8rem;
}

/* === MODO DESTAQUE: textos e botões maiores === */
.oportunidades-home-section .oportunidade-card--destaque .oportunidade-content {
    padding: 26px 28px 30px;
}

.oportunidades-home-section .oportunidade-card--destaque .oportunidade-titulo {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.oportunidades-home-section .oportunidade-card--destaque .oportunidade-subtitulo {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.oportunidades-home-section .oportunidade-card--destaque .oportunidade-descricao {
    display: block;
    font-size: 0.95rem;
    -webkit-line-clamp: unset;
}

.oportunidades-home-section .oportunidade-card--destaque .oportunidade-actions {
    gap: 12px;
    padding-top: 20px;
    flex-wrap: wrap;
}

.oportunidades-home-section .oportunidade-card--destaque .btn-conhecer,
.oportunidades-home-section .oportunidade-card--destaque .btn-whatsapp {
    padding: 14px 26px;
    font-size: 0.95rem;
    white-space: nowrap;
}

.oportunidades-home-section .oportunidade-card--destaque .btn-conhecer {
    flex: 1 1 auto;
}

/* === DESKTOP E TABLET (a partir de 769px) === */
@media (min-width: 769px) {
    /* 1 oportunidade com arte quadrada/vertical: imagem à esquerda, texto à direita */
    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--quadrada {
        display: grid;
        grid-template-columns: minmax(0, min(520px, 44%)) minmax(0, 1fr);
    }

    /* A coluna da imagem acompanha a altura real da arte (a etiqueta de data fica sobre a imagem) */
    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--quadrada .oportunidade-imagem {
        align-self: start;
    }

    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--quadrada .oportunidade-content {
        justify-content: center;
        padding: 40px 48px;
    }

    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--quadrada .oportunidade-titulo {
        font-size: 2.1rem;
    }

    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--quadrada .oportunidade-subtitulo {
        font-size: 1.15rem;
    }

    /* Botões logo abaixo do texto (o bloco todo fica centralizado na altura da imagem) */
    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--quadrada .oportunidade-actions {
        margin-top: 28px;
        padding-top: 0;
        border-top: none;
    }

    /* 1 oportunidade com arte horizontal (banner): imagem em largura total, texto e botões embaixo */
    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--paisagem .oportunidade-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 40px;
        align-items: center;
        padding: 28px 40px 32px;
    }

    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--paisagem .oportunidade-content > * {
        grid-column: 1;
    }

    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--paisagem .oportunidade-actions {
        grid-column: 2;
        grid-row: 1 / span 3;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .oportunidades-home-section .oportunidades-destaque--1 .oportunidade-card--paisagem .oportunidade-titulo {
        font-size: 1.9rem;
    }
}

/* === DESKTOP (a partir de 992px) === */
@media (min-width: 992px) {
    /* Com 1 card só, os botões não precisam esticar */
    .oportunidades-home-section .oportunidades-destaque--1 .btn-conhecer {
        flex: 0 0 auto;
        min-width: 230px;
    }
}

/* === CELULAR === */
@media (max-width: 768px) {
    .oportunidades-home-section .oportunidades-destaque {
        gap: 20px;
        padding-bottom: 10px;
    }

    .oportunidades-home-section .oportunidades-destaque--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .oportunidades-home-section .oportunidade-card--destaque .oportunidade-content {
        padding: 20px 18px 22px;
    }

    .oportunidades-home-section .oportunidade-card--destaque .oportunidade-titulo {
        font-size: 1.35rem;
    }

    .oportunidades-home-section .oportunidade-card--destaque .oportunidade-imagem img {
        max-height: none;
    }
}