/* =================================================
   COMPONENTS: event cards, filter key, badges,
   buttons, flip card, promo cards, contact form,
   footer. Reusable pieces shared across pages.
   ================================================= */

.event-card { scroll-margin-top: 1rem; }

/* -------------------------------------------------
   ANNOUNCEMENT BANNER (marquee under the navbar)
   Toggle + content live in _data/banner.js; markup in banner.njk.
------------------------------------------------- */

.site-banner {
  position: relative;
  background: var(--ink);
  color: #fff;
  border-bottom: 2px solid rgba(26, 26, 26, 0.2);
  overflow: hidden;
  padding: 0.5rem 0;
}

/* Clips the marquee and fades both edges so items slide in/out softly rather
   than popping at the hard edge of the strip. */
.banner-viewport {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

/* Two identical tracks sit side by side and the pair slides left by exactly one
   track width, then loops, so the content scrolls forever with no visible seam. */
.banner-marquee {
  display: flex;
  width: max-content;
  animation: banner-scroll 55s linear infinite;
}

.banner-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

@keyframes banner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause when the visitor hovers, so they can read and click an item. */
.site-banner:hover .banner-marquee {
  animation-play-state: paused;
}

.banner-lead {
  display: inline-flex;
  align-items: center;
  margin: 0 1.1rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Outlined rather than a solid yellow fill, to keep the strip restrained. */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
}

.banner-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a.banner-item:hover {
  opacity: 0.7;
}

/* Faint divider before each item (not the first in a track), so messages and
   events read as separate beats without extra markup. */
.banner-item + .banner-item::before {
  content: "";
  width: 1px;
  height: 0.85rem;
  margin-right: 1.1rem;
  margin-left: -0.1rem;
  background: rgba(255, 255, 255, 0.25);
}

/* The event name carries the type colour as a background highlight behind the
   text, instead of a separate dot. One restrained splash of colour per item. */
.banner-item-name {
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  color: var(--ink);
}

.banner-event.event-type-show     .banner-item-name { background: var(--yellow); }
.banner-event.event-type-jam       .banner-item-name { background: var(--green); }
.banner-event.event-type-workshop  .banner-item-name { background: var(--blue); color: #fff; }

.banner-item-date {
  font-weight: 600;
  opacity: 0.7;
}

.banner-message {
  font-style: italic;
  opacity: 0.95;
}

/* Roomier on desktop: larger text, more breathing room, and a relaxed scroll. */
@media (min-width: 900px) {
  .site-banner { padding: 0.7rem 0; }
  .banner-item { font-size: 0.95rem; margin: 0 1.5rem; }
  .banner-item + .banner-item::before { margin-right: 1.5rem; }
  .banner-lead { font-size: 0.72rem; margin: 0 1.5rem; }
  .banner-marquee { animation-duration: 70s; }
}

/* Smaller and tighter on phones so it doesn't dominate the viewport. A much
   longer duration here: narrow screens show fewer items at once, so the same
   travel reads as faster. Slow it right down. */
@media (max-width: 600px) {
  .banner-item,
  .banner-lead { margin: 0 0.7rem; }
  .banner-item { font-size: 0.78rem; gap: 0.3rem; }
  .banner-lead { font-size: 0.62rem; padding: 0.12rem 0.5rem; }
  .banner-marquee { animation-duration: 75s; }
}

/* Honour reduced-motion: stop the scroll and let the strip scroll manually. */
@media (prefers-reduced-motion: reduce) {
  .banner-marquee {
    animation: none;
    overflow-x: auto;
  }
  .banner-viewport {
    -webkit-mask: none;
    mask: none;
  }
  /* The duplicate track is only for the seamless loop; hide it when static. */
  .banner-track[aria-hidden="true"] {
    display: none;
  }
}

/* -------------------------------------------------
   EVENT CARDS
------------------------------------------------- */

.event-card {
  position: relative;
  border: var(--card-border);
  padding: 0;
  border-radius: 0;
  margin-bottom: 1.6rem;
  background: var(--card-bg-vert);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  box-shadow: var(--card-shadow);
}

/* Whole-card tap target: the title link's ::before covers the card so a tap
   anywhere opens the event detail page (great on phones, where the poster is
   the obvious thing to tap). Interactive children (venue link, buttons) raise
   themselves above it below, so they keep their own taps. */
.event-card-stretch {
  color: inherit;
  text-decoration: none;
}

.event-card-stretch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keep the real controls clickable above the stretched overlay. */
.event-card .event-venue-link,
.event-card .event-buttons {
  position: relative;
  z-index: 2;
}

.event-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* The .event-flip wrapper carries the bottom margin; the card fills it. */
.event-flip > .event-card {
  margin-bottom: 0;
}

.event-card-body {
  padding: 1.3rem 1.5rem 1.4rem;
}

@media (max-width: 480px) {
  .event-card-body {
    padding: 1rem 1.1rem 1.2rem;
  }
}

/* Event list. One column on phones; two on desktop so the 16:9 posters sit at
   a natural size instead of one giant stack. */
.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

@media (min-width: 720px) {
  .event-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

/* Time buckets ("This week" / "Next week" / "Coming up"). Splits the single
   long grid into dated sections so the page scans instead of sprawling. */
.event-bucket + .event-bucket {
  margin-top: 2.6rem;
}

.event-bucket-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1.1rem;
  line-height: 1.1;
  display: inline-block;
  position: relative;
  /* Hand-drawn highlighter swipe, same motif as .section-heading. */
  background-image: linear-gradient(transparent 58%, var(--swipe, rgba(245, 196, 0, 0.55)) 58%, var(--swipe, rgba(245, 196, 0, 0.55)) 92%, transparent 92%);
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.15em 0.1em 0;
}

.event-bucket:nth-of-type(3n+1) .event-bucket-heading { --swipe: rgba(245, 196, 0, 0.55); }
.event-bucket:nth-of-type(3n+2) .event-bucket-heading { --swipe: rgba(46, 204, 113, 0.45); }
.event-bucket:nth-of-type(3n+3) .event-bucket-heading { --swipe: rgba(37, 99, 235, 0.30); }

@media (min-width: 900px) {
  .event-bucket-heading { font-size: 1.4rem; }
}

/* Closing link below the grid: a quiet pointer toward past/recurring formats. */
.events-more {
  margin: 2.2rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: #777;
}

.events-more a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(37, 99, 235, 0.25);
  transition: border-color 0.15s ease;
}

.events-more a:hover {
  border-bottom-color: var(--blue);
}

/* -------------------------------------------------
   EMPTY / WARNING STATES
------------------------------------------------- */

.empty-state {
  text-align: center;
  color: var(--text-soft);
  font-size: 1.1rem;
  margin: 4rem 0;
  padding: 2.5rem;
  background: var(--surface);
  border: 1.5px dashed var(--border-soft);
}

.empty-state h2 {
  color: var(--ink);
  margin-bottom: 0.5rem;
}

/* Action row inside the empty-state: centred so it sits under the message. */
.empty-state-cta {
  justify-content: center;
  margin-top: 1.4rem;
}

.warning {
  font-size: 0.88rem;
  color: #999;
  margin-top: 0.8rem;
}

.filter-empty {
  text-align: center;
  color: var(--text-soft);
  font-size: 1rem;
  margin: 1rem 0 2rem;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1.5px dashed var(--border-soft);
}

.filter-empty h2 {
  color: var(--ink);
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.filter-empty p {
  margin: 0;
  font-size: 0.9rem;
}

/* -------------------------------------------------
   EVENT KEY / FILTERS
------------------------------------------------- */

.event-key {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 1.8rem;
  flex-wrap: wrap;
}

.event-key-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--card-bg);
  border: var(--card-border);
  padding: 0.55rem 0.9rem;
  flex: 1;
  min-width: 140px;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

button.event-key-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 196, 0, 0.2);
  border-color: var(--yellow);
  background: linear-gradient(135deg, #fffdfb 0%, #fffaf5 100%);
}

