/* =====================================================================
   Groove Protocol - Event single (page-scoped)

   Loaded only on is_singular('event'). Every selector is scoped to .gp-ev so
   no global, Signal, Culture or Bookings styling can be affected. The crimson
   accent is sampled from the supplied campaign artwork (accent cluster
   rgb(150,11,13) / #960b0d; artwork median #7e0608).
   ===================================================================== */

.gp-ev{
  --gp-ev-bg: #0a0a0c;
  --gp-ev-ink: #f2f2f4;
  --gp-ev-dim: rgba(242,242,244,0.74);
  --gp-ev-muted: rgba(242,242,244,0.54);
  --gp-ev-line: rgba(242,242,244,0.16);
  --gp-ev-line-soft: rgba(242,242,244,0.09);
  --gp-ev-accent: #960b0d;
  --gp-ev-accent-hi: #b8161a;
  /* Reading measure in px, verified by rendered character count (~66 at 19px).
     Not ch: that unit is keyed to the "0" glyph and measured 70-77 real
     characters. Not em either: the wrapper inherits 16px, so em would resolve
     against the wrapper rather than the 19px body copy. */
  --gp-ev-measure: 592px;

  background: var(--gp-ev-bg);
  color: var(--gp-ev-ink);
  padding-bottom: 64px;
}

