.card-event {
  position     : relative;
  border-radius: 8px;
  overflow     : hidden;
}

.card-body-event {
  padding: 12px;
}

.event-icon-box {
  flex        : 0 0 116px;
  width       : 116px;
  margin-right: 10px;
}

.event-icon-box .thumb-wrap {
  position     : relative;
  width        : 100%;
  padding-top  : 66.66%;
  /* 3         :2 ratio for mobile cards */
  aspect-ratio : 3 / 2;
  background   : #f3f3f3;
  border-radius: 6px;
  overflow     : hidden;
}

/* Ensure the anchor matches web behavior */
.event-icon-box .thumb-wrap .thumb-link {
  display    : block;
  position   : absolute;
  inset      : 0;
  line-height: 0;
  outline    : none;
}

/* Align mobile IMG behavior with web selectors used by lazy/streaming */
.event-icon-box .thumb-wrap img.IconImageLoader,
.event-icon-box .thumb-wrap img.event-thumbnail,
.event-icon-box .thumb-wrap img.lazy-img {
  position       : absolute;
  inset          : 0;
  width          : 100% !important;
  height         : 100% !important;
  max-width      : none !important;
  max-height     : none !important;
  object-fit     : cover !important;
  object-position: center !important;
  display        : block;
  opacity        : 1;
}

#dataListFragmentMobile .event-icon-box .thumb-wrap img.IconImageLoader {
  width          : 100% !important;
  height         : 100% !important;
  max-width      : none !important;
  max-height     : none !important;
  object-fit     : cover !important;
  object-position: center !important;
}

.law-mb-title {
  margin            : 0 0 6px;
  font-weight       : 600;
  line-height       : 1.35;
  display           : -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp        : 2;
  -webkit-box-orient: vertical;
  overflow          : hidden;
  min-height        : 2.6em;
}

.data-mb-meta {
  font-size: 0.9rem;
}

.card-event .stretched-link {
  position                   : static;
  -webkit-tap-highlight-color: transparent;
}

.card-event:focus-within {
  outline       : 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

.card-event:focus-within .card-body-event {
  outline       : 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

.mv .card-event:focus-within {
  outline       : 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

/* Optional: subtle focus for accessibility on mobile only */
.mv .thumb-link:focus-visible {
  outline      : 0;
  box-shadow   : 0 0 0 3px rgba(147, 164, 255, 0.25);
  border-radius: 6px;
}

/* Modal (shared) */
.gdt-video-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.gdt-video-modal.is-open { display: block; }
.gdt-video-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.gdt-video-modal__dialog {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 96vw; background: #fff; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden;
}
.gdt-video-modal__close {
  position: absolute; right: 8px; top: 6px;
  background: transparent; border: 0; color: #111;
  font-size: 20px; cursor: pointer;
}
.gdt-video-modal__body { padding: 6px; }
.gdt-video-modal__body .video-embed { width: 100%; }

/* Blue play icon for Facebook (mobile) */
.event-icon-box .thumb-wrap .thumb-link + .video-modal-content,
.event-icon-box .thumb-wrap.is-facebook::before {
  background: radial-gradient(100% 100% at 30% 30%, #6ea8fe 0%, #0d6efd 100%) !important;
  box-shadow: 0 8px 18px rgba(13, 110, 253, 0.28) !important;
}

/* Watch detail button (mobile list) */
.card-body-event .watch-detail-btn {
  margin-top: 8px;
  float: right;
}