button.event-key-item[aria-pressed="true"] {
  border-color: var(--yellow);
  background: var(--pill-yellow);
  color: var(--ink);
  font-weight: 600;
}

button.event-key-item[aria-pressed="true"] p {
  color: var(--ink);
}

.event-key-item strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.event-key-item p {
  margin: 0;
  font-size: 0.75rem;
  color: #666;
  line-height: 1.3;
}

.event-key-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}

.dot-show     { background: var(--yellow); }
.dot-jam      { background: var(--green); }
.dot-workshop { background: var(--blue); }

.event-key-clear {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--border-soft);
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  align-self: stretch;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.event-key-clear:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: #fafafa;
}

.event-key-clear span {
  font-size: 0.85rem;
  line-height: 1;
}

.events-root.filter-show     .event-flip:not(.event-type-show),
.events-root.filter-jam      .event-flip:not(.event-type-jam),
.events-root.filter-workshop .event-flip:not(.event-type-workshop) {
  display: none;
}

/* When a type filter is active, hide whole time buckets that hold none of that
   type so we never strand a "Next week" heading above an empty grid. */
.events-root.filter-show     .event-bucket:not(:has(.event-flip.event-type-show)),
.events-root.filter-jam      .event-bucket:not(:has(.event-flip.event-type-jam)),
.events-root.filter-workshop .event-bucket:not(:has(.event-flip.event-type-workshop)) {
  display: none;
}

