/* =========================================================
   MHT CONTENT CARDS
   Reusable global page/carousel/bottom-region card shell

   New system:
   - .mht-content-card

   Do not mix with:
   - .hotips-content-card
   - .hotips-article-card
   - sidebar cards
   - docked rail cards

   Wrapper/grid CSS stays in style.css.
   ========================================================= */

.mht-content-card{
  --mht-card-radius: var(--radius-sm);
  --mht-card-inner-radius: calc(var(--mht-card-radius) - var(--border-width-thin));
  --mht-card-avatar-radius: var(--radius-xs);

  --mht-card-shadow: var(--article-card-shadow, var(--shadow-sm));
  --mht-card-shadow-hover: var(--article-card-shadow-hover, var(--shadow-md));

  --mht-card-media-height: clamp(112px, 9vw, 132px);

  --mht-card-bg: var(--color-area-hub-money-band-a);
  --mht-card-bg-soft: color-mix(in srgb, var(--mht-card-bg) 62%, transparent);
  --mht-card-bg-strong: color-mix(in srgb, var(--mht-card-bg) 74%, transparent);
  --mht-card-bg-sheen: color-mix(in srgb, var(--color-white) 10%, transparent);

  --mht-card-title: var(--color-white);
  --mht-card-title-hover: var(--mht-card-hover-line);
  --mht-card-text: color-mix(in srgb, var(--color-white) 82%, transparent);
  --mht-card-text-soft: color-mix(in srgb, var(--color-white) 66%, transparent);
  --mht-card-text-faint: color-mix(in srgb, var(--color-white) 52%, transparent);

  --mht-card-label-bg: color-mix(in srgb, var(--color-white) 13%, transparent);
  --mht-card-label-bg-hover: color-mix(in srgb, var(--color-white) 18%, transparent);
  --mht-card-label-border: color-mix(in srgb, var(--color-white) 20%, transparent);
  --mht-card-label-text: color-mix(in srgb, var(--color-white) 86%, transparent);

  --mht-card-rating-bg: color-mix(in srgb, var(--color-white) 8%, transparent);
  --mht-card-rating-bg-hover: color-mix(in srgb, var(--color-white) 12%, transparent);
  --mht-card-rating-border: color-mix(in srgb, var(--color-white) 15%, transparent);
  --mht-card-rating-track: color-mix(in srgb, var(--color-white) 15%, transparent);
  --mht-card-rating-fill-end: color-mix(in srgb, var(--color-white) 72%, transparent);

  --mht-card-avatar-bg: color-mix(in srgb, var(--color-white) 12%, transparent);
  --mht-card-avatar-border: color-mix(in srgb, var(--color-white) 24%, transparent);

  --mht-card-accent: var(--color-tech-accent);
  --mht-card-hover-line: var(--mht-card-accent);

  --mht-card-border: color-mix(
    in srgb,
    var(--color-neutral-muted) 54%,
    var(--mht-card-bg) 46%
  );

  --mht-card-border-hover: color-mix(
    in srgb,
    var(--mht-card-hover-line) 48%,
    var(--color-neutral-muted) 52%
  );

  --mht-card-divider: color-mix(
    in srgb,
    var(--color-neutral-muted) 42%,
    transparent
  );

  --mht-card-divider-hover: color-mix(
    in srgb,
    var(--mht-card-hover-line) 38%,
    var(--color-neutral-muted) 62%
  );

  --mht-card-ghost-opacity: 0.30;
  --mht-card-ghost-opacity-hover: 0.20;
  --mht-card-ghost-saturate: 1.04;
  --mht-card-ghost-contrast: 1.08;
  --mht-card-ghost-brightness: 0.98;

  --mht-card-hover-sheen: color-mix(
    in srgb,
    var(--mht-card-hover-line) 16%,
    transparent
  );

  --mht-card-title-font: var(--font-heading, var(--font-display, var(--font-accent)));
  --mht-card-title-size: var(--font-size-lg);
  --mht-card-title-line-height: var(--line-height-heading);

  --mht-card-hover-rule-width: calc(var(--space-xl) + var(--space-md));
  --mht-card-hover-rule-width-hover: calc(var(--space-2xl) + var(--space-xl) + var(--space-md));
  --mht-card-hover-rule-height: var(--border-width-thick);

  --mht-card-label-min-height: calc(var(--space-lg) + var(--space-xs));
  --mht-card-label-pad-y: var(--space-xxs);
  --mht-card-label-pad-x: var(--space-sm);
  --mht-card-label-font-size: var(--font-size-ui-xxs);

  --mht-card-rating-pad-y: var(--space-xxs);
  --mht-card-rating-pad-x: var(--space-sm);
  --mht-card-rating-gap: var(--space-xs);
  --mht-card-rating-bar-min: calc(var(--space-2xl) + var(--space-lg));
  --mht-card-rating-bar-max: calc(var(--space-2xl) + var(--space-xl) + var(--space-sm));
  --mht-card-rating-track-height: calc(var(--space-xxs) + var(--border-width-thin));
  --mht-card-rating-font-size: var(--font-size-ui-xxs);

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: var(--border-width-thin) var(--border-style-standard) var(--mht-card-border);
  border-radius: var(--mht-card-radius);
  background: var(--mht-card-bg);
  box-shadow: var(--mht-card-shadow);
  isolation: isolate;
  transition:
    transform var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft);
}

