/* =========================
   TOKENS DE TEMA (ajusta aqui)
   ========================= */
:root {
    --brand-900: #0b2f4a; /* azul mais escuro (barra) */
    --brand-800: #0f3d62;
    --brand-700: #124a78;
    --brand-500: #1f6aa5; /* hover/realces */
    --ink-900: #0f172a; /* texto principal */
    --ink-600: #475569; /* texto secundário */
    --bg-page: #f7f8f9; /* fundo geral (cinza muito leve) */
    --card-bg: #ffffff;
    --pill-fg: #ffffff; /* texto nas “pílulas” */
    --pill-bg: var(--brand-800);
    --pill-bg-h: var(--brand-700);
    --accent: #0d6efd; /* pode alinhar com Bootstrap primary */
}

/* Página */
body.bg-body {
    background: var(--bg-page);
    color: var(--ink-900);
}

/* =========================
   BARRA SUPERIOR (brandbar)
   ========================= */
.brandbar {
    background: var(--brand-800);
}

    .brandbar .navbar {
        background: transparent;
    }

    .brandbar .navbar-toggler {
        border-color: rgba(255,255,255,.4);
    }

    .brandbar .navbar-toggler-icon {
        filter: invert(1) brightness(2);
    }

.brand-logo {
    height: 40px;
}

.brandmenu .nav-link {
    opacity: .9;
}

    .brandmenu .nav-link:hover {
        opacity: 1;
        text-decoration: underline;
    }

.brand-search input {
    color: #fff;
    background: rgba(255,255,255,.15);
    border-radius: .25rem;
    padding-inline: .5rem;
}

    .brand-search input::placeholder {
        color: rgba(255,255,255,.8);
    }

    .brand-search input:focus {
        outline: 2px solid rgba(255,255,255,.4);
    }

/* =========================
   TÍTULOS DE SECÇÃO
   ========================= */
.section-title {
    font-size: .95rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--brand-800);
    font-weight: 800;
    margin-bottom: .5rem;
}

/* =========================
   BOTÕES “PÍLULA” (painel esquerdo)
   ========================= */
.btn-pill {
    color: var(--pill-fg);
    background: var(--pill-bg);
    border: 0;
    border-radius: .5rem;
    padding: .6rem .9rem;
    text-align: left;
    font-weight: 600;
    letter-spacing: .02em;
}

    .btn-pill:hover, .btn-pill:focus {
        background: var(--pill-bg-h);
        color: #fff;
    }

/* =========================
   NOTÍCIAS (cartões)
   ========================= */
.card-news .card-title {
    color: var(--ink-900);
}

.card-news .card-text {
    color: var(--ink-600);
}

/* =========================
   AZULEJO DE DATA (Agenda)
   ========================= */
.date-tile {
    width: 56px;
    border-radius: .5rem;
    text-align: center;
    background: var(--brand-800);
    color: #fff;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    line-height: 1;
    padding: .35rem 0;
}

    .date-tile .day {
        font-size: 1.35rem;
        font-weight: 800;
    }

    .date-tile .mon {
        font-size: .8rem;
        letter-spacing: .1em;
        opacity: .9;
    }

/* =========================
   CARDS / IMAGENS
   ========================= */
.object-fit-cover {
    object-fit: cover;
}

/* Pequenos ajustes responsivos conforme o mockup */
@media (max-width: 991.98px) {
    .brand-title {
        display: none;
    }
}





/* Landing */
.thumb64 {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    /*
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: .25rem;
    */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .thumb64 img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* nunca distorce */
    }

/* ===== Slider horizontal via overflow ===== */
.mm-slider {
    display: flex;
    gap: .75rem; /* espaço entre cards */
    overflow-x: auto; /* scroll horizontal */
    padding: .25rem .25rem .5rem;
    scroll-snap-type: x proximity; /* snap mais suave */
    -webkit-overflow-scrolling: touch; /* inércia no iOS */
    scroll-behavior: smooth; /* (novo) rolagem suave quando usado com botões/teclas */
    overscroll-behavior-x: contain; /* (novo) evita "puxar" a página ao fim do slider */
}

    /* Barra de scroll (opcional) */
    .mm-slider::-webkit-scrollbar {
        height: 8px;
    }

    .mm-slider::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 4px;
    }

/* Cada item do slider */
.mm-slide {
    flex: 0 0 auto; /* não crescer/encolher */
    width: 200px; /* largura fixa pedida */
    scroll-snap-align: start;
}

/* ===== Card 200x200, altura uniforme ===== */
.mm-card {
    width: 200px; /* largura fixa */
    height: 200px; /* altura fixa */
    display: flex;
    flex-direction: column;
    border-radius: .5rem; /* opcional para combinar com Bootstrap */
    overflow: hidden; /* recorta a imagem */
    background-color: var(--bs-card-bg, #fff); /* (novo) garante bg em dark/light */
}

/* Thumbnail ocupa parte superior; 110–120px funciona bem */
.mm-thumb {
    width: 100%;
    height: 110px; /* controla quanto da altura total ocupa a imagem */
    object-fit: cover; /* “crop” elegante mantendo proporção */
    display: block;
    background: #f2f2f2; /* fallback enquanto carrega */
}

/* Título ocupa o restante espaço, com clamp a 2 linhas */
.mm-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* número de linhas visíveis */
    overflow: hidden;
    line-height: 1.2;
}

/* Ajustes finos para tema Bootstrap */
.mm-card .card-body {
    flex: 1 1 auto;
}
/* enche o espaço até perfazer 200px */



/* ===== HERO DO PLAYER ===== */
.media-hero {
    /* usa 16:9 por defeito; JS ajusta ao aspeto real (ex.: 4:3, 21:9, vertical, etc.) */
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.08);
}

    /* Garantir que o vídeo (e o wrapper do Plyr) ocupam o container a 100% */
    .media-hero video,
    .plyr--video .plyr__video-wrapper {
        width: 100% !important;
        height: 100% !important;
    }

    /* Enchimento sem barras: “cover” (ou troca para 'contain' se preferires letterbox) */
    .media-hero video {
        object-fit: cover;
    }

/* Cor principal do Plyr alinhada com o tema (Bootstrap primary) */
.plyr--full-ui.plyr--video {
    --plyr-color-main: var(--bs-primary, #0d6efd);
}