/**
 * feed-cards.css — Sistema de cards e layout para feeds e perfil empresa
 * Usado em: feed pages, empresa.php, home.php
 *
 * Componentes:
 * 1. Layout (page-layout, sidebar)
 * 2. Section headers
 * 3. Card variants (hero, standard, compact, list-item)
 * 4. Grid patterns
 * 5. Contact buttons
 * 6. Attributes/benefits bar
 * 7. Category circles
 * 8. CTA banners
 * 9. Badges
 * 10. Empty states
 */

/* ============================================
   1. LAYOUT — Main + Sidebar
   ============================================ */

.page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

@media (min-width: 992px) {
    .page-layout {
        grid-template-columns: 1fr 340px;
        padding: 2rem 1.5rem;
    }
}

@media (min-width: 1400px) {
    .page-layout {
        padding: 2rem 2.5rem;
    }
}

.page-main {
    min-width: 0; /* prevent grid blowout */
}

.page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .page-sidebar {
        position: sticky;
        top: 70px;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        scrollbar-width: none; /* Firefox */
    }
    .page-sidebar::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
}

/* Sidebar widget */
.sidebar-widget {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 1.25rem;
}

.sidebar-widget-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   2. SECTION HEADERS
   ============================================ */

.feed-section {
    margin-bottom: var(--sp-section-mb);
}

.feed-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--sp-header-mb);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--bs-border-color);
}

.feed-section-title {
    font-size: var(--fs-section-title);
    font-weight: var(--fw-section-title);
    line-height: var(--lh-title);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feed-section-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--bs-primary);
    white-space: nowrap;
}

.feed-section-link:hover {
    text-decoration: underline;
}

.feed-section-subtitle {
    font-size: var(--fs-card-body);
    color: var(--c-text-secondary);
    margin-top: 0.25rem;
}

/* ============================================
   3. CARD VARIANTS
   ============================================ */

/* --- Base card --- */
.fc-card {
    background: var(--c-surface);
    border: var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--t-normal), transform var(--t-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fc-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.fc-card:focus-visible {
    outline: 2px solid var(--c-accent-primary);
    outline-offset: 2px;
}

a.fc-card, a.fc-card:hover { text-decoration: none; color: inherit; }
.fc-card a { text-decoration: none; color: inherit; }
.fc-card a.fc-card-title:hover { color: var(--bs-primary); }

/* Card image */
.fc-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

/* Card placeholder (no image) */
.fc-card-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Card sem imagem: layout horizontal compacto */
.fc-card-noimg {
    flex-direction: row;
    align-items: stretch;
}

.fc-card-noimg .fc-card-accent {
    width: 6px;
    flex-shrink: 0;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.fc-card-noimg .fc-card-body {
    padding: var(--sp-card-pad-y) var(--sp-card-pad-x);
    justify-content: center;
}

/* Card body */
.fc-card-body {
    padding: var(--sp-card-pad-y) var(--sp-card-pad-x);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fc-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: var(--fs-meta);
}

.fc-card-title {
    font-size: var(--fs-card-title);
    font-weight: var(--fw-card-title);
    line-height: var(--lh-title);
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fc-card-text {
    font-size: var(--fs-card-body);
    line-height: var(--lh-body);
    color: var(--c-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
    flex: 1;
}

.fc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
    margin-top: auto;
    font-size: var(--fs-meta);
}

/* Card company info line */
.fc-card-company {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-meta);
    color: var(--c-text-secondary);
}

.fc-card-company-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.fc-card-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Card stats */
.fc-card-stats {
    display: flex;
    gap: 0.75rem;
    font-size: var(--fs-meta);
    color: var(--c-text-tertiary);
}

.fc-card-stats span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Card actions */
.fc-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.fc-card-actions .btn {
    font-size: 0.75rem;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* --- Hero card (large, featured) --- */
.fc-card-hero {
    grid-column: 1 / -1;
}

.fc-card-hero .fc-card-img {
    aspect-ratio: 16/9;
    max-height: 360px;
}

.fc-card-hero .fc-card-placeholder {
    aspect-ratio: 16/9;
    max-height: 360px;
    font-size: 3.5rem;
}

.fc-card-hero .fc-card-title {
    font-size: 1.4rem;
}

.fc-card-hero .fc-card-text {
    font-size: 0.95rem;
    -webkit-line-clamp: 4;
}

@media (min-width: 768px) {
    .fc-card-hero {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
    }

    .fc-card-hero .fc-card-img,
    .fc-card-hero .fc-card-placeholder {
        aspect-ratio: auto;
        height: 100%;
        max-height: 320px;
    }

    .fc-card-hero .fc-card-body {
        padding: 1.5rem;
    }
}

/* --- Compact card (small, 4 per row) --- */
.fc-card-compact .fc-card-img {
    aspect-ratio: 1/1;
    max-height: 160px;
}

.fc-card-compact .fc-card-placeholder {
    aspect-ratio: 1/1;
    max-height: 160px;
    font-size: 2rem;
}

.fc-card-compact .fc-card-body {
    padding: calc(var(--sp-card-pad-y) * 0.75) calc(var(--sp-card-pad-x) * 0.75);
}

.fc-card-compact .fc-card-title {
    font-size: var(--fs-card-title);
    -webkit-line-clamp: 2;
}

.fc-card-compact .fc-card-text {
    display: none;
}

/* --- List item card (horizontal, for jobs) --- */
.fc-card-list {
    flex-direction: row;
    align-items: stretch;
}

.fc-card-list .fc-card-icon {
    width: 64px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    border-right: 1px solid var(--bs-border-color);
}

.fc-card-list .fc-card-body {
    padding: 0.85rem 1rem;
}

.fc-card-list .fc-card-title {
    font-size: 0.98rem;
    margin-bottom: 0.25rem;
}

.fc-card-list .fc-card-text {
    -webkit-line-clamp: 2;
    font-size: 0.85rem;
}

.fc-card-list .fc-card-footer {
    border-top: none;
    padding-top: 0.5rem;
}

/* ============================================
   4. GRID PATTERNS
   ============================================ */

/* Uniform grid — auto-responsive */
.fc-grid {
    display: grid;
    gap: var(--sp-grid-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .fc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    /* auto-fill: preenche espaço sem deixar buracos — se tem 4 items em grid de 3 colunas, a 4a coluna aparece */
    .fc-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min-card), 100%), 1fr)); }
}

