/* =========================================================
   Blog Widgets — Premium Shared Styles
   File: /assets/css/stm-blog-widgets.css

   Purpose:
   - Shared UI + layout styles for STM Blog Widgets:
     Related Posts, Trending Posts, Category Spotlight
   - Premium typography, spacing, hover polish
   - Sticky behavior that:
       ✔ sticks ONLY after widget reaches its render place
       ✔ never jumps above its original position
       ✔ stops automatically at sidebar/container end
       ✔ becomes normal again on scroll up

   Important:
   - Sticky works ONLY if parent sidebar/container
     does NOT have overflow:hidden/auto.
========================================================= */

/* ------------------------------
   Base Widget Wrapper
------------------------------ */
.stm-wdg{
  position: relative;
  margin-bottom: 26px;
}

.stm-wdg:last-child{
  margin-bottom: 0;
}

/* Sticky behavior (ONLY when enabled) */
.stm-wdg--sticky{
  position: sticky;
  top: var(--stm-wdg-sticky-top, 16px);
  align-self: flex-start;
}

/* ------------------------------
   Widget Title (Sidebar)
------------------------------ */
.widget-title,
.stm-wdg .widget-title{
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #111;
}

/* ------------------------------
   List Reset
------------------------------ */
.stm-wdg__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------
   List Item
------------------------------ */
.stm-wdg__item{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.stm-wdg__item:last-child{
  margin-bottom: 0;
}

/* ------------------------------
   Thumbnail
------------------------------ */
.stm-wdg__thumbLink{
  flex: 0 0 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: #f2f2f2;
}

.stm-wdg__thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbnail placeholder (no image) */
.stm-wdg__thumbPh{
  flex: 0 0 54px;
  height: 54px;
  border-radius: 8px;
  background: linear-gradient(135deg, #eee, #f7f7f7);
}

/* ------------------------------
   Meta
------------------------------ */
.stm-wdg__meta{
  flex: 1;
  min-width: 0;
}

.stm-wdg__title{
  display: inline-block;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #222;
  text-decoration: none;
}

.stm-wdg__title:hover{
  color: #000;
  text-decoration: underline;
}

/* ------------------------------
   Sub Meta (date / read time)
------------------------------ */
.stm-wdg__sub{
  margin-top: 4px;
  font-size: 12px;
  color: #777;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stm-wdg__dot{
  margin: 0 2px;
}

/* =========================================================
   Widget Variants (future-safe)
========================================================= */

/* Related Posts */
.stm-wdg--related .stm-wdg__title{
  font-weight: 500;
}

/* ---------------------------------------------------------
   Trending Posts — Premium Rank Badge
--------------------------------------------------------- */
.stm-wdg__rank{
  flex: 0 0 auto;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #111;
  background: #f1f1f1;
}

.stm-wdg--trending .stm-wdg__item{
  align-items: center;
}

.stm-wdg--trending .stm-wdg__thumbLink{
  flex: 0 0 46px;
  height: 46px;
  border-radius: 10px;
}

/* Category Spotlight */
.stm-wdg--category .stm-wdg__item{
  gap: 10px;
}

/* ---------------------------------------------------------
   Category Spotlight — Premium Cards
--------------------------------------------------------- */
.stm-wdgCat{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stm-wdgCat__card{
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stm-wdgCat__card:hover{
  border-color: #e6e6e6;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.stm-wdgCat__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
}

.stm-wdgCat__name{
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.2;
}

.stm-wdgCat__badge{
  flex: 0 0 auto;
  min-width: 32px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f4f4f4;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stm-wdgCat__posts{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stm-wdgCat__post a{
  font-size: 13px;
  line-height: 1.35;
  color: #222;
  text-decoration: none;

  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stm-wdgCat__post a:hover{
  text-decoration: underline;
  color: #000;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  .stm-wdg--sticky{
    position: relative; /* disable sticky on mobile */
    top: auto;
  }

  .stm-wdgCat__card{
    padding: 11px;
  }
}