/* =============================================================================
   Section: "Watch How Vyapar Works for Your Shop"   —   root: .vyh-shopvideos
   Source: page 91533 (Retail Shop Billing Software – V2), where it shipped as
   `.vt-*`.

   Self-contained by design. The original section's own <style> block carried
   only typography and the click-to-play swap; its white card, its centred play
   circle and its italic caption all came from page-level stylesheets it did not
   own (vypcdn bootstrap-new/style.css and friends), which is exactly why it
   could not be lifted as-is. Every one of those values is measured off the live
   source page and declared here instead.

   Class names are namespaced `vyh-shopvideos__*` because `.vt-section` /
   `.vt-sub` are already owned by a different (testimonial) section on the
   Section Design Library page.

   `!important` appears only on typography that the site theme sets on bare
   h2/h3/p at higher specificity — the same tactic `.lp-problems-heading` uses
   on the source page. Without it the theme pushes the title back to 54px/800.
   ============================================================================= */

.vyh-shopvideos {
  /* Tokens, so a re-skin touches one block instead of thirty declarations. */
  /* Brand accent red. #ed1a3b is the site's own heading-highlight red
     (.lp-clients-highlight, .lp-overview-highlight, brand buttons/links) —
     the source page's #f15970 was a one-off and read as a mismatch. */
  --vyh-sv-accent: #ed1a3b;
  --vyh-sv-ink: #1a1a1a;
  --vyh-sv-sub: #555555;
  --vyh-sv-quote: #5b5b6b;
  --vyh-sv-card-border: #ececf2;
  --vyh-sv-play-glyph: #1f1f35;
  --vyh-sv-font: "Plus Jakarta Sans", Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vyh-sv-media-height: 380px;

  box-sizing: border-box;
  max-width: 1280px;
  margin-inline: auto;
  padding: 64px 20px;
  font-family: var(--vyh-sv-font);
}

.vyh-shopvideos *,
.vyh-shopvideos *::before,
.vyh-shopvideos *::after {
  box-sizing: border-box;
}

/* ── Section header ─────────────────────────────────────────────────────────
   36px / 700 / Plus Jakarta Sans matches .lp-features-title, .lp-video-title
   and .lp-allinone-title — the sibling H2s on the source page. */
.vyh-shopvideos .vyh-shopvideos__title {
  font-family: var(--vyh-sv-font) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  color: var(--vyh-sv-ink);
  text-align: center;
  margin: 0 0 12px;
}

.vyh-shopvideos .vyh-shopvideos__title .vyh-shopvideos__accent {
  color: var(--vyh-sv-accent);
}

.vyh-shopvideos .vyh-shopvideos__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 4px;
  background: var(--vyh-sv-accent);
}

.vyh-shopvideos .vyh-shopvideos__sub {
  font-family: var(--vyh-sv-font);
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.6;
  color: var(--vyh-sv-sub);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

/* ── Card row ───────────────────────────────────────────────────────────────
   Declared explicitly rather than leaning on core's wp-block-columns rules,
   which are not guaranteed to be enqueued on a page built out of shortcodes. */
.vyh-shopvideos .vyh-shopvideos__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
}

/* The white panel that holds thumbnail + caption. */
.vyh-shopvideos .vyh-shopvideos__cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--vyh-sv-card-border);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(20, 20, 40, 0.06);
  overflow: hidden;
}

/* ── Video thumbnail (core cover block) ─────────────────────────────────── */
.vyh-shopvideos .vyh-shopvideos__media {
  position: relative;
  min-height: var(--vyh-sv-media-height);
  padding: 0; /* the inner container owns the inset, so the play overlay can span the full thumbnail */
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}

.vyh-shopvideos .vyh-shopvideos__media > img.wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: cover;
  z-index: 0;
}

.vyh-shopvideos .vyh-shopvideos__media > .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Stretched to the full thumbnail so it is the containing block for the play
   overlay; the label is pushed to the bottom-left, as on the source page. */
.vyh-shopvideos .vyh-shopvideos__media > .wp-block-cover__inner-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: auto;
  padding: 16px;
}

