/* ==========================================================================
   PANAP — Events.

   The events archive, the single event page, and the registration form with
   its image CAPTCHA. Loaded only where an event is actually being rendered
   (see panap_enqueue_event_styles()), so the rest of the site does not carry
   it.

   Event cards are the site's ordinary .panap-card plus the few additions
   below, so a change to the card treatment reaches events too.
   ========================================================================== */

/* ------------------------------------------------------------ Archive */

.panap-events-archive {
  padding-block: 48px 80px;
}

.panap-events-group + .panap-events-group {
  margin-top: 64px;
}

.panap-events-group > h2 {
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 28px;
}

/* A past-events block is background information, so it recedes. */
.panap-events-group--past {
  border-top: 1px solid var(--border);
  padding-top: 48px;
}

.panap-events-group--past .panap-loop {
  opacity: 0.86;
}

.panap-events-group--past .panap-loop:hover {
  opacity: 1;
}

/* --------------------------------------------------------------- Card */

.panap-event-card .panap-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panap-event-when,
.panap-event-where {
  align-items: center;
  color: var(--gray-700);
  display: flex;
  font-size: 14px;
  gap: 8px;
  margin: 0;
}

.panap-event-when {
  color: var(--teal-dark);
  font-weight: 600;
}

.panap-event-when i,
.panap-event-where i {
  flex: 0 0 auto;
  width: 14px;
}

.panap-event-card h3 {
  margin: 2px 0 0;
}

/* Push the action to the bottom so a row of cards lines its buttons up
   regardless of how long each title runs. The card body is a flex column, so
   the action also has to say it does not want to stretch across it. */
.panap-event-card .btn,
.panap-event-card .panap-card-link {
  align-self: flex-start;
  margin-top: auto;
}

.badge-past {
  background: rgba(29, 33, 48, 0.78);
  color: #fff;
}

.badge-upcoming {
  background: var(--gradient-main);
  color: #fff;
}

/* A past card's thumbnail is desaturated rather than hidden — the event
   happened, and the picture is still the best way to recognise it. */
.panap-event-card.is-past .panap-card-media img {
  filter: saturate(0.55);
}

.panap-event-card.is-past:hover .panap-card-media img {
  filter: none;
}

/* ------------------------------------------------------- Single event */

.panap-event-status {
  display: inline-flex;
  gap: 8px;
  margin: 0 0 12px;
}

.panap-event-status .badge {
  position: static;
  border-radius: 99px;
  padding: 8px 15px;
}

.panap-event-layout {
  align-items: start;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) 320px;
  padding-block: 40px;
}

.panap-event-body > :first-child {
  margin-top: 0;
}

.panap-event-details {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  position: sticky;
  top: 100px;
}

.panap-event-details h2 {
  font-size: 18px;
  margin: 0 0 16px;
}

.panap-event-details dl {
  margin: 0 0 20px;
}

.panap-event-details dt {
  color: var(--gray-700);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panap-event-details dd {
  color: var(--ink);
  font-weight: 600;
  margin: 2px 0 14px;
}

.panap-event-details dd:last-of-type {
  margin-bottom: 0;
}

.panap-event-details .btn {
  width: 100%;
}
#single-events-2028 .container.panap-event-layout {
  width: 60% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  margin: auto;
}

#single-events-2028 .panap-single-hero .container {
  width: 60% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  margin: auto;
}

#single-events-2028 #register {
  width: 95% !important;
  max-width: 100% !important;
  margin: auto;
}
/* ---------------------------------------------------- Registration form */

.panap-event-register {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 64px;
  padding: 40px;
  /* The form is a redirect target (#register); clear the sticky header. */
  scroll-margin-top: 100px;
}

.panap-event-register > h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 8px;
}

.panap-event-notice {
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin: 16px 0;
  padding: 14px 18px;
}

.panap-event-notice--ok {
  background: rgba(2, 135, 136, 0.1);
  border: 1px solid rgba(2, 135, 136, 0.35);
  color: var(--teal-dark);
}

.panap-event-notice--error {
  background: rgba(176, 42, 42, 0.08);
  border: 1px solid rgba(176, 42, 42, 0.3);
  color: #8c2020;
}

.panap-event-closed,
.panap-event-places,
.panap-event-contact {
  color: var(--gray-700);
  margin: 8px 0 0;
}

.panap-event-places {
  font-weight: 600;
}

.panap-event-form {
  margin-top: 24px;
}

.panap-field-row {
  display: grid;
  gap: 0 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panap-field {
  margin: 0 0 18px;
}

.panap-field label {
  color: var(--ink);
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.panap-field input,
.panap-field textarea,
.panap-captcha input {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  padding: 12px 14px;
  width: 100%;
}

.panap-field input:focus,
.panap-field textarea:focus,
.panap-captcha input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(2, 135, 136, 0.15);
  outline: none;
}

.panap-field textarea {
  resize: vertical;
}

.panap-field-help {
  color: var(--gray-700);
  display: block;
  font-size: 13px;
  margin-top: 6px;
}

/*
 * The honeypot. Hidden here rather than with an inline style so a bot cannot
 * detect it by reading the element's own style attribute — and off-screen
 * rather than display:none, because some bots skip undisplayed fields and
 * the whole point is that they fill this one in.
 */
.panap-hp {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* ------------------------------------------------------------- CAPTCHA */

.panap-captcha {
  margin-bottom: 22px;
}

.panap-captcha > label {
  color: var(--ink);
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.panap-captcha-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}

.panap-captcha-image {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: block;
  height: auto;
  /* The code must never be selectable or draggable out as an image-text pair. */
  pointer-events: none;
  user-select: none;
  width: 190px;
}

.panap-captcha-refresh {
  color: var(--teal-dark);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panap-captcha input {
  font-size: 18px;
  letter-spacing: 0.3em;
  max-width: 220px;
  text-transform: uppercase;
}
#single-events-2028 nav.navigation.post-navigation {
  padding: 100px 0 !important;
}
/* ---------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
  .panap-event-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .panap-event-details {
    position: static;
  }
}

@media (max-width: 1024px) {
  #single-events-2028 .panap-single-hero .container,
  #single-events-2028 .container.panap-event-layout {
    width: 80% !important;
  }
}

@media (max-width: 767px) {
  .panap-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .panap-event-register {
    border-radius: var(--radius-md);
    padding: 24px 18px;
  }

  .panap-events-archive {
    padding-block: 32px 56px;
  }

  .panap-captcha input {
    max-width: none;
  }
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .panap-event-card.is-past .panap-card-media img,
  .panap-events-group--past .panap-loop {
    transition: none;
  }
}