/* ============================================================
   ARCADE COMEDY THEATER — SINGLE EVENT PAGE
   css/event-single.css

   Loaded only on single events, and only when the new page is switched
   on (see arcade_new_event_page_enabled() in functions.php). Kept out of
   style.css deliberately: that file is 200K and every rule in it ships to
   every page, whereas this one has a single template to serve and needs to
   be removable in one line if the page is reverted.

   Every selector is under .arc-event so nothing here can reach the rest of
   the site — including the Divi-built pages this page sits beside.

   Colours and type come from style.css's :root. This page introduces exactly
   one new token (--teal), because the seven show kinds need seven distinct
   chips and the palette had six. Nothing else here invents a value.
   ============================================================ */

.arc-event {
  --teal: #1fd6c4;              /* sketch. The only colour this page adds. */
  --arc-gap: clamp(28px, 4vw, 48px);

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

.arc-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

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

.arc-event__hero {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(36px, 6vw, 76px) 0;
  border-bottom: 4px solid var(--gold);
}

.arc-event__chips { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }

.arc-event__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  /* Titles here run from "Speedrun" to "Laugh Long and Prosper: An Improvised
     Space Adventure", so the size has to survive both. */
  font-size: clamp(2.1rem, 5.5vw, 4.2rem);
  margin: 0 0 14px;
  color: var(--paper);
}

.arc-event__meta {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(244, 236, 221, 0.82);
  margin: 0;
}

.arc-event__past-flag {
  margin: 18px 0 0;
  font-size: 0.95rem;
  color: var(--bulb);
}
.arc-event__past-flag a { color: var(--volt); }

/* ---------- body grid ---------- */

.arc-event__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: var(--arc-gap);
  align-items: start;
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* ---------- poster ---------- */

.arc-event__poster {
  margin: 0 0 28px;
  max-width: 520px;
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* The theme's own riso offset — two flat colour shadows plus a soft ambient
     one. Same treatment the poster cards on /events/ already use. */
  box-shadow: var(--shadow-riso-neutral);
  background: var(--ink);
  line-height: 0;
}
.arc-event__poster img { width: 100%; height: auto; display: block; }

/* ---------- prose ---------- */

.arc-event__prose { font-size: 1.05rem; line-height: 1.75; max-width: 66ch; }
.arc-event__prose p { margin: 0 0 1.1em; }
.arc-event__prose a { color: var(--pink); }

.arc-event__sub {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
  margin: 2em 0 0.6em;
}

.arc-event__notes { margin: 0; padding: 0; list-style: none; }
.arc-event__notes li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 0.7em;
  color: var(--muted);
  font-size: 0.98rem;
}
.arc-event__notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 10px;
  background: var(--pink);
  border-radius: 2px;
  transform: rotate(45deg);
}

.arc-muted { color: var(--muted); }

/* ---------- ticket box ---------- */

.arc-box {
  border: 3px solid var(--ink);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: 24px;
  box-shadow: 6px 6px 0 var(--ink);
}
.arc-box--gold {
  background: var(--bulb);
  /* The gold panel on the mockup carries a dot screen. Same idea, tuned to
     this palette so it reads as texture rather than noise. */
  background-image: radial-gradient(rgba(29, 22, 38, 0.13) 1px, transparent 1.2px);
  background-size: 14px 14px;
}

.arc-eyebrow {
  display: inline-block;
  font-family: var(--script);
  font-size: 1.25rem;
  color: var(--pink);
  margin-bottom: 0.3rem;
  transform: rotate(-1.5deg);
}

.arc-box__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6rem;
  margin: 0 0 14px;
}
.arc-box__note { font-size: 0.85rem; color: var(--ink-80); margin: 14px 0 0; }

.arc-datelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.arc-datelist a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--display);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.arc-datelist a:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.arc-datelist li.is-current a { background: var(--ink); color: var(--paper); }
.arc-datelist li.is-current a small { color: rgba(244, 236, 221, 0.7); }
.arc-datelist__day small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
}
.arc-datelist__time { white-space: nowrap; }

/* ---------- buttons ---------- */

