/*
 * TritonIQ DNN Gallery — styles for the server-rendered section (Services/Gallery/GalleryRenderer.cs).
 * Registered in <head> by Controls/GalleryView.cs, BEFORE the skin's CSS, so a skin can override any
 * rule here with an equally specific one.
 *
 * Layout follows gallery-grid.astro. Colours and fonts come from the SITE'S tokens; the fallbacks,
 * for a site that does not set them (or ships them blank), are the Triton skin's own defaults:
 *
 *   site token            used for                                            fallback
 *   --font-headline       title, subtitle, pills, badges, buttons             the skin's own font
 *   --font-body           description, counts                                 the skin's own font
 *   --color-primary       active pill, badge, subtitle, focus ring, button,   #9E2065
 *                         album back link
 *   --color-secondary     pill hover, active sub-pill, button, back-link      #00ABD8
 *                         hover
 *   --color-tertiary      tertiary button                                     #6B6B6B
 *   --color-dark-shade    hover overlay, photo placeholder, button hover      #222222
 *   --color-light-shade   (reserved)                                          #E6E6E6
 *
 * They arrive as --tg-site-*, copied by the inline script after each section, and only when they
 * hold a value: a token declared blank (`--color-primary:;`) would otherwise defeat var()'s fallback.
 *
 * Per-gallery overrides, set on `.tg { … }` (or `#tg-<moduleId>`), win over the tokens:
 *   --triton-gallery-accent  --triton-gallery-accent-contrast  --triton-gallery-count
 *   --triton-gallery-scrim   --triton-gallery-placeholder      --triton-gallery-gap
 *   --triton-gallery-pill-radius  --triton-gallery-max-width  --triton-gallery-full-gutter
 *   --triton-gallery-banner-max-width  --triton-gallery-banner-fade  (Full width only)
 * The tile shape is a module setting (it is written into the grid's style attribute).
 *
 * State classes, set by script: .js / .js-reveal on the section (inline script), .is-loaded on a
 * tile (its <img> onload), .is-visible on a tile (gallery.js). Without script none apply and the
 * gallery simply shows, fully visible.
 */

