/* "What's on at BoomReader" on the home page (src/routes/whats-on.js) */
#br-page .wo { padding-bottom: 72px; }
.wo .br-wrap { position: relative; z-index: 1; }
.wo-eyebrow { margin: 0 0 6px; color: #b9335f; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
#br-page .wo .br-sec-title { margin-bottom: 34px; }
.wo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.wo-grid--1 { max-width: 420px; margin: 0 auto; }
.wo-grid--2 { max-width: 820px; margin: 0 auto; }
.wo-card { min-width: 0; }
.wo-card__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid #e3e5ee; border-radius: 22px; background: #fff; color: #33373d; text-decoration: none;
  box-shadow: 0 10px 26px rgba(33, 39, 113, 0.1); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wo-card__link:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(33, 39, 113, 0.16); }
.wo-card__link:focus-visible { outline: 3px solid #212771; outline-offset: 3px; }
.wo-card__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #eef0f8; }
.wo-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.wo-card__link:hover .wo-card__pic img { transform: scale(1.05); }
.wo-card__drawn { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 80% 20%, rgba(255, 201, 60, 0.9) 0 18%, transparent 19%), linear-gradient(135deg, #212771, #b9335f); }
.wo-card--quest .wo-card__drawn { background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.35) 0 14%, transparent 15%), linear-gradient(135deg, #0a6a79, #536816); }
.wo-card--writefest .wo-card__drawn, .wo-card--radar .wo-card__drawn { background: radial-gradient(circle at 75% 70%, rgba(255, 201, 60, 0.85) 0 16%, transparent 17%), linear-gradient(135deg, #b74d06, #b9335f); }
.wo-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.wo-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wo-tag { padding: 3px 10px; border-radius: 999px; background: #eef0f8; color: #212771; font-size: 0.75rem; font-weight: 800; }
.wo-tag--open { background: #e6f2d4; color: #3d5410; }
.wo-tag--soon { background: #fff3cf; color: #7a5300; }
.wo-card__title { color: #212771; font-size: 1.2rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.wo-card__blurb { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.5; }
.wo-card__when { color: #646a71; font-size: 0.9rem; font-weight: 700; }
.wo-card__cta { margin-top: auto; padding-top: 6px; color: #b9335f; font-weight: 800; }
.wo-more { margin: 26px 0 0; text-align: center; font-weight: 700; }
.wo-more a { color: #212771; }
/* seasonal scenes when a quest has no picture */
.wo-season--halloween .wo-card__drawn { background: radial-gradient(circle at 78% 26%, #ffe9a8 0 13%, transparent 14%), linear-gradient(180deg, #2b1c55, #6b2a7a 70%, #e0782a); }
.wo-season--christmas .wo-card__drawn { background: radial-gradient(circle at 50% 120%, #fff 0 30%, transparent 31%), linear-gradient(180deg, #16305e, #2d5aa0); }
.wo-season--easter .wo-card__drawn { background: radial-gradient(circle at 80% 25%, #fff6c9 0 14%, transparent 15%), linear-gradient(180deg, #bfe3f5, #e9f6d6); }
.wo-season--summer .wo-card__drawn { background: radial-gradient(circle at 78% 26%, #ffd23f 0 15%, transparent 16%), linear-gradient(180deg, #7fd0f0, #f6e1a6 75%); }
.wo-art--competition .wo-card__drawn { background: radial-gradient(circle at 50% 55%, rgba(255, 201, 60, 0.55) 0 26%, transparent 27%), linear-gradient(135deg, #212771, #b9335f); }
.wo-art--books .wo-card__drawn { background: radial-gradient(circle at 20% 80%, rgba(255, 201, 60, 0.6) 0 16%, transparent 17%), linear-gradient(135deg, #0a6a79, #212771); }

/* ---- the animated pieces over each picture: they suit the kind of event ---- */
.wo-deco { position: absolute; inset: 0; pointer-events: none; }
.wo-deco__i { position: absolute; width: 22%; max-width: 64px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(20, 16, 70, 0.35)); }
.wo-deco--1 { left: 8%; top: 12%; }
.wo-deco--2 { right: 9%; top: 18%; width: 16%; }
.wo-deco--3 { right: 24%; bottom: 10%; width: 13%; }
/* on a photo the pieces sit in a soft badge so they read against any picture */
.has-img .wo-deco__i { padding: 2%; border-radius: 50%; background: rgba(33, 39, 113, 0.45); }

/* reading quests: the season's icons float about (snow falls, bats flutter, the sun turns) */
.wo-art--quest .wo-deco__i { animation: wo-float 4.5s ease-in-out infinite; }
.wo-art--quest .wo-deco--2 { animation-delay: -1.5s; }
.wo-art--quest .wo-deco--3 { animation-delay: -3s; }
.wo-art--quest .wo-ic--snowflake, .wo-art--quest .wo-ic--star { animation: wo-fall 6s linear infinite; }
.wo-art--quest .wo-ic--bat { animation: wo-flutter 1.6s ease-in-out infinite; }
.wo-art--quest .wo-ic--sun { animation: wo-turn 18s linear infinite; }
/* competitions: the trophy bobs and the sparkles twinkle */
.wo-art--competition .wo-ic--trophy { left: 50%; top: 50%; width: 28%; max-width: 86px; margin: -14% 0 0 -14%; stroke: #ffc93c; animation: wo-bob 2.8s ease-in-out infinite; }
.wo-art--competition .wo-ic--sparkle, .wo-art--competition .wo-ic--star { stroke: #ffe9a8; animation: wo-twinkle 2.2s ease-in-out infinite; }
.wo-art--competition .wo-deco--3 { left: 18%; right: auto; animation-delay: -1.1s; }
/* WriteFests: the pencil scribbles, the book gently opens and closes */
.wo-art--writefest .wo-ic--pencil { animation: wo-scribble 2.4s ease-in-out infinite; transform-origin: 20% 80%; }
.wo-art--writefest .wo-ic--sparkle { animation: wo-twinkle 2.6s ease-in-out infinite; }
.wo-art--writefest .wo-ic--book { animation: wo-bob 3.4s ease-in-out infinite; }
/* the Book finder and new books */
.wo-art--books .wo-deco__i, .wo-art--radar .wo-deco__i { animation: wo-bob 3.6s ease-in-out infinite; }
.wo-art--books .wo-deco--2, .wo-art--radar .wo-deco--2 { animation: wo-twinkle 2.4s ease-in-out infinite; }
/* a little livelier while the card is pointed at or focused */
.wo-card__link:hover .wo-deco__i, .wo-card__link:focus-visible .wo-deco__i { animation-duration: 1.4s; }

@keyframes wo-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(5deg); } }
@keyframes wo-fall { 0% { transform: translateY(-40%) rotate(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(140%) rotate(120deg); opacity: 0; } }
@keyframes wo-flutter { 0%, 100% { transform: translate(0, 0) scaleY(1); } 25% { transform: translate(6px, -6px) scaleY(0.7); } 50% { transform: translate(12px, 0) scaleY(1); } 75% { transform: translate(6px, 5px) scaleY(0.75); } }
@keyframes wo-turn { to { transform: rotate(360deg); } }
@keyframes wo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wo-twinkle { 0%, 100% { transform: scale(0.75) rotate(0); opacity: 0.55; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@keyframes wo-scribble { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(8px, 4px) rotate(-8deg); } 40% { transform: translate(16px, -2px) rotate(4deg); } 60% { transform: translate(24px, 5px) rotate(-6deg); } 80% { transform: translate(10px, 2px) rotate(2deg); } }

/* still for anyone who prefers less motion, or has pressed "Pause animations" in the footer */
@media (prefers-reduced-motion: reduce) {
  .wo-card__link, .wo-card__link:hover, .wo-card__link:hover .wo-card__pic img { transition: none; transform: none; }
  .wo-deco__i { animation: none !important; }
}
html.br-still .wo-card__link:hover, html.br-still .wo-card__link:hover .wo-card__pic img { transform: none; }
html.br-still .wo-deco__i { animation: none !important; }
/* the BoomWriter artwork's characters sit low in the picture */
.wo-art--writefest img { object-position: 50% 78%; }