/* Event lists (start page, project pages) and the /event/<id> page. Uses the tokens from style.css. */

/* --- list --- */
[data-events-list] { display: grid; gap: 18px; }
[data-events-list="past"] { margin-top: 12px; gap: 10px; }
[data-events-past-heading] { margin: 40px 0 0; font-size: 1.25rem; color: var(--muted); }
[data-events-status] { margin: 0; color: var(--muted); }
[data-events-status]:empty { display: none; }

.lw-card {
  display: grid; grid-template-columns: 1fr; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow);
}
.lw-card-img { display: block; background: var(--line); }
.lw-card-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lw-card-body { padding: 16px 18px 18px; min-width: 0; }
.lw-card-date { margin: 0 0 6px; font-size: .9rem; font-weight: 700; color: var(--neon); }
.event-tag {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font-size: .75rem;
  background: var(--hl); color: var(--neon); vertical-align: 1px;
}
.lw-card-title { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.25; overflow-wrap: anywhere; }
.lw-card-title a { color: inherit; text-decoration: none; }
.lw-card-title a:hover, .lw-card-title a:focus-visible { text-decoration: underline; }
.lw-card-where { margin: 0 0 8px; color: var(--muted); }
.lw-card-text { margin: 0 0 14px; }
.lw-card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.event-more { color: var(--neon); margin-left: 4px; }
.btn.btn-small { padding: 8px 16px; font-size: .9rem; margin: 0; }
.lw-card.is-past { box-shadow: none; background: transparent; }
.lw-card.is-past .lw-card-body { padding: 12px 16px; }
.lw-card.is-past .lw-card-title { font-size: 1.05rem; margin: 0; }
.lw-card.is-past .lw-card-date { margin-bottom: 2px; color: var(--muted); }
.lw-card.is-past .lw-card-where { margin: 2px 0 0; font-size: .9rem; }
.lw-card.is-past .lw-card-actions { display: none; }

/* --- /event/<id> page --- */
.event-page .event-nav { margin: 0 12px 0 auto; display: flex; align-items: center; gap: 18px; }
.event-page .event-nav a { color: var(--text); text-decoration: none; font-weight: 700; }
.event-page .event-nav a:hover, .event-page .event-nav a:focus-visible { color: var(--neon); }
.event-detail .page-hero { padding-bottom: 56px; }
.event-badge {
  display: inline-block; margin-left: 8px; padding: 2px 12px; border-radius: 999px; font-size: .9rem;
  background: var(--hl); color: var(--neon); vertical-align: middle;
}
.event-when { font-size: 1.2rem; font-weight: 700; color: var(--neon); margin: 0 0 4px; }
.event-where { margin: 0 0 20px; color: var(--muted); }
.event-image { display: block; width: 100%; max-width: 720px; max-height: 420px; object-fit: cover; border-radius: 18px; margin: 0 0 24px; }
.event-text { max-width: 68ch; }
.event-text p { margin: 0 0 1em; }
.event-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.event-actions .btn { margin: 0; }

/* --- RSS + newsletter icons to the right of the Events heading; the newsletter form lives in a popup --- */
.events-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.events-head h2 { margin-top: 0; margin-bottom: 0; }
.feed-icons { display: flex; gap: 16px; align-items: flex-start; }
.feed-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--text); text-decoration: none; cursor: pointer; }
.feed-icon[hidden] { display: none; }
.feed-icon-circle {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: var(--neon); background: var(--hl); border: 1px solid var(--line); transition: background .15s, transform .15s;
}
.feed-icon:hover .feed-icon-circle, .feed-icon:focus-visible .feed-icon-circle { background: var(--panel); transform: translateY(-1px); }
.feed-icon:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 12px; }
/* Newsletter icon: a short shake every few seconds to draw the eye */
.feed-icon[data-newsletter-open] .feed-icon-circle { animation: nl-shake 6s ease-in-out 3s infinite; transform-origin: 50% 60%; }
.feed-icon[data-newsletter-open]:hover .feed-icon-circle, .feed-icon[data-newsletter-open]:focus-visible .feed-icon-circle { animation: none; }
@keyframes nl-shake {
  0%, 14%, 100% { transform: rotate(0); }
  2% { transform: rotate(-14deg); }
  4% { transform: rotate(12deg); }
  6% { transform: rotate(-10deg); }
  8% { transform: rotate(8deg); }
  10% { transform: rotate(-5deg); }
  12% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .feed-icon[data-newsletter-open] .feed-icon-circle { animation: none; } }
