/* ------------------------------------------------------------------
   Events — the public list behind /events, rendered from the events
   managed in /admin.
   Scoped under .ggc so none of it can leak into Webflow's styles.
   Same tokens and conventions as booking.css and job-post.css.
   ------------------------------------------------------------------ */

.ggc {
  --ink: #0b0b12;
  --ink-soft: #55555f;
  --line: #dcdce6;
  --paper: #ffffff;
  --paper-soft: #f9f8ff;
  --blue: #194bf5;
  --blue-dark: #1038bd;
  --teal: #14ac93;
  --lime: #d7ff15;
  --magenta: #be2b93;
  --orange: #f56a19;

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

  background: var(--paper-soft);
  color: var(--ink);
  font-family: var(--body);
}

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

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

/* ----------------------------------------------------------- hero band */

.ggc-hero {
  background: var(--ink);
  color: #fff;
  padding: 92px 24px 104px;
  position: relative;
  overflow: hidden;
}

/* Soft brand wash behind the headline, kept decorative and low contrast. */
.ggc-hero::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 150%;
  background:
    radial-gradient(42% 55% at 20% 32%, rgba(25, 75, 245, .55), transparent 70%),
    radial-gradient(38% 50% at 80% 24%, rgba(245, 106, 25, .38), transparent 70%),
    radial-gradient(40% 45% at 52% 88%, rgba(20, 172, 147, .34), transparent 70%);
  pointer-events: none;
}

.ggc-hero__inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

.ggc-eyebrow {
  font-family: var(--rounded);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 18px;
}

.ggc-hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 12vw, 132px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: #fff;
}

.ggc-hero__lede {
  max-width: 58ch;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
  margin: 0;
}

/* --------------------------------------------------------------- layout */

/* The negative top margin rides the list up over the hero's bottom edge, the
   way the booking and job pages float their card. It sits on the block
   itself rather than on its first child: the demo banner is that child and
   carries a `hidden` attribute off demo mode, which would take the lift with
   it and leave the live page sitting flat under the hero. */
.ggc-main {
  max-width: 1120px;
  margin: -56px auto 0;
  padding: 0 24px 110px;
}

/* --------------------------------------------------------------- banner */

.ggc-banner {
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 26px;
  position: relative;
}

.ggc-banner--demo {
  background: #fff8dd;
  border: 1px solid #e8d487;
  color: #6b5309;
}

.ggc-banner--error {
  background: #fdeaea;
  border: 1px solid #f0b6b6;
  color: #8d1b1b;
}

/* ---------------------------------------------------------- month label */

.ggc-month + .ggc-month { margin-top: 52px; }

.ggc-month__label {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: var(--ink);
}

/* The rule runs from the end of the month name to the edge of the list. */
.ggc-month__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.ggc-month__list { display: grid; gap: 18px; }

/* ----------------------------------------------------------- event card */

.ggc-event {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  box-shadow: 0 18px 44px rgba(11, 11, 18, .07);
}

/* An event with no image gives its whole width to the text rather than
   leaving a grey rectangle where a photo should be. */
.ggc-event--noimage { grid-template-columns: minmax(0, 1fr); }

.ggc-event__media {
  position: relative;
  background: var(--ink);
  min-height: 100%;
}

.ggc-event__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

/* ------------------------------------------------------------- date chip */

.ggc-date {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: var(--blue);
  color: #fff;
  border-radius: 14px;
  padding: 10px 16px 12px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(11, 11, 18, .3);
}

/* Without a photo the chip has nothing to sit on, so it joins the text
   column as a block in the flow instead of floating. */
.ggc-event--noimage .ggc-date {
  position: static;
  display: inline-block;
  margin-bottom: 16px;
}

.ggc-date__month {
  display: block;
  font-family: var(--rounded);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.ggc-date__day {
  display: block;
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
}

/* ------------------------------------------------------------- card body */

.ggc-event__body {
  padding: 30px 32px 32px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ggc-event__title {
  font-family: var(--rounded);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--ink);
  overflow-wrap: break-word;
}

.ggc-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.ggc-event__meta li {
  font-family: var(--rounded);
  font-size: 14px;
  line-height: 1;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
}

/* Time, place and price each get their own colour so the row scans at a
   glance instead of reading as one long string of chips. */
.ggc-event__meta li.is-time {
  border-color: transparent;
  background: rgba(25, 75, 245, .1);
  color: var(--blue-dark);
}

.ggc-event__meta li.is-location {
  border-color: transparent;
  background: rgba(20, 172, 147, .14);
  color: #0a6354;
}

.ggc-event__meta li.is-cost {
  border-color: transparent;
  background: rgba(190, 43, 147, .12);
  color: #8e1f6c;
}

/* ------------------------------------------------------------ description
   Plain text from the admin, rendered through the site's "## heading /
   - bullet / blank line" convention — never as markup. */

.ggc-event__body h2 {
  font-family: var(--rounded);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  margin: 22px 0 10px;
  color: var(--ink);
}

.ggc-event__text > :first-child { margin-top: 0; }

.ggc-event__text p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.ggc-event__text p:last-child { margin-bottom: 0; }

.ggc-event__text ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.ggc-event__text ul:last-child { margin-bottom: 0; }

.ggc-event__text li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Same teal dot the booking and job pages use for a bullet. */
.ggc-event__text li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* ----------------------------------------------------------- card action */

/* margin-top: auto pins the button to the bottom of the card, so a short
   event and a long one in the same row still line their buttons up. */
.ggc-event__actions {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.ggc-tickets {
  display: inline-block;
  font-family: var(--rounded);
  font-size: 17px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 14px 34px;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.ggc-tickets:hover,
.ggc-tickets:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ---------------------------------------------------------------- empty */

.ggc-empty {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 72px 28px;
  text-align: center;
}

.ggc-empty h2 {
  font-family: var(--rounded);
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 12px;
  color: var(--ink);
}

.ggc-empty p {
  margin: 0 auto;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.ggc-empty a { color: var(--blue); }

/* ------------------------------------------------------------- skeleton */

.ggc-loading {
  margin: 20px 0 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  text-align: center;
}

.ggc-skeleton {
  background: linear-gradient(90deg, #eeedf7 25%, #f6f5fc 50%, #eeedf7 75%);
  background-size: 300% 100%;
  animation: ggc-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

.ggc-skeleton--media { min-height: 240px; border-radius: 0; }
.ggc-skeleton--title { height: 28px; width: 62%; margin-bottom: 18px; }
.ggc-skeleton--line { height: 13px; margin-bottom: 11px; }
.ggc-skeleton--line:last-child { width: 72%; }

@keyframes ggc-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

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

@media (max-width: 900px) {
  .ggc-event,
  .ggc-event--noimage { grid-template-columns: minmax(0, 1fr); }

  .ggc-event__media img { min-height: 210px; }
}

@media (max-width: 600px) {
  .ggc-hero { padding: 68px 20px 84px; }
  .ggc-main { padding: 0 16px 80px; }
  .ggc-event__body { padding: 24px 22px 26px; }
  .ggc-tickets { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ggc-skeleton { animation: none; }
  .ggc *, .ggc *::before, .ggc *::after { transition: none !important; }
}