/* ---------- Back ---------- */
.gp-ev .gp-ev__back{
  margin: 22px 0 18px;
  font-size: 14px;
  line-height: 1.4;
}
.gp-ev .gp-ev__back a{
  color: var(--gp-ev-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gp-ev .gp-ev__back a:hover{ color: var(--gp-ev-ink); border-bottom-color: var(--gp-ev-line); }

/* ---------- Hero artwork ---------- */
.gp-ev .gp-ev__hero{ margin: 0 0 clamp(24px,3vw,40px); }
.gp-ev .gp-ev__hero-img{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 2px;
}

/* ---------- Identity ---------- */
.gp-ev .gp-ev__identity{ margin: 0 0 clamp(20px,2.4vw,30px); }
/* The artist name is off-white, not crimson: the accent sampled from the
   artwork (#960b0d / #b8161a) is deep enough that 14px text on the black
   background measured 2.98:1, below WCAG AA. The crimson stays where it has
   real contrast - the CTA fill (8.93:1 with white) and rules. */
.gp-ev .gp-ev__eyebrow{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gp-ev-ink);
}
.gp-ev .gp-ev__eyebrow::after{
  content: "";
  display: block;
  width: 34px;
  margin-top: 10px;
  border-top: 2px solid var(--gp-ev-accent-hi);
}
.gp-ev .gp-ev__title{
  margin: 0;
  font-size: clamp(28px,3.6vw,52px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 18ch;
}
.gp-ev .gp-ev__proposition{
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: clamp(17px,1.5vw,21px);
  line-height: 1.45;
  color: var(--gp-ev-dim);
}

/* ---------- Facts row: typography and thin rules, not pills ---------- */
.gp-ev .gp-ev__facts{
  margin: 0 0 clamp(22px,2.6vw,34px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 clamp(20px,2.4vw,40px);
  border-top: 1px solid var(--gp-ev-line);
}
.gp-ev .gp-ev__fact{
  padding: 14px 0;
  border-bottom: 1px solid var(--gp-ev-line-soft);
}
.gp-ev .gp-ev__fact dt{
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--gp-ev-muted);
}
.gp-ev .gp-ev__fact dd{
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--gp-ev-ink);
}

/* ---------- CTA ---------- */
.gp-ev .gp-ev__cta{ margin: 0 0 clamp(30px,3.4vw,46px); }
.gp-ev .gp-ev__btn{
  display: inline-block;
  padding: 15px 30px;
  border: 0;
  border-radius: 2px;
  background: var(--gp-ev-accent);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color .18s ease;
}
.gp-ev .gp-ev__btn:hover,
.gp-ev .gp-ev__btn:focus{ background: var(--gp-ev-accent-hi); color: #fff; }

/* ---------- Body + rail ---------- */
.gp-ev .gp-ev__layout{
  display: grid;
  /* auto: no empty rail column is reserved when an event has no supporting links */
  grid-template-columns: minmax(0, var(--gp-ev-measure)) auto;
  gap: clamp(28px,3.4vw,64px);
  align-items: start;
  margin: 0 0 clamp(30px,3.4vw,48px);
}
.gp-ev .gp-ev__body{ max-width: var(--gp-ev-measure); }
.gp-ev .gp-ev__body p,
.gp-ev .gp-ev__body li{
  font-size: clamp(17px,1.32vw,19px);
  line-height: 1.68;
  color: var(--gp-ev-dim);
}
.gp-ev .gp-ev__body p{ margin: 0 0 18px; }
.gp-ev .gp-ev__body h2{
  margin: 30px 0 12px;
  font-size: clamp(21px,2vw,26px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.gp-ev .gp-ev__body h3{
  margin: 24px 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.gp-ev .gp-ev__body ul{ margin: 0 0 18px; padding-left: 20px; }
.gp-ev .gp-ev__body li{ margin: 0 0 6px; }
.gp-ev .gp-ev__body strong{ color: var(--gp-ev-ink); }
.gp-ev .gp-ev__body a{ color: var(--gp-ev-ink); }

.gp-ev .gp-ev__rail{
  padding-top: 14px;
  border-top: 1px solid var(--gp-ev-line);
}
.gp-ev .gp-ev__rail-note{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gp-ev-muted);
}
.gp-ev .gp-ev__links{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.gp-ev .gp-ev__links li{ margin: 0 0 8px; }
.gp-ev .gp-ev__links a{
  font-size: 15px;
  color: var(--gp-ev-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--gp-ev-line);
}
.gp-ev .gp-ev__links a:hover{ color: #fff; border-bottom-color: var(--gp-ev-accent-hi); }

/* ---------- Final CTA ---------- */
.gp-ev .gp-ev__final{
  padding-top: clamp(24px,2.8vw,36px);
  border-top: 1px solid var(--gp-ev-line);
}
.gp-ev .gp-ev__final-cta{ margin: 0 0 16px; }
.gp-ev .gp-ev__final-note{
  margin: 0;
  max-width: var(--gp-ev-measure);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gp-ev-muted);
}

/* ---------- Mobile sticky CTA ---------- */
.gp-ev .gp-ev__sticky{ display: none; }

/* ---------- Focus ---------- */
.gp-ev a:focus-visible{
  outline: 2px solid var(--gp-ev-accent-hi);
  outline-offset: 3px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px){
  .gp-ev{ --gp-ev-measure: 520px; }
  .gp-ev .gp-ev__layout{
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
    gap: 32px;
  }
  .gp-ev .gp-ev__title{ max-width: none; }
}

/* ---------- Narrow ---------- */
@media (max-width: 900px){
  .gp-ev .gp-ev__layout{ grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gp-ev .gp-ev__rail{ max-width: var(--gp-ev-measure); }
}

/* ---------- Mobile ---------- */
@media (max-width: 780px){
  /* Reserve the sticky bar's height at the very end of the document so the bar
     never covers the final content OR the global footer.

     This has to sit on the footer, not on body: main.css sets
     html,body{height:100%} and body{overflow-x:clip}, under which a
     body padding-bottom does not extend the scrollable area (verified: the
     document still ended exactly at the footer's bottom edge).

     Scoped twice over: the body class is only present when the bar actually
     renders, and event-detail.css only loads on Event views. main.css and
     footer.php are untouched. */
  body.gp-has-sticky-cta .gp-footer{
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  .gp-ev .gp-ev__facts{ grid-template-columns: 1fr; gap: 0; }
  .gp-ev .gp-ev__body p,
  .gp-ev .gp-ev__body li{ font-size: 17px; line-height: 1.68; }
  .gp-ev .gp-ev__cta .gp-ev__btn,
  .gp-ev .gp-ev__final-cta .gp-ev__btn{ display: block; text-align: center; }

  .gp-ev .gp-ev__sticky{
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(10,10,12,0.96);
    border-top: 1px solid var(--gp-ev-line);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .gp-ev .gp-ev__sticky-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .gp-ev .gp-ev__btn--sticky{
    flex: 1 1 auto;
    padding: 13px 20px;
    font-size: 16px;
    text-align: center;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gp-ev .gp-ev__btn{ transition: none; }
}

/* =====================================================================
   Flagship archive card - contained campaign artwork

   The shared card media box (.gp-event-card-media) is 21/9 on desktop and 16/9
   below 960px, and .gp-featured-media img uses object-fit: cover. The campaign
   banner is 2048x652 (ratio 3.14), so that box crops the artwork title at every
   width. This modifier gives the campaign card the banner's own ratio so the
   whole image is preserved. Only the flagship card carries the modifier; every
   other Event card keeps its normal behaviour and main.css is untouched.
   ===================================================================== */
.gp-event-card .gp-event-card-media.gp-event-card-media--campaign{
  aspect-ratio: 2048 / 652;
  background: #000;
}
.gp-event-card .gp-event-card-media--campaign img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 960px){
  /* Beats the shared 16/9 override at the same specificity via source order. */
  .gp-event-card .gp-event-card-media.gp-event-card-media--campaign{
    aspect-ratio: 2048 / 652;
  }
}