/* =========================================================
   MHT SIDEBAR MODULES
   File: assets/css/mht-sidebar-modules.css

   Purpose:
   - Standalone styling for blog sidebar modules
   - Related / Trending / Top Rated / Most Viewed
   - Main, medium and tiny sidebar card variants
   - Scoped only to .hotips-sidebar
   ========================================================= */

/* =========================================================
   01. SIDEBAR MODULE TOKENS
   ========================================================= */

.hotips-sidebar{
  --mht-side-bg-color: var(--color-dark, #2e3b55);
  --mht-side-accent: var(--color-accent, #d4af37);

  --mht-side-shell-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mht-side-bg-color) 92%, #ffffff 8%) 0%,
      color-mix(in srgb, var(--mht-side-bg-color) 76%, #ffffff 24%) 56%,
      color-mix(in srgb, var(--mht-side-bg-color) 88%, #ffffff 12%) 100%
    );

  --mht-side-card-bg:
    linear-gradient(
      135deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.82) 100%
    );

  --mht-side-card-bg-hover:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mht-side-bg-color) 88%, #ffffff 12%) 0%,
      color-mix(in srgb, var(--mht-side-bg-color) 72%, #ffffff 28%) 100%
    );

  --mht-side-card-border: rgba(255,255,255,.58);

  --mht-side-text: var(--color-dark, #2e3b55);
  --mht-side-text-soft: rgba(46,59,85,.72);
  --mht-side-text-faint: rgba(46,59,85,.52);
  --mht-side-line: rgba(46,59,85,.12);

  --mht-side-shell-radius: 18px;
  --mht-side-card-radius: 12px;
  --mht-side-media-radius: 10px;

  --mht-side-shell-pad: 14px;
  --mht-side-card-pad: 9px;
  --mht-side-card-gap: 9px;

  --mht-side-media-size: 58px;
  --mht-side-medium-media-size: 78px;
  --mht-side-main-media-size: 86px;
  --mht-side-tiny-media-size: 50px;

  --mht-side-heading-size: 14px;
  --mht-side-title-size: 13px;
  --mht-side-copy-size: 11px;
  --mht-side-meta-size: 9px;

  --mht-side-card-shadow:
    0 8px 22px rgba(22,34,53,.08);
}

/* Wellness */
.hotips-site-theme--wellness .hotips-sidebar,
.hotips-area-hub--wellness .hotips-sidebar{
  --mht-side-bg-color: var(--color-wellness-dark, #587760);
  --mht-side-accent: var(--color-wellness-accent, #c9826b);

  --mht-side-card-bg:
    linear-gradient(
      135deg,
      rgba(255,255,255,.93) 0%,
      rgba(244,250,241,.82) 58%,
      rgba(232,243,226,.72) 100%
    );

  --mht-side-card-bg-hover:
    linear-gradient(
      135deg,
      rgba(255,255,255,.74) 0%,
      rgba(232,244,226,.58) 55%,
      rgba(195,220,199,.46) 100%
    );

  --mht-side-text: var(--color-wellness-text, #4e6453);
  --mht-side-text-soft: rgba(78,100,83,.76);
  --mht-side-text-faint: rgba(78,100,83,.56);
  --mht-side-line: rgba(78,100,83,.14);
}

/* Money */
.hotips-site-theme--money .hotips-sidebar,
.hotips-area-hub--money .hotips-sidebar{
  --mht-side-bg-color: var(--color-dark, #2e3b55);
  --mht-side-accent: var(--color-tech-accent, #d4af37);

  --mht-side-card-bg:
    linear-gradient(
      135deg,
      rgba(255,255,255,.94) 0%,
      rgba(248,250,252,.84) 58%,
      rgba(232,238,247,.74) 100%
    );

  --mht-side-card-bg-hover:
    linear-gradient(
      135deg,
      rgba(255,255,255,.76) 0%,
      rgba(232,238,247,.60) 55%,
      rgba(212,225,242,.48) 100%
    );
}

/* =========================================================
   02. MODULE SHELLS
   ========================================================= */

.hotips-sidebar .hotips-sidebar-widget--related-posts,
.hotips-sidebar .hotips-sidebar-widget--top-rated-compact,
.hotips-sidebar .mht-sidebar-cards{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: var(--mht-side-shell-pad);

  border-radius: var(--mht-side-shell-radius);
  border: 1px solid rgba(255,255,255,.22);

  background: var(--mht-side-shell-bg);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 40px rgba(255,255,255,.08),
    0 14px 32px rgba(22,34,53,.10);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hotips-sidebar .hotips-sidebar-widget--related-posts::before,
.hotips-sidebar .hotips-sidebar-widget--top-rated-compact::before,
.hotips-sidebar .mht-sidebar-cards::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  border-radius: inherit;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,255,255,.26),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      transparent 42%
    );
}

.hotips-sidebar .hotips-sidebar-widget__title,
.hotips-sidebar .my-blog-related-sidebar__title,
.hotips-sidebar .my-blog-top-rated-compact__heading,
.hotips-sidebar .mht-sidebar-cards__heading{
  position: relative;
  z-index: 1;

  margin: 0 0 12px;

  color: #fff;

  font-family: var(--font-display, Georgia, serif);
  font-size: var(--mht-side-heading-size);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(22,34,53,.16);
}

.hotips-sidebar .my-blog-related-posts,
.hotips-sidebar .my-blog-top-rated-compact__list,
.hotips-sidebar .mht-sidebar-cards__list{
  position: relative;
  z-index: 1;

  display: grid;
  gap: 10px;

  margin: 0;
  padding: 0;
}

/* =========================================================
   03. SHARED CARD BASE
   ========================================================= */

.hotips-sidebar .my-blog-related-post,
.hotips-sidebar .my-blog-top-rated-compact__item,
.hotips-sidebar .mht-sidebar-card{
  box-sizing: border-box;
  min-width: 0;

  color: var(--mht-side-text);
  text-decoration: none;
}

.hotips-sidebar .my-blog-related-post *,
.hotips-sidebar .my-blog-top-rated-compact__item *,
.hotips-sidebar .mht-sidebar-card *{
  box-sizing: border-box;
}

.hotips-sidebar .mht-sidebar-card__media,
.hotips-sidebar .my-blog-related-post__media,
.hotips-sidebar .my-blog-related-post__thumb,
.hotips-sidebar .my-blog-top-rated-compact__media,
.hotips-sidebar .my-blog-top-rated-compact__thumb{
  display: block;
  overflow: hidden;

  width: var(--mht-side-media-size);
  height: var(--mht-side-media-size);
  min-width: var(--mht-side-media-size);
  min-height: var(--mht-side-media-size);

  border-radius: var(--mht-side-media-radius);
  background: rgba(255,255,255,.46);
}

.hotips-sidebar .mht-sidebar-card__media img,
.hotips-sidebar .my-blog-related-post__media img,
.hotips-sidebar .my-blog-related-post__thumb img,
.hotips-sidebar .my-blog-top-rated-compact__media img,
.hotips-sidebar .my-blog-top-rated-compact__thumb img{
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: right center;

  border: 0;
}

.hotips-sidebar .my-blog-sidebar-fallback-image,
.hotips-sidebar .my-blog-top-rated-compact__thumb.is-fallback img,
.hotips-sidebar .mht-sidebar-card__media.is-fallback img{
  object-fit: contain;
  padding: 9px;
  opacity: .36;
  filter: grayscale(1);
}

/* =========================================================
   04. MAIN CARD
   ========================================================= */

.hotips-sidebar .mht-sidebar-card--main{
  display: grid;
  grid-template-columns: var(--mht-side-main-media-size) minmax(0, 1fr);
  align-items: stretch;
  gap: 11px;

  min-height: 118px;
  padding: 9px;

  border-radius: var(--mht-side-card-radius);
  border: 1px solid var(--mht-side-card-border);
  background: var(--mht-side-card-bg);
  box-shadow: var(--mht-side-card-shadow);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  overflow: hidden;

  transition:
    background var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-soft),
    color var(--duration-fast) var(--ease-soft);
}

.hotips-sidebar .mht-sidebar-card--main:hover,
.hotips-sidebar .mht-sidebar-card--main:focus-visible{
  background: var(--mht-side-card-bg-hover);
  border-color: rgba(255,255,255,.34);
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

.hotips-sidebar .mht-sidebar-card--main .mht-sidebar-card__media{
  width: var(--mht-side-main-media-size);
  height: 100%;
  min-height: 100px;
}

.hotips-sidebar .mht-sidebar-card--main .mht-sidebar-card__body{
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.hotips-sidebar .mht-sidebar-card--main .mht-sidebar-card__title,
.hotips-sidebar .mht-sidebar-card--main .mht-sidebar-card__meta,
.hotips-sidebar .mht-sidebar-card--main .mht-sidebar-card__badge{
  display: none;
}

.hotips-sidebar .mht-sidebar-card--main .mht-sidebar-card__excerpt{
  display: -webkit-box;
  margin: 0;

  color: var(--mht-side-text-soft);

  font-size: var(--mht-side-copy-size);
  line-height: 1.35;
  font-weight: 550;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hotips-sidebar .mht-sidebar-card--main .mht-sidebar-card__footer{
  display: block;
  min-width: 0;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--mht-side-line);
}

/* MAIN footer: team logo + title + author */
.hotips-sidebar .mht-sidebar-card__main-footer{
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;

  min-width: 0;
}

.hotips-sidebar .mht-sidebar-card__main-footer-logo{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;
  min-width: 24px;

  overflow: hidden;

  border-radius: 5px;
  border: 1px solid var(--mht-side-line);

  background: rgba(255,255,255,.68);
}

.hotips-sidebar .mht-sidebar-card__main-footer-logo-img{
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.hotips-sidebar .mht-sidebar-card__main-footer-copy{
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.hotips-sidebar .mht-sidebar-card__main-footer-title{
  display: block;
  max-width: 20ch;
  min-width: 0;

  color: var(--mht-side-text);
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 13px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;

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

.hotips-sidebar .mht-sidebar-card__main-footer-author{
  display: block;
  min-width: 0;
  margin-top: 1px;

  color: var(--mht-side-text-faint);

  font-size: 8.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;

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

/* =========================================================
   05. MEDIUM CARD — TRENDING / TOP RATED
   ========================================================= */

.hotips-sidebar .mht-sidebar-card--medium{
  --mht-medium-text: var(--mht-side-text);
  --mht-medium-copy: var(--mht-side-text-soft);
  --mht-medium-line: var(--mht-side-line);

  display: grid;
  grid-template-columns: var(--mht-side-medium-media-size) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;

  min-height: 104px;
  padding: 8px;

  border-radius: var(--mht-side-card-radius);
  border: 1px solid var(--mht-side-card-border);
  background: var(--mht-side-card-bg);
  box-shadow: var(--mht-side-card-shadow);

  color: var(--mht-medium-text);
  text-decoration: none;
  overflow: hidden;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    background var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-soft),
    color var(--duration-fast) var(--ease-soft);
}

.hotips-sidebar .mht-sidebar-card--medium:hover,
.hotips-sidebar .mht-sidebar-card--medium:focus-visible{
  --mht-medium-text: #ffffff;
  --mht-medium-copy: rgba(255,255,255,.84);
  --mht-medium-line: rgba(255,255,255,.52);

  background: var(--mht-side-card-bg-hover);
  border-color: rgba(255,255,255,.34);
  color: var(--mht-medium-text);
  transform: translateY(-1px);
  outline: none;
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__media{
  width: var(--mht-side-medium-media-size);
  height: 100%;
  min-height: 88px;
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__body{
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "excerpt excerpt"
    "divider divider"
    "badge rating";
  grid-template-rows: auto auto 1px 26px;

  align-content: stretch;
  align-items: center;

  gap: 4px 8px;
  min-width: 0;
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__body::before{
  content: "";
  grid-area: divider;
  display: block;
  height: 1px;
  background: var(--mht-medium-line);
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__title{
  grid-area: title;

  display: block;
  max-width: 20ch;
  min-width: 0;
  margin: 0;

  color: var(--mht-medium-text);

  font-family: var(--font-display, Georgia, serif);
  font-size: 12.5px;
  line-height: 1.12;
  font-weight: 800;

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

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__excerpt{
  grid-area: excerpt;

  display: -webkit-box;
  margin: 0;

  color: var(--mht-medium-copy);

  font-size: 10.5px;
  line-height: 1.24;
  font-weight: 550;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__meta{
  grid-area: badge;
  display: flex;
  align-items: center;
  margin: 0;
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__badge{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  padding: 0;

  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--mht-side-bg-color) 24%, rgba(255,255,255,.84));

  background: color-mix(in srgb, var(--mht-side-bg-color) 18%, rgba(255,255,255,.72));
  color: var(--mht-side-accent);

  font-size: 17px;
  line-height: 1;
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__badge-text{
  display: none;
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__rating{
  grid-area: rating;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin: 0;
  padding: 0;
}

.hotips-sidebar .mht-sidebar-card--medium .my-blog-rating-display{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 26px;
  padding: 4px 8px;

  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.46);

  background:
    linear-gradient(
      180deg,
      rgba(198,206,221,.88) 0%,
      rgba(180,190,208,.80) 48%,
      rgba(164,176,197,.86) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 4px 10px rgba(46,59,85,.08);

  color: var(--mht-side-text);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hotips-site-theme--wellness .hotips-sidebar .mht-sidebar-card--medium .my-blog-rating-display,
.hotips-area-hub--wellness .hotips-sidebar .mht-sidebar-card--medium .my-blog-rating-display{
  background:
    linear-gradient(
      180deg,
      rgba(214,232,216,.88) 0%,
      rgba(184,211,188,.78) 48%,
      rgba(156,191,163,.84) 100%
    );
}

.hotips-sidebar .mht-sidebar-card--medium .my-blog-rating-display__stars{
  display: inline-flex;
  gap: 0;
  color: var(--mht-side-accent);
}

.hotips-sidebar .mht-sidebar-card--medium .my-blog-rating-display__star{
  font-size: 10.5px;
  line-height: 1;
}

.hotips-sidebar .mht-sidebar-card--medium .my-blog-rating-display__star.is-empty{
  color: rgba(46,59,85,.24);
}

.hotips-sidebar .mht-sidebar-card--medium .my-blog-rating-display__text{
  display: inline-flex;
  gap: 4px;

  color: var(--mht-side-text);

  font-size: 9.25px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.hotips-sidebar .mht-sidebar-card--medium .mht-sidebar-card__footer{
  display: none;
}

/* =========================================================
   06. TINY CARD — IMAGE | TITLE | VIEWS/RATING
   ========================================================= */

.hotips-sidebar .mht-sidebar-card--tiny{
  display: grid;
  grid-template-columns: var(--mht-side-tiny-media-size) minmax(0, 1fr);
  align-items: center;
  gap: 8px;

  min-height: 0;
  padding: 8px;

  border-radius: var(--mht-side-card-radius);
  border: 1px solid var(--mht-side-card-border);

  background: var(--mht-side-card-bg);
  box-shadow: var(--mht-side-card-shadow);

  color: var(--mht-side-text);
  text-decoration: none;
  overflow: hidden;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    background var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-soft);
}

.hotips-sidebar .mht-sidebar-card--tiny:hover,
.hotips-sidebar .mht-sidebar-card--tiny:focus-visible{
  background: var(--mht-side-card-bg-hover);
  border-color: rgba(255,255,255,.34);
  transform: translateY(-1px);
  outline: none;
}

.hotips-sidebar .mht-sidebar-card--tiny .mht-sidebar-card__media{
  width: var(--mht-side-tiny-media-size);
  height: var(--mht-side-tiny-media-size);
  min-width: var(--mht-side-tiny-media-size);
  min-height: var(--mht-side-tiny-media-size);
}

.hotips-sidebar .mht-sidebar-card--tiny .mht-sidebar-card__body{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;

  min-width: 0;
}

/* Tiny hides all non-essential metadata */
.hotips-sidebar .mht-sidebar-card--tiny .mht-sidebar-card__meta,
.hotips-sidebar .mht-sidebar-card--tiny .mht-sidebar-card__badge,
.hotips-sidebar .mht-sidebar-card--tiny .mht-sidebar-card__excerpt,
.hotips-sidebar .mht-sidebar-card--tiny .mht-sidebar-card__footer{
  display: none;
}

.hotips-sidebar .mht-sidebar-card--tiny .mht-sidebar-card__title{
  display: -webkit-box;
  margin: 0;

  color: var(--mht-side-text);

  font-family: var(--font-display, Georgia, serif);
  font-size: 12px;
  line-height: 1.16;
  font-weight: 800;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hotips-sidebar .mht-sidebar-card--tiny .mht-sidebar-card__rating{
  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin: 0;
  padding: 0;
}

.hotips-sidebar .mht-sidebar-card--tiny .post-view-count,
.hotips-sidebar .mht-sidebar-card--tiny .is-sidebar-view-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 34px;
  max-width: 54px;
  height: 19px;
  min-height: 19px;

  margin: 0;
  padding: 0 6px;

  border-radius: 999px;
  border: 1px solid rgba(46,59,85,.12);

  background: rgba(255,255,255,.70);
  color: var(--mht-side-text-soft);

  font-size: 8.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.44);
}

/* If tiny is used for rating cards, keep rating compact too */
.hotips-sidebar .mht-sidebar-card--tiny .my-blog-rating-display{
  max-width: 62px;
  min-height: 20px;
  padding: 3px 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
}

.hotips-sidebar .mht-sidebar-card--tiny .my-blog-rating-display__stars{
  display: none;
}

.hotips-sidebar .mht-sidebar-card--tiny .my-blog-rating-display__text{
  font-size: 8.5px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

/* =========================================================
   07. GENERIC TEXT / SAFETY
   ========================================================= */

.hotips-sidebar .mht-sidebar-card__excerpt,
.hotips-sidebar .my-blog-related-post__excerpt,
.hotips-sidebar .my-blog-top-rated-compact__excerpt{
  margin: 0;
  padding: 0;

  color: var(--mht-side-text-soft);

  font-size: var(--mht-side-copy-size);
  line-height: 1.35;
  font-weight: 500;
}

.hotips-sidebar .mht-sidebar-card:hover .mht-sidebar-card__title,
.hotips-sidebar .mht-sidebar-card:hover .mht-sidebar-card__excerpt,
.hotips-sidebar .mht-sidebar-card:focus-visible .mht-sidebar-card__title,
.hotips-sidebar .mht-sidebar-card:focus-visible .mht-sidebar-card__excerpt{
  color: inherit;
}

.hotips-sidebar .mht-sidebar-card img{
  max-width: 100%;
}