/* Copied unchanged from the Contentful block 2hXCn1verYPNfKt02hhtZc on Nov 13 2026. Do not edit in place: upload a new version. */
/* ═══════════════════════════════════════════════════════════
     TRACKERS UNIVERSAL U4: COMMUNITY EVENT ADD-ON CSS  v1.8
     Link only on community event pages (Tracktoberfest, Open House).
     Needs U1. Page scope: <div class="tc tc-fest">.
     v1.2: adds .feat-card, the full-width featured event tile used on the
     community hub pages (photo left, copy right; stacks on phones).
     v1.4: feat-card photo fills its column (cover crop, centered). Use a
     plain photo with no baked-in text so the crop never cuts off words.
     v1.5: no tape strip on the feat-card (it sat over the photo).
     v1.6: countdown badges. Put data-event-date="YYYY-MM-DD" on any
     .feat-card or .activity-card and a gold "In N Days" badge appears on
     its photo (Today! / Tomorrow!). Past dates show no badge. For a
     recurring event use data-event-rule="second-thursday" (next one is
     computed). Also adds .events-h2 for the "Upcoming" header.
     v1.7: feat-card copy column tightened so the tile sits shorter and the
     photo reads wider. Countdown badge: one dark gold starburst shape,
     white text, drop shadow. Turns red inside a week.
     v1.8: feat-card hover matches the activity cards (lift, shadow, photo zoom).
═══════════════════════════════════════════════════════════ */

/* Tape under headings replaces the accent bar */
.tc-fest h2::after { display: none; }
.tc-fest h2 .tape-bar {
  display: block; position: absolute; left: 8%; right: 8%; bottom: 2px; height: 14px;
  background: var(--tape); border-radius: 2px; z-index: -1; transform: rotate(-.6deg);
}

/* Taped, tilted chips and cards */
.tc-fest .date-chip { transform: rotate(-1deg); }
.tc-fest .date-chip:nth-child(2) { transform: rotate(1.2deg); }
.tc-fest .date-chip:nth-child(3) { transform: rotate(-.8deg); }
.tc-fest .date-chip::before,
.tc-fest .detail-card::before,
.tc-fest .schedule-card::before {
  content: ""; position: absolute; top: -9px; left: 50%;
  width: 64px; height: 16px; margin-left: -32px;
  background: var(--tape); opacity: .9; border-radius: 2px; transform: rotate(-2deg);
}
.tc-fest .detail-card::before,
.tc-fest .schedule-card::before { top: -11px; width: 96px; height: 20px; margin-left: -48px; }
.tc-fest .detail-card { transform: rotate(-.4deg); }
.tc-fest .detail-card:nth-child(2) { transform: rotate(.4deg); }
.tc-fest .detail-card:nth-child(2)::before { transform: rotate(2deg); }

/* Pennant bunting */
.tc-fest .bunting { display: flex; justify-content: center; gap: 4px; margin: 0 auto 1.25rem; max-width: 480px; }
.tc-fest .bunting span { width: 26px; height: 32px; display: inline-block; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tc-fest .bunting span:nth-child(4n+1) { background: var(--g-forest); }
.tc-fest .bunting span:nth-child(4n+2) { background: var(--g-mariner); }
.tc-fest .bunting span:nth-child(4n+3) { background: var(--gold-light); }
.tc-fest .bunting span:nth-child(4n)   { background: var(--g-artisan); }

/* Festival plan: numbered step circles */
.tc-fest .step-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 1.25rem; max-width: 1100px; margin: 2.75rem auto 0;
}
.tc-fest .step { flex: 1 1 200px; max-width: 260px; text-align: center; }
.tc-fest .step .step-circle {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto .6rem; color: #fff; font-family: var(--display); font-weight: 900; font-size: 1.5rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.tc-fest .step:nth-child(1) .step-circle { background: var(--g-forest); }
.tc-fest .step:nth-child(2) .step-circle { background: var(--g-mariner); }
.tc-fest .step:nth-child(3) .step-circle { background: var(--gold); }
.tc-fest .step:nth-child(4) .step-circle { background: var(--g-artisan); }
.tc-fest .step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.tc-fest .step p  { font-size: .92rem; line-height: 1.55; margin: 0; }

/* Guild chips */
.tc-fest .guild-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1000px; margin: 1.25rem auto 0; }
@media (max-width: 900px) { .tc-fest .guild-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tc-fest .guild-row { grid-template-columns: 1fr; } }
.tc-fest .guild-chip {
  background: #fff; border: 1px solid var(--line); border-radius: .85rem;
  padding: 1rem .9rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s;
}
.tc-fest .guild-chip:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.tc-fest .guild-chip h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.tc-fest .guild-chip p { font-size: .88rem; line-height: 1.5; margin: 0; }
.tc-fest .guild-chip.g-rangers     { border-top: 4px solid var(--g-forest); }
.tc-fest .guild-chip.g-rangers h3  { color: var(--g-forest); }
.tc-fest .guild-chip.g-mariners    { border-top: 4px solid var(--g-mariner); }
.tc-fest .guild-chip.g-mariners h3 { color: var(--g-mariner); }
.tc-fest .guild-chip.g-wilders     { border-top: 4px solid var(--g-wilder); }
.tc-fest .guild-chip.g-wilders h3  { color: var(--g-wilder); }
.tc-fest .guild-chip.g-artisans    { border-top: 4px solid var(--g-artisan); }
.tc-fest .guild-chip.g-artisans h3 { color: var(--g-artisan); }

