/* Event toilets: "Your event week" (partials/pieces/event-week.php) */
.ewk { --tile-h: clamp(130px, 20svh, 200px); --gap: clamp(6px, .7vw, 12px); position: relative; background: var(--trail); color: rgba(255, 255, 255, .88); overflow: clip; }
.motion .ewk { height: 100svh; min-height: 680px; }
.ewk__bg { position: absolute; inset: -10%; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(108, 196, 63, .28), transparent 70%) 80% 10% / 90% 90% no-repeat, radial-gradient(ellipse 60% 60% at 50% 50%, rgba(12, 42, 32, .55), transparent 70%) 0% 100% / 100% 100% no-repeat; }
.ewk__contours { opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M-20 60c80-40 160 30 240 0s150-60 230-20 110 40 170 10'/%3E%3Cpath d='M-20 110c90-40 150 40 240 5s160-55 230-15 110 45 170 12'/%3E%3Cpath d='M-20 160c80-30 170 40 250 8s150-50 220-12 110 40 170 14'/%3E%3Cpath d='M-20 215c100-45 160 35 240 4s160-60 240-18 100 35 160 10'/%3E%3Cpath d='M-20 270c90-35 170 40 250 6s150-55 230-15 100 40 160 12'/%3E%3Cpath d='M-20 325c80-40 160 30 240 2s160-50 230-12 110 40 170 10'/%3E%3Cpath d='M-20 380c90-40 160 35 250 4s150-55 220-15 110 45 170 12'/%3E%3C/g%3E%3C/svg%3E"); }
.ewk__in { position: relative; display: grid; gap: clamp(18px, 2.6vh, 30px); align-content: center; height: 100%; padding: calc(var(--tb) + var(--hh) + 24px) 0 32px; }
html:not(.motion) .ewk__in { padding: clamp(80px, 9vw, 140px) 0; }
.ewk__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px clamp(30px, 5vw, 90px); align-items: end; }
.ewk__lede { font-size: clamp(1.0625rem, 1.25vw, 1.2rem); color: rgba(255, 255, 255, .86); max-width: 60ch; justify-self: end; }

/* the strip: twelve domed day tiles in one grid, the event photo placed over the weekend */
.ewk__board { position: relative; margin-top: 26px; }
.ewk__beam { position: absolute; left: 0; top: -45%; width: min(60vw, 900px); height: 190%; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 240, 110, .7), rgba(108, 196, 63, .28) 55%, transparent); pointer-events: none; }
html:not(.motion) .ewk__beam { display: none; }
.ewk__days { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: var(--gap); height: var(--tile-h); }
.ewk__d { position: relative; grid-row: 1; display: grid; align-content: start; justify-items: center; padding-top: 18px; border-radius: 30px 30px 8px 8px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .72); transition: background .45s var(--ease), color .45s, box-shadow .45s, translate .45s var(--ease); }
.ewk__d::after { content: ""; position: absolute; left: 50%; bottom: 18px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .4s, box-shadow .4s; }
.ewk__dn { font: 800 clamp(1.15rem, 1.6vw, 1.6rem)/1 var(--display); font-stretch: 80%; }
.ewk__ds { display: none; font: 800 1rem/1 var(--display); }
.ewk__d--we { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); outline: 2px dashed rgba(255, 255, 255, .0); }
@media (any-hover: hover) { .ewk__d:hover { translate: 0 -6px; } }
/* the empty weekend glows while it waits for your event */
.motion .ewk__d--we { animation: ewk-wait 2.4s ease-in-out infinite; }
@keyframes ewk-wait { 50% { background: rgba(108, 196, 63, .22); box-shadow: inset 0 0 0 2px var(--brand-hi), 0 0 34px rgba(108, 196, 63, .4); } }

