/* =========================================================
   public/assects/css/featured.css — Spotlight (kiemelt hír)
   ========================================================= */

:root{
  --spot-z: 1200;
  --spot-radius: 14px;
  --spot-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.spot-launcher{
  position: fixed; right: 16px; bottom: 16px; z-index: var(--spot-z);
  background:#fff; border:1px solid #ddd; border-radius: 999px;
  padding:10px 14px; box-shadow: var(--spot-shadow);
  font-family: var(--font-head); cursor: pointer; display:flex; align-items:center; gap:8px;
}
.spot-launcher .dot{ width:8px; height:8px; border-radius:50%; background: var(--brand-maroon); display:inline-block; }

.spot-panel{
  position: fixed; right: 16px; bottom: 16px; z-index: var(--spot-z);
  width: min(92vw, 380px); max-height: 70vh; overflow:auto;
  background:#fff; border:1px solid #ddd; border-radius: var(--spot-radius);
  box-shadow: var(--spot-shadow); transform: translateY(16px); opacity: 0; pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
}
.spot-panel[data-open="true"]{ transform: translateY(0); opacity:1; pointer-events:auto; }

.spot-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #eee;
}
.spot-head h3{ margin:0; font-size:1rem; font-family:var(--font-head); color: var(--brand-maroon); }
.spot-close{ background:none; border:none; font-size:1.1rem; cursor:pointer; padding:6px; }

.spot-body{ padding:12px 14px 4px; }
.spot-item-title{ margin:.2rem 0; font-size:1.05rem; }
.spot-meta{ font-size:.85rem; color:#666; margin-bottom:6px; }
.spot-teaser{ font-size:.95rem; color:#333; }

.spot-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 14px; border-top:1px solid #eee;
}
.spot-nav button{
  background:#f5f5f5; border:1px solid #ddd; border-radius:8px; padding:6px 10px; cursor:pointer;
}
.spot-cta{
  margin-left:auto; background: var(--brand-maroon); color:#fff; border:none;
  border-radius:10px; padding:8px 12px; cursor:pointer; text-decoration:none;
}

@media (max-width: 480px){
  .spot-panel{ width: calc(100vw - 20px); right: 10px; left: 10px; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .spot-panel{ transition: none; }
}

/* ===== Spotlight peek (zárt, teaseres kapszula) ===== */
.spot-peek{
  position: fixed;
  right: 96px;                /* launcher mellett balra */
  bottom: 22px;
  z-index: var(--spot-z);
  background:#fff;
  border:1px solid #ddd;
  border-radius:999px;
  padding:8px 12px;
  box-shadow: var(--spot-shadow);
  max-width: min(60vw, 420px);
  display:none;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.spot-peek[data-show="true"]{ display:flex; }
.spot-peek__text{
  max-width: calc(100% - 22px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot-peek__close{
  border:none; background:transparent; cursor:pointer; font-size:1rem;
}

@media (max-width:480px){
  .spot-peek{
    right:16px; bottom:72px;      /* a panel fölé igazítva */
    max-width: calc(100vw - 32px);
  }
}