/* ==========================================================================
   AWD Simple Gallery (Grid / Masonry / Tiled)
   Controlled via CSS vars:
   --awd-sg-cols, --awd-sg-gap, --awd-sg-ratio
   ========================================================================== */
.awd-sg { --awd-sg-cols: 3; --awd-sg-gap: 16px; --awd-sg-ratio: auto; }
.awd-sg__inner { width: 100%; }

/* Shared item styling */
.awd-sg__item { margin: 0; }
.awd-sg__link { display: block; text-decoration: none; color: inherit; }
.awd-sg__media { display: block; width: 100%; overflow: hidden; border-radius: 0; }
.awd-sg__img { display: block; width: 100%; height: auto; }

/* Captions */
.awd-sg__caption { margin-top: 10px; font-size: 0.95rem; line-height: 1.3; opacity: 0.9; }

/* =========================
   GRID
   ========================= */
.awd-sg__inner--grid { display: grid; grid-template-columns: repeat(var(--awd-sg-cols), minmax(0, 1fr)); gap: var(--awd-sg-gap); }
.awd-sg__inner--grid img.awd-sg__img { aspect-ratio: 3 / 2; object-fit: cover; }

/* =========================
   MASONRY (CSS columns)
   ========================= */
.awd-sg__inner--masonry { column-count: var(--awd-sg-cols); column-gap: var(--awd-sg-gap); }
.awd-sg__inner--masonry .awd-sg__item { break-inside: avoid; margin-bottom: var(--awd-sg-gap); }
.awd-sg__inner--masonry .awd-sg__media { border-radius: 0; }

/* =========================
   TILED (fixed ratio tiles)
   ========================= */
.awd-sg__inner--tiled { display: grid; grid-template-columns: repeat(var(--awd-sg-cols), minmax(0, 1fr)); gap: var(--awd-sg-gap); }
.awd-sg__inner--tiled .awd-sg__media { aspect-ratio: var(--awd-sg-ratio); }
.awd-sg__inner--tiled .awd-sg__img { width: 100%; height: 100%; object-fit: cover; }
.pswp__custom-caption { max-width: 900px; margin: 0 auto; padding: 12px 16px; font-size: 14px; line-height: 1.4; }

/* =========================
   Responsive columns
   ========================= */
@media (max-width:980px) {
  .awd-sg { --awd-sg-cols: 2; }
  .awd-sg__inner--masonry { column-count: 2; }
}
@media (max-width:600px) {
  .awd-sg { --awd-sg-cols: 1; }
  .awd-sg__inner--masonry { column-count: 1; }
}