/* MD Gallery – modern, minimal, framework-agnostic (2026-friendly)
   You can override variables in your site package. */
:root{
  --mdg-radius: 18px;
  --mdg-gap: clamp(12px, 1.6vw, 18px);
  --mdg-border: rgba(0,0,0,.10);
  --mdg-shadow: 0 10px 30px rgba(0,0,0,.10);
  --mdg-text: rgba(0,0,0,.88);
  --mdg-muted: rgba(0,0,0,.60);
}

.mdg{
  color: var(--mdg-text);
}

.mdg__header{
  margin-bottom: 18px;
}

.mdg__title{
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.mdg__meta{
  margin: 0;
  color: var(--mdg-muted);
}

.mdg__back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--mdg-muted);
  margin-bottom: 10px;
}
.mdg__back:hover, .mdg__back:focus-visible{
  color: var(--mdg-text);
}

.mdg__desc{
  margin-top: 12px;
  color: var(--mdg-muted);
  max-width: 70ch;
}

.mdg__albums{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(var(--mdg-album-columns,3), 1fr);justify-content:center;max-width:1400px;margin-inline:auto;}

/* Album cards */
.mdg-album{
  grid-column: span 12;
  border: 1px solid var(--mdg-border);
  border-radius: var(--mdg-radius);
  overflow: hidden;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark){
  .mdg-album{ background: rgba(15,15,15,.55); }
}

@media (min-width: 640px){
  .mdg-album{ grid-column: span 6; }
}
@media (min-width: 1024px){
  .mdg-album{ grid-column: span 4; }
}

.mdg-album a{
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.mdg-album__media{
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.01));
  overflow: hidden;
}
.mdg-album__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .4s ease;
}

.mdg-album__body{
  padding: 14px 14px 16px;
}
.mdg-album__title{
  font-size: 1.05rem;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.mdg-album__sub{
  margin: 0 0 10px;
  color: var(--mdg-muted);
  font-size: .95rem;
}
.mdg-album__desc{
  margin: 0;
  color: var(--mdg-muted);
  font-size: .98rem;
  line-height: 1.35;
}

.mdg-album:hover{
  box-shadow: var(--mdg-shadow);
  transform: translateY(-1px);
  transition: box-shadow .25s ease, transform .25s ease;
}
.mdg-album:hover .mdg-album__media img{
  transform: scale(1.08);
}

/* Photo grid */
.mdg-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mdg-gap);
}

@media (min-width: 640px){
  .mdg-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .mdg-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mdg-photo{
  position: relative;
  border-radius: calc(var(--mdg-radius) - 4px);
  overflow: hidden;
  border: 1px solid var(--mdg-border);
  background: rgba(0,0,0,.02);
  display: block;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}

.mdg-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
  transition: transform .35s ease;
}

.mdg-photo__overlay{
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 50% 45%, rgba(255,255,255,.08), rgba(0,0,0,.35));
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}

.mdg-photo__caption{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.94);
  font-size: .92rem;
  line-height: 1.2;
  z-index: 2;
  backdrop-filter: blur(10px);
}

.mdg-photo:hover img{
  transform: scale(1.06);
}
.mdg-photo:hover .mdg-photo__overlay{
  opacity: 1;
}
.mdg-photo:focus-visible{
  outline: 3px solid rgba(0, 120, 255, .55);
  outline-offset: 3px;
}


/* Readability safeguards (in case site has inverted / white text styles) */
.mdg, .mdg *{ color: inherit; }
.mdg{ color: var(--mdg-text); }
.mdg__header, .mdg__header *{ color: var(--mdg-text) !important; }
.mdg__meta{ color: var(--mdg-muted) !important; }
.mdg__back{ color: var(--mdg-muted) !important; }
.mdg__back:hover, .mdg__back:focus-visible{ color: var(--mdg-text) !important; }


/* Theme integration (Bootstrap 5 / custom themes)
   Use explicit theme flags instead of prefers-color-scheme so projects with forced light/dark behave correctly. */