.mht-content-card:hover,
.mht-content-card:focus-within{
  transform: translateY(calc(var(--space-xxs) * -1));
  border-color: var(--mht-card-border-hover);
  box-shadow: var(--mht-card-shadow-hover);
}

.mht-content-card--money{
  --mht-card-bg: var(--color-area-hub-money-band-a);
  --mht-card-accent: var(--color-tech-accent);
  --mht-card-hover-line: var(--color-tech-accent);
  --mht-card-ghost-opacity: 0.30;
  --mht-card-ghost-opacity-hover: 0.30;
}

.mht-content-card--wellness{
  --mht-card-bg: var(--color-area-hub-wellness-band-a);
  --mht-card-accent: var(--color-wellness-accent);
  --mht-card-hover-line: var(--color-wellness-accent);
  --mht-card-title-hover: var(--color-wellness-accent);
  --mht-card-ghost-opacity: 0.30;
  --mht-card-ghost-opacity-hover: 0.30;
}

/* =========================================================
   MHT CONTENT CARD — LIGHTER HOVER SURFACES
   Lightens card body + label/rating pill hover states
   ========================================================= */

/* Money card hover */
.mht-content-card--money:hover,
.mht-content-card--money:focus-within{
  --mht-card-bg-hover: color-mix(
    in srgb,
    var(--color-area-hub-money-card-bg, var(--color-surface)) 50%,
    var(--color-white) 50%
  );

  --mht-card-pill-bg-hover: color-mix(
    in srgb,
    var(--color-area-hub-money-pill-bg, var(--button-blue-soft-bg)) 50%,
    var(--color-white) 50%
  );

  --mht-card-rating-bg-hover: color-mix(
    in srgb,
    var(--color-area-hub-money-pill-bg, var(--button-blue-soft-bg)) 50%,
    var(--color-white) 50%
  );
}

/* Wellness card hover */
.mht-content-card--wellness:hover,
.mht-content-card--wellness:focus-within{
  --mht-card-bg-hover: color-mix(
    in srgb,
    var(--color-area-hub-wellness-card-bg, var(--color-surface)) 35%,
    var(--color-white) 65%
  );

  --mht-card-pill-bg-hover: color-mix(
    in srgb,
    var(--color-area-hub-wellness-pill-bg, var(--color-wellness-accent-soft)) 80%,
    var(--color-white) 20%
  );

  --mht-card-rating-bg-hover: color-mix(
    in srgb,
    var(--color-area-hub-wellness-pill-bg, var(--color-wellness-accent-soft)) 80%,
    var(--color-white) 20%
  );
}

/* -------------------------
   Whole-card link + top image strip
   ------------------------- */

.mht-content-card__link{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.mht-content-card__link:focus-visible{
  outline: var(--border-width-thick) solid var(--mht-card-hover-line, var(--mht-card-accent));
  outline-offset: calc(var(--space-xxs) * -1);
}

.mht-content-card__media{
  position: relative;
  display: block;
  width: 100%;
  height: var(--mht-card-media-height);
  overflow: hidden;
  background: var(--mht-card-bg);
}

.mht-content-card__media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: transparent;
  opacity: 0;
  transform: none;

  pointer-events: none;
}

.mht-content-card__media::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 42%;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--mht-card-bg) 36%, transparent)
  );
  pointer-events: none;
}

