/* ============================================================
   style.css — Estilos próprios do projeto
   Carregado depois do Bootstrap para sobrescrever ou complementar.
   ============================================================ */

:root {
    --bg-body: #f8f9fa;
    --border-color: #dee2e6;
    --placeholder-bg: #e9ecef;
}

/* Zero arredondamento de borda em tudo para estética crua e minimalista */
* {
    border-radius: 0 !important;
}

/* ── Body ─────────────────────────────────────────────────── */

body {
    background-color: var(--bg-body);
    /* height/overflow/flex do shell de página são responsabilidade do
       layout.css (app-shell de altura fixa, sem scroll de página) */
}

/* ── Área da Logo ─────────────────────────────────────────── */

.header-logo-area {
    padding: 2.5rem 0 0 0;
    text-align: center;
}

.header-logo-area h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

/* Logo em imagem (themes/{slug}/assets/images/logo.png) */
.site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo-img {
    display: block;
    max-width: min(420px, 85vw);
    max-height: clamp(64px, 14vh, 140px);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ── Barra Superior Opcional ──────────────────────────────── */

.optional-top-bar {
    background-color: var(--placeholder-bg);
    border: 1px solid var(--border-color);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* ── Sidebars Opcionais ───────────────────────────────────── */

.optional-sidebar {
    background-color: var(--placeholder-bg);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    height: 100%;
}

/* ── Painel Principal ─────────────────────────────────────── */

.site-main {
    min-height: 0;
    /* garante que o flex/grid interno respeite 1fr na altura */
}

.main-content-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Grade de Projetos — Bootstrap row > col ───────────────── */

#projectsGrid {
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
}

#projectsGrid > .project-card-col {
    display: flex;
    min-width: 0;
}

#projectsGrid .project-card {
    width: 100%;
}

/* O modo retangular continua preenchendo a altura disponível de cada
   linha, mas sem impor altura inline nem criar uma segunda grade. */
.site-wrapper[data-card-format="rectangle"] .project-card,
#projectsGrid[data-card-format="rectangle"] .project-card {
    height: 100%;
    min-height: 120px;
    flex: 1 1 auto;
}

/* No modo quadrado, o tamanho é calculado pelo CSS a partir da largura
   real da coluna Bootstrap. Isso acompanha sidebars, topbar e breakpoints. */
.site-wrapper[data-card-format="square"] #projectsGrid,
#projectsGrid[data-card-format="square"] {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    align-content: start;
}

.site-wrapper[data-card-format="square"] .main-content-panel {
    height: 100%;
    min-height: 0;
    justify-content: center;
}

.site-wrapper[data-card-format="square"] #projectsGrid > .project-card-col,
#projectsGrid[data-card-format="square"] > .project-card-col {
    align-items: flex-start;
}

/*
   Em telas largas há três colunas e três linhas. A largura do grid fica
   limitada à altura do painel; com isso, o conjunto inteiro cabe na
   viewport e cada card conserva a proporção quadrada.
*/
.site-wrapper[data-card-format="square"] > .site-main,
.site-wrapper[data-card-format="square"] .main-content-panel {
    container-type: size;
}

.site-wrapper[data-card-format="square"] #projectsGrid,
#projectsGrid[data-card-format="square"] {
    width: min(100%, 100cqh);
    max-width: 100%;
    margin-inline: auto;
}

.site-wrapper[data-card-format="square"] .project-card,
#projectsGrid[data-card-format="square"] .project-card {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
}

/*
   Com apenas uma sidebar, a área principal fica naturalmente deslocada para
   o lado oposto. Como o grid não ocupa a viewport inteira, o deslocamento
   fica visualmente evidente em relação à logo e à paginação, que continuam
   centradas na viewport. Compensa-se metade da sidebar mais metade do gap
   nos dois formatos e somente em telas onde ela fica lateral.
*/
@media (min-width: 992px) {
    .site-wrapper[data-show-left="1"][data-show-right="0"] #projectsGrid {
        position: relative;
        left: calc((var(--sidebar-left-width) + var(--layout-gap)) * -0.5);
    }

    .site-wrapper[data-show-left="0"][data-show-right="1"] #projectsGrid {
        position: relative;
        left: calc((var(--sidebar-right-width) + var(--layout-gap)) * 0.5);
    }

    .site-wrapper[data-show-left="1"][data-show-right="1"] #projectsGrid {
        position: static;
    }
}

