/* =============================================================================
   HOME
   ============================================================================= */


/* =============================================================================
   PROGRAMAS EM DESTAQUE
   ============================================================================= */

.home-programas {
    width: 100%;

    padding:
        var(--espaco-5)
        var(--espaco-4);

    background-color: var(--cor-fundo-site);
}


/* -------------------------------------------------------------------------
   CABEÇALHO
   ------------------------------------------------------------------------- */

.home-programas__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--espaco-3);

    margin-bottom: var(--espaco-3);
}

.home-programas__titulo {
    margin: 0;

    color: var(--cor-branco);

    font-size: 1.25rem;
    font-weight: 700;
}


/* -------------------------------------------------------------------------
   VER TODOS
   ------------------------------------------------------------------------- */

.home-programas__ver-todos {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: var(--espaco-1);

    color: var(--cor-branco);

    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.home-programas__ver-todos .material-symbols-rounded {
    font-size: 1.25rem;
}


/* -------------------------------------------------------------------------
   LISTA DE PROGRAMAS
   ------------------------------------------------------------------------- */

.home-programas__lista {
    display: flex;

    gap: var(--espaco-3);

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: var(--espaco-2);

    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}


/* -------------------------------------------------------------------------
   CARD
   ------------------------------------------------------------------------- */

.home-programas__card {
    display: block;

    flex:
        0
        0
        clamp(8.5rem, 40vw, 10rem);

    overflow: hidden;

    border-radius: var(--raio-medio);

    scroll-snap-align: start;

    text-decoration: none;
}

.home-programas__card img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 9 / 16;

    object-fit: cover;
}


/* =============================================================================
   INTERAÇÕES COM PONTEIRO
   ============================================================================= */

@media (hover: hover) {

    .home-programas__ver-todos:hover {
        text-decoration: underline;
    }

    .home-programas__card {
        transition:
            transform var(--transicao-rapida);
    }

    .home-programas__card:hover {
        transform: translateY(-0.25rem);
    }
}


/* =============================================================================
   TABLET
   ============================================================================= */

@media (min-width: 48rem) {

    .home-programas {
        padding:
            var(--espaco-5)
            var(--espaco-6);
    }

    .home-programas__card {
        flex-basis: 10.5rem;
    }
}


/* =============================================================================
   DESKTOP
   ============================================================================= */

@media (min-width: 64rem) {

    .home-programas {
        padding:
            var(--espaco-5)
            var(--espaco-7);
    }

    .home-programas__lista {
        display: grid;

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: var(--espaco-4);

        overflow: visible;

        padding-bottom: 0;
    }

    .home-programas__card {
        width: 100%;
    }
}


/* =============================================================================
   DESKTOP GRANDE
   ============================================================================= */

@media (min-width: 90rem) {

    .home-programas {
        max-width: 1600px;

        margin-inline: auto;
    }
}


/* =============================================================================
   VÍDEOS RECENTES
   ============================================================================= */

.home-videos {
    width: 100%;

    padding:
        var(--espaco-5)
        var(--espaco-4);

    background-color: var(--cor-fundo-site);
}


/* -------------------------------------------------------------------------
   CABEÇALHO
   ------------------------------------------------------------------------- */

.home-videos__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--espaco-3);

    margin-bottom: var(--espaco-3);
}

.home-videos__titulo {
    margin: 0;

    color: var(--cor-branco);

    font-size: 1.25rem;
    font-weight: 700;
}


/* -------------------------------------------------------------------------
   VER TODOS
   ------------------------------------------------------------------------- */