.mht-content-card__image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--article-card-media-fit, cover);
  object-position: var(--article-card-media-position, right center);
  transform: scale(1.015);
  transition:
    transform var(--duration-fast) var(--ease-soft),
    filter var(--duration-fast) var(--ease-soft);
}

.mht-content-card:hover .mht-content-card__media::before,
.mht-content-card:focus-within .mht-content-card__media::before{
  opacity: 0;
  transform: none;
}

.mht-content-card:hover .mht-content-card__image,
.mht-content-card:focus-within .mht-content-card__image{
  transform: scale(1.015);
  filter: none;
}

/* -------------------------
   Glass body with ghost image continuation
   ------------------------- */

.mht-content-card__body{
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-xs);
  overflow: hidden;
  padding: var(--space-md) var(--space-lg) var(--space-md);
  border-radius: 0 0 var(--mht-card-inner-radius) var(--mht-card-inner-radius);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-white) 9%, transparent),
      transparent 44%
    ),
    var(--mht-card-bg-soft);
  -webkit-backdrop-filter: blur(12px) saturate(128%);
  backdrop-filter: blur(12px) saturate(128%);
}

.mht-content-card__body::before{
  content: "";
  position: absolute;

  /*
   * Pulls the same image up behind the body so it visually continues
   * from the top media strip. Fallbacks protect against missing tokens.
   */
  top: calc(var(--mht-card-media-height, 120px) * -1);
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 0;

  border-radius: 0 0 var(--mht-card-inner-radius, var(--radius-sm)) var(--mht-card-inner-radius, var(--radius-sm));

  background-image: var(--mht-card-image, none);
  background-size: cover;
  background-position: var(--article-card-media-position, right center);
  background-repeat: no-repeat;

  opacity: var(--mht-card-ghost-opacity, 0.26);

  filter:
    saturate(var(--mht-card-ghost-saturate, 0.9))
    contrast(var(--mht-card-ghost-contrast, 0.96))
    brightness(var(--mht-card-ghost-brightness, 1.02));

  transition:
    opacity var(--duration-fast) var(--ease-soft),
    filter var(--duration-fast) var(--ease-soft);

  pointer-events: none;
}

.mht-content-card__body::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  border-radius: 0 0 var(--mht-card-inner-radius, var(--radius-sm)) var(--mht-card-inner-radius, var(--radius-sm));

  background:
    radial-gradient(
      circle at 82% 0%,
      color-mix(in srgb, var(--color-white) 12%, transparent) 0%,
      transparent 36%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--mht-card-bg, var(--color-surface)) 46%, transparent),
      color-mix(in srgb, var(--mht-card-bg-strong, var(--color-surface)) 82%, transparent)
    );

  pointer-events: none;
}

.mht-content-card:hover .mht-content-card__body::before,
.mht-content-card:focus-within .mht-content-card__body::before{
  opacity: var(--mht-card-ghost-opacity-hover);
}

.mht-content-card:hover .mht-content-card__body::after,
.mht-content-card:focus-within .mht-content-card__body::after{
  background:
    radial-gradient(
      circle at 82% 0%,
      var(--mht-card-hover-sheen, color-mix(in srgb, var(--color-white) 14%, transparent)) 0%,
      transparent 38%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--mht-card-bg, var(--color-surface)) 38%, transparent),
      color-mix(in srgb, var(--mht-card-bg, var(--color-surface)) 58%, transparent)
    );
}

/* Keep real card content above ghost image and glass overlay */
.mht-content-card__body > *{
  position: relative;
  z-index: 2;
}

/* -------------------------
   Label
   ------------------------- */

.mht-content-card__label-row{
  display: flex;
  align-items: center;
  min-width: 0;
}

.mht-content-card__label{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--mht-card-label-min-height);
  padding: var(--mht-card-label-pad-y) var(--mht-card-label-pad-x);
  overflow: hidden;
  border: var(--border-width-thin) var(--border-style-standard) var(--mht-card-label-border);
  border-radius: var(--radius-pill);
  background: var(--mht-card-label-bg);
  color: var(--mht-card-label-text);
  font-family: var(--font-body);
  font-size: var(--mht-card-label-font-size);
  font-weight: 850;
  letter-spacing: var(--article-card-ribbon-letter-spacing);
  line-height: var(--line-height-ui);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    color var(--duration-fast) var(--ease-soft);
}

