/* VC Gallery — override any variable in your template CSS, e.g. .vcg { --vcg-min: 180px; } */
.vcg {
  --vcg-min: 190px;
  --vcg-gap: 14px;
  --vcg-radius: 8px;
  --vcg-bg: #f3efe8;
  --vcg-caption: inherit;
  --vcg-caption-size: .9rem;
  --vcg-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .06);
  --vcg-shadow-hover: 0 2px 4px rgba(0, 0, 0, .1), 0 10px 26px rgba(0, 0, 0, .12);
  --vcg-ratio: 4/3;
  margin: 1.5em 0;
  clear: both;
}

.vcg__title { margin: 0 0 .6em; font-size: 1.15em; }

.vcg__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--vcg-min)), 1fr));
  gap: var(--vcg-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vcg__item { margin: 0; padding: 0; min-width: 0; }
.vcg__item::before, .vcg__item::marker { content: none; }

.vcg__figure { margin: 0; height: 100%; display: flex; flex-direction: column; }

.vcg__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--vcg-radius);
  background: var(--vcg-bg);
  box-shadow: var(--vcg-shadow);
  transition: box-shadow .25s ease, transform .25s ease;
  text-decoration: none;
}

.vcg__link:hover { box-shadow: var(--vcg-shadow-hover); }
.vcg__link:focus-visible { outline: 3px solid #b5651d; outline-offset: 3px; }

.vcg__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--vcg-ratio);
  object-fit: cover;
  transition: transform .5s ease;
}

.vcg__link:hover .vcg__img { transform: scale(1.04); }

.vcg__caption {
  margin: .5em .15em 0;
  color: var(--vcg-caption);
  font-size: var(--vcg-caption-size);
  line-height: 1.35;
  text-align: center;
}

.vcg__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 12, .55);
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.vcg__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.2em .8em .6em;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  color: #fff;
  font-size: var(--vcg-caption-size);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Masonry: natural proportions, no cropping */
.vcg--masonry .vcg__list { display: block; columns: var(--vcg-min) auto; column-gap: var(--vcg-gap); }
.vcg--masonry .vcg__item { break-inside: avoid; margin-bottom: var(--vcg-gap); }
.vcg--masonry .vcg__img { aspect-ratio: auto; }

/* Featured: first photo big, the rest small (dish + cooking steps) */
.vcg--featured .vcg__list { grid-auto-flow: dense; }
.vcg--featured .vcg__item--first { grid-column: span 2; grid-row: span 2; }
.vcg--featured .vcg__item--first .vcg__link { flex: 1; }
.vcg--featured .vcg__item--first .vcg__img { height: 100%; }
.vcg--featured .vcg__item--first .vcg__caption { font-size: 1rem; }

/* Polaroid, refreshed: white frame, slight tilt that straightens on hover */
.vcg--polaroid { --vcg-gap: 22px; --vcg-radius: 2px; }
.vcg--polaroid .vcg__figure {
  background: #fff;
  padding: 10px 10px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 10px 24px rgba(0, 0, 0, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.vcg--polaroid .vcg__item:nth-child(4n+1) .vcg__figure { transform: rotate(-1.6deg); }
.vcg--polaroid .vcg__item:nth-child(4n+2) .vcg__figure { transform: rotate(1.2deg); }
.vcg--polaroid .vcg__item:nth-child(4n+3) .vcg__figure { transform: rotate(-.6deg); }
.vcg--polaroid .vcg__item:nth-child(4n) .vcg__figure { transform: rotate(1.8deg); }
.vcg--polaroid .vcg__item .vcg__figure:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 4px 10px rgba(0, 0, 0, .14), 0 16px 34px rgba(0, 0, 0, .12); }
.vcg--polaroid .vcg__link { box-shadow: none; border-radius: 0; }
.vcg--polaroid .vcg__caption { margin-top: .7em; font-style: italic; color: #4a3f35; }

.vcg--single .vcg__list { grid-template-columns: minmax(0, 420px); }

@media (max-width: 575.98px) {
  .vcg { --vcg-min: 140px; --vcg-gap: 10px; }
  .vcg--featured .vcg__item--first { grid-column: 1 / -1; grid-row: auto; }
  .vcg__caption { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vcg__img, .vcg__link, .vcg--polaroid .vcg__figure { transition: none; }
  .vcg__link:hover .vcg__img { transform: none; }
}

@media print {
  .vcg__item--hidden, .vcg__more { display: none; }
  .vcg--polaroid .vcg__figure { transform: none !important; box-shadow: none; border: 1px solid #ccc; }
}

/* ---------- Lightbox ---------- */
html.vcg-lock { overflow: hidden; }

.vcg-lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: 1fr auto;
  background: rgba(12, 10, 8, .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #f4efe8;
  opacity: 0;
  transition: opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.vcg-lb[hidden] { display: none; }
.vcg-lb.is-open { opacity: 1; }

.vcg-lb__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 56px 64px 8px;
  touch-action: pan-y pinch-zoom;
  overflow: hidden;
}

.vcg-lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.vcg-lb__img.is-loaded { opacity: 1; }

.vcg-lb__spinner {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vcg-spin .8s linear infinite;
}
.vcg-lb__spinner[hidden] { display: none; }
@keyframes vcg-spin { to { transform: rotate(360deg); } }

.vcg-lb__bar {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 20px max(16px, env(safe-area-inset-bottom));
  text-align: center;
}
.vcg-lb__cap { max-width: 900px; }
.vcg-lb__title { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.vcg-lb__desc { margin-top: .25em; font-size: .92rem; line-height: 1.45; color: #d7cfc4; }
.vcg-lb__desc a { color: #ffd59a; }
.vcg-lb__count { position: absolute; top: 16px; left: 20px; font-size: .9rem; color: #cfc6ba; font-variant-numeric: tabular-nums; }

.vcg-lb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.vcg-lb__btn:hover { background: rgba(255, 255, 255, .22); }
.vcg-lb__btn:focus-visible { outline: 2px solid #ffd59a; outline-offset: 2px; }
.vcg-lb__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vcg-lb__btn[hidden] { display: none; }
.vcg-lb__close { top: 8px; right: 10px; }
.vcg-lb__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.vcg-lb__next { right: 10px; top: 50%; transform: translateY(-50%); }

@media (max-width: 575.98px) {
  .vcg-lb__stage { padding: 56px 0 4px; }
  .vcg-lb__prev, .vcg-lb__next { top: auto; bottom: 6px; transform: none; background: rgba(255, 255, 255, .14); }
  .vcg-lb__bar { padding-left: 64px; padding-right: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .vcg-lb, .vcg-lb__img { transition: none; }
}