.home-videos__ver-todos {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: var(--espaco-1);

    color: var(--cor-branco);

    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.home-videos__ver-todos .material-symbols-rounded {
    font-size: 1.25rem;
}


/* -------------------------------------------------------------------------
   LISTA
   ------------------------------------------------------------------------- */

.home-videos__lista {
    display: flex;

    gap: var(--espaco-3);

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: var(--espaco-2);

    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}


/* -------------------------------------------------------------------------
   CARD
   ------------------------------------------------------------------------- */

.home-videos__card {
    flex:
        0
        0
        clamp(13rem, 70vw, 17rem);

    margin: 0;

    scroll-snap-align: start;
}


/* -------------------------------------------------------------------------
   LINK
   ------------------------------------------------------------------------- */

.home-videos__link {
    display: block;

    color: var(--cor-branco);
    text-decoration: none;
}


/* -------------------------------------------------------------------------
   THUMBNAIL
   ------------------------------------------------------------------------- */

.home-videos__thumbnail {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: var(--raio-medio);

    aspect-ratio: 16 / 9;
}

.home-videos__thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* -------------------------------------------------------------------------
   DURAÇÃO
   ------------------------------------------------------------------------- */

.home-videos__duracao {
    position: absolute;

    right: var(--espaco-2);
    bottom: var(--espaco-2);

    padding:
        0.125rem
        0.375rem;

    color: var(--cor-branco);
    background-color: rgb(0 0 0 / 80%);

    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;

    border-radius: var(--raio-pequeno);
}


/* -------------------------------------------------------------------------
   TÍTULO DO VÍDEO
   ------------------------------------------------------------------------- */

.home-videos__card-titulo {
    margin:
        var(--espaco-2)
        0
        0;

    color: var(--cor-branco);

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}


/* -------------------------------------------------------------------------
   METADADOS
   ------------------------------------------------------------------------- */

.home-videos__meta {
    margin:
        var(--espaco-2)
        0
        0;

    color: rgb(255 255 255 / 75%);

    font-size: 0.875rem;
    line-height: 1.4;
}


/* =============================================================================
   TABLET
   ============================================================================= */

@media (min-width: 48rem) {

    .home-videos {
        padding:
            var(--espaco-5)
            var(--espaco-6);
    }

    .home-videos__card {
        flex-basis: 70%;
    }
}


/* =============================================================================
   DESKTOP
   ============================================================================= */

@media (min-width: 64rem) {

    .home-videos {
        padding:
            var(--espaco-5)
            var(--espaco-7);
    }

    .home-videos__lista {
        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: var(--espaco-4);

        overflow: visible;

        padding-bottom: 0;
    }

    .home-videos__card {
        width: 100%;
    }
}


/* =============================================================================
   DESKTOP GRANDE
   ============================================================================= */

@media (min-width: 90rem) {

    .home-videos {
        max-width: 1600px;

        margin-inline: auto;
    }
}


/* =============================================================================
   CATEGORIAS
   ============================================================================= */

.home-categorias {
    width: 100%;

    padding:
        var(--espaco-5)
        var(--espaco-4);

    background-color: var(--cor-fundo-site);
}


/* -------------------------------------------------------------------------
   TÍTULO
   ------------------------------------------------------------------------- */

.home-categorias__titulo {
    margin:
        0
        0
        var(--espaco-3);

    color: var(--cor-branco);

    font-size: 1.25rem;
    font-weight: 700;
}


/* -------------------------------------------------------------------------
   LISTA
   ------------------------------------------------------------------------- */

.home-categorias__lista {
    display: flex;

    gap: var(--espaco-3);

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: var(--espaco-2);

    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
}


/* -------------------------------------------------------------------------
   CARD
   ------------------------------------------------------------------------- */

.home-categorias__card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    flex:
        0
        0
        clamp(9rem, 42vw, 11rem);

    min-height: 10rem;

    padding: var(--espaco-4);

    color: var(--cor-branco);

    text-align: center;
    text-decoration: none;

    border-radius: var(--raio-medio);

    scroll-snap-align: start;

    transition:
        transform var(--transicao-rapida);
}


/* -------------------------------------------------------------------------
   CORES
   ------------------------------------------------------------------------- */

.home-categorias__card--literatura {
    background-color: #7142c7;
}

.home-categorias__card--meio-ambiente {
    background-color: #20a83a;
}

.home-categorias__card--documentarios {
    background-color: #0878d1;
}

.home-categorias__card--cultura {
    background-color: #f36c21;
}

.home-categorias__card--entrevistas {
    background-color: #df1672;
}


/* -------------------------------------------------------------------------
   ÍCONE
   ------------------------------------------------------------------------- */

.home-categorias__icone {
    margin-bottom: var(--espaco-2);

    font-size: 2.5rem;
}


/* -------------------------------------------------------------------------
   NOME
   ------------------------------------------------------------------------- */

.home-categorias__nome {
    margin: 0;

    color: inherit;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}


/* -------------------------------------------------------------------------
   DESCRIÇÃO
   ------------------------------------------------------------------------- */

