/* ==========================================================================
   video_gallery — grid of click-to-play videos (Media › Διαφήμιση). Not designed
   — needs approval: the frame, cover and play button repeat the `video` section
   at card size, inside the site's card (.ex-card) and grid (.ex-grid--3 → 2 at
   899 → 1 at 599). Self-sufficient: video.css is not loaded on these pages.
   JS (custom-media.js) adds .is-playing on the frame and appends the <iframe>.
   ========================================================================== */
.ex-video-gallery__grid { margin: 0; padding: 0; list-style: none; }

.ex-video-gallery__frame {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #2a2e39; /* the neutral dark frame of the video section: shown when there is no poster */
}

.ex-video-gallery__poster { position: absolute; inset: 0; z-index: var(--ex-z-raised); display: block; color: var(--ex-white); }
.ex-video-gallery__poster:hover { color: var(--ex-white); }
.ex-video-gallery__poster > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ex-video-gallery__poster::after { content: ''; position: absolute; inset: 0; background: rgba(32, 35, 43, .35); pointer-events: none; }
.ex-video-gallery__poster--static::after { content: none; }
.ex-video-gallery__poster:focus-visible { outline: 2px solid var(--ex-white); outline-offset: -5px; }

.ex-video-gallery__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--ex-red);
  box-shadow: 0 14px 34px -12px rgba(201, 18, 41, .6);
  transform: translate(-50%, -50%);
  transition: transform var(--ex-t-base), box-shadow var(--ex-t-base);
}
.ex-video-gallery__play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid var(--ex-white);
}
.ex-video-gallery__poster:hover .ex-video-gallery__play,
.ex-video-gallery__poster:focus-visible .ex-video-gallery__play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 20px 44px -10px rgba(201, 18, 41, .7); }

.ex-video-gallery__body { padding: 16px 20px 18px; }
.ex-video-gallery__title { overflow-wrap: break-word; }

/* Playing: the iframe (appended by JS) replaces the cover */
.ex-video-gallery__frame iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
.ex-video-gallery__frame.is-playing .ex-video-gallery__poster { display: none; }

@media (max-width: 899px) {
  .ex-video-gallery__play { width: 56px; height: 56px; }
  .ex-video-gallery__play-icon { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 15px; }
  .ex-video-gallery__body { padding: 14px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-video-gallery__play { transition: none; }
  .ex-video-gallery__poster:hover .ex-video-gallery__play,
  .ex-video-gallery__poster:focus-visible .ex-video-gallery__play { transform: translate(-50%, -50%); }
}