/* ==========================================================================
   Video Review — Elementor widget additions
   video-review.css is an unchanged copy of the original; this file only adds
   what the widget needs on top of it. [data-vr-widget] is printed by
   template-parts/sections/video-review.php.
   ========================================================================== */

/* ---- Style-tab hooks ---------------------------------------------------------
   The original values, routed through custom properties the widget's Style
   controls can set: background gradient stops, content width, card frame. */
.video-review-section[data-vr-widget] {
  --vr-frame: clamp(5px, 0.5vw, 8px);
  background: linear-gradient(180deg, var(--vr-bg-top, #EDF5FD) 0%, var(--vr-bg-bottom, #E4EFFA) 100%);
}

.video-review-section[data-vr-widget] .video-review-container {
  max-width: calc(var(--vr-max-width, 1400px) + var(--vr-gutter) * 2);
}

.video-review-section[data-vr-widget] .video-review-card {
  padding: var(--vr-frame);
}

.video-review-section[data-vr-widget] .video-review-overlay {
  inset: var(--vr-frame);
}

.video-review-section[data-vr-widget] .video-review-meta {
  left: var(--vr-frame);
  right: var(--vr-frame);
  bottom: var(--vr-frame);
}

/* ---- Elementor's global image reset -----------------------------------------
   Elementor's frontend.css has `.elementor img { height: auto; ... }`
   (specificity 0,1,1, beats the original single-class rule), which would
   leave the thumbnail short of its 16:11 frame. The focal point comes from
   the card's inline --vr-thumb-position (default = the original 50% 30%). */
.video-review-section .video-review-media .video-review-thumb {
  height: 100%;
  max-width: none;
  object-position: var(--vr-thumb-position, 50% 30%);
}

/* ---- Any number of cards -----------------------------------------------------
   The original grid is drawn for three cards. On desktop the 3 columns become
   6 half-columns (same card width) so an incomplete last row is centred, as
   the original already does for the 2-column tablet layout. */
@media (min-width: 1024px) {
  .video-review-section[data-vr-widget] .video-review-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .video-review-section[data-vr-widget] .video-review-item {
    grid-column: span 2;
  }

  .video-review-section[data-vr-widget] .video-review-item:last-child:nth-child(3n+1) {
    grid-column: 3 / span 2;
  }

  .video-review-section[data-vr-widget] .video-review-item:nth-last-child(2):nth-child(3n+1) {
    grid-column: 2 / span 2;
  }
}

/* ---- Modal ------------------------------------------------------------------
   1. The original placeholder has `display: grid`, which overrides the
      [hidden] attribute the script sets when a real video plays, so it
      would cover the player.
   2. The modal's implicit grid column is sized by the dialog's min-content
      width, i.e. the one-line (nowrap) title, so "Name — Subtitle" pushed
      the dialog past the screen on phones (450px wide at 320px). A
      shrinkable column keeps it inside; the title ellipsis then works.
   3. Player width hook for the Style tab (original: 1040px). */
.video-review-modal .video-review-modal-placeholder[hidden] {
  display: none;
}

.video-review-modal {
  grid-template-columns: minmax(0, 1fr);
}

.video-review-modal .video-review-modal-dialog {
  width: min(var(--vr-modal-width, 1040px), 100%);
}

/* Editor-only messages */
.video-review-empty,
.video-review-notice {
  padding: 48px 24px;
  border: 2px dashed rgba(11, 53, 109, 0.2);
  font: 500 15px/1.5 "DM Sans", system-ui, sans-serif;
  color: #4A5A75;
  text-align: center;
}

.video-review-notice {
  padding: 14px 20px;
  border-color: rgba(255, 106, 33, 0.5);
  background: #FFF4EE;
}