/* ------------------------------------------------------------------
   Photo albums — the Albums section on /media, plus the viewer that
   opens over the page and the gate on the download button.
   Scoped under .gga so none of it can leak into Webflow's styles.
   Same tokens and conventions as events.css and booking.css.
   ------------------------------------------------------------------ */

.gga {
  --ink: #0b0b12;
  --ink-soft: #55555f;
  --line: #dcdce6;
  --paper: #ffffff;
  --paper-soft: #f9f8ff;
  --blue: #194bf5;
  --blue-dark: #1038bd;
  --lime: #d7ff15;
  --danger: #8d1b1b;

  --display: 'Airwaves', Impact, sans-serif;
  --rounded: 'Airwaves Rounded', Arial, sans-serif;
  --body: 'Century Gothic', 'Avenir Next', Arial, sans-serif;

  max-width: 1120px;
  margin: 0 auto;
  padding: 92px 24px 104px;
  color: var(--ink);
  font-family: var(--body);
}

.gga *,
.gga *::before,
.gga *::after { box-sizing: border-box; }

.gga [hidden] { display: none !important; }

/* ------------------------------------------------------------------ head */

.gga__head { margin-bottom: 38px; }

.gga__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 7vw, 90px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--ink);
}

.gga__lede {
  max-width: 62ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.gga__banner {
  background: #fff8dd;
  border: 1px solid #e8d487;
  color: #6b5309;
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 26px;
}

.gga__loading,
.gga__empty {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------- album grid */

.gga__grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* The whole card is the button: a cover, a title and a count, and nothing
   inside it that wants a click of its own. */
.gga-album {
  display: grid;
  gap: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}

.gga-album:hover,
.gga-album:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11, 11, 18, .13);
  outline: none;
}

.gga-album:focus-visible { border-color: var(--blue); }

.gga-album__media {
  position: relative;
  background: var(--paper-soft);
}

.gga-album__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.gga-album__count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: var(--rounded);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(11, 11, 18, .82);
  color: #fff;
  border-radius: 999px;
  padding: 5px 11px;
}

.gga-album__body { padding: 18px 20px 22px; }

.gga-album__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.gga-album__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  list-style: none;
  padding: 0;
}

/* The separator trails the item it follows rather than leading the next one.
   The list wraps on a narrow card, and a leading '·' at the start of the
   second line reads as a stray bullet. */
.gga-album__meta li:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
}

/* ------------------------------------------------------------ pagination */

.gga__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
}

.gga__btn {
  font-family: var(--rounded);
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 42px;
  padding: 15px 30px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.gga__btn:hover:not(:disabled) { background: var(--blue); transform: scale(1.02); }
.gga__btn:disabled { opacity: .4; cursor: default; }

.gga__page {
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- viewer */

.gga-viewer {
  position: fixed;
  inset: 0;
  /* One below the consent manager's 2147483647, which has the better claim
     to the top of the page; the nav embed's z-index: 99999999 is below this
     and would otherwise paint straight through the overlay. */
  z-index: 2147483646;
  background: rgba(7, 7, 12, .94);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.gga-viewer.is-open { opacity: 1; visibility: visible; }

body.gga-locked { overflow: hidden; }

.gga-viewer__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px 14px;
  color: #fff;
}

.gga-viewer__heading { min-width: 0; }

.gga-viewer__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #fff;
}

.gga-viewer__meta {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
}

.gga-viewer__close {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.gga-viewer__close:hover,
.gga-viewer__close:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  outline: none;
}

/* ------------------------------------------------------------ the stage */

/* An explicit 1fr row, not an implicit one: an auto row takes its height
   from the photo, so a tall image pushes the stage past the viewport and the
   footer ends up painted over it. minmax(0, 1fr) caps the row at what is
   left after the bar and the footer, which is what max-height on the image
   then resolves against. */
.gga-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  padding: 0 16px;
  overflow: hidden;
}

.gga-stage__frame {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gga-stage__frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.gga-arrow {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  background: rgba(7, 7, 12, .5);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  justify-self: center;
  align-self: center;
  transition: background .18s ease, transform .18s ease;
}

.gga-arrow:hover:not(:disabled),
.gga-arrow:focus-visible {
  background: rgba(255, 255, 255, .18);
  transform: scale(1.06);
  outline: none;
}

.gga-arrow:disabled { opacity: .25; cursor: default; }

/* --------------------------------------------------------- viewer footer */

.gga-viewer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 24px 24px;
  color: rgba(255, 255, 255, .86);
}

.gga-caption {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 70ch;
}

.gga-caption__credit {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  margin-top: 4px;
}

.gga-viewer__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.gga-count {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
}

.gga-download {
  font-family: var(--rounded);
  font-size: 14.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--lime);
  color: var(--ink);
  border: 0;
  border-radius: 42px;
  padding: 14px 26px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.gga-download:hover:not(:disabled) { transform: scale(1.03); }
.gga-download:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------------- the gate */

/* Sits over the viewer, not over the page: the photo stays visible behind
   it, so it is clear which one is being asked for. */
.gga-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 7, 12, .72);
}

.gga-gate__card {
  width: 100%;
  max-width: 440px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 20px;
  padding: 30px 28px 26px;
}

.gga-gate__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.gga-gate__sub {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.gga-gate__field { display: grid; gap: 6px; margin-bottom: 16px; }

.gga-gate__field label {
  font-size: 13px;
  color: var(--ink-soft);
}

.gga-gate__field input {
  font: inherit;
  font-size: 15.5px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
}

.gga-gate__field input:focus-visible {
  outline: none;
  border-color: var(--blue);
}

.gga-gate__field input[aria-invalid='true'] { border-color: var(--danger); }

.gga-gate__err {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--danger);
  min-height: 1px;
}

.gga-gate__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.gga-gate__go {
  font-family: var(--rounded);
  font-size: 14.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 42px;
  padding: 14px 26px;
  cursor: pointer;
}

.gga-gate__go:hover:not(:disabled) { background: var(--blue); }
.gga-gate__go:disabled { opacity: .5; cursor: default; }

.gga-gate__cancel {
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.gga-gate__note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.gga-gate__note a { color: var(--blue); }

/* ---------------------------------------------------------- responsive */

@media (max-width: 767px) {
  .gga { padding: 64px 16px 80px; }
  .gga__grid { gap: 20px; }

  .gga-viewer__bar { padding: 14px 16px 10px; }

  /* The arrows move down beside the counter: 54px columns either side of a
     phone-width photo leave the photo itself with nothing. */
  .gga-stage {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 12px;
  }
  .gga-stage .gga-arrow { display: none; }

  .gga-viewer__foot {
    padding: 14px 16px 20px;
    flex-direction: column;
    align-items: stretch;
  }

  .gga-viewer__actions { justify-content: space-between; }
  .gga-nav-mobile { display: flex; gap: 10px; }
  .gga-download { flex: 1; }
}

@media (min-width: 768px) {
  .gga-nav-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gga *, .gga *::before, .gga *::after,
  .gga-viewer, .gga-album { transition: none !important; }
  .gga-album:hover, .gga-album:focus-visible { transform: none; }
}