.arc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85em 1.4em;
  border: 3px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.arc-btn:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.arc-btn:active { transform: translate(2px, 2px);   box-shadow: 2px 2px 0 var(--ink); }
.arc-btn--pink  { background: var(--pink); color: #fff; }
.arc-btn--block { width: 100%; margin-top: 18px; }

/* ---------- chips ---------- */

.arc-chip {
  display: inline-flex; align-items: center;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.4em 0.75em;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}
.arc-chip--sm     { font-size: 0.64rem; padding: 0.28em 0.6em; border-width: 1px; }
.arc-chip--pink   { background: var(--pink);    color: #fff; }
.arc-chip--volt   { background: var(--volt);    color: var(--ink); }
.arc-chip--teal   { background: var(--teal);    color: #fff; }
.arc-chip--orange { background: var(--orange);  color: #fff; }
.arc-chip--purple { background: var(--purple);  color: #fff; }
.arc-chip--blue   { background: var(--blue);    color: #fff; }
.arc-chip--gold   { background: var(--bulb);    color: var(--ink); }
.arc-chip--warn   { background: var(--bulb);    color: var(--ink); }
.arc-chip--out    { background: var(--ink);     color: var(--volt); }
/* On the dark hero a white chip would out-shout the title. */
.arc-event__hero .arc-chip--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(244, 236, 221, 0.5);
}
/* A group chip that links to its team page. Stays ghost so the hero keeps its
   restraint, but takes the volt accent and nudges its arrow on hover to read
   as the one chip you can click. */
.arc-event__hero .arc-chip--team {
  gap: 0.35em;
  text-decoration: none;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.arc-event__hero .arc-chip--team:hover { color: var(--volt); border-color: var(--volt); }
.arc-event__hero .arc-chip--team .arc-chip__go { opacity: 0.75; transition: transform 0.14s ease; }
.arc-event__hero .arc-chip--team:hover .arc-chip__go { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .arc-event__hero .arc-chip--team,
  .arc-event__hero .arc-chip--team .arc-chip__go { transition: none; }
  .arc-event__hero .arc-chip--team:hover .arc-chip__go { transform: none; }
}

/* ---------- more like this ---------- */

.arc-event__more { margin-top: 32px; display: block; }
.arc-stubs { display: grid; gap: 12px; margin-top: 10px; }

.arc-stub {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.arc-stub:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--pink); }

.arc-stub__time {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.05;
  text-align: center;
  border-right: 2px dashed var(--ink-12);
  padding-right: 10px;
}
.arc-stub__time small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.arc-stub__body { min-width: 0; }
.arc-stub__title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  /* Two lines, then ellipsis — some of these titles are a sentence long and a
     stub that grows to four lines breaks the rhythm of the column. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arc-stub__meta { display: block; margin-top: 5px; }
.arc-stub__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  background: var(--bulb);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 0.15em 0.45em;
  white-space: nowrap;
}

/* ---------- past events ---------- */

.arc-event--past .arc-event__poster { filter: saturate(0.45); }

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

@media (max-width: 980px) {
  .arc-event__body { grid-template-columns: 1fr; }
  /* Tickets above the fold on a phone: the sidebar is the point of the page,
     and stacking it under a 300-word blurb buries it. */
  .arc-event__aside { order: -1; }
  .arc-event__poster { max-width: none; }
}

@media (max-width: 520px) {
  .arc-box { padding: 18px; }
  .arc-stub { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; }
  .arc-stub__price { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-btn, .arc-stub, .arc-datelist a { transition: none; }
  .arc-btn:hover, .arc-stub:hover, .arc-datelist a:hover { transform: none; }
}

/* ---------- hero mark (Page headers → logo) ---------- */
.arc-event__hero .arc-hero__in { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.arc-event__hero .arc-hero__logo { width: clamp(58px, 6.5vw, 92px); height: auto; flex: none; }
.arc-event__hero .arc-hero__copy { min-width: 0; }
@media (max-width: 820px) {
  .arc-event__hero .arc-hero__in { flex-direction: column; align-items: flex-start; gap: 16px; }
}