/* -------------------------------------------------
   EVENT TYPE BADGE + STRIP
------------------------------------------------- */

.event-type-show     { border-top: 4px solid var(--yellow); }
.event-type-jam      { border-top: 4px solid var(--green); }
.event-type-workshop { border-top: 4px solid var(--blue); }

/* Format cards (library / festivals / home) carry the type class for the badge
   colour, but their poster sits flush at the top, so the 4px accent bar above
   would read as a stray line. The type badge in the body already conveys the
   type, so drop the bar here. */
.about-show-card.event-type-show,
.about-show-card.event-type-jam,
.about-show-card.event-type-workshop {
  border-top: none;
}

.event-type-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.55rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  transform: rotate(-2deg);
}

.event-type-show     .event-type-badge { color: #c9a100; }
.event-type-jam      .event-type-badge { color: #1faa58; }
.event-type-workshop .event-type-badge { color: var(--blue); }

/* -------------------------------------------------
   EVENT IMAGE (POSTER)
------------------------------------------------- */

.event-image {
  position: relative;
  width: 100%;
  background: #f0f0f0;
  overflow: hidden;
  line-height: 0;
}

.event-image img {
  width: 100%;
  height: auto;
  /* Show the whole poster instead of cropping a tall one. The generous cap
     only kicks in for unusually long images. */
  max-height: 720px;
  object-fit: contain;
  display: block;
  transition: transform 0.35s ease;
}

.event-image img:not([width]) {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.event-card:hover .event-image img {
  transform: scale(1.025);
}

@media (max-width: 480px) {
  .event-image img {
    max-height: 520px;
  }
}

/* -------------------------------------------------
   EVENT TEXT
------------------------------------------------- */

.event-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  line-height: 1.2;
  color: var(--ink);
}

@media (min-width: 900px) {
  .event-title { font-size: 1.65rem; }
}

@media (min-width: 1200px) {
  .event-title { font-size: 1.8rem; }
}

/* Prominent date block: a calendar tile (weekday / day number / month) paired
   with the full date and time+venue line. The tile borrows the event-type
   accent so the date reads as the card's anchor, not an afterthought. */
.event-when {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.event-when-cal {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  padding: 0.35rem 0.45rem 0.5rem;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--when-accent, var(--yellow));
  line-height: 1;
}

.event-when-dow {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--when-accent-deep, var(--ink));
}

.event-when-day {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0.05rem 0;
}

.event-when-mon {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.event-when-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
}

.event-when-date {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

/* Time given the same weight as the date: an accent-colored chip with a clock
   glyph so the start time reads at a glance, not buried in the venue line. */
.event-when-time {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--when-accent-deep, var(--ink));
  background: var(--when-tint, #fbf6e0);
  border: 1.5px solid var(--when-accent, var(--yellow));
  padding: 0.12rem 0.5rem;
  line-height: 1.25;
}

.event-when-time::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  background: currentColor;
  /* Inline clock face. mask keeps it crisp and recolors with the chip. */
  -webkit-mask: var(--clock-icon) center / contain no-repeat;
  mask: var(--clock-icon) center / contain no-repeat;
}

/* Venue line: a quiet location note sitting just above the ticket button,
   with a small pin glyph. Pulled out of the date block to keep it tight. */
.event-venue {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}

.event-venue::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--pin-icon) center / contain no-repeat;
  mask: var(--pin-icon) center / contain no-repeat;
  --pin-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* When the venue is one we can map, it becomes a link to Google Maps. Quiet by
   default, underlines on hover so it reads as the obvious "get directions" tap. */
