/* ==========================================================================
   فيديوهات الشرح (.vg-*) — the tutorial centre only.

   Reads the site tokens from site.css and adds nothing global. Logical
   properties throughout, so RTL and LTR share every rule.

   The page is one idea repeated at three sizes: a dark panel with a thin
   border, a soft orange edge when it is interesting, and a picture at a
   fixed 16:9. Everything below is that, applied to a card, to a picture
   frame, and to the player.
   ========================================================================== */

.vg { --vg-radius: var(--r-lg); }

/* Category tints. Quiet on purpose: orange stays the one accent on the page,
   and these only separate one section from another at a glance. */
.vg-tint--a { --vg-tint: #FF6A1A; }
.vg-tint--b { --vg-tint: #3A6EFF; }
.vg-tint--c { --vg-tint: #35C77E; }
.vg-tint--d { --vg-tint: #C07BFF; }
.vg-tint--e { --vg-tint: #F5B23D; }

.vg-sec { padding-block: var(--section-y-tight); }
.vg-sec--tight { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.vg-sec--alt { background: var(--background-alt); }
.vg-sec--cta { padding-block: clamp(2.2rem, 4.4vw, 3.2rem); }

/* ==========================================================================
   §  Hero
   --------------------------------------------------------------------------
   Short on purpose. This is a page people arrive at with a question, so the
   videos should be reachable without a scroll on a laptop — the hero says
   what the page is and gets out of the way.
   ========================================================================== */

.vg-hero {
  position: relative;
  overflow: hidden;
  padding-block-end: clamp(1.6rem, 3.4vw, 2.4rem);
}
.vg-hero__grid,
.vg-hero__glow { position: absolute; pointer-events: none; }
.vg-hero__grid {
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000, transparent 72%);
  opacity: .7;
}
.vg-hero__glow {
  inset-block-start: -28%;
  inset-inline-end: -8%;
  width: min(60vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-glow), transparent 68%);
  filter: blur(18px);
  opacity: .55;
}

.vg-hero__copy {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.vg-hero h1 {
  margin: .75rem 0 .55rem;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.vg-hero .lead {
  margin: 0;
  max-width: 56ch;
  color: var(--text-secondary);
  font-size: clamp(.95rem, 1.3vw, 1.06rem);
  line-height: 1.95;
}

.vg-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}
.vg-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .45rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
}
.vg-hero__facts b { color: var(--primary); font-family: var(--font-num); font-size: 1.05rem; font-weight: 700; }
.vg-hero__facts span { color: var(--text-muted); font-size: .82rem; }

/* ==========================================================================
   §  The welcome card
   ========================================================================== */

.vg-intro {
  display: flex;
  align-items: flex-start;
  gap: clamp(.8rem, 2vw, 1.15rem);
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-xl);
  background: radial-gradient(80% 120% at 100% 0%, var(--primary-soft), transparent 62%), var(--surface);
  box-shadow: var(--shadow);
}
[dir="ltr"] .vg-intro { background: radial-gradient(80% 120% at 0% 0%, var(--primary-soft), transparent 62%), var(--surface); }
.vg-intro__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
}
.vg-intro__copy { min-width: 0; }
.vg-intro__title { margin: 0 0 .35rem; font-size: clamp(1.02rem, 2vw, 1.22rem); font-weight: 700; line-height: 1.5; }
.vg-intro__text { margin: 0; color: var(--text-secondary); font-size: .93rem; line-height: 2; }

/* ==========================================================================
   §  Search and filters
   ========================================================================== */

.vg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-block-end: clamp(1.2rem, 2.6vw, 1.8rem);
}
.vg-search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .6rem .95rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.vg-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vg-search .icon { flex: none; }
.vg-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: .93rem;
  outline: none;
}
.vg-search input::placeholder { color: var(--text-muted); opacity: 1; }
/* The browser's own clear button is a grey X on a dark field. */
.vg-search input::-webkit-search-cancel-button,
.vg-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.vg-search__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-2);
  color: var(--text-secondary);
  cursor: pointer;
}
.vg-search__x:hover { background: var(--primary); color: #FFFFFF; }
.vg-search__x[hidden] { display: none; }

.vg-chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.vg-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.vg-chip .icon { width: 14px; height: 14px; color: var(--vg-tint, var(--primary)); }
.vg-chip b {
  min-width: 1.35em;
  padding-inline: .3rem;
  border-radius: var(--r-pill);
  background: var(--glass-2);
  color: var(--text-muted);
  font-size: .74rem;
  text-align: center;
}
.vg-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.vg-chip.is-active {
  border-color: var(--primary-line);
  background: var(--primary-soft);
  color: var(--text-primary);
}
.vg-chip.is-active .icon { color: var(--primary); }
.vg-chip.is-active b { background: var(--primary); color: #FFFFFF; }

/* ==========================================================================
   §  The video grid
   --------------------------------------------------------------------------
   Three per row on a desktop, two on a tablet, one on a phone — by
   `auto-fill` with a minimum, so it is the available width that decides
   rather than a breakpoint guessing at it. `align-items: stretch` plus a
   body that grows is what keeps every card in a row the same height.
   ========================================================================== */

.vg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  align-items: stretch;
  gap: clamp(.9rem, 2vw, 1.35rem);
}

.vg-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--vg-radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.vg-card[hidden] { display: none; }
.vg-card:hover,
.vg-card:focus-within {
  border-color: var(--primary-line);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 28px 60px -44px var(--primary-glow);
}

/* --- The poster --------------------------------------------------------- */
.vg-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--border);
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
}
.vg-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.vg-card:hover .vg-card__img { transform: scale(1.045); }

