/* Integration layer — pieces outside the design-system inventory.
   Loaded last; may rely on tokens.css variables. */

/* ---- feature card bullet points ---- */
.feature-card__points {
  margin-block-start: 0.9rem;
  padding-inline-start: 1.1rem;
  color: var(--color-ink-soft, #47548A);
  font-size: 0.95rem;
  line-height: 1.7;
}
.feature-card__points li::marker { color: var(--color-primary, #F5A31C); }

/* ---- prose block (about mission / commitments) ---- */
.prose { max-inline-size: 46rem; margin-inline: auto; text-align: center; }
.prose__text { margin-block-start: 1rem; }

/* ---- event-card gradient variants map onto the token gradient scale ---- */
.event-card__cover--g1 { background: var(--grad-1); }
.event-card__cover--g2 { background: var(--grad-2); }
.event-card__cover--g3 { background: var(--grad-3); }
.event-card__cover--g4 { background: var(--grad-4); }
.event-card__cover--g5 { background: var(--grad-5); }
.event-card__cover--g6 { background: var(--grad-6); }

/* ---- phone mockup internals (hero art) ---- */
.phone-mock__notch {
  inline-size: 38%;
  block-size: 14px;
  margin: 10px auto 4px;
  border-radius: 999px;
  background: rgba(31, 42, 86, 0.12);
}
.phone-mock__screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.pm-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(31, 42, 86, 0.08);
}
.pm-profile__avatar {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  font-size: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD08A, #F7B440);
}
.pm-profile__lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pm-line { display: block; block-size: 8px; border-radius: 999px; background: #E8EBF4; }
.pm-line--w60 { inline-size: 60%; }
.pm-line--w40 { inline-size: 40%; }
.pm-verified {
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: #7fb685;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.pm-bubble {
  max-inline-size: 70%;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 15px;
  letter-spacing: 2px;
}
.pm-bubble--them {
  align-self: flex-start;
  background: #fff;
  border-end-start-radius: 4px;
  box-shadow: 0 3px 10px rgba(31, 42, 86, 0.07);
}
.pm-bubble--me {
  align-self: flex-end;
  background: #F5A31C;
  border-end-end-radius: 4px;
}
.pm-event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(31, 42, 86, 0.08);
}
.pm-event__emoji { font-size: 22px; }
.pm-event__lines { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.pm-event__lines strong {
  font-size: 12px;
  color: #1F2A56;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-event__lines small { font-size: 10px; color: #5A6489; }
.pm-event__tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: #FDEED3;
  color: #8F5B00;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- admin bar (WordPress-style, only when logged in as admin) ---- */
:root { --admin-bar-h: 36px; }
.admin-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  block-size: var(--admin-bar-h);
  background: #161F42;
  color: #E9EDF7;
  font-size: 13px;
  font-family: var(--font-body);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 10px rgba(0, 0, 0, 0.25);
}
.admin-bar__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  block-size: 100%;
  padding-inline: 12px;
}
.admin-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 8px 12px;
  block-size: 100%;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
}
.admin-bar__brand:hover { background: rgba(255, 255, 255, 0.08); }
.admin-bar__dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--color-primary, #F5A31C);
  box-shadow: 0 0 0 3px rgba(245, 163, 28, 0.25);
}
.admin-bar__brand-sub {
  font-weight: 500;
  opacity: 0.7;
  font-size: 12px;
}
.admin-bar__links {
  display: flex;
  align-items: center;
  gap: 2px;
  block-size: 100%;
}
.admin-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: 100%;
  padding-inline: 12px;
  color: #E9EDF7;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.admin-bar__link:hover,
.admin-bar__link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}
.admin-bar__link--primary { color: #FFD08A; font-weight: 700; }
.admin-bar__right {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: 100%;
}
.admin-bar__hint { opacity: 0.55; font-size: 12px; }
.admin-bar__logout { color: #FFC46A; }

/* push the page (and sticky navbar) down by the bar height */
html.has-admin-bar body { padding-block-start: var(--admin-bar-h); }
html.has-admin-bar .navbar { inset-block-start: var(--admin-bar-h); }

/* per-section edit pill */
.is-editable { position: relative; }
.edit-pill {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #161F42;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.is-editable:hover .edit-pill,
.edit-pill:focus-visible { opacity: 1; transform: translateY(-1px); }
.edit-pill:hover { background: var(--color-primary, #F5A31C); }
.hero .edit-pill { inset-block-start: 16px; }

@media (max-width: 720px) {
  .admin-bar__hint, .admin-bar__brand-sub { display: none; }
  .admin-bar__link { padding-inline: 8px; }
  .edit-pill__label { display: none; }
}
@media print { .admin-bar, .edit-pill { display: none !important; } }

/* ---- testimonial byline: gap + separator between name and city ---- */
.testimonial figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-block-start: auto;
}
.testimonial figcaption .testimonial__detail::before {
  content: "·";
  margin-inline-end: 0.5em;
  color: var(--color-ink-muted, #5A6489);
}

/* ---- uploaded cover images ---- */
/* Event cards show the ENTIRE admin-cropped image at its own ratio — no
   second crop by the card box. Crop cards at the same ratio for an even grid. */
.event-card__cover--img {
  display: block;
  min-block-size: 0;
  background: none;
}
.event-card__cover--img img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.post-card__cover--img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* article header cover keeps the cropped image's own aspect ratio */
.post__cover-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 24px;
  margin-block-end: 1.5rem;
}

/* ---- post page extras ---- */
.post__cover {
  inline-size: 100%;
  block-size: 220px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 64px;
  margin-block-end: 1.5rem;
}

/* ---- html-mode blog posts (quick publish) ---- */
.post__body--html img, .post__body--html video { max-inline-size: 100%; block-size: auto; border-radius: 12px; }
.post__body--html table { display: block; inline-size: 100%; overflow-x: auto; border-collapse: collapse; }
.post__body--html td, .post__body--html th { border: 1px solid rgba(31, 42, 86, 0.15); padding: 8px 12px; }
.post__body--html pre { overflow-x: auto; background: rgba(31, 42, 86, 0.06); padding: 14px; border-radius: 12px; }

/* ---- brand logo image (navbar / footer) ---- */
.navbar__logo::before, .navbar__logo::after { display: none !important; content: none !important; }
.navbar__logomark { inline-size: 34px; block-size: auto; display: block; }
.footer__logo { display: inline-flex; align-items: center; gap: 10px; }
.footer__logo img { inline-size: 28px; block-size: auto; }

/* ---- hero phone: real app screenshot ---- */
/* inner radius = bezel radius (44px) minus bezel padding (11px) */
.phone-mock--shot .phone-mock__screen {
  padding: 0;
  display: block;
  overflow: hidden;
  border-radius: 33px;
  block-size: 100%;
}
.phone-mock__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}