a.event-venue-link {
  text-decoration: none;
  transition: color 0.15s ease;
}

a.event-venue-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Shared clock glyph for the time chip. */
.event-when-detail {
  --clock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Accent tracks the event type, matching the card's top border. Set on the
   whole block so both the calendar tile and the time chip inherit it. */
.event-type-show     .event-when { --when-accent: var(--yellow); --when-accent-deep: #c9a100;    --when-tint: #fbf6e0; }
.event-type-jam      .event-when { --when-accent: var(--green);  --when-accent-deep: #1faa58;    --when-tint: #e8f8ee; }
.event-type-workshop .event-when { --when-accent: var(--blue);   --when-accent-deep: var(--blue); --when-tint: #eaf0fe; }

.event-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  background: #f5f5f5;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 0.22rem 0.65rem;
  margin-bottom: 0.8rem;
}

/* "+N more dates" tag for multi-day workshops. Sits inside the date pill,
   carries the workshop blue, and links to the full schedule. */
.event-date-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--blue);
  background: #eaf0fe;
  border: 1px solid #cfddfb;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  text-decoration: none;
  white-space: nowrap;
}

.event-date-tag:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.event-excerpt {
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------
   BUTTONS
------------------------------------------------- */

.event-buttons {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.btn {
  padding: 0.58rem 1.1rem;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  letter-spacing: 0.01em;
}

.btn:active {
  transform: scale(0.97) !important;
}

.btn-primary {
  background: var(--pill-yellow);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #fff 0%, #fffbf5 100%);
  border-color: var(--ink);
  transform: translate(-2px, -2px) rotate(-1.5deg);
  box-shadow: 6px 6px 0 var(--ink);
}

.btn-primary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}

/* Secondary CTA: same neo-brutalist frame as the primary but a plain surface
   fill, so it pairs alongside the yellow primary without competing with it. */
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.btn-secondary:hover {
  background: var(--surface-warm);
  border-color: var(--ink);
  transform: translate(-2px, -2px) rotate(1.5deg);
  box-shadow: 6px 6px 0 var(--ink);
}

.btn-secondary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}

/* Applied client-side when District reports an event sold out / not on sale. */
.btn-disabled,
.btn-disabled:hover {
  background: #e6e6e6;
  color: var(--text-faint);
  border-color: #e6e6e6;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn-ghost {
  border: none;
  color: #999;
  background: transparent;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.btn-ghost:hover {
  color: #444;
}

/* Larger primary CTA, e.g. the "browse the full library" button on About. */
.btn-lg {
  padding: 0.85rem 1.8rem;
  font-size: 1.05rem;
}

/* Wrapper that centres a single big CTA and gives it room to breathe. */
.about-library-cta {
  justify-content: center;
  margin-top: 1.8rem;
}

/* -------------------------------------------------
   FLIP CARD
------------------------------------------------- */

.event-flip {
  perspective: 1600px;
  border-radius: 0;
  transition: box-shadow 0.3s ease;
}

/* Skip rendering off-screen cards, but only where the reserved placeholder
   roughly matches a real card. Single-column mobile cards are much taller
   than the desktop estimate, so an off guess there causes scroll jumps and
   oversized gaps. The perf win is marginal on small viewports anyway. */
@media (min-width: 640px) {
  .event-flip {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }
}

.event-flip.event-type-show {
  box-shadow: 0 0 0 4px rgba(245, 196, 0, 0.18), 0 8px 28px rgba(245, 196, 0, 0.22);
}

.event-flip.event-type-jam {
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.18), 0 8px 28px rgba(46, 204, 113, 0.22);
}

.event-flip.event-type-workshop {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18), 0 8px 28px rgba(37, 99, 235, 0.22);
}