.tg {
  --tg-primary: var(--tg-site-color-primary, #9e2065);
  --tg-secondary: var(--tg-site-color-secondary, #00abd8);
  --tg-tertiary: var(--tg-site-color-tertiary, #6b6b6b);
  --tg-dark: var(--tg-site-color-dark-shade, #222);
  --tg-light: var(--tg-site-color-light-shade, #e6e6e6);

  --tg-accent: var(--triton-gallery-accent, var(--tg-primary));
  --tg-accent-contrast: var(--triton-gallery-accent-contrast, #fff);
  --tg-scrim-color: var(--triton-gallery-scrim, color-mix(in srgb, var(--tg-dark) 55%, transparent));
  --tg-placeholder: var(--triton-gallery-placeholder, color-mix(in srgb, var(--tg-dark) 10%, transparent));
  --tg-gap: var(--triton-gallery-gap, 20px);
  --tg-radius: var(--triton-gallery-pill-radius, 999px);

  container-type: inline-size;
  /* The full width of the pane, even where the skin lays a pane's modules out as flex items or
     floats: a container cannot size itself to its content, so it would otherwise shrink, and the
     container queries below would read a desktop as a phone. */
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: var(--triton-gallery-max-width, 1248px);
  margin-inline: auto;
  /* The space below the whole section (grid, pager and buttons), not below the grid alone. */
  padding-bottom: clamp(4rem, 5vw, 6.25rem);
  /* No fallback on purpose: with no --font-body token this is unset, i.e. the skin's own font. */
  font-family: var(--tg-site-font-body);
}

/* "Full width": the skin's container-fluid spans the pane; no column cap, just a gutter at the edges. */
.tg.tg--full {
  max-width: none;
  padding-inline: var(--triton-gallery-full-gutter, 15px);
}

.tg-title,
.tg-subtitle,
.tg-pill,
.tg-tab,
.tg-set-title,
.tg-badge,
.tg-button {
  font-family: var(--tg-site-font-headline);
}

.tg-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.tg-settings-button {
  font: inherit;
  font-size: 0.875rem;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.tg-title {
  text-align: center;
  margin: 0 0 10px;
  text-wrap: balance;
}

/* The Triton skin's __subtitle: a short uppercase line between the title and the copy. */
.tg-subtitle {
  text-align: center;
  margin: -2px auto 12px;
  max-width: 1034px;
  color: var(--tg-primary);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}

.tg-desc {
  text-align: center;
  max-width: 1034px;
  margin: 0 auto 0.5rem;
}

/* The chosen album's description from TritonIQ, under the pills. */
.tg-album-desc {
  max-width: 760px;
  margin: 12px auto 0;
  text-align: center;
  line-height: 1.55;
}

.tg-album-desc[hidden] {
  display: none;
}

/* In the album banner: under the name and the count, smaller, and the banner grows to hold it. */
.tg-banner .tg-album-desc {
  max-width: 62ch;
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}

.tg-banner:has(.tg-album-desc:not([hidden])) {
  min-height: clamp(230px, 28vw, 350px);
}

/* Editors only. Muted so it does not read as page copy. */
.tg-notice {
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.7;
  margin: 1rem auto;
  padding: 1.5rem;
  border: 1px dashed currentColor;
  max-width: 720px;
}

/* --- Filter pills ------------------------------------------------------- */
.tg-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* display:flex above would otherwise beat the [hidden] attribute on the sub-rows. */
.tg-filters[hidden] {
  display: none;
}

.tg-filters--sub {
  margin-top: 12px;
}

.tg-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: var(--tg-radius);
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.tg-pill:hover {
  box-shadow: inset 0 0 0 2px var(--tg-secondary);
  color: var(--tg-secondary);
}

.tg-pill:focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: 3px;
}

.tg-pill.is-active {
  background: var(--tg-accent);
  box-shadow: inset 0 0 0 1px var(--tg-accent);
  color: var(--tg-accent-contrast);
}

.tg-pill.is-active:hover {
  color: var(--tg-accent-contrast);
}

.tg-filters--sub .tg-pill {
  height: 34px;
  font-size: 0.8rem;
}

/* The second row reads as a level down: secondary, not primary. */
.tg-filters--sub .tg-pill.is-active {
  background: var(--tg-secondary);
  box-shadow: inset 0 0 0 1px var(--tg-secondary);
}

.tg-count {
  font-family: var(--tg-site-font-body);
  font-weight: 400;
  font-size: 0.8em;
  color: var(--triton-gallery-count, currentColor);
  opacity: 0.8;
}

.tg-pill.is-active .tg-count {
  color: inherit;
  opacity: 1;
}

/* --- Grid --------------------------------------------------------------- */
.tg-grid {
  display: grid;
  grid-template-columns: repeat(var(--tg-columns, 4), 1fr);
  gap: var(--tg-gap);
  margin-top: 16px;
}

/*
 * Every tile's box is fixed by its aspect ratio (the module's tile width × height), so the grid
 * has its final height in the first paint. Loading then happens inside those boxes:
 *   1. placeholder — the tile's background plus a light sweep, until the photo arrives;
 *   2. photo       — fades in from a slight blur and zoom once loaded (.is-loaded);
 *   3. tile        — rises into place when scrolled into view (.is-visible), cascading.
 * Only opacity and transform animate, and neither counts as layout shift.
 */
.tg-tile {
  position: relative;
  aspect-ratio: var(--tg-ratio, 297 / 306);
  overflow: hidden;
  background: var(--tg-placeholder);
}

.tg-tile[hidden] {
  display: none;
}

.tg.js .tg-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: tg-sweep 1.3s ease-in-out infinite;
  pointer-events: none;
}

.tg.js .tg-tile.is-loaded::before {
  content: none;
}

@keyframes tg-sweep {
  to {
    transform: translateX(100%);
  }
}

.tg-trigger {
  position: absolute;
  inset: 0;
  display: block;
}

.tg-trigger img {
  display: block;
  width: 100%;
  /* !important: skins commonly set img { height: auto }, which would leave the tile's photo short. */
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  transition:
    opacity 0.6s ease,
    filter 0.7s ease,
    transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tg.js .tg-tile:not(.is-loaded) .tg-trigger img {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.08);
}

/* A slow push-in on hover, under the scrim. */
.tg-tile.is-loaded:hover .tg-trigger img {
  transform: scale(1.05);
}

.tg.js-reveal .tg-tile {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition:
    opacity 0.55s ease var(--tg-delay, 0ms),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--tg-delay, 0ms);
}

.tg.js-reveal .tg-tile.is-visible {
  opacity: 1;
  transform: none;
}

/* Used for one frame when a filter replays the reveal, so tiles hide instantly rather than fading out. */
.tg-grid.tg-no-transition .tg-tile {
  transition: none;
}

.tg-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 6px 14px;
  background: var(--tg-accent);
  color: var(--tg-accent-contrast);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

.tg-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  /* A column, so a photo title ("Photo titles on hover") sits above the magnifier. */
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 16px;
  align-items: center;
  justify-content: center;
  background: var(--tg-scrim-color);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tg-tile:hover .tg-scrim,
.tg-tile:focus-within .tg-scrim {
  opacity: 1;
}

/* "Photo titles on hover": the title, above the magnifier, two lines at most. */
.tg-tile-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  font-family: var(--tg-site-font-headline);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.tg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Tabs layout --------------------------------------------------------
 * Layout "tabs": the albums as a row of tabs (.tg-tabs), and in the grid a tile per sub-album
 * (.tg-set, named on its cover) ahead of the album's loose photos. An open sub-album shows its banner
 * (.tg-sub-banner: the album layout's .tg-banner, below) over its photos; tile and banner share the
 * view-transition name "tg-hero" while gallery.js swaps them.
 * Override on .tg: --triton-gallery-tab-background (the light shade), --triton-gallery-tab-color (the
 * dark shade, a little muted), --triton-gallery-tab-height (64px).
 */
.tg-tabs {
  display: flex;
  gap: var(--tg-gap);
  margin-top: 8px;
}

/* .tg first, so a skin's broad button rule (`section button { color: #fff }`) cannot blank the labels. */
.tg .tg-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--triton-gallery-tab-height, 64px);
  margin: 0;
  padding: 12px 28px;
  border: 0;
  border-radius: 0;
  background: var(--triton-gallery-tab-background, var(--tg-light));
  /* Not the tertiary token: some sites set it pale, which vanishes on the light tab. */
  color: var(--triton-gallery-tab-color, color-mix(in srgb, var(--tg-dark) 72%, transparent));
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.tg .tg-tab:hover {
  background: color-mix(in srgb, var(--triton-gallery-tab-background, var(--tg-light)) 82%, var(--tg-dark));
  color: var(--tg-dark);
}

.tg .tg-tab:focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: 3px;
}

.tg .tg-tab.is-active {
  background: var(--tg-accent);
  color: var(--tg-accent-contrast);
}

.tg-sub-banner {
  margin-top: 16px;
}

/* display:flex on .tg-banner would otherwise beat the [hidden] attribute. */
.tg-sub-banner[hidden] {
  display: none;
}

.tg-sub-banner.is-entering {
  animation: tg-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* A sub-album: its name across the foot of its cover, always shown; the photo count joins it on hover. */
.tg-set-details {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 48px 22px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: #fff;
  pointer-events: none;
}

.tg-set-title {
  font-size: clamp(1.1rem, 2.6cqi, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}

.tg-set-count {
  max-height: 0;
  overflow: hidden;
  font-size: 0.875rem;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.tg-set:hover .tg-set-count,
.tg-set:focus-within .tg-set-count {
  max-height: 1.5rem;
  opacity: 0.9;
}

/* --- Album layout -------------------------------------------------------
 * Layout "albums": a tile per album (.tg-albums), and the album view (.tg-album-view: banner, sub
 * pills, the photo grid above). One is [hidden]. The tile and the banner share the view-transition
 * name "tg-hero" while gallery.js swaps them, so one morphs into the other.
 * Override on .tg: --triton-gallery-album-columns (3), --triton-gallery-album-height (270px),
 * --triton-gallery-album-hover (the title colour on hover), --triton-gallery-banner-overlay (0.55, how dark
 * the black overlay on the album banner is, 0 to 1).
 */
.tg-albums {
  display: grid;
  grid-template-columns: repeat(var(--triton-gallery-album-columns, 3), 1fr);
  column-gap: var(--tg-gap);
  row-gap: 30px;
  margin-top: 16px;
}

.tg-albums[hidden],
.tg-album-view[hidden] {
  display: none;
}

.tg-album {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--triton-gallery-album-height, 270px);
  overflow: hidden;
  background: var(--tg-placeholder);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.tg-album::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);
}

.tg-album:hover,
.tg-album:focus-visible {
  color: var(--triton-gallery-album-hover, var(--tg-site-color-primary, #00abd8));
}

.tg-album:focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: 3px;
}

.tg-album-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 1s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.tg-album:hover .tg-album-img,
.tg-album:focus-visible .tg-album-img {
  transform: scale(1.2);
}

.tg-album-details {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 20px;
  text-align: left;
  transition: max-height 1.5s ease, opacity 1s ease, background 0.5s ease;
}

.tg-album:hover .tg-album-details,
.tg-album:focus-visible .tg-album-details {
  background: rgba(0, 0, 0, 0.65);
}

.tg-album-title {
  margin: 0;
  color: inherit;
  font-family: var(--tg-site-font-headline);
  font-size: clamp(1.1rem, 5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color 1s ease;
}

.tg-album-more {
  display: flex;
  justify-content: flex-end;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.3s ease;
}

.tg-album:hover .tg-album-more,
.tg-album:focus-visible .tg-album-more {
  max-height: 2.5rem;
  opacity: 1;
}

.tg-album-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #fff;
  font-size: 1.15rem;
  text-align: left;
  transform: translateY(5%);
  transition: all 0.3s ease;
}

.tg-album:hover .tg-album-cta {
  transform: translateY(0);
}

.tg-album:hover .tg-album-cta:hover {
  color: var(--tg-tertiary);
}

.tg-album-arrow {
  transition: transform 0.3s ease;
}

.tg-album:hover .tg-album-arrow {
  transform: translateX(3px);
}

/* The album's banner: its cover, name and photo count, and the way back. */
.tg-album-view {
  margin-top: 16px;
}

.tg-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  box-sizing: border-box;
  min-height: clamp(180px, 22vw, 280px);
  padding: 72px 20px 20px;
  overflow: hidden;
  background: var(--tg-dark);
  color: #fff;
}

.tg-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* A black overlay over the whole cover, darkest behind the name, count and description. */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%),
    rgba(0, 0, 0, var(--triton-gallery-banner-overlay, var(--tg-banner-overlay, 0.55)));
}

.tg-banner-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
}

/* No cover yet (the page has not opened an album): no broken-image icon. */
.tg-banner-img:not([src]) {
  display: none;
}

.tg-banner-title {
  margin: 0;
  color: inherit;
  font-family: var(--tg-site-font-headline);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  outline: none;
}

.tg-banner-count {
  font-size: 0.95rem;
  opacity: 0.85;
}

.tg-back {
  position: absolute;
  top: 18px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--tg-radius);
  background: var(--tg-primary);
  color: #fff;
  font-family: var(--tg-site-font-headline);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

/* The site's primary colour, the secondary on hover. */
.tg-back:hover,
.tg-back:focus-visible {
  background: var(--tg-secondary);
  color: #fff;
}

.tg-back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/*
 * Full width: the banner (album and sub-album) still spans the gallery, but its cover is never
 * stretched past 1000px, where it would turn soft: it sits against the right edge and its left edge
 * fades into the banner's dark background, behind the name. Narrower, the cover fills the banner.
 * Override on .tg: --triton-gallery-banner-max-width (1000px), --triton-gallery-banner-fade (240px).
 */
.tg--full .tg-banner-img {
  left: auto;
  width: min(100%, var(--triton-gallery-banner-max-width, 1000px));
}

/* Only once the banner is wider than the cover (the query measures inside the gutter): otherwise there is no edge to soften. */
@container (min-width: 1001px) {
  /* The name sits on the dark side now, not on the photo, so the photo can be brighter. */
  .tg--full .tg-banner {
    --tg-banner-overlay: 0.15;
  }

  .tg--full .tg-banner-img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--triton-gallery-banner-fade, 240px));
    mask-image: linear-gradient(to right, transparent, #000 var(--triton-gallery-banner-fade, 240px));
  }
}