/* No poster frame: the category's own tile. A designed panel with the
   section's icon, never an empty grey box or a broken picture. */
.vg-card__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--vg-tint, var(--primary)) 20%, transparent), transparent 70%),
    var(--surface-2);
  color: var(--vg-tint, var(--primary));
}
.vg-card__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .5;
}
.vg-card__tile .icon { position: relative; z-index: 1; width: 40px; height: 40px; }

.vg-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 5, 9, .72), rgba(4, 5, 9, .06) 55%, transparent);
}
.vg-card__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 14px 34px -12px var(--primary-glow), 0 0 0 8px color-mix(in srgb, var(--primary) 16%, transparent);
  transition: transform var(--t) var(--ease-out), background-color var(--t) var(--ease);
}
[dir="ltr"] .vg-card__play { transform: translate(-50%, -50%); }
/* The play triangle points the way the language reads. */
[dir="rtl"] .vg-card__play svg { transform: scaleX(-1); }
.vg-card__media:hover .vg-card__play { transform: translate(50%, -50%) scale(1.08); background: var(--primary-hover); }
[dir="ltr"] .vg-card__media:hover .vg-card__play { transform: translate(-50%, -50%) scale(1.08); }
.vg-card__media:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }

.vg-card__time {
  position: absolute;
  inset-block-end: .6rem;
  inset-inline-end: .6rem;
  padding: .15rem .5rem;
  border-radius: var(--r-xs);
  background: rgba(4, 5, 9, .78);
  color: #FFFFFF;
  font-family: var(--font-num);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* --- The words ---------------------------------------------------------- */
.vg-card__body {
  flex: 1 1 auto;                 /* pushes the footer to the bottom edge */
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: clamp(.9rem, 2vw, 1.1rem);
  min-width: 0;
}
.vg-card__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border: 1px solid color-mix(in srgb, var(--vg-tint, var(--primary)) 30%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--vg-tint, var(--primary)) 11%, transparent);
  color: var(--vg-tint, var(--primary));
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-card__tag .icon { flex: none; width: 13px; height: 13px; }
.vg-card__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.vg-card__text {
  margin: 0;
  color: var(--text-secondary);
  font-size: .87rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.vg-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding: 0 clamp(.9rem, 2vw, 1.1rem) clamp(.9rem, 2vw, 1.1rem);
}
.vg-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.vg-card__cta:hover { background: var(--primary); color: #FFFFFF; }
.vg-card__cta .bl-arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .vg-card__cta .bl-arrow { transform: scaleX(-1); }

.vg-card__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 600;
  min-width: 0;
}
.vg-card__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-card__link .icon { flex: none; width: 14px; height: 14px; }
.vg-card__link:hover { border-color: var(--primary-line); color: var(--primary); }

