/* ==========================================================================
   Homepage Ads Manager teaser section (#ads-teaser)
   Loaded only by index.php. Houses its content in the existing global
   .ai-showcase-card / .aleria-stat-card components from style.css - only
   the sample-suggestion internals below are new.
   ========================================================================== */

.home-ads-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }

.home-ads-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.22rem 0.55rem; border-radius: 4px; }
.home-ads-tag-high { color: #f87171; background: rgba(234, 67, 53, 0.15); border: 1px solid rgba(234, 67, 53, 0.45); }

.home-ads-platform { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.home-ads-platform i { color: #4285f4; }

.home-ads-card-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; margin-bottom: 0.6rem; }
.home-ads-card-body { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.1rem; }

.home-ads-impact { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: #34a853; background: rgba(52, 168, 83, 0.12); border: 1px solid rgba(52, 168, 83, 0.35); padding: 0.4rem 0.75rem; border-radius: 50px; }

/* Two-scene cycle: scene 0 renders inline in the markup so the card looks
   complete even if JS never runs; the .ai-thinking bridge (already global,
   used by smart-chat.php) plays only while swapping between scenes.
   The thinking row and the scenes stack are both absolutely positioned
   inside .home-ads-demo's fixed-height box, so toggling between them never
   changes the card's height - a shifting height was flipping the section
   in and out of the IntersectionObserver's viewport threshold mid-cycle,
   which cancelled the pending timer and froze the demo on "thinking". */
.home-ads-demo { position: relative; min-height: 168px; }

.home-ads-thinking { display: none; position: absolute; top: 0; left: 0; right: 0; margin: 0; }
.home-ads-thinking.is-visible { display: flex; }

.home-ads-scenes { position: absolute; top: 0; left: 0; right: 0; }
.home-ads-scene { display: none; }
.home-ads-scene.is-active { display: block; animation: home-ads-scene-in 0.5s ease; }

@keyframes home-ads-scene-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .home-ads-scene.is-active { animation: none; }
}

@media (max-width: 576px) {
    .home-ads-card-title { font-size: 0.98rem; }
    .home-ads-card-body { font-size: 0.84rem; }
    .home-ads-demo { min-height: 195px; }
}