/* Evening schedule (taped timeline) */
.tc-fest .schedule-card {
  max-width: 760px; margin: 1.5rem auto 0; position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: 1rem;
  padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 2px 6px rgba(0,0,0,.08);
  text-align: left; transform: rotate(-.4deg);
}
.tc-fest .sched-cols { display: flex; flex-wrap: wrap; gap: 0 2.5rem; }
.tc-fest .sched-cols ul { flex: 1 1 260px; }
.tc-fest .schedule-card ul { list-style: none; margin: 0; padding: 0; }
.tc-fest .schedule-card li {
  display: flex; align-items: baseline; gap: .85rem; padding: .5rem 0;
  border-bottom: 1px dashed var(--line); font-size: 1rem; color: var(--mute); line-height: 1.5;
}
.tc-fest .schedule-card li:last-child { border-bottom: 0; }
.tc-fest .schedule-card li .sched-time { flex-shrink: 0; min-width: 5.2rem; font-family: var(--display); font-weight: 900; color: var(--green); }

/* RSVP iframe wrapper */
.tc-fest .form-wrap { max-width: 760px; margin: 1.25rem auto 0; }
.tc-fest .form-wrap iframe { width: 100%; border: 0; display: block; background: #fff; border-radius: .75rem; }

/* Featured event tile (community hub): full width, photo left, copy right.
   Photo fills its column edge to edge (cover crop, centered). Use a photo with no text in it. No tape.
   Copy column is kept tight so the tile stays short and the photo reads wide.
   Hover matches the activity cards: lift, deeper shadow, photo zooms a touch. */
.tc-fest .feat-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  max-width: 1100px; margin: 2rem auto 0; text-align: left;
  background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--gold);
  border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.1);
  transform: rotate(-.3deg); transition: transform .2s, box-shadow .2s;
}
.tc-fest .feat-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.tc-fest .feat-img { position: relative; min-height: 260px; background: #ddd; overflow: hidden; }
.tc-fest .feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .3s; }
.tc-fest .feat-card:hover .feat-img img { transform: scale(1.04); }
.tc-fest .feat-body { padding: 1.25rem 1.6rem 1.3rem; display: flex; flex-direction: column; justify-content: center; }
.tc-fest .feat-eyebrow {
  display: inline-block; align-self: flex-start; font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--g-artisan);
  padding: .28rem .7rem; border-radius: 999px; margin-bottom: .55rem;
}
.tc-fest .feat-body h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.1; margin-bottom: .25rem; }
.tc-fest .feat-when { font-family: var(--display); font-weight: 800; color: var(--green); font-size: .92rem; margin-bottom: .55rem; }
.tc-fest .feat-body p { color: var(--mute); font-size: .95rem; line-height: 1.5; margin-bottom: .7rem; }
.tc-fest .feat-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .15rem; }
.tc-fest .feat-actions .free-badge { margin-bottom: 0; }
@media (max-width: 768px) {
  .tc-fest .feat-card { grid-template-columns: 1fr; transform: none; }
  .tc-fest .feat-card:hover { transform: none; }
  .tc-fest .feat-img { min-height: 0; aspect-ratio: 16 / 9; }
  .tc-fest .feat-body { padding: 1.4rem 1.25rem 1.5rem; }
}

/* "Upcoming Community Events" header above the tiles */
.tc-fest .events-h2 { margin-top: 2.75rem; }

/* Countdown badge, added by the script below to tiles with data-event-date / data-event-rule.
   One dark gold shape: rounded pill (::after) with starburst points (::before) in the same color,
   white text, drop shadow on the whole thing. Pseudo-elements sit at z-index -1 so the text stays on top. */
.tc-fest .activity-card-image { position: relative; }
.tc-fest .days-badge {
  position: absolute; top: 1.1rem; left: 1.1rem; z-index: 3;
  color: #fff; font-family: var(--display); font-weight: 900;
  font-size: .9rem; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  padding: .5rem .85rem; transform: rotate(-4deg); pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.tc-fest .days-badge::before {
  content: ""; position: absolute; z-index: -1; inset: -11px -14px;
  background: var(--gold);
  clip-path: polygon(50.0% 0.0%, 56.4% 9.5%, 65.5% 2.4%, 68.6% 13.5%, 79.4% 9.5%, 79.0% 21.0%, 90.5% 20.6%, 86.5% 31.4%, 97.6% 34.5%, 90.5% 43.6%, 100.0% 50.0%, 90.5% 56.4%, 97.6% 65.5%, 86.5% 68.6%, 90.5% 79.4%, 79.0% 79.0%, 79.4% 90.5%, 68.6% 86.5%, 65.5% 97.6%, 56.4% 90.5%, 50.0% 100.0%, 43.6% 90.5%, 34.5% 97.6%, 31.4% 86.5%, 20.6% 90.5%, 21.0% 79.0%, 9.5% 79.4%, 13.5% 68.6%, 2.4% 65.5%, 9.5% 56.4%, 0.0% 50.0%, 9.5% 43.6%, 2.4% 34.5%, 13.5% 31.4%, 9.5% 20.6%, 21.0% 21.0%, 20.6% 9.5%, 31.4% 13.5%, 34.5% 2.4%, 43.6% 9.5%);
}
.tc-fest .days-badge::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: var(--gold); border-radius: 999px;
}
.tc-fest .days-badge.is-soon::before,
.tc-fest .days-badge.is-soon::after { background: var(--g-artisan); }
.tc-fest .feat-card .days-badge { top: 1.4rem; left: 1.4rem; font-size: 1.05rem; padding: .6rem 1rem; }
.tc-fest .feat-card .days-badge::before { inset: -14px -18px; }

@media (hover: none) {
  .tc-fest .guild-chip:hover { transform: none; }
  .tc-fest .feat-card:hover { transform: rotate(-.3deg); }
  .tc-fest .feat-card:hover .feat-img img { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tc-fest .guild-chip, .tc-fest .feat-card, .tc-fest .feat-img img { transition: none; } }