/* --- Nothing matched ---------------------------------------------------- */
.vg-none {
  display: grid;
  place-items: center;
  gap: .7rem;
  margin: 0;
  padding: clamp(2.2rem, 6vw, 3.6rem) 1.2rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.9;
  text-align: center;
}
.vg-none[hidden] { display: none; }
.vg-none .icon { color: var(--text-faint); }

/* ==========================================================================
   §  Reference pictures
   ========================================================================== */

.vg-head { max-width: 64ch; margin-block-end: clamp(1.1rem, 2.4vw, 1.6rem); }
.vg-head h2 { margin: 0 0 .4rem; font-size: clamp(1.3rem, 2.8vw, 1.8rem); font-weight: 700; line-height: 1.4; }
.vg-head p { margin: 0; color: var(--text-secondary); font-size: .93rem; line-height: 1.9; }

.vg-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(.9rem, 2.2vw, 1.4rem);
}
.vg-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.vg-shot:hover {
  border-color: var(--primary-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 30px 70px -48px var(--primary-glow);
}
.vg-shot__media {
  position: relative;
  display: block;
  background: var(--surface-2);
  cursor: zoom-in;
}
/* The frame is 16:10 and the picture is `contain`, so a screenshot of any
   proportion is shown whole — never cropped through its own content, never
   stretched. The padding keeps it off the frame's edges. */
.vg-shot__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: clamp(.5rem, 1.4vw, .9rem);
}
.vg-shot__zoom {
  position: absolute;
  inset-block-end: .7rem;
  inset-inline-end: .7rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(4, 5, 9, .7);
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.vg-shot:hover .vg-shot__zoom,
.vg-shot__media:focus-visible .vg-shot__zoom { opacity: 1; transform: none; }
.vg-shot__cap {
  display: grid;
  gap: .2rem;
  padding: .85rem clamp(.9rem, 2vw, 1.1rem);
  border-block-start: 1px solid var(--border);
}
.vg-shot__cap b { color: var(--text-primary); font-size: .93rem; font-weight: 700; }
.vg-shot__cap span { color: var(--text-muted); font-size: .83rem; line-height: 1.8; }

/* ==========================================================================
   §  Call to action
   ========================================================================== */

.vg-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  padding: clamp(1.15rem, 2.6vw, 1.6rem) clamp(1.15rem, 3vw, 1.9rem);
  border: 1px solid var(--primary-line);
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, var(--primary-soft), transparent 60%), var(--surface);
  box-shadow: var(--shadow);
}
.vg-cta__ic {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 12px 28px -14px var(--primary-glow);
}
.vg-cta h2 { margin: 0 0 .2rem; font-size: clamp(1.1rem, 2.3vw, 1.4rem); font-weight: 700; line-height: 1.45; }
.vg-cta p { margin: 0; color: var(--text-secondary); font-size: .92rem; line-height: 1.8; }
.vg-cta__btn { white-space: nowrap; }

/* ==========================================================================
   §  The player
   --------------------------------------------------------------------------
   THE CENTRING IS STATED, NOT INHERITED
   A modal <dialog> is centred by the user-agent rule `inset-inline: 0;
   margin: auto`. site.css opens with `* { margin: 0 }`, which takes the
   margin half of that away — and a dialog with no auto margin collapses onto
   its inline-start edge, which on this RTL site is the right-hand side of
   the screen. So `inset: 0; margin: auto` is written here. Nothing is placed
   with a fixed left or right value, so there is no width at which the player
   can end up off-screen.
   ========================================================================== */

