/* =====================================================================
   [MEDIALIB] Videos & Tutorials (סרטונים ומדריכים) — page stylesheet
   DS tokens only (ez42-ui.css). No raw hex.
   ===================================================================== */

/* ---------- Hero ---------- */
.vt-hero { padding-block: 3.5rem; }
.vt-hero__inner { align-items: center; gap: 3rem; flex-wrap: wrap; }
.vt-search { flex: 0 0 auto; max-inline-size: 520px; inline-size: 100%; margin-block-start: .5rem; }

.vt-featured { flex: 1 1 360px; max-inline-size: 480px; display: flex; flex-direction: column; gap: 1rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg);
  padding: .75rem .75rem 1rem; }
.vt-featured__thumb { position: relative; display: block; inline-size: 100%; aspect-ratio: 16 / 9; padding: 0;
  border: 0; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--hero-gradient-navy); }
.vt-featured__thumb img.vt-thumb__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.vt-featured__thumb .vt-thumb__logo { inline-size: 76px; block-size: 76px; }
.vt-featured__thumb .vt-play { inset-block-end: 12px; inset-inline-start: 12px; inset-block-start: auto; transform: none;
  inline-size: 48px; block-size: 48px; }
.vt-featured__thumb .vt-duration { background: var(--surface); color: var(--navy); }
.vt-featured__text { display: flex; flex-direction: column; gap: .35rem; padding-inline: .25rem; }
.vt-featured__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow);
  color: rgba(255,255,255,.85); }
.vt-featured__title { margin: 0; font-size: 1.3rem; font-weight: var(--fw-black); color: var(--on-brand); }
.vt-featured__desc { margin: 0; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.9); }
.vt-featured__cta { align-self: flex-start; margin-inline: .25rem; }

/* ---------- Tabs ---------- */
.vt-tabsbar { padding-block-start: 1rem; }
a.vt-tab, a.vt-tab:hover { text-decoration: none; }

/* ---------- Sticky filter bar ---------- */
.vt-filterbar { position: sticky; inset-block-start: 0; z-index: 30; background: var(--bg); padding-block: 1.25rem 1rem; }
.vt-filter-row { padding: .75rem 1rem; }
.vt-select { inline-size: auto; min-inline-size: 180px; padding-block: .55rem; }
.vt-view-switcher { flex: 0 0 auto; margin-inline-start: auto; }
.vt-view-switcher .ez-view-switcher__btn { white-space: nowrap; }

/* ---------- Main ---------- */
.vt-main { display: flex; flex-direction: column; gap: 3.5rem; padding-block: 1.25rem 4.5rem; }
.vt-summary { margin-block-end: -2rem; }
.vt-section { display: flex; flex-direction: column; gap: 1.25rem; }
.vt-section__head { display: flex; flex-direction: column; gap: .25rem; }
.vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem;
  list-style: none; margin: 0; padding: 0; }

/* Getting-started path */
.vt-path { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 1.5rem;
  list-style: none; margin: 0; padding: 0 0 .5rem; }
.vt-path__item { display: flex; flex-direction: column; gap: .75rem; }
.vt-path__row { display: flex; align-items: center; block-size: 40px; }
.vt-step-badge { inline-size: 36px; block-size: 36px; flex: 0 0 auto; border-radius: var(--radius-circle);
  background: var(--coral); color: var(--on-brand); font-weight: var(--fw-black); font-size: 14.4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--surface); box-shadow: var(--shadow-badge); }
.vt-path__connector { flex: 1; block-size: 2px; margin-inline-end: -1.5rem;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px); }

/* Marketing band */
.vt-band { background: var(--hero-gradient-navy); color: var(--on-brand); padding-block: 4rem; }
.vt-band__head { display: flex; flex-direction: column; gap: .35rem; margin-block-end: 1.5rem; }
.vt-band__eyebrow { font-size: .75rem; font-weight: var(--fw-bold); letter-spacing: .1em; color: rgba(255,255,255,.85); }
.vt-band .ez-h2 { color: var(--on-brand); }
.vt-band__desc { margin: 0; font-size: .95rem; color: rgba(255,255,255,.88); }

/* ---------- Card ---------- */
.vt-card { padding: 0; gap: 0; overflow: hidden; block-size: 100%; }
.vt-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vt-thumb__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.vt-thumb--purple { background: linear-gradient(135deg, var(--tip-bg-from), var(--tip-bg-to)); }
.vt-thumb--teal { background: var(--teal-tint); }
.vt-thumb--slate { background: var(--border-soft); }
.vt-thumb--brand { background: var(--hero-gradient-navy); }
.vt-thumb__logo { inline-size: 56px; block-size: 56px; }
/* [MEDIALIB-SKEL] App-screen skeleton — default thumbnail when an item has no cover */
.vt-skel { position: absolute; inset: 14% 12% 0; display: grid; grid-template-columns: 22% 1fr; grid-template-rows: 14px 1fr;
  background: var(--surface); border-radius: var(--radius-sm) var(--radius-sm) 0 0; box-shadow: var(--shadow-card); overflow: hidden; }