.mht-content-card:hover .mht-content-card__label,
.mht-content-card:focus-within .mht-content-card__label{
  border-color: color-mix(
    in srgb,
    var(--mht-card-hover-line) 44%,
    var(--color-white) 18%
  );
  background: var(--mht-card-label-bg-hover);
}

/* -------------------------
   Title + excerpt
   No extra hover-rule element.
   No pseudo underline inside clamped text.
   ------------------------- */

.mht-content-card__title{
  display: -webkit-box;
  margin: var(--space-none);
  overflow: hidden;
  color: var(--mht-card-title);
  font-family: var(--mht-card-title-font);
  font-size: var(--mht-card-title-size);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: var(--mht-card-title-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition:
    color var(--duration-fast) var(--ease-soft),
    text-shadow var(--duration-fast) var(--ease-soft);
}

.mht-content-card:hover .mht-content-card__title,
.mht-content-card:focus-within .mht-content-card__title{
  color: var(--mht-card-title-hover);
  text-shadow: 0 1px 10px color-mix(
    in srgb,
    var(--mht-card-hover-line) 22%,
    transparent
  );
}

.mht-content-card__excerpt{
  display: -webkit-box;
  margin: var(--space-none);
  overflow: hidden;
  color: var(--mht-card-text);
  font-family: var(--font-body);
  font-size: var(--article-card-excerpt-font-size);
  font-weight: 500;
  line-height: var(--article-card-excerpt-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition:
    color var(--duration-fast) var(--ease-soft),
    opacity var(--duration-fast) var(--ease-soft);
}

.mht-content-card:hover .mht-content-card__excerpt,
.mht-content-card:focus-within .mht-content-card__excerpt{
  color: color-mix(in srgb, var(--color-white) 90%, transparent);
}

/* -------------------------
   Card-wide hover polish
   These selectors are safe here because they target blocks defined later.
   ------------------------- */

.mht-content-card:hover .myhotips-sidebar-rating-row,
.mht-content-card:focus-within .myhotips-sidebar-rating-row{
  border-color: color-mix(
    in srgb,
    var(--mht-card-hover-line) 34%,
    var(--color-white) 16%
  );
  background: var(--mht-card-rating-bg-hover);
}

.mht-content-card:hover .mht-content-card__footer,
.mht-content-card:focus-within .mht-content-card__footer{
  border-top-color: var(--mht-card-divider-hover);
}

.mht-content-card:hover .mht-content-card__brand-name,
.mht-content-card:focus-within .mht-content-card__brand-name{
  color: var(--color-white);
}

/* -------------------------
   Shared rating row
   Uses existing Blog DB/sidebar rating helper output for now.
   Later cleanup: rename helper/classes to neutral .mht-rating-row.
   ------------------------- */

.mht-content-card__rating-slot{
  margin-top: auto;
  padding-top: var(--space-xs);
}

.mht-content-card .myhotips-sidebar-rating-row{
  display: inline-grid;
  grid-template-columns: auto minmax(var(--mht-card-rating-bar-min), var(--mht-card-rating-bar-max)) auto;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  gap: var(--mht-card-rating-gap);
  padding: var(--mht-card-rating-pad-y) var(--mht-card-rating-pad-x);
  border: var(--border-width-thin) var(--border-style-standard) var(--mht-card-rating-border);
  border-radius: var(--radius-pill);
  background: var(--mht-card-rating-bg);
  color: var(--mht-card-label-text);
  font-family: var(--font-body);
}

.mht-content-card .myhotips-sidebar-rating-row__label{
  color: var(--mht-card-text-soft);
  font-size: var(--mht-card-rating-font-size);
  font-weight: 850;
  letter-spacing: var(--article-card-ribbon-letter-spacing);
  line-height: var(--line-height-ui);
  text-transform: uppercase;
}

.mht-content-card .myhotips-sidebar-rating-row__bar{
  position: relative;
  display: block;
  width: 100%;
  height: var(--mht-card-rating-track-height);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--mht-card-rating-track);
}

.mht-content-card .myhotips-sidebar-rating-row__fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--hsb-rating-fill-width, 0%);
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--mht-card-accent),
    var(--mht-card-rating-fill-end)
  );
}

.mht-content-card .myhotips-sidebar-rating-row__value{
  color: var(--mht-card-label-text);
  font-size: var(--mht-card-rating-font-size);
  font-weight: 850;
  line-height: var(--line-height-ui);
  white-space: nowrap;
}