@media (min-width: 1200px) {
    .fc-grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* Asymmetric grid: 1 hero + 2 stacked */
.fc-grid-featured {
    display: grid;
    gap: var(--sp-grid-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .fc-grid-featured {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: auto auto;
    }
    .fc-grid-featured > :first-child {
        grid-row: 1 / 3;
    }
    .fc-grid-featured > :first-child .fc-card {
        height: 100%;
    }
}

/* List layout (single column) */
.fc-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ============================================
   5. CONTACT BUTTONS
   ============================================ */

.contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
}

.contact-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: rgba(67, 97, 238, 0.04);
}

.contact-btn i {
    font-size: 1.15rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.contact-btn-whatsapp { border-color: #25d366; color: #25d366; }
.contact-btn-whatsapp:hover { background: rgba(37, 211, 102, 0.06); color: #25d366; }

.contact-btn-phone { border-color: var(--bs-primary); color: var(--bs-primary); }
.contact-btn-phone:hover { background: rgba(67, 97, 238, 0.06); }

.contact-btn-email { border-color: #ea4335; color: #ea4335; }
.contact-btn-email:hover { background: rgba(234, 67, 53, 0.06); color: #ea4335; }

.contact-btn-website { border-color: var(--bs-secondary-color); }

.contact-btn-primary {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    font-weight: 600;
}

.contact-btn-primary:hover {
    background: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}

/* Inline contact row (for mobile or hero) */
.contact-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.contact-row .contact-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.82rem;
}

/* ============================================
   6. ATTRIBUTES / BENEFITS BAR
   ============================================ */

.attributes-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.attr-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    white-space: nowrap;
}

.attr-badge i {
    font-size: 0.82rem;
    color: var(--bs-primary);
}

/* Benefits strip (horizontal, 4 items) */
.benefits-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 1rem 0;
}

@media (min-width: 768px) {
    .benefits-strip { grid-template-columns: repeat(4, 1fr); }
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem;
}

.benefit-item i {
    font-size: 1.5rem;
    color: var(--bs-primary);
    flex-shrink: 0;
}

.benefit-item-text {
    font-size: 0.82rem;
    line-height: 1.3;
}

.benefit-item-text strong {
    display: block;
    font-size: 0.88rem;
}

/* ============================================
   7. CATEGORY CIRCLES
   ============================================ */

.category-circles {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-circles::-webkit-scrollbar { display: none; }

.category-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 72px;
    text-decoration: none;
    color: var(--bs-body-color);
}

.category-circle-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.2s;
}

.category-circle:hover .category-circle-icon {
    border-color: var(--bs-primary);
    background: rgba(67, 97, 238, 0.08);
    color: var(--bs-primary);
    transform: scale(1.05);
}

.category-circle-label {
    font-size: 0.72rem;
    text-align: center;
    line-height: 1.2;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   8. CTA BANNERS
   ============================================ */

.cta-banner {
    border-radius: 12px;
    padding: 1.5rem 2rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    color: #fff;
}

.cta-banner-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.cta-banner-text {
    font-size: 0.88rem;
    opacity: 0.9;
}

.cta-banner i {
    font-size: 2rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .cta-grid { grid-template-columns: repeat(2, 1fr); }
}

/* CTA color variants */
.cta-primary { background: linear-gradient(135deg, #4361ee 0%, #3f37c9 100%); }
.cta-success { background: linear-gradient(135deg, #198754 0%, #0f5132 100%); }
.cta-warning { background: linear-gradient(135deg, #ff9f1c 0%, #f77f00 100%); }
.cta-info    { background: linear-gradient(135deg, #0dcaf0 0%, #0d6efd 100%); }
.cta-purple  { background: linear-gradient(135deg, #6f42c1 0%, #5a189a 100%); }

/* ============================================
   9. BADGES
   ============================================ */

.fc-badge {
    display: inline-block;
    font-size: var(--fs-badge);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-badge);
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
[data-bs-theme='dark'] .fc-badge {
    filter: brightness(0.85) saturate(1.2);
}

.fc-badge-post       { background: #4361ee; }
.fc-badge-promotion  { background: #2ec4b6; }
.fc-badge-job        { background: #17a2b8; }
.fc-badge-event      { background: #ff9f1c; }
.fc-badge-urgent     { background: #dc3545; }
.fc-badge-new        { background: #9c27b0; }
.fc-badge-featured   { background: #ffd700; color: #333; }

/* Card com destaque sutil (empresa paga) */
.fc-card-featured {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.15);
}

.fc-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd700, #ffaa00);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.fc-card-featured { position: relative; }

[data-bs-theme='dark'] .fc-card-featured {
    border-color: rgba(255, 215, 0, 0.2);
}

/* Discount badge (overlay on image) */
.fc-discount-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: #dc3545;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 2;
}

/* Expiry badge */
.fc-expiry-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-meta);
    color: #dc3545;
    font-weight: 600;
}

.fc-expiry-badge i { font-size: 0.85rem; }

/* "Na hora certa" badge — boost temporal por categoria/horário */
.fc-now-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-meta);
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #fb923c, #f97316);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 3px rgba(249, 115, 22, 0.35);
}

.fc-now-badge i { font-size: 0.8rem; }

/* Price display */
.fc-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-success);
}

.fc-price-old {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: var(--bs-secondary-color);
    font-weight: 400;
    margin-right: 0.35rem;
}

.fc-price-large {
    font-size: 1.4rem;
}

/* ============================================
   10. EMPTY STATES
   ============================================ */

.fc-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--bs-secondary-color);
}

.fc-empty > i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.4;
}

.fc-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color);
}

.fc-empty-text {
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0 auto 1rem;
}

/* ============================================
   11. SKELETON / LOADING
   ============================================ */

.fc-skeleton {
    background: var(--bs-tertiary-bg);
    border-radius: 8px;
    animation: fc-pulse 1.5s ease-in-out infinite;
}

@keyframes fc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.fc-skeleton-img {
    width: 100%;
    aspect-ratio: 4/3;
}

.fc-skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.fc-skeleton-text-sm {
    height: 0.75rem;
    width: 60%;
}

/* ============================================
   12. CATEGORY GRADIENT BACKGROUNDS
   ============================================ */

.fc-cat-alimentacao  { background: linear-gradient(135deg, #ff9a56 0%, #ff6b6b 100%); }
.fc-cat-saude       { background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%); }
.fc-cat-beleza      { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.fc-cat-servicos    { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.fc-cat-educacao    { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.fc-cat-comercio    { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.fc-cat-lazer       { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.fc-cat-tecnologia  { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.fc-cat-automotivo  { background: linear-gradient(135deg, #868f96 0%, #596164 100%); }
.fc-cat-default     { background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); }

/* ============================================
   13. RESPONSIVE TWEAKS
   ============================================ */

/* Tokens em design-tokens.css já cuidam de font-sizes e paddings em mobile.
   Aqui só ajustamos layout (flex-direction, min-height) e casos fora do sistema de tokens. */
@media (max-width: 575.98px) {
    .fc-card-hero .fc-card-title { font-size: 1.15rem; }
    .cta-banner { padding: 1.25rem; flex-direction: column; text-align: center; }
    .cta-banner i { font-size: 1.5rem; }
    .sidebar-widget { padding: 1rem; }
    .contact-btn { padding: 0.6rem 0.85rem; font-size: 0.85rem; min-height: 44px; }
    .page-layout { padding: 1rem 0.75rem; gap: 1.5rem; }
}

/* Mobile: compensar navbar + barra busca */
@media (max-width: 991.98px) {
    /* Páginas com barra de busca mobile (115px = 52 nav + 44 busca + 19 respiro) */
    main[style*="margin-top"] { margin-top: 115px !important; }
    /* Home: sem barra de busca (70px = 52 nav + 18 respiro) */
    .container.mt-5 { margin-top: 70px !important; }
}

/* ============================================
   14. DARK MODE
   ============================================ */

/* .fc-card border/shadow vêm dos tokens em design-tokens.css — não override aqui */

[data-bs-theme='dark'] .sidebar-widget {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme='dark'] .contact-btn {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme='dark'] .contact-btn:hover {
    background: rgba(67, 97, 238, 0.1);
}

[data-bs-theme='dark'] .contact-btn-whatsapp {
    border-color: rgba(37, 211, 102, 0.4);
}

[data-bs-theme='dark'] .contact-btn-whatsapp:hover {
    background: rgba(37, 211, 102, 0.1);
}

[data-bs-theme='dark'] .contact-btn-email {
    border-color: rgba(234, 67, 53, 0.4);
}

[data-bs-theme='dark'] .attr-badge {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme='dark'] .category-circle-icon {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme='dark'] .fc-badge-featured {
    background: #b8860b;
    color: #fff;
}

/* ============================================
   15. FEED PAGE HERO (section header with gradient)
   ============================================ */

.feed-page-hero {
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.feed-page-hero-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.feed-page-hero-text {
    font-size: 1rem;
    opacity: 0.9;
    max-width: 500px;
}

.feed-page-hero-icon {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    opacity: 0.2;
}

@media (max-width: 575.98px) {
    .feed-page-hero {
        padding: 1.5rem;
        border-radius: 12px;
    }
    .feed-page-hero-title { font-size: 1.3rem; }
    .feed-page-hero-icon { font-size: 2.5rem; right: 1rem; }
}

/* Hero color variants (same as CTA) */
.feed-hero-promotions { background: linear-gradient(135deg, #ff9f1c 0%, #f77f00 100%); }
.feed-hero-novidades  { background: linear-gradient(135deg, #4361ee 0%, #3f37c9 100%); }
.feed-hero-vagas      { background: linear-gradient(135deg, #198754 0%, #0f5132 100%); }
.feed-hero-explorar   { background: linear-gradient(135deg, #6f42c1 0%, #5a189a 100%); }
.feed-hero-favoritos  { background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%); }
.feed-hero-em-alta    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.feed-hero-populares  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.feed-hero-cidadao    { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.feed-hero-emergencia { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.feed-hero-aniversarios { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.feed-hero-ranking       { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.feed-hero-veiculos      { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.feed-hero-imoveis       { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.feed-hero-feito-aqui    { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.feed-hero-busca         { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
[data-bs-theme='dark'] .feed-page-hero { filter: brightness(0.85) saturate(1.15); }
[data-bs-theme='dark'] .feed-page-hero-title,
[data-bs-theme='dark'] .feed-page-hero-text { color: #fff; }

/* Tag rotation (multiple categories — controlled by JS interval) */
.fc-tags-rotate { height: 18px; overflow: hidden; }
.fc-tags-rotate-inner {
    transition: transform 0.4s ease;
}

/* ============================================
   16. FILTER TABS (for feed pages)
   ============================================ */

.feed-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
    .feed-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .feed-filters::-webkit-scrollbar { display: none; }
    .feed-filter-btn { white-space: nowrap; flex-shrink: 0; font-size: 0.78rem; padding: 0.35rem 0.85rem; }
}

.feed-filter-btn {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.feed-filter-btn:hover,
.feed-filter-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

[data-bs-theme='dark'] .feed-filter-btn {
    border-color: rgba(255, 255, 255, 0.12);
}

/* ============================================
   17. IMAGE POSITION HELPER (for cards without images)
   ============================================ */

.fc-card-img-wrap {
    position: relative;
    overflow: hidden;
}

/* Subtle pattern overlay for placeholder */
.fc-card-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 60%);
}

/* ============================================
   18. LOAD MORE
   ============================================ */

.fc-load-more {
    text-align: center;
    padding: 1.5rem 0;
}

.fc-load-more .btn {
    padding: 0.5rem 2rem;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* ============================================
   19. SIDEBAR COMPACT LIST (Top Rated style)
   ============================================ */

.sidebar-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    text-decoration: none;
    color: var(--bs-body-color);
    transition: opacity 0.2s;
}

.sidebar-list-item:last-child { border-bottom: none; }
.sidebar-list-item:hover { opacity: 0.75; }

.sidebar-list-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-list-item-thumb-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.sidebar-list-item-text {
    flex: 1;
    min-width: 0;
}

.sidebar-list-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-list-item-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* =======================================================
   Brand Broadcast Card (Handle Network — feed da cidade)
   ======================================================= */
.brand-bc-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1rem;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
.brand-bc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bs-primary), #a855f7);
}
.brand-bc-card:hover {
    box-shadow: 0 6px 20px rgba(15,23,42,0.08);
}
[data-bs-theme="dark"] .brand-bc-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.brand-bc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.brand-bc-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.brand-bc-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
}
.brand-bc-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}
.brand-bc-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
}
.brand-bc-handle-label {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    text-transform: lowercase;
}

.brand-bc-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    color: var(--bs-body-color);
}
.brand-bc-content {
    font-size: 0.92rem;
    color: var(--bs-body-color);
    line-height: 1.55;
    margin: 0 0 0.75rem;
}
.brand-bc-image {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}
.brand-bc-mention {
    font-size: 0.88rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--bs-primary);
}

.brand-bc-members {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--bs-border-color);
    flex-wrap: wrap;
}
.brand-bc-members-label {
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
}
.brand-bc-members-list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.brand-bc-member {
    display: inline-block;
    transition: transform 0.15s;
}
.brand-bc-member:hover {
    transform: translateY(-2px);
}
.brand-bc-member-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--bs-body-bg);
    background: var(--bs-tertiary-bg);
}
.brand-bc-member-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.68rem;
}
/* Destaque visual pra tier premium_sponsor (tier 4) */
.brand-bc-member[data-tier="4"] .brand-bc-member-logo {
    border-color: gold;
    box-shadow: 0 0 0 1px gold;
}
/* Tier enterprise_plus (3) ganha borda distinta */
.brand-bc-member[data-tier="3"] .brand-bc-member-logo {
    border-color: var(--bs-primary);
}
.brand-bc-more {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    padding: 0.3rem 0.6rem;
    background: var(--bs-tertiary-bg);
    border-radius: 20px;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .brand-bc-card { padding: 1rem; }
    .brand-bc-title { font-size: 1rem; }
    .brand-bc-content { font-size: 0.85rem; }
    .brand-bc-image { max-height: 240px; }
    .brand-bc-members { gap: 0.5rem; }
    .brand-bc-member-logo { width: 32px; height: 32px; }
}