html[data-bs-theme="dark"],
html[data-md-theme="dark"],
body[data-bs-theme="dark"],
body[data-md-theme="dark"]{
  --mdg-border: rgba(255,255,255,.12);
  --mdg-shadow: 0 12px 40px rgba(0,0,0,.45);
  --mdg-text: rgba(255,255,255,.92);
  --mdg-muted: rgba(255,255,255,.65);
}


/* 2026-ish polish */
.mdg__albums{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mdg-grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mdg-album{
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.mdg-album:hover{
  border-color: color-mix(in srgb, var(--mdg-border), transparent 30%);
  transform: translateY(-3px);
}

.mdg-photo{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mdg-photo:hover{
  transform: translateY(-2px);
  box-shadow: var(--mdg-shadow);
}


/* Album overview columns (configured via site settings) */
.mdg__albums{ grid-template-columns: repeat(var(--mdg-album-columns, 3), minmax(220px, 1fr)); max-width: 1400px; margin-inline:auto; }


.mdg-photo__info{
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background: color-mix(in srgb, #000 55%, transparent);
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:1;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  opacity:.75;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.mdg-photo:hover .mdg-photo__info{ opacity:1; transform: translateY(-1px); }



/* Album overview - enforce card-sized layout even with 1 album */
.mdg__albums{
  display:grid;
  gap:clamp(14px,2vw,22px);
  grid-template-columns: repeat(var(--mdg-album-columns, 3), minmax(240px, 420px));
  justify-content:center;
  max-width: 1400px;
  margin-inline:auto;
}
.mdg__albums > .mdg-album{
  width:100%;
  max-width:420px;
  justify-self:center;
}
@media (max-width: 992px){
  .mdg__albums{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.mdg-photo{position:relative;display:block;}



/* =========================
   MD Gallery – 2026 Skin (Bootstrap 5 friendly)
   ========================= */

.mdg{
  --mdg-accent: var(--bs-primary, #0d6efd);
  --mdg-bg: var(--bs-body-bg, #fff);
  --mdg-text: var(--bs-body-color, #111);
  --mdg-muted: var(--bs-secondary-color, rgba(0,0,0,.65));
  --mdg-border: var(--bs-border-color, rgba(0,0,0,.12));
  --mdg-radius: var(--bs-border-radius-xl, 1rem);
  --mdg-radius-sm: var(--bs-border-radius-lg, .75rem);
  --mdg-shadow: 0 16px 50px rgba(0,0,0,.10);
  --mdg-shadow-soft: 0 10px 30px rgba(0,0,0,.08);
  --mdg-gap: clamp(14px, 2vw, 22px);
  color: var(--mdg-text);
}

/* Header */
.mdg__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: clamp(14px, 2vw, 22px);
}
.mdg__title{
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  letter-spacing: -0.02em;
  margin:0;
}
.mdg__meta{
  color: var(--mdg-muted);
  margin:.35rem 0 0 0;
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
  align-items:center;
}
.mdg__pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .55rem;
  border:1px solid color-mix(in srgb, var(--mdg-border), transparent 25%);
  border-radius:999px;
  background: color-mix(in srgb, var(--mdg-bg), transparent 8%);
  font-size:.875rem;
}

/* Back link */
.mdg__back{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--mdg-border), transparent 15%);
  color: var(--mdg-text) !important;
  background: color-mix(in srgb, var(--mdg-bg), transparent 4%);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mdg__back:hover{
  transform: translateY(-1px);
  box-shadow: var(--mdg-shadow-soft);
  border-color: color-mix(in srgb, var(--mdg-accent), var(--mdg-border) 55%);
}

/* Albums grid – left aligned, card sized */
.mdg__albums{
  display:grid;
  gap: var(--mdg-gap);
  grid-template-columns: repeat(var(--mdg-album-columns, 3), minmax(240px, 420px));
  justify-content:start;
  align-content:start;
  max-width: 1400px;
  margin-inline:auto;
}
@media (max-width: 1200px){
  .mdg__albums{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 768px){
  .mdg__albums{ grid-template-columns: 1fr; }
}

.mdg-album{
  width:100%;
  border-radius: var(--mdg-radius);
  border:1px solid color-mix(in srgb, var(--mdg-border), transparent 10%);
  background: color-mix(in srgb, var(--mdg-bg), transparent 2%);
  overflow:hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mdg-album > a{
  display:block;
  color: inherit;
  text-decoration:none;
}
.mdg-album:hover{
  transform: translateY(-2px);
  box-shadow: var(--mdg-shadow);
  border-color: color-mix(in srgb, var(--mdg-accent), var(--mdg-border) 60%);
}
.mdg-album__media{
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--mdg-border), transparent 70%);
}
.mdg-album__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mdg-album__body{
  padding: 14px 16px 16px;
}
.mdg-album__title{
  font-size: 1.05rem;
  margin:0 0 .25rem 0;
  letter-spacing:-0.01em;
}
.mdg-album__sub{
  margin:0;
  color: var(--mdg-muted);
  font-size:.9rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}
.mdg-album__desc{
  margin:.6rem 0 0 0;
  color: color-mix(in srgb, var(--mdg-text), transparent 25%);
  font-size:.95rem;
}

/* Photo grid */
.mdg-grid{
  display:grid;
  gap: var(--mdg-gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content:start;
}
.mdg-photo{
  position:relative;
  display:block;
  border-radius: var(--mdg-radius-sm);
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--mdg-border), transparent 10%);
  background: color-mix(in srgb, var(--mdg-border), transparent 70%);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mdg-photo img{
  width:100%;
  height:auto;
  display:block;
  transform: scale(1.001);
  transition: transform .25s ease;
}
.mdg-photo:hover{
  transform: translateY(-2px);
  box-shadow: var(--mdg-shadow-soft);
  border-color: color-mix(in srgb, var(--mdg-accent), var(--mdg-border) 60%);
}
.mdg-photo:hover img{
  transform: scale(1.03);
}
.mdg-photo__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.22), transparent 55%),
  linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.16));
  opacity:.0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.mdg-photo:hover .mdg-photo__overlay{ opacity:1; }

/* Info badge */
.mdg-photo__info{
  position:absolute;
  top:12px;
  right:12px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background: color-mix(in srgb, var(--mdg-accent), #000 20%);
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:1;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity:.0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.mdg-photo:hover .mdg-photo__info{ opacity:1; transform: translateY(0); }

/* Description block (album show) */
.mdg__desc{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--mdg-radius-sm);
  border:1px solid color-mix(in srgb, var(--mdg-border), transparent 10%);
  background: color-mix(in srgb, var(--mdg-bg), transparent 2%);
}
.mdg__desc p:last-child{ margin-bottom:0; }



/* ===== Lightweight modern overrides (v2026) ===== */
.mdg__albums{
  width:100%;
  max-width:none;
  margin:0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  justify-content:start;
}
.mdg__header{ align-items:flex-start; }
.mdg__head{ display:block; width:100%; }
.mdg__metaRow{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }

.mdg-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--mdg-border), transparent 20%);
  background: color-mix(in srgb, var(--mdg-bg), transparent 3%);
  color: color-mix(in srgb, var(--mdg-text), transparent 18%);
  font-size:.92rem;
  line-height:1.1;
}
.mdg-ic{ width:18px; height:18px; opacity:.75; }

.mdg-album__cats{
  margin:.45rem 0 0 0;
  color: var(--mdg-muted);
  font-size:.92rem;
  display:flex;
  gap:.5rem;
  align-items:center;
}
.mdg-album__cats .mdg-ic{ opacity:.6; }

.mdg-photo__info{
  opacity:.92; /* visible when present */
  transform:none;
}


/* ===== v1.3.6 polish ===== */

/* album grid: truly responsive, multiple columns even in narrow containers */
.mdg__albums{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content:start;
  align-items:start;
}

/* album card: no blue border, just soft lift */
.mdg-album{
  border-color: color-mix(in srgb, var(--mdg-border), transparent 20%);
}
.mdg-album:hover{
  border-color: color-mix(in srgb, var(--mdg-border), transparent 20%);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

/* description: no framed box */
.mdg__desc{
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--mdg-text), transparent 20%);
  max-width: 70ch;
}

