/* batch341: image-only discover cards + remix CTA */
/* Isolated discovery UI; Brand25 owns the three appearance palettes. */
.hh-discover-feed,
.hh-discover-detail {
  --hh-discover-surface: var(--hhv-surface, var(--hhv-panel, #0a2132));
  --hh-discover-subtle: var(--hhv-surface-subtle, #0c283b);
  --hh-discover-hover: var(--hhv-surface-hover, #12364d);
  --hh-discover-selected: var(--hhv-surface-selected, #193f55);
  --hh-discover-text: var(--hhv-ink, var(--hhv-text, #f0f6fa));
  --hh-discover-muted: var(--hhv-ink-secondary, var(--hhv-muted, #bed0dc));
  --hh-discover-border: var(--hhv-border, var(--hhv-line, #36576b));
  --hh-discover-border-strong: var(--hhv-border-strong, #7898ac);
  --hh-discover-accent: var(--hhv-link, #89d6f5);
  --hh-discover-focus: var(--hhv-focus, #89d6f5);
  --hh-discover-error: var(--hhv-danger, #ffb3be);
  color: var(--hh-discover-text) !important;
  font: inherit;
  text-align: start;
  box-sizing: border-box;
}
.hh-discover-feed {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.hh-discover-feed *,
.hh-discover-detail * { box-sizing: border-box; }
.hh-discover-feed [hidden],
.hh-discover-detail [hidden] { display: none !important; }
.hh-discover-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}
.hh-discover-heading-copy { min-width: 0; }
.hh-discover-title {
  margin: 0 !important;
  color: var(--hh-discover-text) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .02em;
}
.hh-discover-subtitle {
  margin: 5px 0 0 !important;
  color: var(--hh-discover-muted) !important;
  font-size: 13px !important;
  line-height: 1.6;
}
.hh-discover-library {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 40px;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--hh-discover-border);
  border-radius: 10px;
  background: var(--hh-discover-surface);
  color: var(--hh-discover-accent) !important;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none !important;
}
.hh-discover-library::after { content: "↗"; }
.hh-discover-library:hover { background: var(--hh-discover-hover); border-color: var(--hh-discover-accent); }
.hh-discover-ads {
  display: grid;
  grid-template-columns: repeat(var(--hh-discover-ad-count, 3), minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0 0 16px;
}
.hh-discover-ad {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 156px;
  overflow: hidden;
  border: 1px solid var(--hh-discover-border);
  border-radius: 12px;
  background: var(--hh-discover-surface);
  color: var(--hh-discover-text) !important;
  text-decoration: none !important;
}
.hh-discover-ad-media {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hh-discover-selected), var(--hh-discover-surface));
}
.hh-discover-ad-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  margin: 0 !important;
  border: 0 !important;
}
.hh-discover-ad-text-only .hh-discover-ad-media {
  background: linear-gradient(135deg, var(--hh-discover-selected), var(--hh-discover-surface));
  background: radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--hh-discover-accent) 24%, transparent), transparent 60%), linear-gradient(135deg, var(--hh-discover-selected), var(--hh-discover-surface));
}
.hh-discover-ad-copy { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 156px; padding: 18px 16px; }
.hh-discover-ad-has-image .hh-discover-ad-copy { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.76) 45%, rgba(0,0,0,.9)); }
.hh-discover-ad-has-image :is(.hh-discover-ad-title,.hh-discover-ad-subtitle,.hh-discover-ad-label) { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.65); }
.hh-discover-ad-label { color: var(--hh-discover-muted) !important; font-size: 10px; line-height: 1.4; }
.hh-discover-ad-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--hh-discover-text) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.hh-discover-ad-subtitle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--hh-discover-muted) !important;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.hh-discover-toolbar { display: grid; gap: 14px; margin: 0 0 12px; }
.hh-discover-categories,
.hh-discover-children {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--hh-discover-border-strong) transparent;
  padding: 3px 2px 7px;
  scroll-padding-inline: 8px;
  -webkit-overflow-scrolling: touch;
}
.hh-discover-children { margin: 0 0 14px; gap: 6px; }
.hh-discover-tab,
.hh-discover-child,
.hh-discover-control,
.hh-discover-search-submit,
.hh-discover-clear,
.hh-discover-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 42px;
  margin: 0 !important;
  padding: 8px 14px;
  border: 1px solid var(--hh-discover-border) !important;
  border-radius: 10px;
  background: var(--hh-discover-surface) !important;
  color: var(--hh-discover-text) !important;
  font: inherit;
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-shadow: none !important;
  text-shadow: none !important;
}
.hh-discover-tab:hover,
.hh-discover-child:hover,
.hh-discover-control:hover,
.hh-discover-search-submit:hover,
.hh-discover-clear:hover,
.hh-discover-close:hover { background: var(--hh-discover-hover) !important; border-color: var(--hh-discover-border-strong) !important; }
.hh-discover-tab[aria-pressed="true"],
.hh-discover-child[aria-pressed="true"] {
  background: var(--hh-discover-selected) !important;
  border-color: var(--hh-discover-accent) !important;
  color: var(--hh-discover-accent) !important;
  box-shadow: inset 0 0 0 1px var(--hh-discover-accent) !important;
}
.hh-discover-child { min-height: 36px; padding: 6px 11px; border-radius: 8px; font-size: 12px !important; }
.hh-discover-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hh-discover-search {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 400px;
  width: min(100%, 540px);
  max-width: 540px;
  min-width: 0;
  margin: 0 !important;
  border: 1px solid var(--hh-discover-border-strong);
  border-radius: 10px;
  background: var(--hh-discover-surface);
}
.hh-discover-search-input {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
  height: 42px;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px 0 0 10px;
  background: transparent !important;
  color: var(--hh-discover-text) !important;
  caret-color: var(--hh-discover-accent);
  font: inherit;
  font-size: 14px !important;
  line-height: 1.5;
  box-shadow: none !important;
}
.hh-discover-search-input::placeholder { color: var(--hh-discover-muted) !important; opacity: 1; }
.hh-discover-search-input::-webkit-search-cancel-button { appearance: none; }
.hh-discover-search-submit { min-height: 36px; margin: 3px !important; padding: 6px 12px; border-radius: 7px; background: var(--hh-discover-hover) !important; }
.hh-discover-clear { min-height: 36px; width: 32px; padding: 0; border: 0 !important; font-size: 21px !important; background: transparent !important; }
.hh-discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  grid-auto-rows: 8px;
  gap: 12px;
  align-items: start;
  min-width: 0;
  margin: 0;
}
.hh-discover-card { min-width: 0; margin: 0; padding: 0; border: 0; }
.hh-discover-card-open {
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--hh-discover-border) !important;
  border-radius: 12px;
  background: var(--hh-discover-surface) !important;
  color: var(--hh-discover-text) !important;
  font: inherit;
  text-align: start;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color .15s ease, transform .15s ease;
}
.hh-discover-card-media { display: block; position: relative; width: 100%; overflow: hidden; background: var(--hh-discover-subtle); }
.hh-discover-card-image { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: contain; }
.hh-discover-media-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 90px;
  height: 100%;
  padding: 12px;
  color: var(--hh-discover-muted) !important;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.hh-discover-video-badge { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; background: rgba(0,0,0,.78); color: #fff !important; font-size: 11px; line-height: 1.4; }
.hh-discover-card-copy,
.hh-discover-card-title,
.hh-discover-card-meta,
.hh-discover-author,
.hh-discover-type { display: none !important; }
.hh-discover-card-open { cursor: pointer; }
.hh-discover-card-media { display: block; position: relative; width: 100%; overflow: hidden; background: var(--hh-discover-subtle); border-radius: inherit; }
.hh-discover-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 4px;
}
.hh-discover-remix {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px !important;
  border: 1px solid var(--hh-discover-accent, #2f6fed) !important;
  border-radius: 999px;
  background: var(--hh-discover-accent, #2f6fed) !important;
  color: #fff !important;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none !important;
}
.hh-discover-remix:hover { filter: brightness(1.05); }
.hh-discover-detail-copy > .hh-discover-detail-actions { margin-top: 4px; margin-bottom: 10px; }
.hh-discover-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 0 0; padding: 4px 0 14px; }
.hh-discover-status { width: 100%; margin: 0 !important; color: var(--hh-discover-muted) !important; font-size: 13px; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.hh-discover-status-error { color: var(--hh-discover-error) !important; }
.hh-discover-footer .hh-discover-control { min-width: 140px; }
.hh-discover-sentinel { height: 1px; pointer-events: none; }
.hh-discover-feed :is(button,a,input):focus-visible,
.hh-discover-detail :is(button,a,video):focus-visible {
  outline: 3px solid var(--hh-discover-focus) !important;
  outline-offset: 3px !important;
}
.hh-discover-feed button:disabled,
.hh-discover-detail button:disabled { cursor: wait; opacity: .7; color: var(--hh-discover-muted) !important; }
.hh-discover-detail:not([open]) { display: none !important; }
.hh-discover-detail[open] {
  display: block;
  width: min(1080px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 14px 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--hh-discover-border-strong);
  border-radius: 16px;
  background: var(--hh-discover-surface) !important;
  color: var(--hh-discover-text) !important;
  box-shadow: var(--hhv-shadow, 0 18px 60px rgba(0,0,0,.3));
  scrollbar-color: var(--hh-discover-border-strong) var(--hh-discover-subtle);
}
.hh-discover-detail::backdrop { background: var(--hhv-modal-overlay, rgba(0,8,15,.72)); }
.hh-discover-detail-fallback { position: fixed; inset: 18px; z-index: 2147483000; box-shadow: 0 0 0 100vmax rgba(0,8,15,.72); }
.hh-discover-close { position: sticky; top: 0; z-index: 2; display: flex; width: 40px; min-height: 40px; margin: 0 0 10px auto !important; padding: 0; font-size: 25px !important; line-height: 1; }
.hh-discover-detail-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 26px; align-items: start; }
.hh-discover-detail-media { position: sticky; top: 54px; min-width: 0; overflow: hidden; border: 1px solid var(--hh-discover-border); border-radius: 12px; background: var(--hh-discover-subtle); }
.hh-discover-detail-image,
.hh-discover-detail-video { display: block; width: 100%; height: auto; max-height: 72dvh; margin: 0 !important; object-fit: contain; background: var(--hh-discover-subtle); }
.hh-discover-detail-copy { min-width: 0; }
.hh-discover-detail-title { margin: 0 0 12px !important; color: var(--hh-discover-text) !important; font-size: 22px !important; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.hh-discover-detail-author { margin: 0 0 16px !important; color: var(--hh-discover-muted) !important; font-size: 13px; line-height: 1.6; }
.hh-discover-detail-summary { margin: 0 0 18px !important; color: var(--hh-discover-text) !important; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.hh-discover-detail-section-title { margin: 20px 0 8px !important; color: var(--hh-discover-text) !important; font-size: 15px !important; font-weight: 700; line-height: 1.6; }
.hh-discover-detail-text { margin: 0 0 12px !important; padding: 13px; border: 1px solid var(--hh-discover-border); border-radius: 10px; background: var(--hh-discover-subtle) !important; color: var(--hh-discover-text) !important; font: inherit; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.hh-discover-detail-steps { margin: 0 0 18px; padding-inline-start: 24px; }
.hh-discover-detail-step { margin: 0 0 16px; padding: 0; color: var(--hh-discover-muted); }
.hh-discover-step-meta { margin: 0 0 7px !important; color: var(--hh-discover-muted) !important; font-size: 12px; line-height: 1.7; }
.hh-discover-detail-copy > .hh-discover-library { margin-top: 18px; }
@media (hover: hover) and (pointer: fine) {
  .hh-discover-card-open:hover { border-color: var(--hh-discover-accent) !important; transform: translateY(-2px); }
  .hh-discover-ad:hover { border-color: var(--hh-discover-accent); }
}
@media (max-width: 700px) {
  .hh-discover-feed { margin-top: 26px !important; }
  .hh-discover-heading { align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .hh-discover-heading .hh-discover-library { font-size: 12px; padding: 7px 9px; }
  .hh-discover-ads { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 10px; margin: 0 -2px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--hh-discover-border-strong) transparent; }
  .hh-discover-ad { flex: 0 0 min(78%, 330px); scroll-snap-align: start; }
  .hh-discover-toolbar { gap: 10px; }
  .hh-discover-tools { gap: 8px; }
  .hh-discover-search { width: auto; flex-basis: 0; max-width: none; }
  .hh-discover-search-input { font-size: 16px !important; padding-inline: 10px !important; }
  .hh-discover-search-submit { font-size: 12px !important; padding-inline: 9px; }
  .hh-discover-tools > .hh-discover-control { padding-inline: 11px; font-size: 12px !important; }
  .hh-discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hh-discover-card-copy,
  .hh-discover-card-title,
  .hh-discover-card-meta { display: none !important; }
  .hh-discover-remix { min-height: 38px; font-size: 13px; padding: 0 16px !important; }
  .hh-discover-detail[open] { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 10px 14px 20px; border-radius: 13px; }
  .hh-discover-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hh-discover-detail-media { position: static; }
  .hh-discover-detail-image, .hh-discover-detail-video { max-height: 65dvh; }
  .hh-discover-detail-title { font-size: 20px !important; }
}
@media (max-width: 340px) {
  .hh-discover-grid { grid-template-columns: minmax(0, 1fr); }
  .hh-discover-heading { flex-wrap: wrap; }
  .hh-discover-tools { flex-wrap: wrap; }
  .hh-discover-search { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-discover-card-open { transition: none; transform: none !important; }
  .hh-discover-ads { scroll-behavior: auto; }
}

/* Pure-text advertisements size to their content, including mixed image/text rows. */
.hh-discover-ad-text-only {
  min-height: 0;
  align-self: start;
}
.hh-discover-ad-text-only .hh-discover-ad-copy {
  min-height: 0;
  padding: 12px;
  justify-content: center;
}