.vt-skel__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding-inline: 6px; background: var(--border-soft); }
.vt-skel__bar i { inline-size: 5px; block-size: 5px; border-radius: var(--radius-circle); background: var(--border-strong); }
.vt-skel__side { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; background: var(--surface-alt);
  border-inline-end: 1px solid var(--border-soft); }
.vt-skel__side span { block-size: 5px; border-radius: 3px; background: var(--border); }
.vt-skel__main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; padding: 10px; }
.vt-skel__main span { block-size: 26px; border-radius: 5px; background: var(--border-soft); }
.vt-skel__main span:first-child { grid-column: 1 / -1; inline-size: 60%; block-size: 8px; background: var(--border); }
.vt-thumb--purple .vt-skel__main span:not(:first-child) { background: var(--tip-bg-from); }
.vt-thumb--teal .vt-skel__main span:not(:first-child) { background: var(--teal-tint); }
.vt-badge { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem;
  font-weight: var(--fw-bold); line-height: 1.4; padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--navy); color: var(--on-brand); }
.vt-badge .ez-icon { inline-size: 13px; block-size: 13px; }
.vt-badge--format { inset-block-start: 12px; inset-inline-start: 12px; }
.vt-thumb--brand .vt-badge, .vt-featured__thumb .vt-badge { background: var(--surface); color: var(--navy); }
.vt-new { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.vt-duration { inset-block-end: 10px; inset-inline-end: 10px; padding: 3px 8px; font-variant-numeric: tabular-nums; direction: ltr; }
.vt-play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
  inline-size: 52px; block-size: 52px; border-radius: var(--radius-circle); background: var(--surface); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-hover); }
[dir="rtl"] .vt-play { transform: translate(50%, -50%); }
.vt-play svg { inline-size: 22px; block-size: 22px; margin-inline-start: 3px; }
.vt-halo { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 30px; block-size: 30px;
  margin: -15px; border-radius: var(--radius-circle); border: 3px solid var(--teal); background: var(--teal-tint);
  box-shadow: 0 0 0 7px var(--teal-tint); }
.vt-halo::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--teal);
  animation: vt-pulse 1.8s var(--ease-out) infinite; }
@keyframes vt-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
/* [MEDIALIB-HALO] Cover image present: small halo in the bottom-start corner (duration pill is bottom-end) */
.vt-halo--corner { inset-block-start: auto; inset-block-end: 20px; inset-inline-start: 20px; margin: 0;
  inline-size: 20px; block-size: 20px; border-width: 2px; box-shadow: 0 0 0 5px var(--teal-tint); }
.vt-halo--corner::after { inset: -2px; border-width: 2px; }
.vt-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--lock-veil); color: var(--navy); }
.vt-lock__icon { inline-size: 44px; block-size: 44px; border-radius: var(--radius-circle); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }
.vt-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.vt-card .ez-card__title { font-size: 1.1rem; }
.vt-card .ez-card__desc { font-size: .92rem; line-height: 1.6; }

/* ---------- Player modal ---------- */
.vt-modal .ez-scrim { position: absolute; z-index: 0; }
.vt-modal__panel { z-index: 1; inline-size: min(1120px, 100%); max-block-size: min(92vh, 860px); max-block-size: min(92dvh, 860px); }
.vt-modal .ez-modal__close { z-index: 2; inset-block-start: 1rem; }
.vt-modal__scroll { display: flex; flex-wrap: wrap; overflow-y: auto; }
.vt-m-main { flex: 999 1 560px; min-inline-size: 0; padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.vt-m-title { font-size: 1.6rem; padding-inline-end: 2.5rem; }
.vt-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--navy); }
/* [MEDIALIB-SIZE] HTML tutorials: taller stage, capped to the viewport */
.vt-stage--iframe { aspect-ratio: 16 / 10; max-block-size: 82vh; max-block-size: 82dvh; }
.vt-stage:fullscreen { border-radius: 0; max-block-size: none; }
.vt-stage:-webkit-full-screen { border-radius: 0; max-block-size: none; }
.vt-controls--end { justify-content: flex-end; }
/* [MEDIALIB-FSEXIT] Exit-fullscreen button, visible only while the stage is fullscreen */
.vt-fs-exit { display: none; position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 5;
  box-shadow: var(--shadow-overlay); }
