/* ============================================================
   public-event-page.css
   Page-internal styles for the public event page
   (/{orgCode}/participant-events/{urlCode}).

   Scoped under body.fr-public (the public layout body class) and
   compounded with body.fr-public-event so the rules don't leak
   onto any other public-layout page.

   Class naming follows the .fr-event-* BEM lineage already in
   use on this page; some legacy classes are reused (refined),
   others are new.
   ============================================================ */

body.fr-public-event main {
  /* Tighten top padding — the hero photo IS the page header */
  padding-top: var(--fr-space-5);
  padding-bottom: var(--fr-space-10);
}

@media (max-width: 640px) {
  body.fr-public-event main {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(var(--fr-space-10) + 5rem); /* room for sticky CTA bar */
  }
}

/* ============================================================
   Hero — full-bleed photo with floating presenter chip
   ============================================================ */

body.fr-public-event .fr-event-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--fr-radius-lg);
  overflow: hidden;
  background: var(--fr-color-surface-sunken);
  border: 1px solid var(--fr-color-border);
}
body.fr-public-event .fr-event-hero > img,
body.fr-public-event .fr-event-hero > svg {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Soft gradient at the bottom for chip legibility */
body.fr-public-event .fr-event-hero::after {
  content: '';
  position: absolute;
  inset: 60% 0 0 0;
  background: linear-gradient(180deg, rgba(22,33,58,0) 0%, rgba(22,33,58,0.45) 100%);
  pointer-events: none;
}

body.fr-public-event .fr-event-hero__presenter {
  position: absolute;
  left: var(--fr-space-5);
  bottom: var(--fr-space-5);
  z-index: 1;
}

@media (max-width: 640px) {
  body.fr-public-event .fr-event-hero {
    aspect-ratio: 4 / 3;
    border-radius: 0;
    border-left: 0; border-right: 0;
  }
  body.fr-public-event .fr-event-hero::after {
    inset: 50% 0 0 0;
  }
  body.fr-public-event .fr-event-hero__presenter {
    left: var(--fr-space-4);
    bottom: var(--fr-space-4);
  }
}

/* ============================================================
   Event header — title + at-a-glance summary
   ============================================================ */

body.fr-public-event .fr-event-header {
  margin-top: var(--fr-space-7);
  margin-bottom: var(--fr-space-7);
  padding-bottom: var(--fr-space-6);
  border-bottom: 1px solid var(--fr-color-border);
}
body.fr-public-event .fr-event-header__title {
  font-size: clamp(var(--fr-text-2xl), 4vw + 0.5rem, var(--fr-text-4xl));
  line-height: var(--fr-leading-tight);
  letter-spacing: -0.03em;
  margin: 0;
}
body.fr-public-event .fr-event-header__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fr-space-2) var(--fr-space-5);
  margin-top: var(--fr-space-4);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-md);
}
body.fr-public-event .fr-event-header__summary > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
/* Tiny inline icons for date / venue — drawn as CSS shapes (no SVG asset) */
body.fr-public-event .fr-event-header__summary > span::before {
  content: '';
  width: 1rem; height: 1rem;
  background: currentColor;
  border-radius: var(--fr-radius-sm);
  opacity: 0.5;
}
body.fr-public-event .fr-event-header__summary > span.is-date::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M5 1.5a.75.75 0 0 1 .75.75V3h4.5v-.75a.75.75 0 0 1 1.5 0V3h.75A1.5 1.5 0 0 1 14 4.5V13a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13V4.5A1.5 1.5 0 0 1 3.5 3h.75v-.75A.75.75 0 0 1 5 1.5Zm7.5 4.5h-9V13h9V6Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M5 1.5a.75.75 0 0 1 .75.75V3h4.5v-.75a.75.75 0 0 1 1.5 0V3h.75A1.5 1.5 0 0 1 14 4.5V13a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13V4.5A1.5 1.5 0 0 1 3.5 3h.75v-.75A.75.75 0 0 1 5 1.5Zm7.5 4.5h-9V13h9V6Z'/></svg>") center/contain no-repeat;
  border-radius: 0;
  opacity: 0.85;
}
body.fr-public-event .fr-event-header__summary > span.is-venue::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1.5a5 5 0 0 0-5 5c0 3.6 5 8 5 8s5-4.4 5-8a5 5 0 0 0-5-5Zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 1.5a5 5 0 0 0-5 5c0 3.6 5 8 5 8s5-4.4 5-8a5 5 0 0 0-5-5Zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/></svg>") center/contain no-repeat;
  border-radius: 0;
  opacity: 0.85;
}

