/* =========================================================
   Programação Home — cards verticais (ph-item)
========================================================= */

:root {
    --ph-card:      #ffffff;
    --ph-accent:    var(--azul-sesc, #004C99);
    --ph-text:      #1a1a2e;
    --ph-muted:     #6b7280;
    --ph-shadow-sm: 0 8px 24px rgba(0,0,0,.12);
}

/* ── Card ─────────────────────────────────────────────── */
#programacao .ph-item {
    background: var(--ph-card);
    border: 1.5px solid rgba(0,76,153,.13);
    border-radius: 16px;
    overflow: hidden;
    padding: .9rem 1rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    position: relative;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Linha colorida no topo */
#programacao .ph-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ph-accent);
    border-radius: 16px 16px 0 0;
}

#programacao .ph-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--ph-shadow-sm);
    border-color: var(--ph-accent);
}

/* ── Header: categoria + badges ───────────────────────── */
#programacao .ph-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
}

#programacao .ph-category {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ph-accent);
}

#programacao .ph-badges {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Datas ────────────────────────────────────────────── */
#programacao .ph-dates {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
}

#programacao .ph-date-item {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

#programacao .ph-day {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ph-accent);
    line-height: 1;
}

#programacao .ph-month {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ph-muted);
    text-transform: uppercase;
    margin-top: 3px;
}

#programacao .ph-dash {
    color: var(--ph-muted);
    font-size: .9rem;
    padding-bottom: .85rem; /* alinha visualmente com os números */
}

/* ── Título ───────────────────────────────────────────── */
#programacao .ph-title {
    font-weight: 700;
    font-size: .93rem;
    line-height: 1.35;
    color: var(--ph-text);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Localização ──────────────────────────────────────── */
#programacao .ph-location {
    font-size: .75rem;
    color: var(--ph-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
}

/* ── Responsivo ───────────────────────────────────────── */
@media (max-width: 576px) {
    #programacao .ph-day   { font-size: 1.6rem; }
    #programacao .ph-title { font-size: .88rem; }
}

/* ── Badge de preço ───────────────────────────────────── */
#programacao .ph-badge-price {
    font-size: .63rem;
    background: rgba(0,76,153,.1);
    color: var(--azul-sesc, #004C99);
    border: 1px solid rgba(0,76,153,.25);
}

[data-bs-theme="dark"] #programacao .ph-badge-price {
    background: rgba(246,190,0,.15);
    color: var(--amarelo, #F6BE00);
    border-color: rgba(246,190,0,.35);
}

/* ── Card de Evento ───────────────────────────────────── */
/* Modo claro: textos em azul (melhor contraste no fundo branco), borda amarela */
#programacao .ph-item--evento {
    --ph-accent: var(--azul-sesc, #004C99);
}
#programacao .ph-item--evento::before {
    background: var(--amarelo, #F6BE00);
}

/* Modo escuro: textos e borda em amarelo */
[data-bs-theme="dark"] #programacao .ph-item--evento {
    --ph-accent: var(--amarelo, #F6BE00);
}

/* ── Dark mode ────────────────────────────────────────── */
/* Badge "Inscrições abertas": text-dark sobrescrito globalmente no dark-theme-publico.css */
[data-bs-theme="dark"] #programacao .badge.bg-warning {
    color: #1a1a2e !important;
}