.cmg-wrap { width: 100%; }

/* Filters */
.cmg-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  justify-content: center;
}

.cmg-filter {
    border: 1px solid var(--primary-color);
    background: #fff;
    padding: 11px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 18px;
    min-width: 130px;
    background-color: var(--primary-color);
    color: #fff;
    transition:all 0.3s ease-in-out;
}

.cmg-filter:hover,
.cmg-filter.is-active {
    background-color: transparent;
    color: var(--primary-color);
}

/* Isotope Masonry Grid (ORIGINAL) */
.cmg-grid {
  position: relative;
}

/* Gutter via padding on items */
.cmg-card {
  box-sizing: border-box;
  padding: 10px;
}

.cmg-card-inner{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #f5f5f5;
}

/* Default widths (fallback 3 columns) */
.grid-sizer,
.cmg-cols-3 .grid-sizer,
.cmg-cols-3 .cmg-card { width: 33.333%; }

.cmg-cols-1 .grid-sizer,
.cmg-cols-1 .cmg-card { width: 100%; }

.cmg-cols-2 .grid-sizer,
.cmg-cols-2 .cmg-card { width: 50%; }

.cmg-cols-4 .grid-sizer,
.cmg-cols-4 .cmg-card { width: 25%; }

.cmg-cols-5 .grid-sizer,
.cmg-cols-5 .cmg-card { width: 20%; }

.cmg-cols-6 .grid-sizer,
.cmg-cols-6 .cmg-card { width: 16.666%; }

/* Responsive column fallback */
@media (max-width: 1024px) {
  .cmg-cols-4 .grid-sizer, .cmg-cols-4 .cmg-card,
  .cmg-cols-5 .grid-sizer, .cmg-cols-5 .cmg-card,
  .cmg-cols-6 .grid-sizer, .cmg-cols-6 .cmg-card { width: 33.333%; }
}

@media (max-width: 768px) {
  .grid-sizer,
  .cmg-cols-3 .grid-sizer, .cmg-cols-3 .cmg-card,
  .cmg-cols-4 .grid-sizer, .cmg-cols-4 .cmg-card,
  .cmg-cols-5 .grid-sizer, .cmg-cols-5 .cmg-card,
  .cmg-cols-6 .grid-sizer, .cmg-cols-6 .cmg-card { width: 50%; }
}



/* Media */
.cmg-media { width: 100%; height: auto; display: block; }
.cmg-videoWrap video { width: 100%; display: block; }

.cmg-caption {
  padding: 10px 12px 12px;
  font-size: 14px;
  color: #222;
  background: #fff;
}