/* icon color */
.mdg-ic{ color: color-mix(in srgb, var(--mdg-text), transparent 35%); }

/* pager */
.mdg-pager{
  display:flex;
  gap:.35rem;
  justify-content:center;
  margin-top: clamp(18px, 3vw, 28px);
  flex-wrap:wrap;
}
.mdg-page{
  min-width: 38px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 .65rem;
  border-radius: 999px;
  border:1px solid color-mix(in srgb, var(--mdg-border), transparent 20%);
  background: color-mix(in srgb, var(--mdg-bg), transparent 3%);
  color: inherit;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mdg-page:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--mdg-border), transparent 5%);
}
.mdg-page.is-active{
  border-color: color-mix(in srgb, var(--mdg-accent), transparent 30%);
  background: color-mix(in srgb, var(--mdg-accent), transparent 88%);
  color: var(--mdg-accent);
  font-weight: 600;
}
.mdg-page--nav{
  font-size: 18px;
  line-height: 1;
}


/* ===== v1.3.8 hard overrides (fix album grid) ===== */
.mdg[data-mdg-component="albums"] .mdg__albums{
  display:grid !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  justify-content:start !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  grid-auto-flow: row dense;
}
.mdg[data-mdg-component="albums"] .mdg__albums .mdg-album{
  grid-column:auto !important; /* undo legacy span 12 */
  width:100%;
}


