/* ============================================================
   components/calendar.css — "Add to your calendar" on the Details
   page: a .holder-cta pill that reveals a small chooser card.
   ============================================================ */
.cal{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:1vh auto 6vh;
}
/* The trigger reuses .holder-cta (the home "Click to continue" pill) so it
   is visually identical; we only reset its top margin inside this block. */
.cal .holder-cta{margin-top:0;}

.cal-menu{
  margin-top:1rem;
  width:min(280px,82vw);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:1rem;
  background:var(--card);
  border:1px solid rgba(169,143,95,.3);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
  animation:cal-pop .26s var(--ease-inout) both;
}
.cal-menu[hidden]{display:none;}
@keyframes cal-pop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.cal-menu-label{
  font-family:var(--ui);
  font-size:.56rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:center;
  margin:0 0 .2rem;
}
.cal-opt{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.55rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:#fff;
  cursor:pointer;
  font-family:var(--ui);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.cal-opt:hover,.cal-opt:focus-visible{
  border-color:var(--gold);
  color:var(--sage-deep);
  background:rgba(251,248,241,1);
}

@media(prefers-reduced-motion:reduce){ .cal-menu{animation:none;} }