.project-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background-color: #ced4da;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card { cursor: pointer; }
.category-back {
    flex: 0 0 auto;
}
.catalog-empty {
    padding: 4rem 1rem;
    text-align: center;
    border: 1px dashed rgba(20,34,56,.18);
    border-radius: 16px;
    color: #718196;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}


/* ── Indicadores dos cards (contagem / acesso / download) ──
 * Canto superior do card (chips), para não colidir com
 * .project-card-label no rodapé usado por vários temas.
 * Temas podem sobrescrever cores sem alterar a estrutura.
 */
.project-card-meta {
    position: absolute !important;
    top: 0.45rem;
    right: 0.45rem;
    left: auto;
    bottom: auto;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.3rem;
    max-width: calc(100% - 0.9rem);
    padding: 0;
    pointer-events: none;
    background: none;
    border-radius: 0;
    box-sizing: border-box;
}

.project-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 100%;
}

.project-card-meta-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.project-card-meta-text {
    opacity: 0.95;
    white-space: nowrap;
}

.project-card-meta-icon {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.95;
}

.project-card-meta-icon svg {
    display: block;
    width: 12px;
    height: 12px;
}

.project-card-meta-count .project-card-meta-value {
    font-size: 0.75rem;
}

/* Ragnarok e temas com title bar no topo: desce um pouco os chips */
.project-card[class] .project-card-meta {
    /* default top already set */
}

/* ============================================================
   Posição do contador sobre a capa — controlado em Config. Site
   > Layout > "Posição do contador sobre a capa" (ou por categoria).
   TUDO com !important de propósito: esta é uma decisão estrutural do
   admin, não uma questão estética — o tema ativo carrega DEPOIS deste
   arquivo (via #theme-overlay) e não deve conseguir silenciosamente
   sobrescrever uma posição que o admin escolheu explicitamente no
   painel. Mesmo padrão já usado neste projeto pro border-radius.
   ============================================================ */
#projectsGrid[data-card-count-position="top-right"] .project-card-meta {
    top: 0.45rem !important; right: 0.45rem !important; left: auto !important; bottom: auto !important;
    transform: none !important;
    justify-content: flex-end !important;
}
#projectsGrid[data-card-count-position="top-left"] .project-card-meta {
    top: 0.45rem !important; left: 0.45rem !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    justify-content: flex-start !important;
}
#projectsGrid[data-card-count-position="bottom-right"] .project-card-meta {
    top: auto !important; bottom: 0.45rem !important; right: 0.45rem !important; left: auto !important;
    transform: none !important;
    justify-content: flex-end !important;
}
#projectsGrid[data-card-count-position="bottom-left"] .project-card-meta {
    top: auto !important; bottom: 0.45rem !important; left: 0.45rem !important; right: auto !important;
    transform: none !important;
    justify-content: flex-start !important;
}
#projectsGrid[data-card-count-position="center"] .project-card-meta {
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    justify-content: center !important;
    max-width: calc(100% - 1.6rem);
}

/* Placeholder não leva meta */
.project-card.is-placeholder .project-card-meta {
    display: none !important;
}

.project-card.is-placeholder .project-card-meta {
    display: none;
}

/* Placeholder: preenche vagas até completar a página, mas não pode parecer
   post real — sem cursor de link, sem hover, thumb tracejado e apagado. */
.project-card.is-placeholder {
    cursor: default;
}

.project-card.is-placeholder:hover {
    transform: none;
    box-shadow: none;
}

