/* All rules are scoped to the plugin. Override variables on a .ng-gallery element. */
.ng-gallery {
  --ng-columns: var(--ng-setting-columns, 3);
  --ng-gap: var(--ng-setting-gap, 20px);
  --ng-radius: var(--ng-setting-radius, 4px);
  --ng-max-width: var(--ng-setting-max-width, 1200px);
  --ng-background: var(--ng-setting-background, #fff);
  --ng-foreground: var(--ng-setting-foreground, #202020);
  --ng-accent: var(--ng-setting-accent, #202020);
  --ng-on-accent: var(--ng-setting-on-accent, #fff);
  --ng-button-text: var(--ng-on-accent);
  --ng-font: inherit;
  box-sizing: border-box;
  width: 100%;
  background: var(--ng-background, #fff);
  color: var(--ng-foreground, #202020);
  font-family: var(--ng-font);
  line-height: 1.6;
  padding: clamp(16px, 3vw, 40px);
  text-align: start;
}
.ng-gallery.ng-gallery *, .ng-gallery.ng-gallery *::before, .ng-gallery.ng-gallery *::after { box-sizing: border-box; }
.ng-gallery.ng-gallery [hidden] { display: none !important; }
.ng-gallery.ng-gallery .ng-inner { max-width: var(--ng-max-width, 1200px); margin-inline: auto; }
.ng-gallery.ng-gallery h2, .ng-gallery.ng-gallery h3, .ng-gallery.ng-gallery p, .ng-gallery.ng-gallery figure { margin: 0; color: inherit; }
.ng-gallery.ng-gallery h2 { font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.ng-gallery.ng-gallery h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.ng-gallery.ng-gallery .ng-hero, .ng-gallery.ng-gallery .ng-footer { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(24px, 5vw, 60px); }
.ng-gallery.ng-gallery .ng-hero { margin-bottom: clamp(32px, 6vw, 72px); }
.ng-gallery.ng-gallery .ng-footer { margin-top: clamp(32px, 6vw, 72px); padding-top: 32px; border-top: 1px solid currentColor; }
.ng-gallery.ng-gallery .ng-section-image { flex: 1 1 280px; width: min(100%, 480px); max-width: 100%; min-width: 0; height: auto; object-fit: cover; border-radius: var(--ng-radius); }
.ng-gallery.ng-gallery .ng-section-copy { flex: 1 1 280px; min-width: 0; }
.ng-gallery.ng-gallery .ng-prose { margin-top: 16px; }
.ng-gallery.ng-gallery .ng-prose p + p, .ng-gallery.ng-gallery .ng-description p + p { margin-top: 12px; }
.ng-gallery.ng-gallery a { color: inherit; }
.ng-gallery.ng-gallery.ng-gallery.ng-gallery button, .ng-gallery.ng-gallery.ng-gallery.ng-gallery .ng-cta, .ng-gallery.ng-gallery.ng-gallery.ng-gallery input, .ng-gallery.ng-gallery.ng-gallery.ng-gallery select { font: inherit; letter-spacing: normal; text-transform: none; }
.ng-gallery.ng-gallery.ng-gallery.ng-gallery button, .ng-gallery.ng-gallery.ng-gallery.ng-gallery .ng-cta {
  appearance: none; cursor: pointer; border: 1px solid currentColor; background: transparent;
  color: inherit; padding: 10px 16px; min-height: 44px; border-radius: var(--ng-radius, 4px);
  text-decoration: none; line-height: 1.4; box-shadow: none; font-weight: 500;
}
.ng-gallery.ng-gallery.ng-gallery.ng-gallery button:hover, .ng-gallery.ng-gallery.ng-gallery.ng-gallery .ng-cta:hover { text-decoration: underline; }
.ng-gallery.ng-gallery.ng-gallery.ng-gallery button:disabled { cursor: default; opacity: .6; }
.ng-gallery.ng-gallery.ng-gallery.ng-gallery .ng-cta { display: inline-block; margin-top: 24px; }
.ng-gallery.ng-gallery.ng-gallery.ng-gallery .ng-cta, .ng-gallery.ng-gallery.ng-gallery.ng-gallery .ng-filter[aria-pressed="true"] { background: var(--ng-accent); color: var(--ng-button-text); border-color: var(--ng-accent); }
.ng-gallery.ng-gallery.ng-gallery.ng-gallery :is(a, button, input, select):focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.ng-gallery.ng-gallery .ng-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ng-gallery.ng-gallery .ng-search-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-bottom: 24px; }
.ng-gallery.ng-gallery .ng-search-tools label { flex: 1 1 220px; display: block; font-size: .9rem; font-weight: 500; }
.ng-gallery.ng-gallery .ng-search-tools input, .ng-gallery.ng-gallery .ng-search-tools select { display: block; width: 100%; min-width: 0; margin-top: 6px; padding: 10px 12px; min-height: 44px; background: var(--ng-background); color: inherit; border: 1px solid currentColor; border-radius: var(--ng-radius); }
.ng-gallery.ng-gallery input::placeholder { color: inherit; opacity: .7; }
.ng-gallery.ng-gallery .ng-grid { display: grid; grid-template-columns: repeat(var(--ng-columns, 3), minmax(0, 1fr)); gap: var(--ng-gap, 20px); list-style: none; padding: 0; margin: 0; align-items: start; }
.ng-gallery.ng-gallery .ng-item { min-width: 0; margin: 0; padding: 0; }
.ng-gallery.ng-gallery .ng-open { position: relative; display: block; border-radius: var(--ng-radius); text-decoration: none; }
.ng-gallery.ng-gallery .ng-thumb { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--ng-radius); }
.ng-gallery.ng-gallery.ng-shape-square .ng-thumb { aspect-ratio: 1; object-fit: cover; }
.ng-gallery.ng-gallery.ng-shape-landscape .ng-thumb { aspect-ratio: 4 / 3; object-fit: cover; }
.ng-gallery.ng-gallery.ng-shape-portrait .ng-thumb { aspect-ratio: 3 / 4; object-fit: cover; }
.ng-gallery.ng-gallery .ng-caption { padding-top: 12px; text-align: start; }
.ng-gallery.ng-gallery .ng-description { font-size: .9rem; margin-top: 6px; overflow-wrap: anywhere; }
.ng-gallery.ng-gallery .ng-description :is(img, video, iframe) { max-width: 100%; }
.ng-gallery.ng-gallery .ng-video-badge { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 5px 10px; border-radius: 4px; color: #fff; background: #202020; font-size: .85rem; }
.ng-gallery.ng-gallery .ng-gallery-controls { text-align: center; margin-top: 24px; }
.ng-gallery.ng-gallery .ng-status { font-size: .85rem; margin-bottom: 12px; }
.ng-gallery.ng-gallery .ng-lightbox {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0; border-radius: 6px;
  width: min(1000px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px); overflow: auto;
  color: var(--ng-foreground); background: var(--ng-background); font: inherit;
}
.ng-gallery.ng-gallery .ng-lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.ng-gallery.ng-gallery .ng-dialog-shell { padding: clamp(14px, 3vw, 28px); }
.ng-gallery.ng-gallery .ng-dialog-toolbar { display: flex; gap: 10px; padding: 4px; margin-bottom: 16px; }
.ng-gallery.ng-gallery .ng-close { margin-inline-start: auto; }
.ng-gallery.ng-gallery .ng-lightbox-media { display: grid; place-items: center; }
.ng-gallery.ng-gallery .ng-lightbox-media img { display: block; max-width: 100%; max-height: 62dvh; width: auto; height: auto; object-fit: contain; }
.ng-gallery.ng-gallery .ng-lightbox-media iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.ng-gallery.ng-gallery .ng-lightbox-title { font-size: 1.3rem; margin-top: 20px; }
.ng-gallery.ng-gallery .ng-lightbox-caption { margin-top: 8px; overflow-wrap: anywhere; }
.ng-gallery.ng-gallery .ng-lightbox-caption :is(img, iframe, video) { max-width: 100%; }
.ng-gallery.ng-gallery .ng-video-note { font-size: .85rem; margin-top: 16px; }
.ng-gallery.ng-gallery .ng-play { margin-top: 12px; }
.ng-gallery.ng-gallery .ng-position { font-size: .85rem; margin-top: 16px; }
@media (max-width: 900px) { .ng-gallery.ng-gallery .ng-grid { grid-template-columns: repeat(min(var(--ng-columns, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 480px) { .ng-gallery.ng-gallery .ng-grid { grid-template-columns: minmax(0, 1fr); } .ng-gallery.ng-gallery .ng-section-image { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .ng-gallery.ng-gallery *, .ng-gallery.ng-gallery *::before, .ng-gallery.ng-gallery *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .ng-gallery.ng-gallery .ng-filter[aria-pressed="true"] { outline: 2px solid Highlight; } }
/* Template wrappers affect only pages assigned the plugin template. */
.ng-template-page .ng-page-intro { max-width: 1200px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 40px); }
.ng-template-page .ng-page-intro h1 { margin: 0 0 16px; }
.ng-gallery.ng-gallery .ng-tag-navigation { flex: 1 1 220px; margin: 0; }
.ng-gallery.ng-gallery .ng-tag-navigation .ng-apply-tag { margin-top: 8px; }
.ng-gallery.ng-gallery.ng-gallery.ng-gallery .ng-filter { display: inline-block; min-height: 44px; padding: 10px 16px; border: 1px solid currentColor; border-radius: var(--ng-radius); color: inherit; text-decoration: none; line-height: 1.4; }
.ng-gallery.ng-gallery.ng-gallery.ng-gallery .ng-filter[aria-current="page"] { color: var(--ng-button-text); background: var(--ng-accent); border-color: var(--ng-accent); }
.ng-gallery.ng-gallery .ng-filter:hover { text-decoration: underline; }