.vg-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1100px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  height: max-content;
  max-height: min(92vh, calc(100dvh - 2rem));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
}
.vg-modal[open] { display: flex; flex-direction: column; }
.vg-modal::backdrop { background: rgba(3, 4, 8, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.vg-modal__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex: none;
  padding: .85rem 1.1rem;
  border-block-end: 1px solid var(--border);
}
.vg-modal__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vg-modal__out {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.vg-modal__out:hover { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.vg-modal__out[hidden] { display: none; }

.vg-modal__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--glass);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.vg-modal__x:hover { border-color: var(--primary); background: var(--primary); color: #FFFFFF; }

/* The stage holds the 16:9 player and nothing else. It never scrolls: a
   video that does not fit is made smaller, not put behind a scroll bar. */
.vg-modal__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(.6rem, 1.6vw, 1rem);
  background: #04050A;
}
.vg-modal__stage > * {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-md);
  background: #000000;
}

/* The way round a player that never arrived. Hidden until the frame has had
   its chance — see HELP_AFTER in assets/js/video-guides.js. */
.vg-modal__help {
  flex: none;
  display: grid;
  gap: .5rem;
  justify-items: start;
  padding: .9rem clamp(.8rem, 2vw, 1.1rem);
  border-block-start: 1px solid var(--primary-line);
  background: var(--primary-soft);
}
.vg-modal__help[hidden] { display: none; }
.vg-modal__help-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  color: var(--primary);
  font-size: .92rem;
  font-weight: 700;
}
.vg-modal__help-text { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.85; }
.vg-modal__help-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #FFFFFF;
  font-size: .87rem;
  font-weight: 700;
}
.vg-modal__help-btn:hover { background: var(--primary-hover); }

/* ==========================================================================
   §  Narrow screens
   --------------------------------------------------------------------------
   Nothing here is a new layout — the grid already collapses on its own. What
   these rules do is take back the padding, the glow and the two-column CTA
   that a 320px screen cannot afford.
   ========================================================================== */

@media (max-width: 900px) {
  .vg-cta { grid-template-columns: auto minmax(0, 1fr); }
  .vg-cta__btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  .vg-hero__glow { inset-block-start: -34%; width: 90vw; opacity: .4; }
  .vg-hero__facts { gap: .4rem; }
  .vg-hero__facts li { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .6rem; }
  .vg-hero__facts b { font-size: .95rem; }
  .vg-hero__facts span { font-size: .74rem; }

  .vg-intro { flex-direction: column; gap: .7rem; }
  .vg-intro__ic { width: 40px; height: 40px; }

  /* A single column of chips would be a wall, and wrapping them pushes the
     videos off the screen — so they scroll sideways inside their own strip,
     which is the one place on the page where that is the right answer. */
  .vg-chips {
    flex: 1 1 100%;              /* its own line, under the search field */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: .2rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
  }
  .vg-chips::-webkit-scrollbar { display: none; }
  .vg-chip { scroll-snap-align: start; }

  .vg-card__play { width: 52px; height: 52px; }
  .vg-card__play svg { width: 22px; height: 22px; }

  .vg-cta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .vg-cta__btn { grid-column: auto; }

  .vg-modal {
    width: calc(100vw - .75rem);
    max-width: calc(100vw - .75rem);
    max-height: calc(100dvh - .75rem);
    border-radius: var(--r-md);
  }
  .vg-modal__head { padding: .7rem .8rem; }
  .vg-modal__title { font-size: .9rem; }
  /* The label goes; the icon and the tap target stay. */
  .vg-modal__out span { display: none; }
  .vg-modal__out { padding: .4rem .55rem; }
}

@media (max-width: 380px) {
  /* At 320px a 62px play button and a duration badge crowd the poster. */
  .vg-card__time { font-size: .72rem; }
  .vg-card__foot .vg-card__cta,
  .vg-card__foot .vg-card__link { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-card:hover { transform: none; }
  .vg-shot:hover { transform: none; }
  .vg-card:hover .vg-card__img { transform: none; }
  .vg-card__media:hover .vg-card__play { transform: translate(50%, -50%); }
  [dir="ltr"] .vg-card__media:hover .vg-card__play { transform: translate(-50%, -50%); }
}