.project-card.is-placeholder {
    border: 2px solid #000;
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Cores de diagnóstico dos placeholders, mantidas para facilitar a
   conferência visual das posições retornadas pelo painel. */
.project-card-col:nth-child(1) .is-placeholder {
    background-color: rgba(255, 0, 0, 0.55) !important;
    position: relative;
    z-index: 1;
}

.project-card-col:nth-child(2) .is-placeholder {
    background-color: rgba(255, 136, 0, 0.55) !important;
    position: relative;
    z-index: 2;
}

.project-card-col:nth-child(3) .is-placeholder {
    background-color: rgba(255, 238, 0, 0.55) !important;
    position: relative;
    z-index: 3;
}

.project-card-col:nth-child(4) .is-placeholder {
    background-color: rgba(0, 255, 42, 0.55) !important;
    position: relative;
    z-index: 4;
}

.project-card-col:nth-child(5) .is-placeholder {
    background-color: rgba(0, 238, 255, 0.55) !important;
    position: relative;
    z-index: 5;
}

.project-card-col:nth-child(6) .is-placeholder {
    background-color: rgba(0, 51, 255, 0.55) !important;
    position: relative;
    z-index: 6;
}

.project-card-col:nth-child(7) .is-placeholder {
    background-color: rgba(179, 0, 255, 0.55) !important;
    position: relative;
    z-index: 7;
}

.project-card-col:nth-child(8) .is-placeholder {
    background-color: rgba(255, 0, 200, 0.55) !important;
    position: relative;
    z-index: 8;
}

.project-card-col:nth-child(9) .is-placeholder {
    background-color: rgba(255, 255, 255, 0.55) !important;
    position: relative;
    z-index: 9;
}

.project-card-label {
    padding: 0.35rem 0.65rem;
    text-align: center;
    color: #6c757d;
    font-weight: 500;
}

.project-card-description {
    margin: 0;
    padding: 0 0.65rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #8a94a3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Paginação ────────────────────────────────────────────── */

.pagination-area {
    padding: 1.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Footer ───────────────────────────────────────────────── */

footer {
    padding: 1.5rem 0;
    font-size: 0.875rem;
    color: #6c757d;
}

/* ============================================================
   Dark Mode — só redefine as NOSSAS variáveis/classes.
   Bootstrap já cuida do resto via [data-bs-theme=dark].
   ============================================================ */

[data-bs-theme="dark"] {
    --bg-body: #121212;
    --border-color: #343a40;
    --placeholder-bg: #1e1e1e;
}

[data-bs-theme="dark"] .project-card {
    background-color: #2b3035;
    color: #adb5bd;
}

[data-bs-theme="dark"] footer {
    color: #adb5bd;
}

/* ============================================================
   Leitor de posts — transformação AJAX
   O leitor vive no mesmo painel do grid. Os estados são controlados
   por classes, sem reconstruir o layout inteiro com JavaScript.
   ============================================================ */

.post-reader[hidden] {
    display: none !important;
}

.post-reader {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: clamp(1rem, 3vw, 3rem);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 220ms ease, transform 220ms ease;
}

.post-reader.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.post-reader.is-loading,
.post-reader.is-error {
    min-height: 15rem;
}

.post-reader-status {
    min-height: 1.5rem;
    margin: 0 0 1rem;
    color: var(--post-reader-muted, #6c757d);
}

.post-reader-status[data-state="error"] {
    color: var(--post-reader-error, #b42318);
}

.post-reader-article {
    width: min(100%, 58rem);
    margin: 0 auto;
}

.post-reader-title {
    margin: 0 0 1.5rem;
    overflow-wrap: anywhere;
}

.post-reader-body {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.7;
}

.post-reader-body > :first-child {
    margin-top: 0;
}

.post-reader-body > :last-child {
    margin-bottom: 0;
}

.post-reader-body img,
.post-reader-body video,
.post-reader-body iframe {
    display: block;
    max-width: 100%;
    height: auto;
}

.post-reader-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.post-reader-body th,
.post-reader-body td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.post-reader-body pre {
    max-width: 100%;
    padding: 1rem;
    overflow-x: auto;
    background: color-mix(in srgb, var(--placeholder-bg) 75%, #000 25%);
}

.post-reader-body code {
    overflow-wrap: anywhere;
}

.post-reader-body blockquote {
    padding-left: 1rem;
    border-left: 4px solid var(--border-color);
    color: var(--post-reader-muted, #6c757d);
}

.post-reader-body a {
    overflow-wrap: anywhere;
}

.post-reader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.post-reader-action,
.post-reader-retry,
.post-reader-back,
.post-reader-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.post-reader-action:hover,
.post-reader-retry:hover,
.post-reader-back:hover,
.post-reader-top:hover {
    transform: translateY(-2px);
}

.post-reader-back {
    margin-bottom: 1.5rem;
}

.post-reader-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    background: var(--bg-body);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);
}

.post-reader-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.post-reader-top[hidden] {
    display: none !important;
}

.main-content-panel.is-reading {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
}

.main-content-panel.is-reading #projectsGrid {
    flex: 0 0 auto;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity 180ms ease, transform 180ms ease, max-height 220ms ease;
}

.main-content-panel.is-reading #projectsGrid.is-leaving {
    max-height: 0;
}

.main-content-panel.is-reading .post-reader {
    flex: 0 0 auto;
}

/* layout.css usa um app-shell sem scroll global no catálogo. A leitura
   reativa a rolagem natural da página e deixa o conteúdo crescer. */
body.is-post-reading {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}

body.is-post-reading .site-wrapper {
    min-height: 0;
    overflow: visible;
}

body.is-post-reading .site-main {
    overflow: visible;
}

body.is-post-reading .main-content-panel {
    height: auto;
}

[data-bs-theme="dark"] .post-reader {
    --post-reader-muted: #adb5bd;
    --post-reader-error: #ffb4ab;
}

@media (max-width: 767.98px) {
    .post-reader {
        padding: 1rem 0;
    }

    .post-reader-title {
        font-size: clamp(1.5rem, 7vw, 2.25rem);
    }

    .post-reader-top {
        right: 1rem;
        bottom: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-reader,
    .main-content-panel.is-reading #projectsGrid,
    .post-reader-action,
    .post-reader-retry,
    .post-reader-back,
    .post-reader-top {
        transition-duration: 1ms;
        scroll-behavior: auto;
    }
}

/* Data do projeto no final do post (leitor) */
.post-reader-project-date {
    margin: 1.5rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.9rem;
    color: #6c757d;
    font-style: italic;
}
[data-bs-theme="dark"] .post-reader-project-date {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: #adb5bd;
}

/* ============================================================
   NAVBAR (#topBar) — marca + alternância de tema.
   Estrutural/neutro; temas podem sobrescrever livremente.
   ============================================================ */
.site-topbar {
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-bs-theme="dark"] .site-topbar { border-bottom-color: rgba(255, 255, 255, 0.08); }

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.topbar-brand::before {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
}
.topbar-brand:hover { color: var(--bs-primary, #0d6efd); }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.topbar-icon-btn:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.2); }
[data-bs-theme="dark"] .topbar-icon-btn { border-color: rgba(255, 255, 255, 0.15); }
[data-bs-theme="dark"] .topbar-icon-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }

/* ============================================================
   CABEÇALHO DE PÁGINA — título + subtítulo acima da grade.
   ============================================================ */
.page-header {
    margin-bottom: 1.5rem;
}
.page-header-accent {
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: 0.75rem;
    border-radius: 2px;
    background: var(--bs-primary, #0d6efd);
}
.page-header-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.page-header-subtitle {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
}
[data-bs-theme="dark"] .page-header-subtitle { color: #adb5bd; }

/* ============================================================
   LAYOUT "DIVIDIDO" (card_layout = split) — imagem em cima,
   painel sólido embaixo com título/descrição/contador/CTA.
   Estrutura própria (project-card--split), não conflita com o
   layout "overlay" (default) nem com CSS de tema nenhum, já que
   é opt-in e as classes .project-card-cover/-body/-footer não
   existiam antes.
   ============================================================ */
.project-card--split {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.project-card--split:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
[data-bs-theme="dark"] .project-card--split { background: #1a1d24; border-color: rgba(255, 255, 255, 0.08); }

#projectsGrid[data-card-layout="split"][data-card-format="square"] .project-card--split { aspect-ratio: auto; }

.project-card-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: rgba(0, 0, 0, 0.06);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .project-card-cover { background-color: rgba(255, 255, 255, 0.06); }

.project-card-badge,
.project-card-badge-group {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.project-card-badge-group { flex-direction: column; align-items: flex-end; }
.project-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.project-card-badge-icon { flex-shrink: 0; }

/* Posição do contador sobre a capa (layout "Dividido") — mesmo controle
   e mesmo motivo do !important usado no layout "overlay" acima. */
#projectsGrid[data-card-count-position="top-right"] .project-card-badge,
#projectsGrid[data-card-count-position="top-right"] .project-card-badge-group {
    top: 0.6rem !important; right: 0.6rem !important; left: auto !important; bottom: auto !important;
    transform: none !important;
}
#projectsGrid[data-card-count-position="top-right"] .project-card-badge-group { align-items: flex-end !important; }

#projectsGrid[data-card-count-position="top-left"] .project-card-badge,
#projectsGrid[data-card-count-position="top-left"] .project-card-badge-group {
    top: 0.6rem !important; left: 0.6rem !important; right: auto !important; bottom: auto !important;
    transform: none !important;
}
#projectsGrid[data-card-count-position="top-left"] .project-card-badge-group { align-items: flex-start !important; }

#projectsGrid[data-card-count-position="bottom-right"] .project-card-badge,
#projectsGrid[data-card-count-position="bottom-right"] .project-card-badge-group {
    top: auto !important; bottom: 0.6rem !important; right: 0.6rem !important; left: auto !important;
    transform: none !important;
}
#projectsGrid[data-card-count-position="bottom-right"] .project-card-badge-group { align-items: flex-end !important; }

#projectsGrid[data-card-count-position="bottom-left"] .project-card-badge,
#projectsGrid[data-card-count-position="bottom-left"] .project-card-badge-group {
    top: auto !important; bottom: 0.6rem !important; left: 0.6rem !important; right: auto !important;
    transform: none !important;
}
#projectsGrid[data-card-count-position="bottom-left"] .project-card-badge-group { align-items: flex-start !important; }

#projectsGrid[data-card-count-position="center"] .project-card-badge,
#projectsGrid[data-card-count-position="center"] .project-card-badge-group {
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
}
#projectsGrid[data-card-count-position="center"] .project-card-badge-group { align-items: center !important; }

.project-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0.9rem 1rem 1rem;
}

.project-card-title {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: inherit;
}

.project-card--split .project-card-description {
    padding: 0;
    margin-bottom: 0.6rem;
    flex: 1 1 auto;
}

.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.8rem;
}
[data-bs-theme="dark"] .project-card-footer { border-top-color: rgba(255, 255, 255, 0.08); }

.project-card-footer-count { color: #6c757d; }
[data-bs-theme="dark"] .project-card-footer-count { color: #adb5bd; }

.project-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}
.project-card--split:hover .project-card-cta { text-decoration: underline; }