/* pager always spans full width if inside any grid by accident */
.mdg-pager{ grid-column: 1 / -1; width: 100%; }


/* ===== v1.4.0 albumColumns support ===== */
.mdg[data-mdg-component="albums"] .mdg__albums{
  grid-template-columns: repeat(var(--mdg-album-cols, 3), minmax(0, 1fr)) !important;
}

/* responsive caps */
@media (max-width: 1200px){
  .mdg[data-mdg-component="albums"] .mdg__albums{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 992px){
  .mdg[data-mdg-component="albums"] .mdg__albums{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 576px){
  .mdg[data-mdg-component="albums"] .mdg__albums{
    grid-template-columns: 1fr !important;
  }
}


/* ===== v1.4.1 albumColumns default=auto-fit & equal height cards ===== */
.mdg[data-mdg-component="albums"] .mdg__albums{
  align-items: stretch;
}
.mdg[data-mdg-component="albums"] .mdg__albums .mdg-album a{
  height:100%;
  display:flex;
  flex-direction:column;
}
.mdg[data-mdg-component="albums"] .mdg__albums .mdg-album__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}

/* default (0) => auto-fill: columns stay at max 420px, no empty whitespace gaps */
.mdg[data-mdg-component="albums"] .mdg__albums[data-cols="0"]{
  grid-template-columns: repeat(auto-fill, minmax(280px, 420px)) !important;
}

/* fixed columns => exact count */
.mdg[data-mdg-component="albums"] .mdg__albums:not([data-cols="0"]){
  grid-template-columns: repeat(var(--mdg-album-cols, 3), minmax(0, 1fr)) !important;
}
.mdg[data-mdg-component="albums"] .mdg__albums:not([data-cols="0"]) .mdg-album__media{
  aspect-ratio: 16/10;
}
.mdg[data-mdg-component="albums"] .mdg__albums:not([data-cols="0"]) .mdg-album__media img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* responsive caps */
@media (max-width: 1200px){
  .mdg[data-mdg-component="albums"] .mdg__albums:not([data-cols="0"]){
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 992px){
  .mdg[data-mdg-component="albums"] .mdg__albums:not([data-cols="0"]){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 576px){
  .mdg[data-mdg-component="albums"] .mdg__albums{
    grid-template-columns: 1fr !important;
  }
}


/* Album pager spacing */
.mdg-pager--albums{
  margin-top: 28px;
}


/* ===== v1.4.5 album grid width rules ===== */
/* In fixed columns mode, cards must stretch (no max-width / centering) */
.mdg[data-mdg-component="albums"] .mdg__albums:not([data-cols="0"]) .mdg-album{
  max-width: none !important;
  justify-self: stretch !important;
}

/* In auto-fill mode, column width is already capped at 420px by the grid */
.mdg[data-mdg-component="albums"] .mdg__albums[data-cols="0"] .mdg-album{
  justify-self: stretch;
}