/* Painted day (core/events/004) — sage_light_rest w1 (INV-05, A1319; events inspiration 01). The zigzag: a watercolour
   picture on one side, a fine sage rule, the event on the other; the sides alternate. Small hand-drawn sage hearts.
   Painted watercolour never moves (ruling A): the reveal is opacity only. Live (WebGL): each picture is painted onto
   the paper as it arrives, then the DOM picture takes over in the same frame (.is-painted). */
.ev004 { position: relative; padding: var(--k-section-pad) var(--k-gutter); background: var(--k-light-ground); color: var(--k-ink); touch-action: pan-y; }
.ev004__head { text-align: center; }
.ev004__kicker { margin-bottom: var(--k-s-3); }
.ev004__track { position: relative; max-width: 100%; margin: 48px auto 0; }
.ev004__stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ev004__list { position: relative; display: grid; gap: 40px; }

/* one event: odd = picture | rule | text, even = text | rule | picture (right-aligned) */
.ev004-item {
  --ev004-icon: clamp(112px, 36vw, 150px); --ev004-gap: 36px;
  position: relative; display: grid; align-items: center; column-gap: 8px;
  grid-template-columns: var(--ev004-icon) var(--ev004-gap) minmax(0, 1fr); grid-template-areas: "icon rule text";
}
.ev004-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) var(--ev004-gap) var(--ev004-icon); grid-template-areas: "text rule icon"; text-align: right; }
.ev004__icon { grid-area: icon; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.ev004__rule { grid-area: rule; display: block; height: 1px; background: var(--k-line); transform-origin: 0 50%; }
.ev004-item:nth-child(even) .ev004__rule { transform-origin: 100% 50%; }
.ev004__text { grid-area: text; justify-self: start; position: relative; min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.ev004-item:nth-child(even) .ev004__text { justify-self: end; }

.ev004__name { font: 400 1.32rem/1.2 var(--k-font-display); color: var(--k-ink); }
.ev004__time { margin-top: 6px; font: 500 .72rem/1.4 var(--k-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-primary); }
.ev004__day { margin-top: 2px; font: 500 .8rem/1.45 var(--k-font-body); color: var(--k-ink-soft); }
.ev004__venue { margin-top: 6px; font: 500 .84rem/1.45 var(--k-font-body); color: var(--k-ink-soft); }
.ev004__fact { margin-top: 4px; font: 400 .8rem/1.45 var(--k-font-body); color: var(--k-ink-soft); }

/* compact buttons: 44 px tall, wrapping cleanly in the narrow column */
.ev004__links { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; margin-top: 12px; }
.ev004-item:nth-child(even) .ev004__links { justify-content: flex-end; margin-left: auto; }
.ev004__btn, .ev004 .kjy-cal { flex: 1 1 auto; }
.ev004__btn, .ev004 .kjy-cal__toggle { min-height: 44px; padding: 0 10px; font-size: .68rem; letter-spacing: .1em; white-space: nowrap; }
.ev004 .kjy-cal { max-width: 100%; }
.ev004 .kjy-cal__toggle { width: 100%; }
.ev004 .kjy-cal[open] { flex-basis: 100%; }
.ev004 .kjy-cal__toggle { list-style: none; }
.ev004 .kjy-cal__toggle::-webkit-details-marker { display: none; }
.ev004 .kjy-cal__menu { display: grid; margin-top: 8px; text-align: left; background: var(--k-card); box-shadow: 0 0 0 1px rgb(var(--c-secondary-rgb) / .35), 4px 10px 24px rgb(74 63 53 / .12); }
.ev004 .kjy-cal__opt { padding: 12px 14px; font: 500 .9rem/1.3 var(--k-font-body); color: var(--c-primary); text-decoration: none; }
.ev004 .kjy-cal__opt + .kjy-cal__opt { border-top: 1px solid rgb(var(--c-secondary-rgb) / .25); }

/* small hand-drawn hearts at the text's outer top corner; every third one rests */
.ev004__heart { position: absolute; top: -22px; right: 0; width: 16px; height: 16px; fill: none; stroke: var(--c-secondary); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-12deg); }
.ev004-item:nth-child(even) .ev004__heart { right: auto; left: 0; transform: rotate(10deg); }
.ev004-item:nth-child(3n) .ev004__heart { display: none; }

/* reveal: opacity only (ruling A). Hidden only once section.js has added .is-anim */
.ev004.is-anim .ev004__icon { transition: opacity 1.1s ease; }
html.kjy-fx .ev004.is-anim .ev004-item:not(.is-in) .ev004__icon { opacity: 0; }
/* live: the canvas paints each picture in once, then the DOM picture shows in the same frame */
html .ev004.is-live .ev004-item:not(.is-painted) .ev004__icon { opacity: 0; transform: none; transition: none; }
html.kjy-fx .ev004.is-live .ev004-item.is-painted .ev004__icon { opacity: 1; transform: none; transition: none; }
html:not(.kjy-fx) .ev004.is-live .ev004-item.is-painted .ev004__icon { opacity: 1; transition: none; }

@media (min-width: 768px) {
  .ev004__track { max-width: 720px; margin-top: 64px; }
  .ev004-item { --ev004-icon: 180px; --ev004-gap: 56px; column-gap: 12px; }
  .ev004__name { font-size: 1.5rem; }
  .ev004__heart { top: -24px; }
}
@media (min-width: 1200px) {
  .ev004__track { max-width: 880px; }
  .ev004__list { gap: 56px; }
  .ev004-item { --ev004-icon: 200px; --ev004-gap: 72px; }
}