/* V61 Events refresh: collage-first mobile hero, livelier photos,
   bridal shower spotlight order, simpler closing call to action. */

/* ---------- Hover: every photo and case card lifts a little ---------- */
.events-photo { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.events-photo img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.events-photo:hover { z-index: 3; transform: translateY(-10px) rotate(-.8deg); box-shadow: 0 30px 60px rgba(49,25,24,.2); }
.events-photo:hover img { transform: scale(1.05); }
.events-case-grid > a { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; }
.events-case-grid > a img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.events-case-grid > a:hover { transform: translateY(-8px); border-color: rgba(111,22,32,.25); box-shadow: 0 28px 60px rgba(61,26,27,.14); }
.events-case-grid > a:hover img { transform: scale(1.045); }

/* ---------- Scroll float-in (only once the script confirms motion is OK) ---------- */
.events-motion-ready [data-events-float] {
  opacity: 0;
  translate: 0 34px;
  transition: opacity .8s ease, translate .9s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--float-delay, 0s);
}
.events-motion-ready [data-events-float].is-in { opacity: 1; translate: 0 0; }

/* Collage photos keep a gentle idle drift so the top never feels static. */
@keyframes events-photo-drift { from { translate: 0 0; } to { translate: 0 -8px; } }
.events-photo-top { animation: events-photo-drift 5s ease-in-out infinite alternate; }
.events-photo-bottom { animation: events-photo-drift 6s ease-in-out -2.5s infinite alternate; }

/* ---------- Bridal shower spotlight: title first, script underneath ---------- */
.events-static-story.events-spotlight .events-spotlight-title { margin-top: 0; }
.events-spotlight .events-spotlight-script { margin: -.04em 0 0 .06em; color: #e8c6bd; }

/* ---------- Closing CTA ---------- */
.events-final h2 { margin-bottom: 34px; }

/* ---------- "Not every event needs a full-service planner" on smaller screens ---------- */
.events-reframe-copy p strong { color: #e6c7aa; font-family: var(--serif); font-size: 1.35em; font-weight: 500; }

@media (max-width: 900px) {
  /* Photo collage leads the hero on phones and tablets. */
  .events-hero-collage { order: -1; min-height: 420px; margin: 0 0 34px; }
  .events-hero-grid { gap: 0; }
  .events-reframe-grid { gap: 22px; }
}

@media (max-width: 620px) {
  .events-hero { padding-top: 26px; }
  .events-hero-collage { min-height: 330px; margin: 0 0 30px; }
  .events-photo-main { inset: 18px 34px 18px 0; }
  .events-photo-top, .events-photo-bottom { border-width: 6px; }
  .events-reframe h2 { font-size: clamp(40px, 11.5vw, 46px); line-height: .98; }
  .events-reframe-copy p { font-size: 15.5px; line-height: 1.7; }
  .events-reframe-copy p:first-child { margin-top: 0; }
  .events-final h2 { font-size: clamp(54px, 15vw, 72px); }
  .events-final .actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .events-photo, .events-photo img, .events-case-grid > a, .events-case-grid > a img { transition: none; }
  .events-photo:hover, .events-case-grid > a:hover, .events-photo:hover img, .events-case-grid > a:hover img { transform: none; }
  .events-photo-top, .events-photo-bottom { animation: none; }
}