.tg-back-arrow {
  transition: transform 0.25s ease;
}

.tg-back:hover .tg-back-arrow {
  transform: translateX(-3px);
}

.tg-album-view .tg-filters--sub {
  margin-top: 20px;
}

/* Entrances. The album tiles rise back in one after another (the morphing hero excepted); without
   view transitions the album view fades up. */
@keyframes tg-rise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
}

.tg-albums.is-entering .tg-album:not(.is-hero) {
  animation: tg-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--tg-i, 0) * 60ms);
}

.tg-album-view.is-entering .tg-banner {
  animation: tg-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

::view-transition-group(tg-hero) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The site's sticky header, lifted into its own layer (gallery.js) for the moment of the morph so the
   hero passes under it, not over it. It does not change, so it shows its new state only: no fade. */
::view-transition-group(tg-site-bar) {
  z-index: 2;
  animation: none;
}

::view-transition-old(tg-site-bar) {
  display: none;
}

::view-transition-new(tg-site-bar) {
  animation: none;
}

/* The tile and the banner have different shapes: crop, don't stretch. */
::view-transition-image-pair(tg-hero) {
  overflow: hidden;
}

::view-transition-old(tg-hero),
::view-transition-new(tg-hero) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Pager -------------------------------------------------------------
 * Matches the filter pills: outlined, the current page filled with the accent.
 */
.tg-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.tg-pager[hidden] {
  display: none;
}

.tg-page {
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--tg-radius);
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  color: inherit;
  font-family: var(--tg-site-font-headline);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.tg-page:hover:not(:disabled):not(.is-current) {
  box-shadow: inset 0 0 0 2px var(--tg-secondary);
  color: var(--tg-secondary);
}

.tg-page:focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: 3px;
}

