/* ============ KION Blog Widgets ============ */
:root { --kbw-accent: #2dd4bf; }

.kbw-fa, .kbw-card { font-family: inherit; }

/* ===== Reveal animations ===== */
.kbw-reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--kbw-delay, 0ms);
  will-change: opacity, transform;
}
.kbw-reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .kbw-reveal{ opacity:1; transform:none; transition:none; }
}

/* ===== Featured Article ===== */
.kbw-fa{
  display:grid; grid-template-columns: 1fr 1fr; gap:32px;
  align-items:center; padding:24px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px; background:#0b1416;
  text-decoration:none !important;
  transition: transform .5s ease, border-color .5s ease, box-shadow .5s ease;
  overflow:hidden; position:relative;
}
.kbw-fa::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(45,212,191,.08), transparent 40%);
  opacity:0; transition: opacity .5s ease;
}
.kbw-fa:hover{
  border-color: color-mix(in srgb, var(--kbw-accent) 40%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--kbw-accent) 35%, transparent);
  transform: translateY(-2px);
}
.kbw-fa:hover::before{ opacity:1; }

.kbw-fa--img-left .kbw-fa__media{ order:0; } .kbw-fa--img-left .kbw-fa__body{ order:1; }
.kbw-fa--img-right .kbw-fa__media{ order:1; } .kbw-fa--img-right .kbw-fa__body{ order:0; }

.kbw-fa__media{
  position:relative; aspect-ratio:16/11;
  border-radius:18px; overflow:hidden; background:#06090a;
}
.kbw-fa__media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35));
  opacity:0; transition: opacity .5s ease;
}
.kbw-fa:hover .kbw-fa__media::after{ opacity:1; }
.kbw-fa__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.kbw-fa:hover .kbw-fa__media img{ transform: scale(1.08); }

.kbw-fa__badge{
  position:absolute; top:14px; inset-inline-end:14px; z-index:2;
  background:rgba(11,20,22,.75); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  color: var(--kbw-accent);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
  transition: transform .4s ease;
}
.kbw-fa:hover .kbw-fa__badge{ transform: translateY(-2px); }

.kbw-fa__body{ padding:8px 16px; }
.kbw-fa__cat{
  display:inline-block; color: var(--kbw-accent); font-weight:700;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
}
.kbw-fa__title{
  margin:12px 0 16px; color:#fff;
  font-size: clamp(22px, 2.4vw, 36px); line-height:1.2; font-weight:700;
  transition: color .35s ease;
}
.kbw-fa__excerpt{ color:#9aa6ad; line-height:1.7; margin:0 0 20px; font-size:15px; }
.kbw-fa__meta{
  display:flex; flex-wrap:wrap; gap:18px; color:#9aa6ad; font-size:12px; margin-bottom:18px;
}
.kbw-fa__meta span{ display:inline-flex; align-items:center; gap:6px; }

.kbw-fa__cta{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--kbw-accent); font-weight:700; font-size:14px;
}
.kbw-fa__cta .kbw-arrow{ transition: transform .35s ease; }
[dir="rtl"] .kbw-fa__cta .kbw-arrow{ transform: scaleX(-1); }
.kbw-fa:hover .kbw-fa__cta .kbw-arrow{ transform: translateX(4px); }
[dir="rtl"] .kbw-fa:hover .kbw-fa__cta .kbw-arrow{ transform: scaleX(-1) translateX(4px); }

/* ===== Articles Grid ===== */
.kbw-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
}
.kbw-card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px; background:#0b1416;
  text-decoration:none !important;
  transition: transform .5s ease, border-color .5s ease, box-shadow .5s ease;
  position:relative; height:100%;
}
.kbw-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--kbw-accent) 40%, transparent);
  box-shadow: 0 24px 60px -22px color-mix(in srgb, var(--kbw-accent) 35%, transparent);
}

.kbw-card__media{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:#06090a;
}
.kbw-card__media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.4));
  opacity:0; transition: opacity .5s ease;
}
.kbw-card:hover .kbw-card__media::after{ opacity:1; }
.kbw-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.kbw-card:hover .kbw-card__media img{ transform: scale(1.1); }

.kbw-card__badge{
  position:absolute; top:14px; inset-inline-end:14px; z-index:2;
  background:rgba(11,20,22,.7); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--kbw-accent) 40%, transparent);
  color: var(--kbw-accent);
  font-size:11px; font-weight:700; letter-spacing:.1em;
  padding:5px 12px; border-radius:999px;
  transition: transform .4s ease;
}
.kbw-card:hover .kbw-card__badge{ transform: translateY(-2px); }

.kbw-card__body{ padding:22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.kbw-card__meta{ display:flex; gap:14px; color:#9aa6ad; font-size:12px; }
.kbw-card__meta span{ display:inline-flex; align-items:center; gap:5px; }

.kbw-card__title{
  margin:0; font-size:18px; line-height:1.45; font-weight:700; color:#fff;
  transition: color .35s ease;
}
.kbw-card__excerpt{
  margin:0; color:#9aa6ad; font-size:14px; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kbw-card__cta{
  margin-top:auto; padding-top:6px;
  display:inline-flex; align-items:center; gap:6px;
  color: var(--kbw-accent); font-weight:700; font-size:13px;
}
.kbw-card__cta .kbw-arrow{ transition: transform .35s ease; }
[dir="rtl"] .kbw-card__cta .kbw-arrow{ transform: scaleX(-1); }
.kbw-card:hover .kbw-card__cta .kbw-arrow{ transform: translateX(4px); }
[dir="rtl"] .kbw-card:hover .kbw-card__cta .kbw-arrow{ transform: scaleX(-1) translateX(4px); }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .kbw-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .kbw-fa{ grid-template-columns: 1fr; gap:20px; padding:16px; border-radius:20px; }
  .kbw-fa__media{ aspect-ratio: 16/10; }
  .kbw-fa__body{ padding:8px 6px 12px; }
  .kbw-fa__title{ font-size:22px; margin: 10px 0 12px; }
  .kbw-fa__meta{ gap:12px; }
  .kbw-grid{ grid-template-columns: 1fr; }
}