/**
 * SignTeb Video Hub — front-end styles.
 *
 * Design language: Apple-style surfaces, glassmorphism panels, medical
 * premium palette. Every colour is a custom property scoped to .stvh-scope,
 * so the light/dark switch is a single token swap and nothing leaks into the
 * host theme.
 */

.stvh-scope {
  /* Light theme (default) */
  --stvh-accent: #0a84ff;
  --stvh-bg: transparent;
  --stvh-surface: rgba(255, 255, 255, 0.72);
  --stvh-surface-solid: #ffffff;
  --stvh-border: rgba(15, 23, 42, 0.1);
  --stvh-text: #0f172a;
  --stvh-text-muted: #64748b;
  --stvh-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --stvh-shadow-hover: 0 18px 44px rgba(15, 23, 42, 0.14);
  --stvh-radius: 18px;
  --stvh-radius-sm: 12px;
  --stvh-blur: saturate(180%) blur(20px);
  --stvh-ease: cubic-bezier(0.22, 1, 0.36, 1);

  box-sizing: border-box;
  color: var(--stvh-text);
  direction: rtl;
  font-family: inherit;
  text-align: right;
}

.stvh-scope *,
.stvh-scope *::before,
.stvh-scope *::after {
  box-sizing: inherit;
}

/* Theme bleed guard.
   Inheritance alone is not enough: a dark theme styling `h2 { color: #fff }`
   beats the inherited colour on .stvh-scope, which rendered white headings on
   our light panels — invisible. Headings and form controls therefore state
   their own colour.

   Scoped to element selectors only, never to our own classes: a blanket
   `.stvh-scope p` would outrank `.stvh-card__excerpt` and flatten every muted
   tone in the component. */
.stvh-scope h2,
.stvh-scope h3,
.stvh-scope h4,
.stvh-scope summary,
.stvh-scope button,
.stvh-scope input {
  color: var(--stvh-text);
}

/* Themes routinely give headings borders, uppercase and heavy margins that
   wreck the panel rhythm. */
.stvh-scope h2,
.stvh-scope h3,
.stvh-scope h4 {
  border: 0;
  letter-spacing: normal;
  padding: 0;
  text-transform: none;
}