.tg-page.is-current {
  background: var(--tg-accent);
  box-shadow: inset 0 0 0 1px var(--tg-accent);
  color: var(--tg-accent-contrast);
  cursor: default;
}

.tg-page--step {
  font-size: 1.25rem;
}

.tg-page:disabled {
  opacity: 0.35;
  cursor: default;
}

.tg-page-gap {
  min-width: 20px;
  text-align: center;
  opacity: 0.6;
}

/* --- Buttons ------------------------------------------------------------
 * They also carry the Triton skin's `button button--primary|secondary|tertiary`, and the skin's
 * CSS loads after this file, so on a Triton site its rules apply; these mirror _button.scss so the
 * buttons look the same on a skin without those classes.
 */
.tg-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
  justify-content: center;
  margin-top: 26px;
}

.tg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 15px;
  border: none;
  color: #fff;
  font-size: 1.042rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tg-button:focus-visible {
  outline: 2px solid var(--tg-primary);
  outline-offset: 3px;
}

.tg-button--primary {
  background: var(--tg-primary);
}

.tg-button--primary:hover {
  background: var(--tg-secondary);
  color: #fff;
}

.tg-button--secondary {
  background: var(--tg-secondary);
}

.tg-button--secondary:hover {
  background: var(--tg-primary);
  color: #fff;
}