@media (max-width: 640px) {
  body.fr-public-event .fr-event-header {
    margin-top: var(--fr-space-6);
    margin-bottom: var(--fr-space-6);
    padding-bottom: var(--fr-space-5);
    padding-left: var(--fr-container-pad-x);
    padding-right: var(--fr-container-pad-x);
  }
  body.fr-public-event .fr-event-header__summary {
    margin-top: var(--fr-space-3);
    font-size: var(--fr-text-base);
  }
}

/* ============================================================
   Layout — 2-col on >=960px, single-col below
   (legacy .fr-event-layout names kept where they fit)
   ============================================================ */

body.fr-public-event .fr-event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20rem, 32%, 24rem);
  gap: var(--fr-space-8);
  align-items: start;
}

body.fr-public-event .fr-event-layout__main {
  min-width: 0;
}

body.fr-public-event .fr-event-layout__aside {
  position: sticky;
  top: calc(3.75rem + var(--fr-space-5));
  display: flex;
  flex-direction: column;
  gap: var(--fr-space-4);
}

@media (max-width: 960px) {
  body.fr-public-event .fr-event-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fr-space-7);
  }
  body.fr-public-event .fr-event-layout__aside {
    position: static;
  }
}

@media (max-width: 640px) {
  body.fr-public-event .fr-event-layout {
    padding-left: var(--fr-container-pad-x);
    padding-right: var(--fr-container-pad-x);
    gap: var(--fr-space-6);
  }
}

/* ============================================================
   About — plain paragraph treatment (replaces .fr-prose box)
   ============================================================ */

body.fr-public-event .fr-event-about p {
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  max-width: 60ch;
}
body.fr-public-event .fr-event-about p + p {
  margin-top: var(--fr-space-3);
}

/* ============================================================
   Times & dates card — instance picker + single Register CTA
   ============================================================ */

body.fr-public-event .fr-instance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body.fr-public-event .fr-instance {
  display: flex;
  align-items: center;
  gap: var(--fr-space-3);
  padding: var(--fr-space-4) 0;
  border-top: 1px solid var(--fr-color-border);
  cursor: pointer;
}
body.fr-public-event .fr-instance:first-child { border-top: 0; padding-top: var(--fr-space-1); }
body.fr-public-event .fr-instance:last-child  { padding-bottom: var(--fr-space-2); }

/* radio circle */
body.fr-public-event .fr-instance__radio {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--fr-radius-pill);
  border: 2px solid var(--fr-color-border-strong);
  background: var(--fr-color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--fr-duration-base) var(--fr-ease);
}
body.fr-public-event .fr-instance__radio::after {
  content: '';
  width: 0.6rem; height: 0.6rem;
  border-radius: var(--fr-radius-pill);
  background: var(--fr-color-primary);
  transform: scale(0);
  transition: transform var(--fr-duration-base) var(--fr-ease);
}
body.fr-public-event .fr-instance.is-selected .fr-instance__radio {
  border-color: var(--fr-color-primary);
}
body.fr-public-event .fr-instance.is-selected .fr-instance__radio::after {
  transform: scale(1);
}
body.fr-public-event .fr-instance.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
body.fr-public-event .fr-instance.is-disabled .fr-instance__radio {
  background: var(--fr-color-surface-sunken);
}

body.fr-public-event .fr-instance__main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.fr-public-event .fr-instance__when {
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  font-size: var(--fr-text-base);
  font-variant-numeric: tabular-nums;
}
body.fr-public-event .fr-instance__meta {
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
}

body.fr-public-event .fr-instance__tag {
  flex: 0 0 auto;
}

body.fr-public-event .fr-event-register {
  margin-top: var(--fr-space-5);
}

/* Empty / disabled callout (Stripe-not-connected variant) */
body.fr-public-event .fr-event-cta-disabled {
  display: block;
  padding: var(--fr-space-4) var(--fr-space-4);
  background: var(--fr-color-surface-sunken);
  border: 1px dashed var(--fr-color-border-strong);
  border-radius: var(--fr-radius-md);
  font-size: var(--fr-text-sm);
  color: var(--fr-color-ink-muted);
  line-height: var(--fr-leading-snug);
  margin-top: var(--fr-space-5);
}
body.fr-public-event .fr-event-cta-disabled strong {
  display: block;
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
  margin-bottom: 2px;
}

/* ============================================================
   Pricing — rows with eligibility text inline
   ============================================================ */

body.fr-public-event .fr-event-pricing {
  display: flex;
  flex-direction: column;
}

body.fr-public-event .fr-event-pricing__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--fr-space-3);
  padding: var(--fr-space-3) 0;
  border-top: 1px solid var(--fr-color-border);
}
body.fr-public-event .fr-event-pricing__row:first-child {
  border-top: 0;
  padding-top: var(--fr-space-1);
}

