@import url("form-controls.css");

* { box-sizing: border-box; }
:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #252326; background: var(--event-background); }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: inherit; }
.powered-by-footer { margin-top: auto; background: #fbfbf7; padding: 10px; text-align: center; }
.powered-by-footer img { max-height: 40px; max-width: 100%; width: auto; }

public-event-page, public-event-brand, public-event-aside, public-event-main, public-event-cover, public-event-hosts, public-event-attendees, public-event-action, public-event-section, public-event-description, public-event-unavailable { display: flex; }
public-event-brand { width: min(1120px, calc(100% - 40px)); margin: 20px auto 0; justify-content: flex-start; }
public-event-brand a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; }
public-event-brand img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
public-event-page { width: min(1040px, calc(100% - 40px)); margin: 28px auto 72px; align-items: flex-start; gap: clamp(40px, 7vw, 88px); }
public-event-aside { width: 42%; flex: 0 0 42%; flex-direction: column; gap: 28px; }
public-event-main { min-width: 0; flex: 1; flex-direction: column; }
public-event-cover { aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: white; box-shadow: 0 18px 55px rgba(37,35,38,.12); }
public-event-cover > img { width: 100%; height: 100%; object-fit: cover; }

public-event-hosts { flex-direction: column; gap: 10px; }
public-event-attendees { align-items: center; flex-wrap: wrap; gap: 10px; }
public-event-hosts small, public-event-attendees small { color: #6f6b70; font-weight: 600; }
public-event-hosts img, public-event-initials { border-radius: 8px; }
public-event-initials { display: inline-flex; align-items: center; justify-content: center; background: white; }
public-event-avatars { display: flex; flex-wrap: wrap; gap: 8px; }
public-event-avatars img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }

public-event-main > h1 { margin: 0 0 30px; font-size: clamp(2.3rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -.045em; }
[data-places-remaining]::before { content: attr(data-places-remaining) " places left"; }
[data-places-remaining="1"]::before { content: "1 place left"; }
[data-places-remaining="0"]::before { content: "Full"; }
public-event-action { --theme-color: #18181b; --theme-on-color: white; flex-direction: column; gap: 16px; }
public-event-action > strong { font-size: 1.35rem; }
public-event-action > a, public-event-action registration-member > a { padding: 13px 18px; border-radius: 9px; background: var(--theme-color); color: var(--theme-on-color); text-align: center; text-decoration: none; font-weight: 700; }
public-event-action registration-member > a { display: inline-flex; align-items: center; gap: 8px; }
public-event-action registration-member > a::after { content: ""; width: 1em; height: 1em; flex: none; background: currentColor; mask: url('/assets/icons/external-link.svg') center / contain no-repeat; }
public-event-section { flex-direction: column; margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(37,35,38,.12); line-height: 1.65; }
public-event-section h2 { margin: 0 0 12px; }
public-event-section p { margin: 0 0 12px; }
public-event-description { flex-direction: column; }
public-event-description > :first-child { margin-top: 0; }
public-event-unavailable { width: min(680px, calc(100% - 40px)); margin: 15vh auto; flex-direction: column; }

@media (max-width: 760px) {
  public-event-brand { width: min(560px, calc(100% - 28px)); }
  public-event-page { width: min(560px, calc(100% - 28px)); margin: 22px auto 60px; flex-direction: column; gap: 30px; }
  public-event-aside { width: 100%; flex-basis: auto; }
  public-event-main { width: 100%; }
  public-event-main > h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
  public-event-hosts, public-event-attendees { display: none; }
}

public-event-action registration-step,
public-event-action registration-member,
public-event-action registration-new-member { display: none; }
public-event-action[data-step="ready"] registration-step[data-step="ready"],
public-event-action[data-step="email"] registration-step[data-step="email"],
public-event-action[data-step="name"] registration-step[data-step="name"],
public-event-action[data-step="code"] registration-step[data-step="code"],
public-event-action[data-step="registered"] registration-step[data-step="registered"],
public-event-action[data-authenticated="true"] registration-member,
public-event-action[data-authenticated="false"] registration-new-member { display: flex; flex-direction: column; gap: 12px; }
public-event-action form { display: flex; flex-direction: column; gap: 10px; }
public-event-action registration-fields { display: flex; gap: 10px; }
public-event-action button:focus-visible,
public-event-action a:focus-visible { outline: 2px solid var(--theme-color); outline-offset: 3px; }
public-event-action .rsvp-button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 18px; border: 0; border-radius: 9px;
  background: var(--theme-color); color: var(--theme-on-color);
  font: inherit; font-weight: 650; white-space: nowrap; cursor: pointer;
}
public-event-action heart-icon,
public-event-action heart-icon-filled { display: inline-flex; flex: 0 0 22px; width: 22px; height: 22px; }
public-event-action heart-icon { background: currentColor; mask: url('/assets/icons/heart.svg') center / contain no-repeat; }
public-event-action heart-icon img { display: none; }
public-event-action rsvp-confirmation { display: flex; align-items: center; gap: 9px; }
public-event-action small { color: #6f6b70; line-height: 1.5; }
public-event-action p { margin: 0; line-height: 1.5; }
public-event-action [data-secondary] { flex-direction: row; flex-wrap: wrap; gap: 16px; }
public-event-action [data-secondary] button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
public-event-action button:disabled { opacity: .6; cursor: wait; }
public-event-action [data-registration-error]:empty,
public-event-action [data-registration-message]:empty { display: none; }
public-event-action [data-registration-error] { color: #9c2525; }
@media (max-width: 420px) {
  public-event-action registration-step[data-step="code"] registration-fields { flex-direction: column; }
}

public-event-section iframe { width: 100%; max-width: 100%; border: 0; }

public-event-attendees:has([data-attendee-count="0"]) { display: none; }
[data-attendee-count]::before { content: attr(data-attendee-count); }

public-event-action[data-step="registered"][data-authenticated="true"] registration-step[data-step="registered"] { flex-direction: row; align-items: center; flex-wrap: wrap; }

public-event-action[data-step="name"] registration-fields { width: 100%; }

public-event-action [data-identity-member] { display: none; }
public-event-action[data-authenticated="true"] > [data-identity-member] { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
public-event-action [data-identity-member-name] { font-size: 1.35rem; }
public-event-action [data-identity-member-email] { overflow-wrap: anywhere; }
public-event-action[data-step="registered"] [data-identity-email],
public-event-action[data-step="ready"] [data-identity-email],
public-event-action:not([data-step="email"]) > [data-identity-email] button,
public-event-action[data-completion="checkout"] [data-identity-name] button { display: none; }

/* Event detail rows */
event-facts { display: flex; flex-direction: column; gap: 20px; }
event-fact { display: flex; align-items: flex-start; gap: 13px; }
event-fact > img { width: 24px; height: 24px; margin-top: 3px; flex: none; }
event-fact-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
event-fact small, event-fact event-time, venue-address { color: #6f6b70; font-size: 0.875em; }
event-fact a[href] { text-decoration: underline; }
venue-address { display: block; }
venue-address::before { content: attr(data-address); }
venue-address[data-address=""] { display: none; }

event-partners { display: flex; flex-direction: column; gap: inherit; }
event-partners:empty { display: none; }
event-partner { display: flex; flex-direction: column; gap: 8px; }
event-partner > button { padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; font: inherit; text-align: left; }
event-partner > p { margin: 0; color: #6f6b70; line-height: 1.5; }