.tg-button--tertiary {
  background: var(--tg-tertiary);
}

.tg-button--tertiary:hover {
  background: var(--tg-dark);
  color: var(--tg-primary);
}

/*
 * Container queries, not media queries: a DNN pane can be a sidebar on a wide screen. They measure
 * the SECTION, not the screen, so the steps sit well below the Astro grid's 1023px viewport rule: a
 * skin's content column is often 960-1140px wide on a desktop, and should still get the chosen
 * columns. At most three below 900px of section width, two below 640px.
 */
@container (max-width: 899px) {
  .tg-grid {
    grid-template-columns: repeat(min(3, var(--tg-columns, 4)), 1fr);
  }
}

@container (max-width: 639px) {
  .tg-grid {
    grid-template-columns: repeat(min(2, var(--tg-columns, 4)), 1fr);
  }

  .tg-albums {
    grid-template-columns: repeat(min(2, var(--triton-gallery-album-columns, 3)), 1fr);
  }
}

/* Narrow, or no hover to reveal it: the album tiles show their details from the start. */
@container (max-width: 576px) {
  .tg-albums {
    grid-template-columns: 1fr;
  }

  .tg-album {
    height: var(--triton-gallery-album-height-small, 250px);
  }

  .tg-album .tg-album-details {
    background: rgba(0, 0, 0, 0.65);
  }

  .tg-album .tg-album-more {
    max-height: 2.5rem;
    opacity: 1;
  }
}

@media (hover: none) {
  .tg-set-count {
    max-height: 1.5rem;
    opacity: 0.9;
  }

  .tg-album .tg-album-details {
    background: rgba(0, 0, 0, 0.65);
  }

  .tg-album .tg-album-more {
    max-height: 2.5rem;
    opacity: 1;
  }
}

@container (max-width: 560px) {
  /* The bar scrolls sideways rather than stacking into a column of pills. */
  .tg-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
  }

  .tg-filters::-webkit-scrollbar {
    display: none;
  }

  .tg-pill {
    flex: 0 0 auto;
  }

  /* Tabs too: sideways, each as wide as its name. */
  .tg-tabs {
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
  }

  .tg-tabs::-webkit-scrollbar {
    display: none;
  }

  .tg .tg-tab {
    flex: 0 0 auto;
    min-height: 52px;
    padding: 10px 20px;
    font-size: 1rem;
  }

  .tg-set-details {
    padding: 32px 14px 12px;
  }

  .tg-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}

/* The inline script also skips the scroll reveal here; this covers the CSS-only effects. */
@media (prefers-reduced-motion: reduce) {
  .tg.js .tg-tile::before {
    animation: none;
  }

  .tg-trigger img,
  .tg.js .tg-tile:not(.is-loaded) .tg-trigger img,
  .tg-tile.is-loaded:hover .tg-trigger img {
    filter: none;
    transform: none;
    transition: opacity 0.3s ease;
  }

  .tg-album:hover .tg-album-img,
  .tg-album:focus-visible .tg-album-img {
    transform: none;
  }
}