.motion .ewk__d.is-lit { translate: 0 -8px; }
/* a lit day throws its light round it, so the week visibly fills as the van passes */
.motion .ewk__d--before.is-lit { box-shadow: 0 0 0 2px var(--brand-hi), 0 0 46px 6px rgba(108, 196, 63, .6); }
.motion .ewk__d--after.is-lit { box-shadow: 0 0 0 2px var(--white), 0 0 46px 6px rgba(255, 255, 255, .35); }
.ewk__d--before.is-lit, html:not(.motion) .ewk__d--before { background: var(--brand); color: var(--ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.ewk__d--before.is-lit::after, html:not(.motion) .ewk__d--before::after { background: var(--ink); }
.ewk__d--after.is-lit, html:not(.motion) .ewk__d--after { background: var(--white); color: var(--ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.ewk__d--after.is-lit::after, html:not(.motion) .ewk__d--after::after { background: var(--brand); }

/* the event photo: sits on the weekend tiles; the script spreads it over the whole strip and back */
.ewk__event { grid-row: 1; grid-column: 6 / 8; position: relative; z-index: 2; margin: -14px 0; border-radius: 30px 30px 8px 8px; overflow: clip; background: var(--ink-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.motion .ewk__event { grid-column: 1 / -1; margin: -40px 0; border-radius: 0; box-shadow: none; background: none; clip-path: inset(0 50% 0 50%); }
.ewk__event img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ewk__event figcaption { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 7px 14px; border-radius: 999px; background: rgba(12, 42, 32, .85); color: var(--white); font-weight: 800; font-size: .95rem; white-space: nowrap; }
.motion .ewk__event figcaption { left: var(--cap-x, 50%); }
.ewk__extra-tag { grid-row: 1; grid-column: 6 / 8; z-index: 3; align-self: start; justify-self: center; margin-top: -30px; padding: 6px 12px; border-radius: 999px; background: var(--brand); color: var(--ink); font-weight: 800; font-size: .85rem; white-space: nowrap; transform: scale(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); }
.ewk.is-extra .ewk__extra-tag, html:not(.motion) .ewk__extra-tag { transform: none; }

/* the road under the strip */
.ewk__road { position: relative; z-index: 1; height: clamp(46px, 7svh, 66px); margin-top: clamp(44px, 6vh, 58px); border-radius: 14px; background: #2b3a33 linear-gradient(90deg, rgba(255, 255, 255, .65) 50%, transparent 0) 0 50% / 44px 3px repeat-x; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06); }
.ewk__line { position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 5px; background: var(--brand-hi); box-shadow: 0 0 18px rgba(108, 196, 63, .7); transform-origin: left; }
.motion .ewk__line { transform: scaleX(0); }
.ewk__vanwrap { position: absolute; left: 0; bottom: 6px; width: clamp(120px, 11vw, 180px); z-index: 2; }
.ewk__van { width: 100%; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .4)); }

/* the notes under each part of the week */
.ewk__notes { display: grid; grid-template-columns: 5fr 2fr 5fr; gap: var(--gap); }
.ewk__note { display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid rgba(255, 255, 255, .2); transition: opacity .4s, border-color .4s, background .45s; }
.ewk__note b { font-size: .95rem; font-weight: 700; color: rgba(255, 255, 255, .78); transition: color .4s; }
.ewk__note span { font: 800 clamp(1.2rem, 1.6vw, 1.6rem)/1.1 var(--display); font-stretch: 82%; color: var(--white); transition: color .4s; }
.ewk__note--we { text-align: center; }
.ewk__note.is-on { border-color: var(--brand-hi); }
/* the part of the week in view is lit by its green rule and white label; the others dim by colour, not opacity,
   so they stay readable (AA on the green) */
.motion .ewk__note.is-on:not(.ewk__note--extra) b { color: var(--white); }
.motion .ewk__note:not(.is-on):not(.ewk__note--extra) span { color: rgba(255, 255, 255, .8); }
.ewk__note--extra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 20px; border: 0; border-radius: 16px; background: rgba(12, 42, 32, .72); }
.motion .ewk__note--extra.is-on { background: var(--brand); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); }
.motion .ewk__note--extra.is-on b, .motion .ewk__note--extra.is-on span { color: var(--ink); }
.ewk__note--extra b { font: 800 clamp(1.1rem, 1.4vw, 1.4rem)/1.1 var(--display); font-stretch: 82%; color: var(--brand-hi); }
.ewk__note--extra span { font: 600 1.0625rem/1.4 var(--body); color: var(--white); }

@media (max-width: 1180px) {
  .ewk__head { grid-template-columns: 1fr; }
  .ewk__lede { justify-self: start; }
}
@media (max-width: 960px) {
  .ewk { --tile-h: clamp(110px, 19svh, 170px); --gap: 4px; }
  .ewk__beam { width: 130vw; }
  .ewk__in { gap: 14px; padding-top: calc(var(--tb) + var(--hh) + 4px); padding-bottom: 20px; }
  .ewk .h2 { font-size: 1.9rem; }
  .ewk__lede { font-size: 1rem; line-height: 1.45; }
  .ewk__dn { display: none; }
  .ewk__ds { display: block; }
  .ewk__board { margin-top: 14px; }
  .ewk__d { padding-top: 12px; border-radius: 16px 16px 5px 5px; }
  .ewk__d::after { width: 7px; height: 7px; margin-left: -3.5px; bottom: 10px; }
  .ewk__event { margin: -8px 0; border-radius: 16px 16px 5px 5px; }
  .motion .ewk__event { margin: -24px 0; }
  .ewk__event figcaption { display: none; }
  .ewk__extra-tag { font-size: .8rem; margin-top: -22px; }
  .ewk__road { height: 40px; margin-top: 24px; border-radius: 10px; background-size: 26px 2px; }
  .ewk__vanwrap { width: 84px; bottom: 4px; }
  .ewk__notes { grid-template-columns: 1fr; gap: 6px; }
  .ewk__note { grid-template-columns: 8.5em 1fr; align-items: baseline; gap: 10px; padding-top: 7px; border-top-width: 1px; }
  .ewk__note--we { text-align: left; }
  .ewk__note b { font-size: .875rem; }
  .ewk__note span { font-size: 1.05rem; }
  .ewk__note--extra { display: block; padding: 10px 14px; }
  .ewk__note--extra b { font-size: 1.05rem; }
  .ewk__note--extra span { font-size: .95rem; }
}