/* Source: baseline/events.html inline <style> blocks, verbatim, in document order. */

/* ==========================================================================
   TGN — Events Calendar (/events)
   Page-unique styles only. Everything is scoped under .tgn-events-page so it
   can be dropped into Beaver Builder without colliding with the parent theme.

   Tokens are re-declared on the container using the CANONICAL names from
   assets/css/tgn-tokens.css. Every value below is byte-identical to that
   file, so this page renders correctly standalone AND composes cleanly when
   the site stylesheet is already loaded.
   ========================================================================== */


.tgn-events-page {
  /* Brand */
  --tgn-ink: #171411;
  --tgn-brick: #CE4012;
  --tgn-cta: #FF7901;
  --tgn-amber: #F9C925;
  --tgn-accent-minor: #CC2B28;
  /* Tints */
  --tgn-blue-tint: #DCE6F0;
  --tgn-amber-tint: #FCF0CE;
  --tgn-blush: #FBEDE8;
  /* Parchment scale */
  --tgn-parchment-50: #F9F7F6;
  --tgn-parchment-100: #EBE5E0;
  --tgn-parchment-200: #CCBEB3;
  --tgn-parchment-300: #A38B75;
  --tgn-parchment-400: #6B5847;
  --tgn-parchment-500: #2E261F;
  --tgn-white: #FFFFFF;
  /* Radii + layout */
  --tgn-radius-pill: 100px;
  --tgn-radius-card: 20px;
  --tgn-radius-badge: 999px;
  --tgn-container-max: 1280px;
  /* Type */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  background: var(--tgn-white);
  color: var(--tgn-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

.tgn-events-page h1,
.tgn-events-page h2,
.tgn-events-page p { margin: 0; padding: 0; }
.tgn-events-page a { color: inherit; text-decoration: none; }
.tgn-events-page a:hover { color: var(--tgn-brick); }
.tgn-events-page button { font-family: var(--font-body); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.tgn-ev-hero {
  background: var(--tgn-parchment-50);
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 104px);
}
.tgn-ev-hero__inner { max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; }
.tgn-ev-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.08;
}
.tgn-events-page .tgn-ev-hero__lede {
  margin: clamp(20px, 3vw, 28px) auto 0;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.7;
  color: var(--tgn-parchment-400);
  text-align: center;
}

/* ── Calendar section ─────────────────────────────────────────────────── */
.tgn-ev-section {
  background: var(--tgn-white);
  padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 132px);
}
.tgn-ev-module {
  position: relative;
  max-width: var(--tgn-container-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.tgn-ev-eyebrow {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--tgn-brick);
}
.tgn-ev-head {
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.tgn-ev-month {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-align: left;
}
.tgn-ev-nav { display: flex; align-items: center; gap: 10px; }
.tgn-ev-navbtn {
  width: 46px;
  height: 46px;
  border-radius: var(--tgn-radius-badge);
  background: transparent;
  border: 1.5px solid var(--tgn-parchment-200);
  color: var(--tgn-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.tgn-ev-navbtn:hover,
.tgn-ev-navbtn:focus-visible { border-color: var(--tgn-brick); color: var(--tgn-brick); }
.tgn-ev-navbtn--prev svg { transform: scaleX(-1); }

/* ── List ⇄ calendar view toggle ──────────────────────────────────────── */
/* List is the default. JS adds .tgn-ev-module--calendar for calendar view.
   The rules below only hide; render() still owns #tgn-ev-list's hidden
   attribute for the empty state. */
.tgn-ev-viewtoggle {
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tgn-ev-viewbtn {
  min-width: 46px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--tgn-radius-badge);
  background: transparent;
  border: 1.5px solid var(--tgn-parchment-200);
  color: var(--tgn-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.tgn-ev-viewbtn:hover { border-color: var(--tgn-brick); color: var(--tgn-brick-label); }
.tgn-ev-viewbtn[aria-pressed="true"] {
  background: var(--tgn-ink);
  border-color: var(--tgn-ink);
  color: var(--tgn-white);
}
.tgn-ev-viewbtn:focus-visible {
  outline: 2px solid var(--tgn-brick);
  outline-offset: 2px;
}
.tgn-ev-module:not(.tgn-ev-module--calendar) .tgn-ev-head,
.tgn-ev-module:not(.tgn-ev-module--calendar) .tgn-ev-viewport,
.tgn-ev-module--calendar .tgn-ev-list { display: none; }

/* ── Month grid ⇄ agenda swap (CSS only — the JS feeds both) ──────────── */
/* R1: the swap was at 520px, but the seven-column month grid does not fit
   until roughly 700px. Between 521 and ~700 the grid overflowed the document
   (measured +119px at 521, +43 at 600, +4 at 641). Moved to the ladder's md
   floor so the agenda carries the whole xs/sm band and the grid only appears
   once it fits. Retires the off-ladder 520 value. */
.tgn-ev-month-grid { display: block; }
.tgn-ev-agenda { display: none; }
@media (max-width: 767px) {
  .tgn-ev-month-grid { display: none; }
  .tgn-ev-agenda { display: block; }
}

/* Month-change fade. JS toggles .is-fading; reduced motion drops it. */
.tgn-ev-viewport {
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
}
.tgn-ev-viewport.is-fading { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) {
  .tgn-ev-viewport { transition: none; }
}

.tgn-ev-grid { margin-top: 26px; }
.tgn-ev-daylabels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.tgn-ev-daylabel {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tgn-parchment-400);
  text-align: left;
  padding-left: 4px;
}
.tgn-ev-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.tgn-ev-cell {
  position: relative;
  z-index: 0;
  min-height: 130px;
  border-radius: 12px;
  background: var(--tgn-parchment-100);
  border: 1.5px solid transparent;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tgn-ev-cell--adjacent { background: var(--tgn-parchment-50); }
.tgn-ev-cell--today { border-color: var(--tgn-brick); }
.tgn-ev-cell__num {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--tgn-ink);
}
.tgn-ev-cell--adjacent .tgn-ev-cell__num { color: var(--tgn-parchment-300); }
.tgn-ev-cell--today .tgn-ev-cell__num { font-weight: 700; }

/* ── Event pills (single-day) ────────────────────────────────────────── */
.tgn-ev-pill {
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 600;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--tgn-parchment-50);
  border: 1px solid var(--tgn-parchment-200);
  color: var(--tgn-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* Single-line truncation, not a 2-line clamp: the clamp fought with this
   cell's flex-column layout and could leak a sliver of a third line rather
   than cutting cleanly. A pill's job is just to signal "something's here" —
   the full title already lives one interaction away in the popup, so there's
   no need to fit more than a fragment on the grid itself. This also holds up
   at any cell width, since it's just text-overflow rather than a line count
   that has to land exactly on a 2-line boundary. */
.tgn-ev-pill--regional { background: rgba(206,64,18,.12); border-color: rgba(206,64,18,.35); color: var(--tgn-brick); }
.tgn-ev-pill--online { background: rgba(249,201,37,.30); border-color: rgba(249,201,37,.55); }
.tgn-ev-pill--network { background: var(--tgn-blue-tint); color: var(--tgn-ink); }
.tgn-ev-pill__more { font-size: 10px; color: var(--tgn-parchment-400); padding: 0 6px; }

/* ── Multi-day spanning bars ──────────────────────────────────────────── */
.tgn-ev-bar {
  position: relative;
  z-index: 1;
  align-self: start;
  margin-top: 29px; /* = cell padding-top (10px) + day-number line height at
                        line-height:1 (15px) + cell's flex gap (4px) — the
                        exact point a single-day pill begins inside a sibling
                        cell. If any of those three values change later,
                        recompute this number the same way rather than
                        eyeballing a replacement. */
  height: 22px; /* was 26px — brought in line with a single-day pill's
                    actual rendered height (padding 4px+4px + line-height
                    13.65px ≈ 22px), so a bar and a pill in adjacent cells
                    read as the same weight, not just the same starting
                    position. */
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.tgn-ev-bar--regional { background: var(--tgn-brick); color: var(--tgn-parchment-50); }
.tgn-ev-bar--online { background: var(--tgn-amber); color: var(--tgn-ink); }
.tgn-ev-bar--network { background: var(--tgn-blue-tint); color: var(--tgn-ink); }

/* ── Event detail popup ───────────────────────────────────────────────── */
.tgn-ev-popup {
  position: absolute;
  z-index: 10;
  width: 280px;
  background: var(--tgn-white);
  border: 1.5px solid var(--tgn-parchment-200);
  border-radius: var(--tgn-radius-card);
  padding: 20px;
}
.tgn-ev-popup__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 10px;
}
.tgn-ev-popup__where { font-size: 13px; color: var(--tgn-parchment-400); margin-top: 6px; }
.tgn-ev-popup__summary { font-size: 14px; line-height: 1.6; margin-top: 8px; }
.tgn-ev-popup__cta { margin-top: 14px; }

.tgn-ev-agenda__list { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.tgn-ev-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tgn-parchment-100);
  border: 1.5px solid transparent;
}
.tgn-ev-row__pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; margin-top: 4px; }
.tgn-ev-row--today { border-color: var(--tgn-brick); }
.tgn-ev-row__weekday {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tgn-parchment-400);
  width: 42px;
  flex: none;
}
.tgn-ev-row__day {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  width: 34px;
  flex: none;
}
.tgn-ev-row__status { font-size: 14px; color: var(--tgn-parchment-400); flex: 1; }
.tgn-ev-row__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tgn-brick);
  flex: none;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.tgn-ev-empty {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 660px;
  background: var(--tgn-white);
  border: 1px solid var(--tgn-parchment-200);
  border-radius: var(--tgn-radius-card);
  padding: clamp(26px, 3.4vw, 38px) clamp(24px, 3.4vw, 44px);
  text-align: center;
}
.tgn-ev-empty p { font-size: 17px; line-height: 1.7; color: var(--tgn-ink); }

/* ── Event cards ──────────────────────────────────────────────────────── */
.tgn-ev-list {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tgn-ev-card {
  background: var(--tgn-parchment-100);
  border-radius: var(--tgn-radius-card);
  padding: clamp(20px, 2.4vw, 26px);
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 24px;
}
@media (max-width: 767px) {
  .tgn-ev-card { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
}
.tgn-ev-card__date { flex: none; min-width: 72px; text-align: center; }
.tgn-ev-card__mon {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tgn-parchment-400);
}
.tgn-ev-card__day {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--tgn-brick);
}
.tgn-ev-card__body { flex: 1; min-width: 240px; }
.tgn-ev-card__chiprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tgn-ev-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--tgn-radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--tgn-parchment-100);
  border: 1px solid var(--tgn-parchment-200);
  color: var(--tgn-ink);
}
.tgn-ev-chip svg { width: 16px; height: 16px; }
.tgn-ev-chip--regional {
  background: rgba(206, 64, 18, .12);
  border-color: rgba(206, 64, 18, .35);
  color: var(--tgn-brick);
}
.tgn-ev-chip--online {
  background: rgba(249, 201, 37, .30);
  border-color: rgba(249, 201, 37, .55);
  color: var(--tgn-ink);
}
.tgn-ev-chip--network {
  background: var(--tgn-blue-tint);
  color: var(--tgn-ink);
}
.tgn-ev-card__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 12px;
}
.tgn-ev-card__where { font-size: 14.5px; color: var(--tgn-parchment-400); margin-top: 6px; }
.tgn-ev-card__summary { font-size: 15px; line-height: 1.7; margin-top: 8px; max-width: 60ch; }
.tgn-ev-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tgn-radius-pill);
  border: 1.5px solid var(--tgn-parchment-300);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tgn-ink);
  white-space: nowrap;
  transition: border-color 150ms ease;
}
.tgn-ev-card__cta:hover,
.tgn-ev-card__cta:focus-visible { border-color: var(--tgn-brick); }


body{margin:0;background:var(--tgn-parchment-50);color:var(--tgn-ink);font-family:var(--font-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,p,ul,li{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
a:hover{color:var(--tgn-brick)}
button{font-family:var(--font-body);cursor:pointer;border:0}
.hm-h10:hover{color:var(--tgn-parchment-50) !important;border-bottom:1px solid var(--tgn-brick) !important}