/* =========================================================================
   AI Jewelry Video Creator — page-specific overrides
   v1 / 2026-04-30
   Loads after ai-jewelry-retoucher.css and ai-jewelry-retoucher-dark.css.

   This page replaces all "image" placements (hero visual, product card
   thumbnails, gallery tiles) with autoplay muted loop videos. Most of the
   styling is inherited from the shared base — these rules add/override the
   minimum needed for video elements.
   ========================================================================= */

/* -------- Hero video (replaces .ba-slider on this page) --------
   Same dimensions, border-radius, shadow, and floating-badge offsets as the
   slider on the other landing pages, just rendered as a single autoplay
   loop video instead of a draggable before/after split. */
.hero-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: #F0F4F7;
  box-shadow: 0 24px 80px rgba(49, 88, 124, 0.22);
}
[data-theme="dark"] .hero-video-frame { background: #16263A; }
.hero-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Small "▶ AI-Generated" pill bottom-left of the hero video */
.hero-video-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 5;
  font-family: var(--body-font);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}

/* -------- Product cards: video tile in place of static image --------
   Override the shared .product-image fixed height (220px) with a 4:3
   aspect-ratio container so the video scales with the card width
   instead of being shrunk into a short letterbox. */
.product-video-tile {
  position: relative;
  height: auto;
  aspect-ratio: 4 / 3;
}
.product-video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------- 3rd card style: side-by-side (image left, content right) --------
   Use when each card has a lot of copy. The 2-col stacked layout with
   long body text + best-for + pro-tip + CTA gets too tall and narrow.
   This style forces 1 card per row (full container width) and lays out
   each card horizontally: video on the left, rich content on the right.
   Collapses to vertical on mobile. */
.products-grid-side {
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 768px) {
  .products-grid-side { grid-template-columns: 1fr; }
}
.products-grid-side .product-card {
  flex-direction: row;
}
.products-grid-side .product-image,
.products-grid-side .product-video-tile {
  flex: 0 0 44%;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
}
.products-grid-side .product-content {
  flex: 1 1 56%;
  padding: 36px 36px 32px;
}
@media (max-width: 767px) {
  .products-grid-side .product-card { flex-direction: column; }
  .products-grid-side .product-image,
  .products-grid-side .product-video-tile {
    flex: 1 1 auto;
    width: 100%;
  }
}
/* Subtle ▶ play indicator pill so users know it's a video, not an image. */
.video-tile-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* -------- Gallery: video tiles instead of before/after frames -------- */
.video-tile-card .video-tile-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--page-bg-soft);
}
.video-tile-card .video-tile-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-tile-card:hover .video-tile-frame video { /* no transform on hover —
  videos already animate. Subtle brightness lift instead. */
  filter: brightness(1.05);
  transition: filter 0.3s ease;
}

/* -------- Pick-the-tool table — light variant (this page uses a light
   "decision helper" section, vs the dark .bg-dark version on Creative
   Photography page) -------- */
.compare-table-light {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
}
.compare-table-light th,
.compare-table-light td {
  border-bottom-color: var(--inline-divider);
}
.compare-table-light th {
  background: var(--page-bg-soft);
  color: var(--text-headline);
}
.compare-table-light td.feature {
  color: var(--text-headline);
}
.compare-table-light td {
  color: var(--text-primary);
}
.compare-table-light td.nv {
  background: rgba(255, 102, 0, 0.06);
  color: var(--text-headline);
  border-left-color: var(--orange);
}
[data-theme="dark"] .compare-table-light {
  background: #16263A;
  border-color: #243950;
}
[data-theme="dark"] .compare-table-light th {
  background: #122131;
  color: #FFFFFF;
}
[data-theme="dark"] .compare-table-light td.feature { color: #FFFFFF; }
[data-theme="dark"] .compare-table-light td { color: #E2E8F0; }
[data-theme="dark"] .compare-table-light td.nv { background: rgba(255, 102, 0, 0.10); color: #FFFFFF; }

/* "Quick rule" line under the decision-helper table */
.quick-rule {
  margin-top: 28px;
  font-style: italic;
  color: var(--text-secondary);
}
.quick-rule strong { color: var(--text-headline); font-style: normal; }