.event-flip.event-type-show:hover {
  box-shadow: 0 0 0 4px rgba(245, 196, 0, 0.28), 0 14px 38px rgba(245, 196, 0, 0.32);
}

.event-flip.event-type-jam:hover {
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.28), 0 14px 38px rgba(46, 204, 113, 0.32);
}

.event-flip.event-type-workshop:hover {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28), 0 14px 38px rgba(37, 99, 235, 0.32);
}

/* -------------------------------------------------
   PROMO / BOOK CARDS
------------------------------------------------- */

.book-offer-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.book-offer-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--card-bg);
  border: var(--card-border);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.book-offer-list li:hover {
  border-color: var(--yellow);
  box-shadow: var(--card-shadow-yellow);
}

.book-offer-icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1.2;
}

.book-offer-list strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.book-offer-list p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.book-cta-line {
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 1rem;
}

.book-card .event-type-badge {
  color: var(--ink);
  background: var(--surface);
}

.promo-card {
  background: linear-gradient(135deg, rgba(245, 196, 0, 0.08) 0%, rgba(255, 251, 245, 0.6) 100%);
  border-color: rgba(245, 196, 0, 0.3);
  border-style: dashed;
}

.promo-card .event-title {
  color: var(--ink);
}

.corporate-banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border: var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.corporate-banner:hover {
  border-color: var(--yellow);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 196, 0, 0.15);
}

/* Standing "join WhatsApp for updates" banner on the events page. Separated
   from the grid above, with a WhatsApp-green hover instead of the default
   yellow so the channel reads at a glance. */
.events-updates {
  margin-top: 1.4rem;
}

.events-updates:hover {
  border-color: #25d366;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.18);
}

.corporate-banner-text {
  flex: 1;
  font-size: 0.92rem;
  color: var(--ink);
}

.corporate-banner-text strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.corporate-banner-arrow {
  font-weight: 700;
  font-size: 1.1rem;
}

.more-line {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 1rem 0 0;
}

.more-line a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.section-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, #fffdfb 0%, #fff 100%);
  border: 1.5px dashed var(--yellow);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease;
}

.section-jump:hover {
  color: #fff;
  border-color: var(--yellow);
  background: var(--pill-yellow);
}

