/* Homepage "Find a party" carousel and hero button. Layout comes from the featured businesses
   slideshow (directory_layout.css); these rules only add the event cards. */
/* "Find a party" sits above "Explore businesses below", pops in, then gently pulses in and out. */
.hero-cues { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 12px; }
.hero-cues .discovery-scroll { margin: 0; }
/* People read the hero as "search box and decoration", so the cues are introduced in words and
   the party button says what it leads to; without that, the button was being scrolled past. */
.hero-cues-hint { margin: 26px 0 0; color: #fff; font-size: 13px; opacity: .92; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.hero-cue-note { margin: -6px 0 2px; color: #ffe3ec; font-size: 12px; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
/* Arrows sit inside the label, pointing inward at the words, so the pill reads as "press this".
   They override .discovery-scroll span, which is the round scroll-hint badge. */
.hero-party .hero-party-arrow {
  flex: 0 0 auto; display: inline-block; width: auto !important; height: auto !important;
  border-radius: 0 !important; background: none !important;
  color: #ffd2e0; font-size: 20px !important; line-height: 1;
  animation: party-arrow-nudge 1.4s ease-in-out infinite;
}
@keyframes party-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
.hero-party .hero-party-arrow--right { transform: scaleX(-1); animation-name: party-arrow-nudge-right; }
@keyframes party-arrow-nudge-right {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50% { transform: scaleX(-1) translateX(4px); }
}
@media (max-width: 420px) { .hero-party { font-size: 15px !important; padding: 12px 16px !important; } .hero-party .hero-party-arrow { font-size: 17px !important; } }
.hero-party {
  background: #cd2756 !important; border-color: #cd2756 !important; color: #fff !important; font-weight: 700;
  font-size: 16px !important; min-height: 48px; padding: 12px 22px !important;
  box-shadow: 0 0 0 0 rgba(205, 39, 86, .55);
  animation: party-pop-in .6s cubic-bezier(.2, 1.5, .4, 1) .3s both, party-pulse 2.4s ease-in-out 1s infinite;
}
.hero-party:active { transform: scale(.97); }
.hero-party { gap: 8px !important; flex-wrap: nowrap; white-space: nowrap; align-items: center; max-width: calc(100vw - 32px); }
.hero-party:hover, .hero-party:focus-visible { background: #b51f4a !important; animation-play-state: paused; transform: scale(1.06); }
@keyframes party-pop-in {
  0% { opacity: 0; transform: scale(.4) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes party-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(205, 39, 86, .55); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(205, 39, 86, 0); }
}
/* Rotating word: party -> event. The words share one grid cell so the button keeps
   the width of the longest; each slides up into view, holds, then slides out. */
.party-words { display: inline-grid; font-style: normal; text-align: left; overflow: hidden; vertical-align: bottom; }
.party-words b { grid-area: 1 / 1; font-weight: inherit; white-space: nowrap; opacity: 0; animation: party-word 5s ease-in-out infinite backwards; }
.party-words b:nth-child(2) { animation-delay: 2.5s; }
@keyframes party-word {
  0% { opacity: 0; transform: translateY(70%); }
  9%, 45% { opacity: 1; transform: translateY(0); }
  54%, 100% { opacity: 0; transform: translateY(-70%); }
}
.hero-party:is(:hover, :focus-visible) .party-words b { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-party { animation: none; }
  .party-words b { animation: none; }
  .party-words b:first-child { opacity: 1; }
  .hero-party-arrow { animation: none; }
}

.events-carousel-section { scroll-margin-top: 90px; }
.events-carousel-label { color: #cd2756; }
.events-carousel-title { font-family: "Chewy", system-ui; font-weight: 400 !important; letter-spacing: .01em; color: #cd2756 !important; }

.home-page-content .events-carousel-section .event-slide {
  position: relative; flex: 0 0 calc((100% - 40px) / 3); min-width: 0; min-height: 360px; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; border-radius: 18px; overflow: hidden;
  color: #fff; text-decoration: none; box-shadow: 0 10px 26px rgba(26, 16, 32, .18);
  background-image: linear-gradient(180deg, rgba(26, 16, 32, .05) 30%, rgba(26, 16, 32, .9) 100%), var(--event-photo), url('../images/event-crowd.jpg');
  background-size: cover; background-position: center; transition: transform .2s ease, box-shadow .2s ease;
}
.home-page-content .events-carousel-section .event-slide:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(26, 16, 32, .26); }
.home-page-content .events-carousel-section .event-slide:focus-visible { outline: 3px solid #cd2756; outline-offset: 3px; }
.event-slide-date { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; min-width: 54px; padding: 6px 8px; border-radius: 12px; background: #fff; color: #cd2756; font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.event-slide-date strong { font-size: 22px; color: #1a1020; }
.event-slide-body { display: flex; flex-direction: column; gap: 4px; }
.event-slide-price { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #cd2756; font-family: "Chewy", system-ui; font-size: 17px; }
.event-slide-title { font-family: "Chewy", system-ui; font-size: 26px; line-height: 1.1; margin-top: 6px; overflow-wrap: anywhere; }
.event-slide-meta { font-size: 13px; color: #f3e9ee; }

.events-carousel-empty { display: flex; flex-direction: column; gap: 6px; padding: 26px; border: 2px dashed #f0c5d2; border-radius: 18px; background: #fdf1f4; color: #7a1d38; text-decoration: none; }
.events-carousel-empty strong { font-family: "Chewy", system-ui; font-weight: 400; font-size: 22px; color: #cd2756; }

@media (max-width: 900px) { .home-page-content .events-carousel-section .event-slide { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .home-page-content .events-carousel-section .event-slide { flex-basis: 86%; min-height: 320px; } }
@media (prefers-reduced-motion: reduce) { .home-page-content .events-carousel-section .event-slide { transition: none; } }

[data-theme="dark"] .events-carousel-title { color: #ff7fa3 !important; }
[data-theme="dark"] .events-carousel-label { color: #ff7fa3; }
[data-theme="dark"] .events-carousel-empty { background: #2a1a22; border-color: #5a2c3d; color: #f3c9d6; }
[data-theme="dark"] .events-carousel-empty strong { color: #ff7fa3; }