.mht-content-card .myhotips-sidebar-rating-row__value small{
  margin-left: var(--space-xxs);
  color: var(--mht-card-text-soft);
  font-size: var(--mht-card-rating-font-size);
  font-weight: 750;
}

.mht-content-card .myhotips-sidebar-rating-row.is-empty{
  grid-template-columns: auto auto;
}

.mht-content-card .myhotips-sidebar-rating-row.is-empty .myhotips-sidebar-rating-row__bar{
  display: none;
}

.mht-content-card .myhotips-sidebar-rating-row.is-empty .myhotips-sidebar-rating-row__fill{
  width: 0;
}

.mht-content-card .myhotips-sidebar-rating-row.is-empty .myhotips-sidebar-rating-row__value{
  color: var(--mht-card-accent);
  font-weight: 850;
  letter-spacing: var(--article-card-ribbon-letter-spacing);
  text-transform: uppercase;
}

/* =========================================================
   MHT CONTENT CARD — DISPLAY-ONLY STAR RATING
   Uses Blog DB display helper:
   my_blog_db_render_rating_display()
   ========================================================= */

.mht-content-card__rating-slot{
  margin-top: auto;
  padding-top: var(--space-sm);

  --blog-star-size: 9px;
  --blog-star-active: var(--mht-card-accent, var(--color-tech-accent));
  --blog-star-empty: color-mix(
    in srgb,
    var(--mht-card-divider, var(--border-color-light)) 70%,
    var(--color-white) 30%
  );

  --blog-meta-pill-gap: var(--space-xs);
  --blog-meta-pill-strong: var(--mht-card-label-text, var(--color-dark));
  --blog-meta-pill-muted: var(--mht-card-text-soft, var(--color-text-muted));
  --blog-meta-pill-font-size: var(--font-size-ui-xs);
}

