/* ============================================================
   fooba.studio — Post Grid Block  (v2.3.2.0)
   ============================================================ */

/* ------------------------------------------------------------------
   BREAKOUT: alignfull / alignwide
   ------------------------------------------------------------------ */
.wp-block-bq-fooba-post-grid.alignfull > .fooba-pg-wrap,
.wp-block-bq-fooba-post-grid.alignfull .fooba-pg-wrap {
    width        : 100vw;
    max-width    : 100vw;
    margin-left  : calc( 50% - 50vw );
    margin-right : calc( 50% - 50vw );
    position     : relative;
    left: 0; right: 0;
}
.wp-block-bq-fooba-post-grid.alignwide > .fooba-pg-wrap,
.wp-block-bq-fooba-post-grid.alignwide .fooba-pg-wrap {
    width        : calc( 100% + 160px );
    max-width    : calc( 100% + 160px );
    margin-left  : -80px;
    margin-right : -80px;
    position     : relative;
}
[data-align="full"] .wp-block-bq-fooba-post-grid > .fooba-pg-wrap,
[data-align="full"] .fooba-pg-block-wrap > .fooba-pg-wrap {
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
[data-align="wide"] .wp-block-bq-fooba-post-grid > .fooba-pg-wrap,
[data-align="wide"] .fooba-pg-block-wrap > .fooba-pg-wrap {
    width: calc(100% + 160px); max-width: calc(100% + 160px);
    margin-left: -80px; margin-right: -80px;
}

/* ------------------------------------------------------------------
   Wrap geral
   ------------------------------------------------------------------ */
.fooba-pg-wrap {
    position : relative;
    width    : 100%;
    /* overflow: visible para não cortar o scroll horizontal do track */
    /* O clip visual das setas é feito pelo overflow:hidden no track-container */
}

/* ------------------------------------------------------------------
   CARROSSEL — track
   ------------------------------------------------------------------ */
.fooba-pg-track {
    display                   : flex;
    flex-direction            : row;
    overflow-x                : auto;
    overflow-y                : visible;
    scroll-snap-type          : x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width           : none;
    -ms-overflow-style        : none;
    padding                   : 24px 20px;
    /* gap: via inline style do PHP */
}
.fooba-pg-track::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------
   CARROSSEL — mobile: card central ocupa 95%, peek lateral mínimo
   ------------------------------------------------------------------ */
@media ( max-width: 600px ) {
    .fooba-pg-track {
        /* padding lateral = 2.5% → sobra 95% para o card central */
        padding        : 20px 2.5%;
        gap            : 8px !important;
        scroll-padding : 0 2.5%;
    }
    .fooba-pg-track .fooba-pg-card {
        min-width : 95% !important;
        max-width : 95% !important;
        scroll-snap-align: center;
    }
}

/* ------------------------------------------------------------------
   GRID
   ------------------------------------------------------------------ */
.fooba-pg-grid {
    display              : grid;
    /* gridTemplateColumns e gap: via inline style gerado pelo PHP/editor */
    padding              : 24px 20px;
    box-sizing           : border-box;
}

/* ------------------------------------------------------------------
   Card (compartilhado carousel + grid)
   ------------------------------------------------------------------ */
.fooba-pg-card {
    flex-shrink      : 0;          /* impede encolher no flex do carrossel */
    scroll-snap-align: start;
    position         : relative;
    overflow         : hidden;
    cursor           : pointer;
    text-decoration  : none;       /* garante que <a> não sublinha */
    color            : inherit;    /* herda cor do contexto */
    display          : block;
    box-shadow       : 0 4px 20px rgba(0,0,0,0.3);
    transition       : transform 0.2s ease, box-shadow 0.2s ease;
}
.fooba-pg-card:hover,
.fooba-pg-card:visited,
.fooba-pg-card:focus {
    text-decoration: none;
    color: inherit;
}
.fooba-pg-card:hover {
    transform : translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.fooba-pg-card__img {
    width: 100%; object-fit: cover; display: block;
}
.fooba-pg-card__thumb--empty {
    width: 100%;
    background: linear-gradient(135deg, #2a2a40, #3a2a60);
}

/* ------------------------------------------------------------------
   Tipos de card
   ------------------------------------------------------------------ */

/* --- overlay (padrão): conteúdo sobreposto à imagem --- */
.fooba-pg-card--overlay {
    /* estrutura já definida em .fooba-pg-card */
}
.fooba-pg-card--overlay .fooba-pg-card__overlay {
    position  : absolute;
    bottom    : 0; left: 0; right: 0;
}

/* --- below: conteúdo abaixo da imagem --- */
.fooba-pg-card--below {
    display        : flex;
    flex-direction : column;
}
.fooba-pg-card--below .fooba-pg-card__overlay {
    position   : static;
    background : none !important; /* sem gradiente */
    padding    : 12px 16px 16px;
}
.fooba-pg-card--below .fooba-pg-card__title,
.fooba-pg-card--below .fooba-pg-meta-top,
.fooba-pg-card--below .fooba-pg-meta-bot {
    color: inherit;
}

/* --- side: conteúdo do lado (imagem esquerda, texto direita) --- */
.fooba-pg-card--side {
    display        : flex;
    flex-direction : row;
    align-items    : stretch;
}
.fooba-pg-card--side .fooba-pg-card__thumb-wrap {
    flex       : 0 0 45%;
    max-width  : 45%;
    overflow   : hidden;
}
.fooba-pg-card--side .fooba-pg-card__thumb-wrap img,
.fooba-pg-card--side .fooba-pg-card__thumb-wrap div {
    width   : 100%;
    height  : 100%;
    object-fit: cover;
    display : block;
}
.fooba-pg-card--side .fooba-pg-card__overlay {
    position   : static;
    flex       : 1;
    background : none !important;
    padding    : 14px 16px;
    display    : flex;
    flex-direction: column;
    justify-content: center;
}
.fooba-pg-card--side .fooba-pg-card__title,
.fooba-pg-card--side .fooba-pg-meta-top,
.fooba-pg-card--side .fooba-pg-meta-bot {
    color: inherit;
}

/* --- cores de texto para below e side: herdam do tema ou usam o titleColor --- */
.fooba-pg-card--below .fooba-pg-meta-top,
.fooba-pg-card--below .fooba-pg-meta-bot,
.fooba-pg-card--side  .fooba-pg-meta-top,
.fooba-pg-card--side  .fooba-pg-meta-bot {
    color: rgba(128,128,128,0.85);
}
.fooba-pg-card--below .fooba-pg-meta-tag,
.fooba-pg-card--side  .fooba-pg-meta-tag {
    background: rgba(0,0,0,0.08);
}

/* ------------------------------------------------------------------
   Meta (categoria, tag, autor, data, meta field)
   ------------------------------------------------------------------ */
.fooba-pg-meta-top,
.fooba-pg-meta-bot {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 6px;
    font-size  : 11px;
    line-height: 1.3;
    color      : rgba(255,255,255,0.7);
    align-items: center;
}
.fooba-pg-meta-top { margin-bottom: 4px; }
.fooba-pg-meta-bot { margin-top:    4px; color: rgba(255,255,255,0.6); }

/* Item base */
.fooba-pg-meta-item {
    display : inline;
}

/* Pill: categoria e tag */
.fooba-pg-meta-tag {
    background   : rgba(255,255,255,0.15);
    border-radius: 3px;
    padding      : 1px 5px;
    display      : inline-block;
}

/* Separador */
.fooba-pg-meta-separador {
    opacity: 0.5;
}

/* Links de taxonomia — reset completo de estilos herdados do tema */
.fooba-pg-meta-top a,
.fooba-pg-meta-bot a,
.fooba-pg-meta-top a:hover,
.fooba-pg-meta-bot a:hover,
.fooba-pg-meta-top a:visited,
.fooba-pg-meta-bot a:visited,
.fooba-pg-meta-top a:focus,
.fooba-pg-meta-bot a:focus {
    text-decoration : none !important;
    color           : inherit !important;
    background      : inherit;
    border          : none;
    box-shadow      : none;
    outline         : none;
}
.fooba-pg-meta-top a.fooba-pg-meta-tag:hover,
.fooba-pg-meta-bot a.fooba-pg-meta-tag:hover {
    opacity: 0.85;
}

/* Ícones Bootstrap Icons nas metas de engajamento */
.fooba-pg-meta-likes,
.fooba-pg-meta-dislikes,
.fooba-pg-meta-comentarios {
    display    : inline-flex;
    align-items: center;
    gap        : 3px;
}
.fooba-pg-meta-likes i,
.fooba-pg-meta-dislikes i,
.fooba-pg-meta-comentarios i {
    font-size  : 0.9em;
    line-height: 1;
    flex-shrink: 0;
}
.fooba-pg-arrow {
    position       : absolute;
    top            : 50%;
    transform      : translateY(-50%);
    z-index        : 10;
    background     : rgba(255,255,255,0.15);
    border         : none;
    border-radius  : 50%;
    width          : 40px;
    height         : 40px;
    padding        : 0;
    cursor         : pointer;
    color          : #fff;
    font-size      : 22px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition     : background 0.2s ease;
    line-height    : 1;
}
.fooba-pg-arrow:hover { background: rgba(255,255,255,0.3); }
.fooba-pg-arrow--prev { left : 12px; }
.fooba-pg-arrow--next { right: 12px; }

/* ------------------------------------------------------------------
   Editor
   ------------------------------------------------------------------ */
.wp-block-bq-fooba-post-grid .fooba-pg-wrap { min-height: 200px; }