/* ============================================================
   components/actions.css — Details circle + RSVP link.
   ============================================================ */
.actions{display:flex;flex-direction:column;align-items:center;gap:30px;padding:4vh 0 9vh;}
.circle{
  width:172px;height:172px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 36% 30%,#8c977a,var(--sage-deep));color:#f5f2e9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  font-family:var(--display);box-shadow:var(--shadow-circle);
  transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.circle:hover{transform:scale(1.05) rotate(-1deg);box-shadow:0 18px 36px rgba(105,116,90,.42);}
.circle small{font-family:var(--ui);letter-spacing:.22em;text-transform:uppercase;font-size:.56rem;opacity:.85;}
.circle span{font-size:1.7rem;letter-spacing:.06em;}
.rsvp-link{background:none;border:none;cursor:pointer;font-family:var(--ui);letter-spacing:.28em;text-transform:uppercase;font-size:.74rem;color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:.4rem;}
.rsvp-link:hover{color:var(--sage-deep);}

@media(min-width:760px){ .actions{flex-direction:row;justify-content:center;gap:44px;} }