/* ── Play affordance ────────────────────────────────────────────────────────
   Matches the source: the link itself is an invisible hit area covering the
   whole thumbnail, and the visible circle + triangle are drawn as its
   pseudo-elements. top:44% is the source's own value — the circle sits a little
   above centre so it never crowds the bottom-left label. */
.vyh-shopvideos .vyh-shopvideos__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  margin: 0;
  gap: 0;
}

.vyh-shopvideos .vyh-shopvideos__play .vyh-shopvideos__play-btn {
  position: absolute;
  inset: 0;
  margin: 0;
}

.vyh-shopvideos .vyh-shopvideos__play-btn a {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: transparent;
  font-size: 0 !important;
  line-height: 0;
  text-decoration: none;
}

.vyh-shopvideos .vyh-shopvideos__play-btn a::before {
  content: "";
  position: absolute;
  top: 44%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease;
}

/* Triangle drawn with borders, as in the source (13x16 at #1f1f35). */
.vyh-shopvideos .vyh-shopvideos__play-btn a::after {
  content: "";
  position: absolute;
  top: 44%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--vyh-sv-play-glyph);
  transform: translate(-34%, -50%); /* -34% not -50%: optical centring for a triangle */
  transition: transform 0.15s ease;
}

/* Grow the circle in place on hover. The source scaled the full-card anchor,
   which also nudged the circle sideways; scaling the pseudo-elements keeps it
   centred. */
.vyh-shopvideos .vyh-shopvideos__media:hover .vyh-shopvideos__play-btn a::before {
  transform: translate(-50%, -50%) scale(1.08);
}

.vyh-shopvideos .vyh-shopvideos__media:hover .vyh-shopvideos__play-btn a::after {
  transform: translate(-34%, -50%) scale(1.08);
}

.vyh-shopvideos .vyh-shopvideos__label {
  font-family: var(--vyh-sv-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

/* ── Caption under each card ────────────────────────────────────────────── */
.vyh-shopvideos .vyh-shopvideos__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 24px;
}

.vyh-shopvideos .vyh-shopvideos__quote {
  font-family: var(--vyh-sv-font);
  font-size: 14px !important;
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  color: var(--vyh-sv-quote);
  margin: 0;
}

/* ── Footer link ────────────────────────────────────────────────────────── */
.vyh-shopvideos .vyh-shopvideos__viewall {
  margin: 36px 0 0;
  text-align: center;
}

.vyh-shopvideos .vyh-shopvideos__viewall a {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--vyh-sv-accent);
  border-radius: 8px;
  color: var(--vyh-sv-accent);
  font-size: 15px !important;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.vyh-shopvideos .vyh-shopvideos__viewall a:hover {
  background: var(--vyh-sv-accent);
  border-color: var(--vyh-sv-accent);
  color: #fff;
}

/* ── Click-to-play swap ─────────────────────────────────────────────────── */
.vyh-shopvideos .vyh-shopvideos__media.is-playing > *:not(.vyh-shopvideos__frame) {
  display: none !important;
}

.vyh-shopvideos .vyh-shopvideos__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 5;
}

.vyh-shopvideos .vyh-shopvideos__play-btn a:focus-visible,
.vyh-shopvideos .vyh-shopvideos__viewall a:focus-visible {
  outline: 2px solid var(--vyh-sv-accent);
  outline-offset: 3px;
}

/* ── Mobile / tablet ────────────────────────────────────────────────────────
   781px is core's own column-stacking breakpoint, kept so the explicit
   flex-direction switch lands on the same frame as core's. */
@media (max-width: 781px) {
  .vyh-shopvideos {
    padding: 40px 16px;
  }

  .vyh-shopvideos .vyh-shopvideos__title {
    font-size: 28px !important;
  }

  .vyh-shopvideos .vyh-shopvideos__sub {
    font-size: 15px !important;
    margin-bottom: 24px;
  }

  .vyh-shopvideos .vyh-shopvideos__cards {
    flex-direction: column;
    gap: 20px;
  }

  .vyh-shopvideos .vyh-shopvideos__cards > .wp-block-column {
    flex-basis: auto;
  }

  .vyh-shopvideos .vyh-shopvideos__viewall {
    margin-top: 24px;
  }
}