.vt-stage:fullscreen .vt-fs-exit { display: inline-flex; }
.vt-stage:-webkit-full-screen .vt-fs-exit { display: inline-flex; }
.vt-stage > video, .vt-stage > iframe, .vt-stage > div, .vt-stage iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.vt-stage__bigplay { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 76px; block-size: 76px;
  margin: -38px; border: 0; border-radius: var(--radius-circle); background: var(--surface); color: var(--navy); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-overlay); }
.vt-stage__bigplay svg { inline-size: 30px; block-size: 30px; margin-inline-start: 4px; }
.vt-stage--sheet { background: var(--border-soft); display: flex; align-items: center; justify-content: center; }
.vt-sheet { position: static !important; inline-size: min(70%, 420px) !important; block-size: auto !important;
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .75rem; }
.vt-sheet__title { font-weight: var(--fw-black); color: var(--text); }
.vt-sheet__row { display: flex; align-items: center; gap: .6rem; color: var(--text-soft); font-size: .95rem; }
.vt-sheet__num { inline-size: 24px; block-size: 24px; border-radius: var(--radius-circle); background: var(--coral);
  color: var(--on-brand); font-size: .75rem; font-weight: var(--fw-black); display: inline-flex; align-items: center; justify-content: center; }

.vt-controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.vt-time { font-size: .9rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; min-inline-size: 88px; color: var(--text); }
.vt-seek { position: relative; flex: 1 1 160px; block-size: 32px; cursor: pointer; display: flex; align-items: center; }
.vt-seek:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: var(--radius-sm); }
.vt-seek__track { position: relative; inline-size: 100%; block-size: 6px; border-radius: var(--radius-pill); background: var(--border); }
.vt-seek__fill { position: absolute; inset-block: 0; left: 0; border-radius: inherit; background: var(--progress-fill); }
.vt-seek__tick { position: absolute; inset-block: 0; inline-size: 2px; background: var(--surface); }
.vt-seek__knob { position: absolute; inset-block-start: 50%; inline-size: 14px; block-size: 14px; margin: -7px;
  border-radius: var(--radius-circle); background: var(--surface); border: 2px solid var(--purple); }

.vt-m-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vt-m-actions__spacer { flex: 1 1 auto; }
.vt-m-read { font-size: var(--fs-body-sm); color: var(--text-muted); }

.vt-m-aside { flex: 1 1 300px; min-inline-size: 0; background: var(--surface-alt); border-inline-start: 1px solid var(--border-soft);
  padding: 3.5rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.75rem; }
.vt-m-aside .ez-eyebrow { color: var(--text-muted); }
.vt-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vt-row { -webkit-appearance: none; appearance: none; inline-size: 100%; min-block-size: 44px; padding: 8px 12px;
  border-radius: var(--radius-md); border: 1px solid transparent; background: none; font: inherit; font-size: .95rem;
  color: var(--text); text-align: start; display: flex; align-items: center; gap: .75rem; }
button.vt-row { cursor: pointer; }
button.vt-row:hover { background: var(--border-soft); }
.vt-row[aria-current="true"] { border-color: var(--purple); background: var(--selected-bg); font-weight: var(--fw-bold); }
.vt-row__num { font-size: .85rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; min-inline-size: 36px;
  color: var(--text-muted); direction: ltr; text-align: center; }
.vt-related__thumb { position: relative; inline-size: 88px; block-size: 50px; flex: 0 0 auto; border-radius: var(--radius-sm);
  overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vt-related__thumb .vt-thumb__logo { inline-size: 26px; block-size: 26px; }
.vt-related__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.vt-related__title { font-size: .95rem; font-weight: var(--fw-bold); }
.vt-related__meta { font-size: .82rem; color: var(--text-muted); }

.vt-help { padding-block: 1.5rem 0; }

/* [MEDIALIB-SIZE] Wide player modal on desktop/tablet; phones keep the layout below */
@media (min-width: 760px) {
  .vt-modal__panel { inline-size: min(92vw, 1440px); max-block-size: 96vh; max-block-size: 96dvh; }
}

@media (max-width: 600px) {
  .vt-hero { padding-block: 2rem; }
  .vt-view-switcher { margin-inline-start: 0; }
  .vt-m-main { padding: 1.25rem 1rem; }
  .vt-modal { padding: 0; }
  .vt-modal__panel { max-block-size: 100vh; max-block-size: 100dvh; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vt-halo::after { animation: none; }
  .vt-card, .vt-seek__fill, .vt-seek__knob { transition: none !important; }
}