.feed-icon-label { font-size: .72rem; font-weight: 700; color: var(--muted); }
.newsletter-dialog {
  width: min(420px, calc(100vw - 32px)); padding: 0; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.newsletter-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.newsletter { position: relative; padding: 22px 20px 18px; }
.newsletter-close { position: absolute; top: 6px; right: 10px; padding: 4px 8px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.newsletter-close:hover, .newsletter-close:focus-visible { color: var(--text); }
.newsletter-label { display: block; margin: 0 28px 10px 0; font-size: 1rem; font-weight: 700; color: var(--text); }
.newsletter-row { display: flex; gap: 8px; position: relative; }
.newsletter-row input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: 8px 14px; font: inherit; font-size: .95rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px;
}
.newsletter-row input[type="email"]:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.newsletter-row input[type="email"] { padding-right: 52px; }
/* Arrow inside the field: greyed out until the consent box is ticked; on hover it slides out to the right and comes back in from the left */
.newsletter-go {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; overflow: hidden;
  background: none; color: var(--neon); cursor: pointer;
}
.newsletter-go:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; }
.newsletter-go:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.newsletter-go svg { display: block; }
.newsletter-go:not(:disabled):hover svg, .newsletter-go:not(:disabled):focus-visible svg { animation: nl-arrow .5s ease-in-out; }
@keyframes nl-arrow { 0% { transform: translateX(0); } 45% { transform: translateX(150%); } 46% { transform: translateX(-150%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .newsletter-go:not(:disabled):hover svg, .newsletter-go:not(:disabled):focus-visible svg { animation: none; } }
.newsletter-consent { display: flex; align-items: flex-start; gap: 8px; margin: 10px 2px 0; font-size: .85rem; color: var(--text); cursor: pointer; }
.newsletter-consent input { flex: none; margin: 3px 0 0; accent-color: var(--pink); }
.newsletter .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-note { margin: 8px 2px 0; font-size: .8rem; color: var(--muted); }
.newsletter-msg { margin: 8px 2px 0; min-height: 0; font-size: .85rem; }
.newsletter-msg:empty { display: none; }
.newsletter-msg.ok { color: light-dark(#2e7d32, #9be39f); }
.newsletter-msg.err { color: light-dark(#b3261e, #ff9b92); }

/* --- b2b YOU cards on the Events list: same look as on the b2b YOU page (styles in b2b-you.css) --- */
.b2b-embed { min-width: 0; }
.b2b-embed .grid { display: block; padding-top: 0; }
.b2b-embed .card-actions { margin-top: 20px; }

/* --- map on the event page --- */
.event-map-block { margin-top: 36px; max-width: 720px; }
.event-map-block h2 { margin: 0 0 12px; font-size: 1.3rem; }
.event-map { display: block; width: 100%; height: 280px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.event-map-links { margin: 8px 0 0; font-size: .95rem; color: var(--muted); }
.event-map-links a { color: var(--neon); }

/* On phones the site's header turns <nav> into a slide-down hamburger panel; the event page has no
   hamburger, so keep its two links as a plain row in the header. */
@media (max-width: 759px) {
  .event-page .nav .event-nav {
    position: static; display: flex; flex-direction: row; align-items: center; gap: 14px;
    margin: 0 0 0 14px; padding: 0; background: none; border: 0; max-height: none; overflow: visible;
  }
  .event-page .nav .event-nav a { padding: 6px 4px; border: 0; font-size: .95rem; }
  .event-page .nav .event-nav a.lang-switch { margin: 0; align-self: center; padding: 5px 12px; border: 1px solid var(--line); }
}

/* --- Events list: two columns on wide screens, project name as a small heading above each card --- */
[data-events-list="upcoming"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); align-items: start; gap: 28px 20px; }
[data-events-list="past"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ev-item { min-width: 0; }
.ev-kicker {
  margin: 0 0 8px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--neon);
}
.ev-item:has(.is-past) .ev-kicker, .ev-item:has(.grid.mini) .ev-kicker { color: var(--muted); margin-bottom: 4px; }

/* b2b YOU card, slimmed for the list: tighter padding, smaller type, slot rows on one line even in a narrow column */
.b2b-page.b2b-embed .event-card { padding: 20px 22px; }
.b2b-page.b2b-embed .event-card h3 { font-size: 1rem; }
.b2b-page.b2b-embed .event-card .venue { margin-bottom: 4px; font-size: .78rem; }
.b2b-page.b2b-embed .event-card .sub { margin-bottom: 8px; font-size: .72rem; }
.b2b-page.b2b-embed .slot { grid-template-columns: 7em 1fr auto; gap: 10px; padding: 9px 0; align-items: center; }
.b2b-page.b2b-embed .slot .time { grid-column: auto; font-size: .8rem; }
.b2b-page.b2b-embed .slot .name { font-size: .88rem; letter-spacing: .03em; }
.b2b-page.b2b-embed .slot .vibe { font-size: .62rem; padding: 2px 6px; }
.b2b-page.b2b-embed .slot.b2b .b2b-sub { font-size: .5em; }
.b2b-page.b2b-embed .card-actions { margin-top: 14px; }
.b2b-page.b2b-embed .grid.mini .event-card { padding: 14px 16px; }
/* on phones the card is too narrow for one-line rows: time above the name, as on the b2b YOU page */
@media (max-width: 759px) {
  .b2b-page.b2b-embed .slot { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .b2b-page.b2b-embed .slot .time { grid-column: 1 / -1; }
  .b2b-page.b2b-embed .slot .name { font-size: 1rem; }
}