/* The meeting card, on two seams.
   One white card where the night of Why Elly meets the light page of Make it yours, and one where Make it yours meets the night of Participation.
   The invitation on the left over the person you meet, the one button large on the right, on white so it stands out against both halves */
.seam { position: relative; z-index: 1; background: linear-gradient(var(--paper) 50%, var(--aubergine) 50%); }
/* After Why Elly the night is above and the light page below */
.seam.seam-down { background: linear-gradient(var(--aubergine) 50%, var(--paper) 50%); }
.seam-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title cta" "who cta"; align-items: center; gap: 18px 48px; max-width: 960px; margin: 0 auto; padding: 32px 32px 32px 40px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(39, 27, 54, .06), 0 36px 72px -28px rgba(39, 27, 54, .6); }
.seam-title { grid-area: title; font-size: 30px; line-height: 1.2; font-weight: 800; color: var(--ink); }
.seam-title em { font-style: normal; color: var(--magenta); }
.seam-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.seam-photo { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.seam-name { font-family: var(--font-heading); font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.seam-role { font-size: 15px; line-height: 1.4; color: var(--muted); }
/* Both faces draw their capitals above their line's middle, so the name and role drop onto the photo's and the pill's centre line */
.seam-name { position: relative; top: .06em; }
.seam-role { position: relative; top: .13em; }
.seam-card .when { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sky); font-family: var(--font-heading); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--blue); }
.seam-card .when .icon { width: 16px; height: 16px; }
/* The shared Book a meeting at full strength and a size up, so it is the one thing to press at this point */
.seam-card .button.cta { grid-area: cta; min-height: 76px; padding: 0 14px 0 36px; border-radius: 18px; font-size: 21px; }
.seam-card .cta-arrow { width: 48px; height: 48px; }

@media (max-width: 900px) {
  .seam-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "who" "cta"; gap: 16px; padding: 28px; }
  .seam-card .button.cta { justify-self: start; margin-top: 8px; }
}
/* On a phone: the invitation, the person under it, then the full-width button */
@media (max-width: 720px) {
  .seam-card { padding: 22px 18px 18px; border-radius: 20px; }
  .seam-title { font-size: 23px; }
  .seam-photo { width: 40px; height: 40px; }
  .seam-who { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
  .seam-photo { grid-row: 1 / 3; }
  .seam-card .when { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
  .seam-card .button.cta { justify-self: stretch; margin-top: 4px; min-height: 68px; font-size: 19px; }
}