.home-categorias__descricao {
    margin:
        var(--espaco-2)
        0
        0;

    color: inherit;

    font-size: 0.875rem;
    line-height: 1.3;
}


/* =============================================================================
   INTERAÇÕES COM PONTEIRO
   ============================================================================= */

@media (hover: hover) {

    .home-categorias__card:hover {
        transform: translateY(-0.25rem);
    }
}


/* =============================================================================
   TABLET
   ============================================================================= */

@media (min-width: 48rem) {

    .home-categorias {
        padding:
            var(--espaco-5)
            var(--espaco-6);
    }

    .home-categorias__card {
        flex-basis: 11rem;
    }
}


/* =============================================================================
   DESKTOP
   ============================================================================= */

@media (min-width: 64rem) {

    .home-categorias {
        padding:
            var(--espaco-5)
            var(--espaco-7);
    }

    .home-categorias__lista {
        display: grid;

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: var(--espaco-4);

        overflow: visible;

        padding-bottom: 0;
    }

    .home-categorias__card {
        width: 100%;
    }
}


/* =============================================================================
   DESKTOP GRANDE
   ============================================================================= */

@media (min-width: 90rem) {

    .home-categorias {
        max-width: 1600px;

        margin-inline: auto;
    }
}


/* =============================================================================
   SOBRE A TV ATLÂNTICA
   ============================================================================= */

.home-sobre {
    position: relative;

    width: 100%;
    min-height: 22rem;

    display: flex;
    align-items: flex-start;

    padding:
        var(--espaco-6)
        var(--espaco-4);

    background-image:
        linear-gradient(
            90deg,
            rgb(255 255 255 / 92%) 0%,
            rgb(255 255 255 / 78%) 48%,
            rgb(255 255 255 / 15%) 75%,
            transparent 100%
        ),
        url("/public/images/layout/copacabana-praia-arte.webp");

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* -------------------------------------------------------------------------
   CONTEÚDO
   ------------------------------------------------------------------------- */

.home-sobre__conteudo {
    position: relative;

    z-index: 1;

    width: 100%;
    max-width: 34rem;
}


/* -------------------------------------------------------------------------
   TÍTULO
   ------------------------------------------------------------------------- */

.home-sobre__titulo {
    margin: 0;

    color: var(--cor-azul-titulo);

    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}


/* -------------------------------------------------------------------------
   TEXTO
   ------------------------------------------------------------------------- */

.home-sobre__texto {
    max-width: 30rem;

    margin:
        var(--espaco-3)
        0
        0;

    color: var(--cor-texto);

    font-size: 0.9375rem;
    line-height: 1.5;
}


/* -------------------------------------------------------------------------
   LINK
   ------------------------------------------------------------------------- */

.home-sobre__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--espaco-1);

    min-height: 44px;

    margin-top: var(--espaco-4);

    padding:
        var(--espaco-2)
        var(--espaco-4);

    color: var(--cor-branco);
    background-color: var(--cor-fundo-site);

    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;

    border-radius: 999px;

    transition:
        transform var(--transicao-rapida);
}

.home-sobre__link .material-symbols-rounded {
    font-size: 1.25rem;
}


/* -------------------------------------------------------------------------
   SLOGAN
   ------------------------------------------------------------------------- */

.home-sobre__slogan {
    position: absolute;
    right: var(--espaco-4);
    bottom: var(--espaco-4);

    z-index: 1;

    display: block;

    width: clamp(8.5rem, 42vw, 12rem);
    height: auto;
}


/* =============================================================================
   INTERAÇÕES COM PONTEIRO
   ============================================================================= */

@media (hover: hover) {

    .home-sobre__link:hover {
        transform: translateY(-0.125rem);
    }
}


/* =============================================================================
   TABLET
   ============================================================================= */

@media (min-width: 48rem) {

    .home-sobre {
        min-height: 22rem;

        padding:
            var(--espaco-6)
            var(--espaco-5);

        background-position: center;
    }

    .home-sobre__titulo {
        font-size: 2.125rem;
    }

    .home-sobre__texto {
        max-width: 27rem;

        font-size: 1rem;
    }

    .home-sobre__slogan {
        right: var(--espaco-5);
        bottom: var(--espaco-4);

        width: 15rem;
    }
}