.section-jump-arrow {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.section-jump:hover .section-jump-arrow {
  transform: translateY(3px);
}

/* -------------------------------------------------
   CONTACT
------------------------------------------------- */

/* Socials row at the top of the contact page: whole-card links with a
   brand-colored icon, one per social channel. Each link borrows the shared
   card surface and lights up in its channel's brand color on hover. */
.social-row {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

@media (min-width: 560px) {
  .social-row {
    grid-template-columns: 1fr 1fr;
  }
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 0.85rem 1rem;
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.social-link:hover {
  transform: translateY(-2px);
  border-color: var(--social-accent, var(--border-hover));
  box-shadow: 0 8px 24px var(--social-glow, rgba(245, 196, 0, 0.15));
}

.social-link--whatsapp  { --social-accent: #25d366; --social-glow: rgba(37, 211, 102, 0.22); }
.social-link--instagram { --social-accent: #e4405f; --social-glow: rgba(228, 64, 95, 0.22); }

.social-link-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--surface-warm);
  color: var(--social-accent, var(--ink));
  transition: background 0.15s ease, color 0.15s ease;
}

.social-link:hover .social-link-icon {
  background: var(--social-accent, var(--yellow));
  color: #fff;
}

.social-link-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.social-link-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.social-link-text span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.contact-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 0.4rem 0 1.4rem;
}

/* WhatsApp green accent so the direct-chat CTA reads as a phone action. */
.contact-wa-btn {
  background: linear-gradient(135deg, #25d366 0%, #1ebe5b 100%);
  color: #fff;
}

.contact-wa-btn:hover {
  background: linear-gradient(135deg, #2ee571 0%, #25d366 100%);
  color: #fff;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-field label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: 0;
  padding: 0.55rem 0.7rem;
  box-shadow: 3px 3px 0 rgba(26, 26, 26, 0.12);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.contact-field textarea {
  resize: vertical;
  min-height: 7rem;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 4px 4px 0 rgba(37, 99, 235, 0.35);
  transform: translate(-1px, -1px);
}

.contact-status {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a7a3c;
}

/* Turnstile widget sits between the last field and the send button. The widget
   itself is a fixed-size iframe Cloudflare renders; we just give it breathing
   room and stop it overflowing on narrow screens. */
.contact-turnstile {
  margin: 0.4rem 0 0.2rem;
  min-height: 65px;
}

.contact-error {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #c0392b;
}

/* -------------------------------------------------
   FOOTER
------------------------------------------------- */

.footer {
  text-align: center;
  font-size: 0.82rem;
  color: #8a7a72;
  padding: 2.5rem 1.5rem 2rem;
  letter-spacing: 0.02em;
  border-top: 1.5px solid rgba(245, 196, 0, 0.15);
  margin-top: 2.5rem;
  background: linear-gradient(135deg, rgba(255, 251, 245, 0.4) 0%, rgba(245, 196, 0, 0.06) 100%);
}

.footer-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* Match the wide content container so the footer doesn't read as a narrow
   island floating in an otherwise full-width page. */
@media (min-width: 900px) {
  .footer-inner {
    max-width: none;
  }
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 1.4rem 3.5rem;
  text-align: left;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-col-title {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-col a {
  font-weight: 600;
  font-size: 0.9rem;
}

.footer a {
  color: #5a5650;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer a:hover {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.coc-list {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}

.coc-list li {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 0.6rem;
}

.coc-list li strong {
  color: var(--ink);
}

.coc-list a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.coc-fineprint {
  font-size: 0.82rem;
  color: var(--text-faint);
  line-height: 1.55;
  margin: 1.4rem 0 0;
}

.coc-fineprint a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal {
  font-size: 0.78rem;
  color: #b0a09a;
  line-height: 1.6;
}

.footer-legal p {
  margin: 0.2rem 0;
}

@media (max-width: 600px) {
  .footer {
    padding: 2rem 1.25rem 1.75rem;
  }

  .footer-inner {
    gap: 1.1rem;
  }

  /* Stack the three groups, but let each group's links flow inline and wrap
     instead of one-per-row. Keeps the labelled sections while cutting footer
     height roughly in half on a phone. */
  .footer-cols {
    display: block;
    text-align: center;
  }

  .footer-col {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.8rem 1rem;
  }

  .footer-col + .footer-col {
    margin-top: 1rem;
  }

  .footer-col-title {
    flex-basis: 100%;
    margin: 0;
  }
}