/* Lightbox trigger overlay */
.cmg-open {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

/* Lightbox */
.cmg-lightbox { position: fixed; inset: 0; display: none; z-index: 99999; }
.cmg-lightbox.is-open { display: block; }
.cmg-lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.cmg-lb-dialog { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cmg-lb-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.cmg-lb-media { width: 100%; display: grid; place-items: center;}
.cmg-lb-media img, .cmg-lb-media video { max-width: 100%; max-height: 85vh; width: auto; height: auto; display: block; }
.cmg-lb-caption {padding: 10px 14px 12px;font-size: 18px;color: #fff;border-top: 1px solid rgba(255, 255, 255, 0.08);text-align: center;font-family: var(--main-font);line-height: 1.1;}
.cmg-lb-btn {
  position: absolute; top: 10px; width: 42px; height: 42px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 22px; line-height: 42px; display: grid; place-items: center;
}
.cmg-lb-close { right: 10px; }
.cmg-lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.cmg-lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.cmg-lb-btn:hover { background: rgba(255,255,255,0.18); }


/* Safety: prevent theme button hover backgrounds */
.cmg-open{background:transparent;border:0;padding:0;margin:0;display:block;width:100%;height:100%;appearance:none;-webkit-appearance:none;}
.cmg-open:hover,.cmg-open:focus{background:transparent;outline:none;box-shadow:none;}


/* -----------------------------
   Templates
------------------------------ */

.cmg-template-classic .cmg-card-inner {
  border-radius: 12px;
}

.cmg-template-cards .cmg-card-inner {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: hidden;
}

.cmg-template-cards .cmg-caption {
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.cmg-template-cards .cmg-media {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

.cmg-template-masonry .cmg-media {
  width: 100%;
  height: auto;
  display: block;
}

/* Masonry sizing helper (Isotope) */
/* .cmg-grid .grid-sizer{width:100%;}
.cmg-cols-1 .grid-sizer{width:100%;}
.cmg-cols-2 .grid-sizer{width:50%;}
.cmg-cols-3 .grid-sizer{width:33.333%;}
.cmg-cols-4 .grid-sizer{width:25%;}
.cmg-cols-5 .grid-sizer{width:20%;}
.cmg-cols-6 .grid-sizer{width:16.666%;} */


@media (max-width: 640px) {
  .cmg-cols-1 .grid-sizer,
  .cmg-cols-1 .cmg-card { width: 100%; }

  .cmg-cols-2 .grid-sizer,
  .cmg-cols-2 .cmg-card { width: 50%; }

  .cmg-cols-3 .grid-sizer,
  .cmg-cols-3 .cmg-card { width: 50%; }

  .cmg-cols-4 .grid-sizer,
  .cmg-cols-4 .cmg-card { width: 50%; }

  .cmg-cols-5 .grid-sizer,
  .cmg-cols-5 .cmg-card { width: 50%; }

  .cmg-cols-6 .grid-sizer,
  .cmg-cols-6 .cmg-card { width: 50%; }
}

@media (max-width: 520px) {
  .cmg-cols-1 .grid-sizer,
  .cmg-cols-1 .cmg-card,
  .cmg-cols-2 .grid-sizer,
  .cmg-cols-2 .cmg-card,
  .cmg-cols-3 .grid-sizer,
  .cmg-cols-3 .cmg-card,
  .cmg-cols-4 .grid-sizer,
  .cmg-cols-4 .cmg-card,
  .cmg-cols-5 .grid-sizer,
  .cmg-cols-5 .cmg-card,
  .cmg-cols-6 .grid-sizer,
  .cmg-cols-6 .cmg-card {
    width: 100%;
  }
}

/* Embed thumbnails */
/* ==========================
   EMBED Thumb sizing per template
   ========================== */

/* Base embed thumb */
.cmg-embedThumb{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #111;
}

/* Make the inner media always fill the box */
.cmg-embedThumb .cmg-media{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback block (if no thumbnail) should also fill */
.cmg-embedThumb .cmg-embedFallback{
  position: absolute;
  inset: 0;
  background: #111;
}

/* Play icon stays centered */
.cmg-embedThumb .cmg-embedPlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 48px;
  color: #fff;
  opacity: .9;
  pointer-events: none;
}

/* --------------------------
   Template: CLASSIC GRID
   (keep 16/9 OR change if you want)
--------------------------- */
.cmg-template-classic .cmg-embedThumb{
  aspect-ratio: 16 / 9;
}

/* --------------------------
   Template: CARD GRID
   MUST match your card media ratio (your CSS uses 4/3)
--------------------------- */
.cmg-template-cards .cmg-embedThumb{
  aspect-ratio: 4 / 3;
}

/* --------------------------
   Template: MASONRY
   let height be natural (no fixed ratio)
--------------------------- */
.cmg-template-masonry .cmg-embedThumb{
  aspect-ratio: auto;
}

.cmg-template-masonry .cmg-embedThumb .cmg-media{
  height: auto;
  object-fit: initial;
}

/* =========================
   CMG Lightbox sizing (Embed)
   ========================= */

/* Make the dialog/content use most of the viewport */
/* .cmg-lightbox .cmg-lb-dialog{
  width: min(1200px, 94vw);
  max-width: 94vw;
} */

.cmg-lightbox .cmg-lb-content{
  width: 100%;
  max-width: 100%;
}

/* Give the media area a large responsive size */
.cmg-lightbox .cmg-lb-media{
  width: min(1200px, 94vw);
  height: min(70vh, 675px);  
  max-height: 70vh;
  margin: 0 auto;
  /* background: #000; */
  border-radius: 14px;
  overflow: hidden;
}

/* Make embed wrapper fill the media box */
.cmg-lightbox .cmg-lb-media .cmg-embedWrap{
  width: 100%;
  height: 100%;
}

/* Ensure iframe always fills fully */
.cmg-lightbox .cmg-lb-media .cmg-embedWrap iframe{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0 !important;
}

/* Caption spacing (optional) */
.cmg-lightbox .cmg-lb-caption{
  width: min(1200px, 94vw);
  margin: 12px auto 0;
}