/* =============================================================================
   DESKTOP
   ============================================================================= */

@media (min-width: 64rem) {

    .home-sobre {
        min-height: 26rem;

        align-items: center;

        padding:
            var(--espaco-7)
            var(--espaco-7);

        background-image:
            linear-gradient(
                90deg,
                rgb(255 255 255 / 94%) 0%,
                rgb(255 255 255 / 75%) 38%,
                rgb(255 255 255 / 10%) 65%,
                transparent 78%
            ),
            url("/public/images/layout/copacabana-praia-arte.webp");
    }

    .home-sobre__conteudo {
        max-width: 38rem;
    }

    .home-sobre__slogan {
        right: var(--espaco-7);
        bottom: var(--espaco-6);

        width: 24rem;
    }
}


/* =============================================================================
   DESKTOP GRANDE
   ============================================================================= */

@media (min-width: 90rem) {

    .home-sobre {
        max-width: 1600px;

        margin-inline: auto;
    }
}

/* ==========================================================
   NEWSLETTER
   ========================================================== */

.home-newsletter {
    width: 100%;
    padding:
        var(--espaco-5)
        var(--espaco-4);
    background-color: #06347c;
}

.home-newsletter__conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-4);
    width: 100%;
}

.home-newsletter__icone {
    flex-shrink: 0;
    color: var(--cor-branco);
    font-size: 3rem;
}

.home-newsletter__texto {
    text-align: center;
}

.home-newsletter__titulo {
    margin: 0;
    color: var(--cor-branco);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.home-newsletter__descricao {
    max-width: 28rem;
    margin:
        var(--espaco-2)
        0
        0;
    color: var(--cor-branco);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.home-newsletter__formulario {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    width: 100%;
    max-width: 28rem;
}

.home-newsletter__campo {
    width: 100%;
    min-height: 3rem;
    padding:
        var(--espaco-2)
        var(--espaco-4);
    color: var(--cor-texto);
    background-color: var(--cor-branco);
    font: inherit;
    border: 0;
    border-radius: 0.75rem;
    outline: 0;
}

.home-newsletter__campo::placeholder {
    color: #6b7280;
}

.home-newsletter__campo:focus-visible {
    outline: 3px solid #ffd600;
    outline-offset: 2px;
}

.home-newsletter__botao {
    min-height: 3rem;
    padding:
        var(--espaco-2)
        var(--espaco-5);
    color: #062e6f;
    background-color: #ffd600;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition:
        transform var(--transicao-rapida),
        filter var(--transicao-rapida);
}

.home-newsletter__botao:active {
    transform: scale(0.98);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 48rem) {

    .home-newsletter {
        padding:
            var(--espaco-5)
            var(--espaco-5);
    }

    .home-newsletter__conteudo {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--espaco-4);
        row-gap: var(--espaco-4);
        align-items: center;
    }

    .home-newsletter__icone {
        grid-row: 1;
        font-size: 3.25rem;
    }

    .home-newsletter__texto {
        grid-row: 1;
        text-align: left;
    }

    .home-newsletter__formulario {
        grid-column: 1 / -1;
        flex-direction: row;
        max-width: none;
    }

    .home-newsletter__campo {
        flex: 1;
    }

    .home-newsletter__botao {
        flex-shrink: 0;
    }
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 64rem) {

    .home-newsletter {
        padding:
            var(--espaco-5)
            var(--espaco-7);
    }

    .home-newsletter__conteudo {
        grid-template-columns: auto minmax(18rem, 1fr) minmax(26rem, 1fr);
        gap: var(--espaco-4);
    }

    .home-newsletter__icone,
    .home-newsletter__texto,
    .home-newsletter__formulario {
        grid-row: 1;
    }

    .home-newsletter__formulario {
        grid-column: auto;
    }

    .home-newsletter__titulo {
        font-size: 1.375rem;
    }
}


/* ==========================================================
   DESKTOP GRANDE
   ========================================================== */

@media (min-width: 90rem) {

    .home-newsletter__conteudo {
        max-width: 100rem;
        margin-inline: auto;
    }
}


/* ==========================================================
   TELAS MUITO GRANDES
   ========================================================== */

@media (min-width: 120rem) {

    .home-newsletter__conteudo {
        max-width: 110rem;
    }
}