/*
 * Modelo 05
 * Nova camada de estilos responsivos.
 *
 * Este arquivo sobrescreve progressivamente
 * o CSS legado existente em css/main.css.
 */

/* --------------------------------------------------------------------------
 * Base (todos os viewports)
 * -------------------------------------------------------------------------- */

.modelo05 {
    box-sizing: border-box;
    max-width: 100%;
}

.modelo05 .card {
    box-sizing: border-box;
}

.modelo05 .thumb img,
.modelo05 .icone img {
    max-width: 100%;
    height: auto;
}

.modelo05 .titulo-midia,
.modelo05 .texto-midia {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Modais: reduz conflito com larguras fixas do legado (inline ainda prevalece) */
.bg-modal .modelo05 {
    width: 100%;
}

/* --------------------------------------------------------------------------
 * Desktop (referência visual atual)
 * -------------------------------------------------------------------------- */

@media only screen and (min-width: 1025px) {
    .modelo05 {
        flex-wrap: nowrap;
        width: 100%;
    }

    .modelo05 .card {
        flex: 1 1 19%;
        width: auto;
        max-width: 19%;
        min-width: 0;
    }

    .modelo05 .thumb {
        max-width: 50%;
    }

    .modelo05 .thumb img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 150px;
        object-fit: cover;
        object-position: center;
    }

    .modelo05 .descricao {
        min-width: 0;
    }

    .modelo05 .titulo-midia,
    .modelo05 .texto-midia {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
 * Tablet e mobile (≤ 1024px) — lista empilhada, cards em linha interna
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
    .modelo05 {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 0;
    }

    .modelo05 .card {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 150px;
        align-items: stretch;
        flex-wrap: nowrap;
    }

    .modelo05 .thumb {
        float: none;
        flex: 0 0 auto;
        width: auto;
        max-width: 40%;
    }

    .modelo05 .icone {
        flex: 0 0 auto;
        position: relative;
        top: auto;
        left: auto;
    }

    .modelo05 .icone i {
        width: auto;
        max-width: 100%;
    }

    .modelo05 .thumb i,
    .modelo05 .thumb img,
    .modelo05 .icone i,
    .modelo05 .icone img {
        width: auto;
        height: auto;
        max-width: min(150px, 32vw);
        max-height: 150px;
        object-fit: contain;
    }

    .modelo05 .descricao,
    .modelo05 .card > div:not(.seta-direita):not(.thumb):not(.icone):not(.descricao) {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .modelo05 .titulo-midia {
        padding-right: 0.5rem;
        line-height: 1.25;
    }

    .modelo05 .texto-midia {
        line-height: 1.35;
        margin-right: 0;
    }

    .modelo05 .seta-direita {
        flex: 0 0 auto;
        align-self: center;
        float: none;
        padding: 1rem 0.75rem;
        font-size: clamp(1.75rem, 5vw, 3.5rem);
    }
}

/* --------------------------------------------------------------------------
 * Tablet estreito / mobile largo (≤ 820px)
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 820px) {
    .modelo05 .card {
        min-height: 120px;
    }

    .modelo05 .thumb i,
    .modelo05 .thumb img,
    .modelo05 .icone i,
    .modelo05 .icone img {
        max-width: min(130px, 28vw);
        max-height: 130px;
    }

    .modelo05 .seta-direita {
        padding: 0.75rem 0.5rem;
    }
}

/* --------------------------------------------------------------------------
 * Mobile (≤ 480px)
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 480px) {
    .modelo05 .card {
        min-height: 100px;
        padding: 0.75rem 1rem;
    }

    .modelo05 .thumb {
        max-width: 35%;
    }

    .modelo05 .thumb i,
    .modelo05 .thumb img,
    .modelo05 .icone i,
    .modelo05 .icone img {
        max-width: min(100px, 26vw);
        max-height: 100px;
    }

    .modelo05 .icone i {
        font-size: clamp(2rem, 10vw, 4.5em);
        padding: 0.5rem;
    }

    .modelo05 .titulo-midia {
        font-size: 1.25em;
        padding: 0.5rem 0.25rem 0 0;
    }

    .modelo05 .texto-midia {
        font-size: 0.85em;
    }

    .modelo05 .seta-direita {
        padding: 0.5rem 0.35rem;
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }
}

/* --------------------------------------------------------------------------
 * Mobile estreito (≤ 375px)
 * -------------------------------------------------------------------------- */

@media only screen and (max-width: 375px) {
    .modelo05 .card {
        padding: 0.65rem 0.75rem;
    }

    .modelo05 .titulo-midia {
        font-size: 1.1em;
    }

    .modelo05 .texto-midia {
        font-size: 0.8em;
    }
}