/* Event Cards block (acf/event-cards): paper cards that turn over. Ported from the Custom HTML
   cards on the St Clement Christmas preview page, same look (29 Oct 2026). */
.block-event-cards { --ev-bg: #f6f4ed; --ev-art: 76%; --ev-art-img: none; --ev-paper: none;
  max-width: 1250px; margin: 0 auto; padding: 42px 24px 48px; color: var(--color-dark); }
.block-event-cards *:focus, .block-event-cards *:focus-visible { outline: none; }
.block-event-cards, .block-event-cards * { -webkit-tap-highlight-color: transparent; }
.block-event-cards .ev-b { display: flex; justify-content: center; gap: 24px; }
.block-event-cards .pc { position: relative; width: calc((100% - 24px) / 2); aspect-ratio: 4 / 3; perspective: 1800px; }
.block-event-cards .pc__tilt { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.block-event-cards .pc.is-tracking .pc__tilt { transition: transform 120ms linear; }
.block-event-cards .pc__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); }
.block-event-cards .pc.is-flipped .pc__inner { transform: rotateY(180deg); }
.block-event-cards .pc__face { position: absolute; inset: 0; overflow: hidden; background: var(--ev-bg) var(--ev-paper) 0 0 / 512px 512px repeat;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: visibility 0s linear 450ms;
  box-shadow: 0 1px 2px hsl(60 12% 40% / 0.10), 0 2px 6px -2px hsl(60 12% 40% / 0.08); }
.block-event-cards .pc__front { background-image: var(--ev-art-img), var(--ev-paper); background-size: auto var(--ev-art), 512px 512px;
  background-position: center calc(50% - 20px), 0 0; background-repeat: no-repeat, repeat; }
.block-event-cards .pc.is-flipped .pc__front { visibility: hidden; }
.block-event-cards .pc__back { transform: rotateY(180deg); visibility: hidden; }
.block-event-cards .pc.is-flipped .pc__back { visibility: visible; }
.block-event-cards .pc__turn, .block-event-cards .pc__unflip { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; color: var(--color-dark); font: inherit; }
.block-event-cards .pc__name { position: absolute; left: 24px; bottom: 18px; font-family: var(--feature-font), var(--body-font); font-size: 19px; font-weight: 400;
  line-height: 1.3; text-transform: uppercase; color: var(--color-feature); text-align: left; }
.block-event-cards .pc__turn .pc__hint.btn { position: absolute; right: 24px; bottom: 20px; font-size: 12px; line-height: 1.3; }
.block-event-cards .pc__copy { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 32px 48px; pointer-events: none; color: var(--color-dark); }
.block-event-cards .ev-title { margin: 0; font-family: var(--feature-font), var(--body-font); font-weight: 400; font-size: calc(var(--font-size-base) * 1.7 * 0.75); line-height: 1.3; text-transform: uppercase; color: var(--color-feature); }
.block-event-cards .ev-body { margin: var(--grid-gap) 0 0; max-width: 100%; font-family: var(--body-font); font-size: var(--font-size-base); line-height: 1.6; text-wrap: balance; }
.block-event-cards .ev-body span { display: block; text-wrap: balance; }
.block-event-cards .ev-link { display: inline-block; margin-top: calc(var(--grid-gap) * 2); pointer-events: auto; }
@media (max-width: 767px) {
  .block-event-cards { padding: 32px 24px 32px; }
  .block-event-cards .ev-b { flex-direction: column; }
  .block-event-cards .pc { width: 100%; }
  .block-event-cards .pc__name { left: 16px; bottom: 13px; font-size: 15px; }
  .block-event-cards .pc__turn .pc__hint.btn { right: 16px; bottom: 14px; font-size: 11px; }
  .block-event-cards .pc__copy { padding: 16px 10px; }
  .block-event-cards .ev-title { font-size: 17px; }
  .block-event-cards .ev-body { margin-top: 12px; font-size: 15px; line-height: 1.4; }
  .block-event-cards .ev-link { margin-top: 18px; font-size: 14px; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) { .block-event-cards .pc__inner, .block-event-cards .pc__tilt, .block-event-cards .pc__face { transition: none !important; } }