body.fr-public-event .fr-event-pricing__name {
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  font-size: var(--fr-text-base);
}
body.fr-public-event .fr-event-pricing__eligibility {
  display: block;
  margin-top: 2px;
  font-size: var(--fr-text-sm);
  font-weight: var(--fr-weight-regular);
  color: var(--fr-color-ink-muted);
}

body.fr-public-event .fr-event-pricing__fee {
  font-size: var(--fr-text-md);
  font-weight: var(--fr-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--fr-color-ink);
  white-space: nowrap;
}

/* ============================================================
   Where — venue + map, with mobile "Show map" toggle
   ============================================================ */

body.fr-public-event .fr-event-where__address {
  font-style: normal;
  font-size: var(--fr-text-base);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
}
body.fr-public-event .fr-event-where__address > span {
  display: block;
  color: var(--fr-color-ink-muted);
}
body.fr-public-event .fr-event-where__address > strong {
  display: block;
  color: var(--fr-color-ink);
  font-weight: var(--fr-weight-semibold);
}

/* Phone-only: see the @media (max-width: 640px) block below for the
   visible "Show map" toggle. Hide on every other viewport. */
body.fr-public-event .fr-event-where__toggle { display: none; }

body.fr-public-event .fr-map {
  margin-top: var(--fr-space-4);
  border-radius: var(--fr-radius-md);
  overflow: hidden;
  border: 1px solid var(--fr-color-border);
  background: #d8e8d8; /* greenish map placeholder bg */
  aspect-ratio: 16 / 8;
  width: 100%;
  max-width: 36rem;
}
body.fr-public-event .fr-map iframe,
body.fr-public-event .fr-map > svg,
body.fr-public-event .fr-map > div {
  width: 100%; height: 100%; border: 0; display: block;
}

@media (max-width: 640px) {
  body.fr-public-event .fr-event-where__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--fr-space-3);
    padding: 0.4rem 0.75rem;
    background: var(--fr-color-surface);
    border: 1.5px solid var(--fr-color-border-strong);
    border-radius: var(--fr-radius-md);
    font: inherit;
    font-size: var(--fr-text-sm);
    font-weight: var(--fr-weight-semibold);
    color: var(--fr-color-ink);
    cursor: pointer;
  }
  body.fr-public-event .fr-event-where__toggle::after {
    content: '+';
    font-size: var(--fr-text-md);
    line-height: 1;
    color: var(--fr-color-ink-muted);
  }
  body.fr-public-event .fr-event-where__toggle[aria-expanded='true']::after { content: '−'; }
  body.fr-public-event .fr-event-where__toggle[aria-expanded='false'] + .fr-map { display: none; }
  body.fr-public-event .fr-map { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Sponsor card — embeds suggested fundraising target
   ============================================================ */

body.fr-public-event .fr-sponsor-card .fr-card__body p {
  color: var(--fr-color-ink-muted);
  line-height: var(--fr-leading-normal);
  margin-bottom: var(--fr-space-4);
}
body.fr-public-event .fr-sponsor-card__target {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fr-space-3);
  padding: var(--fr-space-3) var(--fr-space-4);
  background: var(--fr-color-surface-sunken);
  border-radius: var(--fr-radius-md);
  margin-bottom: var(--fr-space-4);
  font-size: var(--fr-text-sm);
}
body.fr-public-event .fr-sponsor-card__target > span:first-child {
  color: var(--fr-color-ink-muted);
}
body.fr-public-event .fr-sponsor-card__target > span:last-child {
  font-weight: var(--fr-weight-bold);
  color: var(--fr-color-ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Terms — small, low-key
   ============================================================ */

body.fr-public-event .fr-event-terms {
  margin-top: var(--fr-space-8);
  padding-top: var(--fr-space-5);
  border-top: 1px solid var(--fr-color-border);
  color: var(--fr-color-ink-muted);
  font-size: var(--fr-text-sm);
  line-height: var(--fr-leading-relaxed);
}
body.fr-public-event .fr-event-terms h3 {
  font-size: var(--fr-text-base);
  font-weight: var(--fr-weight-semibold);
  color: var(--fr-color-ink);
  margin-bottom: var(--fr-space-2);
}

/* ============================================================
   Section headings inside the event main column
   ============================================================ */

body.fr-public-event .fr-event-layout__main h2 {
  font-size: var(--fr-text-xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--fr-space-4);
}
body.fr-public-event .fr-event-layout__main section + section {
  margin-top: var(--fr-space-8);
}

/* <fr-presenter> and <fr-cta-bar> were originally introduced here for
   the public event page. They moved into components.css when the
   register flow started consuming them too — the rules are
   global-scoped (no body.fr-public-event prefix), so they were never
   page-internal in practice. */