/* Filmstrip carousel: single row, theme-driven colors (no hardcoded BG/borders) */
.mmg-filmstrip {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0; /* follow Divi spacing around module */
}

.mmg-track {
  display: flex;
  gap: var(--mmg-gap, 8px);
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 0;
  scrollbar-width: thin;
}

.mmg-link {
  display: block;
  border-radius: var(--mmg-radius, 8px);
  overflow: hidden;
  flex: 0 0 var(--mmg-item-min, 180px);
}

.mmg-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* enforce 16:9 tiles */
  object-fit: cover;
  transition: transform .15s ease;
}

.mmg-link:hover .mmg-thumb { transform: scale(1.02); }

/* Nav arrows — circular buttons */
.mmg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .98);
  padding: 0;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: #555;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.mmg-filmstrip > .mmg-prev { left: .2rem; transform: translateY(-50%); }
.mmg-filmstrip > .mmg-next { right: .2rem; transform: translateY(-50%); }
.mmg-nav:hover { transform: translateY(-50%) scale(1.04); }
.mmg-nav:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Size of tiles: responsive counts (no fixed bg) */
.mmg-filmstrip { --mmg-item-min: 180px; }
@media (max-width: 900px){ .mmg-filmstrip { --mmg-item-min: 150px; } }
@media (max-width: 600px){ .mmg-filmstrip { --mmg-item-min: 140px; } }

/* Lightbox — theme driven: no background color, center image only */
.mmg-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  /* no background to follow theme section; Divi can style via container */
}
.mmg-overlay.is-open { display: flex; }
.mmg-overlay img {
  max-width: 92vw;
  max-height: 90vh;
  display: block;
  border: 6px solid #fff;
  box-sizing: border-box;
}
.mmg-overlay .mmg-close,
.mmg-overlay .mmg-prev,
.mmg-overlay .mmg-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, .9);
  border: none;
  padding: 0;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.mmg-overlay .mmg-close {
  top: 7%;
  right: 3%;
  transform: none;
}
.mmg-overlay .mmg-prev { left: 2%; }
.mmg-overlay .mmg-next { right: 2%; }
.mmg-overlay .mmg-prev:hover,
.mmg-overlay .mmg-next:hover,
.mmg-overlay .mmg-close:hover { transform: translateY(-50%) scale(1.04); }
.mmg-overlay .mmg-close:hover { transform: scale(1.04); }

/* Keep accessibility text for screen readers only (no mixed visible text+icons) */
.mmg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body.mmg-no-scroll { overflow: hidden; }