/* Display-only rating wrapper inside global card */
.mht-content-card .my-blog-rating-display{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: var(--blog-meta-pill-gap) !important;

  width: fit-content !important;
  max-width: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: var(--space-xs) var(--space-sm) !important;

  border: var(--border-width-thin) var(--border-style-standard) var(--mht-card-rating-border, var(--border-color-light)) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--mht-card-rating-bg, color-mix(in srgb, var(--color-white) 70%, transparent)) !important;
  box-shadow: none !important;

  color: var(--mht-card-label-text, var(--color-dark)) !important;
  font-family: var(--font-body) !important;
  font-size: var(--blog-meta-pill-font-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Hover follows the card hover, not a separate floating pill effect */
.mht-content-card:hover .my-blog-rating-display,
.mht-content-card:focus-within .my-blog-rating-display{
  border-color: color-mix(
    in srgb,
    var(--mht-card-hover-line, var(--mht-card-accent)) 34%,
    var(--color-white) 16%
  ) !important;
  background: var(--mht-card-rating-bg-hover, color-mix(in srgb, var(--color-white) 14%, transparent)) !important;
}

/* Stars row */
.mht-content-card .my-blog-rating-display__stars{
  display: inline-flex !important;
  align-items: center !important;
  gap: 1px !important;

  width: auto !important;
  max-width: 100% !important;
  line-height: 1 !important;
}

/* Individual stars */
.mht-content-card .my-blog-rating-display__star{
  position: relative !important;
  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  font-size: var(--blog-star-size) !important;
  line-height: 1 !important;
}

/* Full / empty / half states */
.mht-content-card .my-blog-rating-display__star.is-full{
  color: var(--blog-star-active) !important;
}

.mht-content-card .my-blog-rating-display__star.is-empty,
.mht-content-card .my-blog-rating-display__star.is-half{
  color: var(--blog-star-empty) !important;
}

.mht-content-card .my-blog-rating-display__star.is-half::after{
  content: "★";
  position: absolute;
  inset: 0 auto 0 0;

  width: 50%;
  overflow: hidden;

  color: var(--blog-star-active);
}

/* Text beside stars */
.mht-content-card .my-blog-rating-display__text{
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;

  width: auto !important;
  max-width: 100% !important;

  color: var(--blog-meta-pill-strong) !important;
  font-size: var(--blog-meta-pill-font-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.mht-content-card .my-blog-rating-display__average{
  color: var(--blog-meta-pill-strong) !important;
  font-size: inherit !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.mht-content-card .my-blog-rating-display__count,
.mht-content-card .my-blog-rating-display__thanks{
  color: var(--blog-meta-pill-muted) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* New / no-rating text inside card rating pill */
.mht-content-card .my-blog-rating-display__pill,
.mht-content-card .my-blog-rating-display__pill--new{
  display: inline !important;

  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: var(--mht-card-accent, var(--color-tech-accent)) !important;
  font-family: var(--font-body) !important;
  font-size: inherit !important;
  font-weight: 900 !important;
  line-height: inherit !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Card hover text polish */
.mht-content-card:hover .my-blog-rating-display__average,
.mht-content-card:focus-within .my-blog-rating-display__average,
.mht-content-card:hover .my-blog-rating-display__count,
.mht-content-card:focus-within .my-blog-rating-display__count,
.mht-content-card:hover .my-blog-rating-display__thanks,
.mht-content-card:focus-within .my-blog-rating-display__thanks{
  color: color-mix(in srgb, var(--color-white) 86%, transparent) !important;
}

/* -------------------------
   Footer
   Global content-card footer
   Main/grid cards keep footer anchored to bottom
   ------------------------- */

.mht-content-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--article-card-footer-gap);
  margin-top: var(--space-sm);
  padding-top: var(--article-card-footer-top-pad);
  border-top: var(--border-width-thin) var(--border-style-standard) var(--mht-card-divider);
}

.mht-content-card__brand{
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--article-card-meta-gap);
}

.mht-content-card__avatar{
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: var(--article-card-brand-size);
  height: var(--article-card-brand-size);

  overflow: hidden;
  border: 0;
  border-radius: var(--mht-card-avatar-radius);
  background: transparent;
  box-shadow: none;
}

.mht-content-card__avatar img{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.mht-content-card__avatar-initial{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  border-radius: inherit;
  background: color-mix(in srgb, var(--color-white) 12%, transparent);
  color: var(--color-white);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 850;
  line-height: var(--line-height-ui);
}

.mht-content-card__brand-text{
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--article-card-meta-copy-gap);
  line-height: var(--line-height-ui);
}

.mht-content-card__brand-name{
  overflow: hidden;

  color: color-mix(in srgb, var(--color-white) 92%, transparent);

  font-family: var(--font-body);
  font-size: var(--article-card-meta-title-size);
  font-weight: 850;
  line-height: var(--line-height-ui);

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

.mht-content-card__brand-meta{
  overflow: hidden;

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

  font-family: var(--font-body);
  font-size: var(--article-card-meta-text-size);
  font-weight: 650;
  line-height: var(--line-height-ui);

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

/* Main/global cards: keep footer pinned to the bottom when there is no rating row */
.mht-content-card__excerpt + .mht-content-card__footer,
.mht-content-card__title + .mht-content-card__footer{
  margin-top: auto;
}

/* =========================================================
   BOTTOM DISCOVERY — COMPACT IMAGE-LED 200x210 CARD
   - Bottom carousel only
   - Image favoured
   - Footer must not clip/truncate author/read time
   - No rating row
   ========================================================= */

.hotips-bottom-discovery .hotips-bottom-discovery__viewport,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport{
  gap: 35px !important;
  column-gap: 35px !important;
  scroll-padding-inline: 35px;

  align-items: stretch;
  padding-bottom: 14px;
  overflow-y: visible;
}

.hotips-bottom-discovery__item{
  flex: 0 0 200px;
  width: 200px;
  height: 210px;
}

.hotips-bottom-discovery .mht-content-card{
  --mht-card-media-height: 126px;
  --mht-card-title-size: 12.5px;
  --mht-card-title-line-height: 1.05;

  width: 200px;
  min-width: 200px;
  max-width: 200px;

  height: 210px;
  min-height: 210px;
  max-height: 210px;
}

/* 126px image / 84px info */
.hotips-bottom-discovery .mht-content-card__link{
  display: grid;
  grid-template-rows: 126px 84px;

  height: 210px;
  min-height: 0;
}

.hotips-bottom-discovery .mht-content-card__media{
  height: 126px;
  min-height: 126px;
  max-height: 126px;
}

/* Info panel */
.hotips-bottom-discovery .mht-content-card__body{
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 3px;

  height: 84px;
  min-height: 84px;
  max-height: 84px;

  padding: 5px 9px 7px;
}

/* Hide category pill and rating in bottom carousel */
.hotips-bottom-discovery .mht-content-card__label-row,
.hotips-bottom-discovery .mht-content-card__rating-slot{
  display: none;
}

/* Title: one neat line */
.hotips-bottom-discovery .mht-content-card__title{
  display: block;
  margin: 0;

  font-size: 12.5px;
  line-height: 1.05;

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

  -webkit-line-clamp: unset;
}

/* Excerpt: compact but still readable */
.hotips-bottom-discovery .mht-content-card__excerpt{
  display: -webkit-box;
  margin: 0;

  font-size: 9.4px;
  line-height: 1.08;

  overflow: hidden;
  white-space: normal;
  text-overflow: clip;

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

/* Neutralise global footer auto-push only inside bottom carousel */
.hotips-bottom-discovery .mht-content-card__excerpt + .mht-content-card__footer,
.hotips-bottom-discovery .mht-content-card__title + .mht-content-card__footer{
  margin-top: 0;
}

/* Footer: lifted, compact, readable */
.hotips-bottom-discovery .mht-content-card__footer{
  align-self: start;

  min-width: 0;
  margin-top: 2px;
  padding-top: 4px;

  overflow: visible;
}

/* Footer row */
.hotips-bottom-discovery .mht-content-card__brand{
  display: flex;
  align-items: center;

  min-width: 0;
  gap: 5px;
  overflow: visible;
}

.hotips-bottom-discovery .mht-content-card__avatar{
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.hotips-bottom-discovery .mht-content-card__brand-text{
  display: flex;
  flex-direction: column;

  min-width: 0;
  gap: 1px;
  overflow: visible;
}

/* Do not truncate author */
.hotips-bottom-discovery .mht-content-card__brand-name{
  max-width: none;

  font-size: 9px;
  line-height: 1;
  font-weight: 850;

  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Do not truncate date/read time */
.hotips-bottom-discovery .mht-content-card__brand-meta{
  max-width: none;

  font-size: 7.4px;
  line-height: 1;
  font-weight: 650;

  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
/* -------------------------
   Mobile
   ------------------------- */

@media (max-width: 760px){
  .mht-content-card{
    --mht-card-media-height: clamp(118px, 34vw, 150px);

    --mht-card-title-size: var(--font-size-lg);

    --mht-card-hover-rule-width: calc(var(--space-xl) + var(--space-sm));
    --mht-card-hover-rule-width-hover: calc(var(--space-2xl) + var(--space-lg));

    --mht-card-label-min-height: calc(var(--space-lg) + var(--space-xxs));
    --mht-card-label-pad-y: var(--space-xxs);
    --mht-card-label-pad-x: var(--space-sm);
    --mht-card-label-font-size: var(--font-size-ui-xxs);

    --mht-card-rating-pad-y: var(--space-xxs);
    --mht-card-rating-pad-x: var(--space-sm);
    --mht-card-rating-gap: var(--space-xs);
    --mht-card-rating-bar-min: calc(var(--space-2xl) + var(--space-sm));
    --mht-card-rating-bar-max: calc(var(--space-2xl) + var(--space-lg));
    --mht-card-rating-track-height: calc(var(--space-xxs) + var(--border-width-thin));
    --mht-card-rating-font-size: var(--font-size-ui-xxs);
  }

  .mht-content-card__body{
    padding: var(--space-md);
  }

  .mht-content-card__title{
    -webkit-line-clamp: 3;
  }

  .mht-content-card__excerpt{
    -webkit-line-clamp: 2;
  }

  .mht-content-card .myhotips-sidebar-rating-row{
    max-width: 100%;
  }

  .mht-content-card .myhotips-sidebar-rating-row.is-empty{
    grid-template-columns: auto auto;
  }

  .mht-content-card__footer{
    gap: var(--article-card-footer-gap-mobile);
    padding-top: var(--article-card-footer-top-pad-mobile);
  }
}

@media (max-width: 420px){
  .mht-content-card{
    --mht-card-rating-bar-min: calc(var(--space-2xl) + var(--space-xs));
    --mht-card-rating-bar-max: calc(var(--space-2xl) + var(--space-md));
    --mht-card-hover-rule-width-hover: calc(var(--space-2xl) + var(--space-sm));
  }

  .mht-content-card__brand-name,
  .mht-content-card__brand-meta{
    max-width: 18ch;
  }
}