/* Dark theme — explicit opt-in … */
.stvh-scope[data-theme="dark"] {
  --stvh-surface: rgba(28, 28, 30, 0.72);
  --stvh-surface-solid: #1c1c1e;
  --stvh-border: rgba(255, 255, 255, 0.12);
  --stvh-text: #f5f5f7;
  --stvh-text-muted: #a1a1aa;
  --stvh-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  --stvh-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* … and automatic, following the visitor's system preference. */
@media (prefers-color-scheme: dark) {
  .stvh-scope[data-theme="auto"] {
    --stvh-surface: rgba(28, 28, 30, 0.72);
    --stvh-surface-solid: #1c1c1e;
    --stvh-border: rgba(255, 255, 255, 0.12);
    --stvh-text: #f5f5f7;
    --stvh-text-muted: #a1a1aa;
    --stvh-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    --stvh-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- Hub shell ---------- */

.stvh-hub {
  margin: 2.5rem 0;
}

.stvh-hub__head {
  margin-bottom: 1.5rem;
}

.stvh-hub__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.35rem;
}

.stvh-hub__subtitle {
  color: var(--stvh-text-muted);
  font-size: 1rem;
  margin: 0;
}

/* ---------- Toolbar: search + filters ---------- */

.stvh-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.stvh-search {
  align-items: center;
  background: var(--stvh-surface);
  -webkit-backdrop-filter: var(--stvh-blur);
  backdrop-filter: var(--stvh-blur);
  border: 1px solid var(--stvh-border);
  border-radius: 999px;
  display: flex;
  flex: 1 1 260px;
  gap: 0.5rem;
  max-width: 380px;
  padding: 0.55rem 1rem;
  transition: border-color 0.25s var(--stvh-ease), box-shadow 0.25s var(--stvh-ease);
}

.stvh-search:focus-within {
  border-color: var(--stvh-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stvh-accent) 18%, transparent);
}

.stvh-search__icon {
  fill: var(--stvh-text-muted);
  flex: none;
  height: 18px;
  width: 18px;
}

.stvh-search__input {
  background: none;
  border: 0;
  color: var(--stvh-text);
  font: inherit;
  outline: none;
  padding: 0;
  width: 100%;
}

.stvh-search__input::placeholder {
  color: var(--stvh-text-muted);
}

.stvh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stvh-chip {
  align-items: center;
  background: var(--stvh-surface);
  -webkit-backdrop-filter: var(--stvh-blur);
  backdrop-filter: var(--stvh-blur);
  border: 1px solid var(--stvh-border);
  border-radius: 999px;
  color: var(--stvh-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.9rem;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  transition: transform 0.2s var(--stvh-ease), background 0.2s var(--stvh-ease), color 0.2s var(--stvh-ease);
}

.stvh-chip:hover {
  transform: translateY(-1px);
}

.stvh-chip.is-active {
  background: var(--stvh-accent);
  border-color: transparent;
  color: #fff;
}

.stvh-chip__count {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ---------- Results ---------- */

.stvh-results {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.stvh-results--list {
  grid-template-columns: 1fr;
}

.stvh-results--carousel,
.stvh-results--slider {
  grid-auto-columns: minmax(260px, 300px);
  grid-auto-flow: column;
  grid-template-columns: none;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.stvh-results--carousel .stvh-card,
.stvh-results--slider .stvh-card {
  scroll-snap-align: start;
}

.stvh-results.is-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s var(--stvh-ease);
}

/* ---------- Card ---------- */

.stvh-card {
  animation: stvh-fade-in 0.45s var(--stvh-ease) both;
  background: var(--stvh-surface);
  -webkit-backdrop-filter: var(--stvh-blur);
  backdrop-filter: var(--stvh-blur);
  border: 1px solid var(--stvh-border);
  border-radius: var(--stvh-radius);
  box-shadow: var(--stvh-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.35s var(--stvh-ease), box-shadow 0.35s var(--stvh-ease);
}

.stvh-card:hover {
  box-shadow: var(--stvh-shadow-hover);
  transform: translateY(-4px);
}

.stvh-card__media {
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

/* Same reasoning as the player poster: a failed card thumbnail must leave the
   card's shape intact, with the gradient showing through. */
.stvh-card__media {
  background: linear-gradient(135deg, color-mix(in srgb, var(--stvh-accent) 22%, transparent), transparent);
}

/* Must outrank the hardened `.stvh-player .stvh-player__facade img` rule
   below, which sets display:block — otherwise a failed poster reappears as a
   broken-image glyph. */
.stvh-scope .stvh-card__thumb[data-stvh-broken],
.stvh-player .stvh-player__facade img[data-stvh-broken] {
  display: none;
}

.stvh-card__thumb {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform 0.5s var(--stvh-ease);
  width: 100%;
}

.stvh-card__thumb--empty {
  background: linear-gradient(135deg, color-mix(in srgb, var(--stvh-accent) 22%, transparent), transparent);
  display: block;
  height: 100%;
  width: 100%;
}

.stvh-card:hover .stvh-card__thumb {
  transform: scale(1.05);
}

.stvh-card__play {
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  height: 52px;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transform: translate(50%, -50%) scale(0.85);
  transition: opacity 0.3s var(--stvh-ease), transform 0.3s var(--stvh-ease);
  width: 52px;
}

.stvh-card:hover .stvh-card__play,
.stvh-card__media:focus-visible .stvh-card__play {
  opacity: 1;
  transform: translate(50%, -50%) scale(1);
}

/* The triangle in the path already points right, and RTL does not mirror SVG
   path data — flipping it here pointed the play button backwards. */
.stvh-card__play svg {
  fill: #0f172a;
  height: 24px;
  width: 24px;
}

.stvh-card__duration {
  background: rgba(0, 0, 0, 0.72);
  border-radius: 6px;
  color: #fff;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  inset-block-end: 0.6rem;
  inset-inline-end: 0.6rem;
  padding: 0.15rem 0.45rem;
  position: absolute;
}

.stvh-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem 1.15rem;
}

.stvh-card__title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.stvh-card__title a {
  color: inherit;
  text-decoration: none;
}

.stvh-card__title a:hover {
  color: var(--stvh-accent);
}

.stvh-card__excerpt {
  color: var(--stvh-text-muted);
  font-size: 0.88rem;
  line-height: 1.75;
  margin: 0;
}

.stvh-card__meta {
  align-items: center;
  color: var(--stvh-text-muted);
  display: flex;
  font-size: 0.78rem;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.stvh-card__topic {
  background: color-mix(in srgb, var(--stvh-accent) 12%, transparent);
  border-radius: 999px;
  color: var(--stvh-accent);
  padding: 0.15rem 0.6rem;
}

/* List layout puts the poster beside the text. */
.stvh-results--list .stvh-card {
  flex-direction: row;
}

.stvh-results--list .stvh-card__media {
  flex: 0 0 240px;
  max-width: 240px;
}

@media (max-width: 600px) {
  .stvh-results--list .stvh-card {
    flex-direction: column;
  }

  .stvh-results--list .stvh-card__media {
    flex: none;
    max-width: none;
  }
}

/* ---------- Player facade ---------- */

.stvh-player {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--stvh-radius);
  box-shadow: var(--stvh-shadow);
  margin: 0 0 1.75rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Themes style `button` aggressively, and a rule like `.entry-content button`
   outranks a single class — which shrank the facade to its content width and
   parked it at the inline start, so the poster filled only a narrow strip.
   Two defences: absolute positioning against .stvh-player, so width and
   display rules cannot change the box at all, and a double-class selector
   that outranks the typical theme rule. */
.stvh-player .stvh-player__facade {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: block;
  font: inherit;
  height: 100%;
  inset: 0;
  margin: 0;
  max-width: none;
  min-height: 0;
  min-width: 0;
  outline-offset: -2px;
  padding: 0;
  position: absolute;
  width: 100%;
}

/* The poster comes from a third-party CDN and can fail (hotlink rules, an
   expired URL). It must never resize the player when it does, so the image is
   pinned to the box and the gradient underneath becomes the fallback. */
.stvh-player .stvh-player__facade img {
  border-radius: 0;
  display: block;
  height: 100%;
  inset: 0;
  margin: 0;
  max-width: none;
  object-fit: cover;
  padding: 0;
  position: absolute;
  width: 100%;
}

.stvh-player .stvh-player__facade {
  background: linear-gradient(135deg, color-mix(in srgb, var(--stvh-accent) 30%, #000), #000);
}

.stvh-player__button {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  height: 76px;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  justify-content: center;
  position: absolute;
  transform: translate(50%, -50%);
  transition: transform 0.3s var(--stvh-ease);
  width: 76px;
}

.stvh-player__facade:hover .stvh-player__button {
  transform: translate(50%, -50%) scale(1.08);
}

.stvh-player__button svg {
  fill: #0f172a;
  height: 34px;
  width: 34px;
}

.stvh-player iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

/* ---------- AI panels ---------- */

.stvh-ai {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0;
}

.stvh-panel {
  background: var(--stvh-surface);
  -webkit-backdrop-filter: var(--stvh-blur);
  backdrop-filter: var(--stvh-blur);
  border: 1px solid var(--stvh-border);
  border-radius: var(--stvh-radius);
  box-shadow: var(--stvh-shadow);
  padding: 1.4rem 1.5rem;
}

.stvh-panel__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
}

.stvh-panel p {
  line-height: 2;
  margin: 0;
}

.stvh-points {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stvh-points li {
  line-height: 1.9;
  padding-inline-start: 1.5rem;
  position: relative;
}

.stvh-points li::before {
  background: var(--stvh-accent);
  border-radius: 50%;
  content: "";
  height: 7px;
  inset-block-start: 0.75em;
  inset-inline-start: 0.35rem;
  position: absolute;
  width: 7px;
}

.stvh-faq {
  border-bottom: 1px solid var(--stvh-border);
  padding: 0.5rem 0;
}

.stvh-faq:last-child {
  border-bottom: 0;
}

.stvh-faq__q {
  cursor: pointer;
  font-weight: 600;
  line-height: 1.8;
  list-style: none;
  padding-inline-end: 1.5rem;
  position: relative;
}

.stvh-faq__q::-webkit-details-marker {
  display: none;
}

.stvh-faq__q::after {
  content: "+";
  font-weight: 400;
  inset-block-start: 0;
  inset-inline-end: 0;
  position: absolute;
  transition: transform 0.25s var(--stvh-ease);
}

.stvh-faq[open] .stvh-faq__q::after {
  transform: rotate(45deg);
}

.stvh-faq__a {
  color: var(--stvh-text-muted);
  line-height: 2;
  padding: 0.5rem 0 0.75rem;
}

.stvh-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stvh-links a {
  background: color-mix(in srgb, var(--stvh-accent) 10%, transparent);
  border-radius: 999px;
  color: var(--stvh-accent);
  display: inline-block;
  font-size: 0.9rem;
  padding: 0.35rem 0.9rem;
  text-decoration: none;
  transition: background 0.2s var(--stvh-ease);
}

.stvh-links a:hover {
  background: color-mix(in srgb, var(--stvh-accent) 20%, transparent);
}

/* ---------- Medical hub ---------- */

.stvh-medhub {
  background: var(--stvh-surface);
  -webkit-backdrop-filter: var(--stvh-blur);
  backdrop-filter: var(--stvh-blur);
  border: 1px solid var(--stvh-border);
  border-radius: var(--stvh-radius);
  box-shadow: var(--stvh-shadow);
  margin: 2.5rem 0;
  padding: 1.75rem;
}

.stvh-medhub__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.stvh-medhub__grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.stvh-medhub__label {
  color: var(--stvh-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.stvh-medhub__list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stvh-medhub__item a {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 0.7rem;
  text-decoration: none;
}

.stvh-medhub__item img {
  background: linear-gradient(135deg, color-mix(in srgb, var(--stvh-accent) 25%, transparent), transparent);
  border-radius: var(--stvh-radius-sm);
  flex: none;
  height: 45px;
  object-fit: cover;
  width: 80px;
}

.stvh-medhub__item-title {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.6;
}

.stvh-medhub__item a:hover .stvh-medhub__item-title {
  color: var(--stvh-accent);
}

.stvh-medhub__badge {
  color: var(--stvh-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.stvh-medhub__list--text .stvh-medhub__item a {
  line-height: 1.9;
}

.stvh-medhub__cta {
  align-items: center;
  border-top: 1px solid var(--stvh-border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
}

.stvh-medhub__doctor {
  display: flex;
  flex-direction: column;
}

.stvh-medhub__doctor-name {
  font-weight: 700;
}

.stvh-medhub__doctor-specialty {
  color: var(--stvh-text-muted);
  font-size: 0.85rem;
}

.stvh-medhub__services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stvh-medhub__services a {
  color: var(--stvh-accent);
  font-size: 0.88rem;
  text-decoration: none;
}

/* ---------- Buttons & states ---------- */

.stvh-btn {
  background: var(--stvh-surface-solid);
  border: 1px solid var(--stvh-border);
  border-radius: 999px;
  color: var(--stvh-text);
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 0.65rem 1.6rem;
  text-decoration: none;
  transition: transform 0.2s var(--stvh-ease), box-shadow 0.2s var(--stvh-ease);
}

.stvh-btn:hover {
  box-shadow: var(--stvh-shadow-hover);
  transform: translateY(-2px);
}

.stvh-btn--primary {
  background: var(--stvh-accent);
  border-color: transparent;
  color: #fff;
}

.stvh-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

.stvh-more {
  background: var(--stvh-surface);
  -webkit-backdrop-filter: var(--stvh-blur);
  backdrop-filter: var(--stvh-blur);
  border: 1px solid var(--stvh-border);
  border-radius: 999px;
  color: var(--stvh-text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 2rem;
  transition: transform 0.2s var(--stvh-ease), box-shadow 0.2s var(--stvh-ease);
}

.stvh-more:hover {
  box-shadow: var(--stvh-shadow-hover);
  transform: translateY(-2px);
}

.stvh-more[disabled] {
  cursor: default;
  opacity: 0.5;
  transform: none;
}

.stvh-status:empty {
  display: none;
}

.stvh-status {
  color: var(--stvh-text-muted);
  font-size: 0.9rem;
  padding: 0.5rem 0 1rem;
}

.stvh-empty {
  color: var(--stvh-text-muted);
  padding: 2.5rem 0;
  text-align: center;
}

.stvh-description {
  line-height: 2;
}

.stvh-article-video iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--stvh-radius);
  width: 100%;
}

@keyframes stvh-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Motion is decoration here — remove it entirely when asked to. */
@media (prefers-reduced-motion: reduce) {
  .stvh-scope *,
  .stvh-scope *::before,
  .stvh-scope *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Luxe card: rotating accent border ---------- */

/* The angle has to be a registered custom property — a plain --var holds a
   string, and strings cannot be interpolated, so the gradient would jump
   between keyframes instead of sweeping. */
@property --stvh-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.stvh-card--luxe {
  --stvh-angle: 0deg;
  --stvh-ring: 2px;

  background: transparent;
  border: 0;
  padding: var(--stvh-ring);
  position: relative;
}

/* The gradient sits behind the card and is revealed only around the edges by
   the inner surface painted on top, so it reads as a border rather than a
   background wash. */
.stvh-card--luxe::before {
  background: conic-gradient(
    from var(--stvh-angle),
    var(--stvh-accent),
    #c9a227,
    #e6d5a8,
    var(--stvh-accent)
  );
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}

.stvh-card--luxe > * {
  position: relative;
  z-index: 1;
}

.stvh-card--luxe .stvh-card__media {
  border-radius: calc(var(--stvh-radius) - var(--stvh-ring)) calc(var(--stvh-radius) - var(--stvh-ring)) 0 0;
  overflow: hidden;
}

.stvh-card--luxe .stvh-card__body {
  background: var(--stvh-surface-solid);
  border-radius: 0 0 calc(var(--stvh-radius) - var(--stvh-ring)) calc(var(--stvh-radius) - var(--stvh-ring));
}

/* Idle: a slow sweep. Hover: faster, brighter, lifted. */
.stvh-card--luxe::before {
  animation: stvh-ring-spin 8s linear infinite;
  opacity: 0.55;
  transition: opacity 0.4s var(--stvh-ease);
}

.stvh-card--luxe:hover::before,
.stvh-card--luxe:focus-within::before {
  animation-duration: 2.5s;
  opacity: 1;
}

.stvh-card--luxe:hover {
  box-shadow: var(--stvh-shadow-hover), 0 0 28px color-mix(in srgb, var(--stvh-accent) 28%, transparent);
}

@keyframes stvh-ring-spin {
  to {
    --stvh-angle: 360deg;
  }
}

/* Browsers without @property cannot animate the angle. Rather than leaving a
   dead static ring, fall back to a fixed gradient border that still looks
   deliberate. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .stvh-card--luxe::before {
    animation: none;
    background: linear-gradient(135deg, var(--stvh-accent), #c9a227);
    opacity: 0.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stvh-card--luxe::before {
    animation: none;
    opacity: 0.85;
  }
}