/* Post an event v2 - approved "Direction C - live poster" (Views/Events/PostEventV2.cshtml).
   Desktop: two columns - a sticky pink stage with the event card on the left, the form on the page ground on the right.
   Phones (< 900px): one column, a compact stage first (smaller photo area, no rotation, not sticky).
   Depends on tokens.css + components.css. The stage gradient and the date badge are the design's fixed colours (white on pink in
   both themes); everything else uses tokens. --pe-err is the one value without a token (same red as Add a place). */

.cg-page-postevent { --pe-err: #b3122e; }
[data-theme="velvet"] .cg-page-postevent { --pe-err: #ff8fa3; }

.cg-pe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }

/* ---- Stage ------------------------------------------------------------------------------------------- */
.cg-pe-stage { position: relative; overflow: clip; /* not hidden: hidden would stop the sticky card */
  background: linear-gradient(160deg, #a80f62 0%, #d0157a 45%, #f08bbb 100%); color: #fff; }
.cg-pe-stage:after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px); }
/* the pink column runs the full height of the form; its content stays in view while the form scrolls */
.cg-pe-stage__in { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 44px 48px; max-width: 600px; }
.cg-pe-stage h1 { margin: 0; font: italic 400 44px/1 var(--font-display); letter-spacing: -.01em; color: #fff; }
.cg-pe-sub { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 420px; }
.cg-pe-note { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 420px; }
.cg-pe-note span { font-weight: var(--w-strong); color: #fff; }

/* ---- The poster (event card) ------------------------------------------------------------------------- */
.cg-pe-poster { background: var(--surface); color: var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(30,0,15,.6);
  max-width: 420px; transform: rotate(-1.5deg); }
.cg-pe-img { position: relative; height: 200px; background: linear-gradient(135deg, #3d0f24, #7a1d4c 60%, #d0157a); }
.cg-pe-img__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-pe-img__photo[hidden] { display: none; }
.cg-pe-img__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(255,255,255,.6); }
.cg-pe-date { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px;
  background: #fff; color: #3d0f24; border-radius: 16px; padding: 8px 12px; box-shadow: 0 6px 16px -8px rgba(30,0,15,.5); }
.cg-pe-date__top { font-size: 11px; font-weight: var(--w-strong); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cg-pe-date b { font: italic 400 32px/1 var(--font-display); }
.cg-pe-date.is-empty { color: #8a5a6c; }
.cg-pe-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 22px 22px; }
.cg-pe-title { margin: 0; font: italic 400 30px/1.05 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.cg-pe-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); overflow-wrap: anywhere; }
.cg-pe-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--link);
  font-size: 13px; font-weight: var(--w-strong); }
.cg-pe-poster .is-empty { color: var(--ink-caption); }
.cg-pe-chip.is-empty { background: var(--surface-soft); color: var(--ink-caption); font-weight: var(--w-regular); }
.cg-pe-title.is-empty { color: var(--ink-caption); }

/* ---- Right column ------------------------------------------------------------------------------------- */
.cg-pe-side { background: var(--ground); padding: 40px 48px 64px; min-width: 0; }
.cg-pe-form, .cg-pe-card { max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
.cg-pe-h2, .cg-pe-card h2 { margin: 0; font: italic 400 28px/1 var(--font-display); color: var(--ink); }
[data-theme="velvet"] .cg-pe-h2, [data-theme="velvet"] .cg-pe-card h2 { color: var(--heading); }

/* Fields (the Add a place set, with the Direction C box: 48px, 14px radius, ground fill, 1.5px border, 4px focus ring) */
.cg-field { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.cg-lbl { font-size: 14px; font-weight: var(--w-strong); color: var(--ink); padding: 0; }
.cg-lbl span { font-weight: var(--w-regular); color: var(--ink-muted); }
.cg-inp { width: 100%; min-height: 48px; height: 48px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--ground); color: var(--ink);
  padding: 0 14px; font: var(--w-regular) 16px var(--font-sans); box-sizing: border-box; }
.cg-inp::placeholder { color: var(--ink-caption); }
.cg-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(208,21,122,.14); }
.cg-inp[aria-invalid="true"] { border-color: var(--pe-err); }
.cg-area { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
input[type="date"].cg-inp, input[type="time"].cg-inp { -webkit-appearance: none; appearance: none; line-height: 44px; }
.cg-help { font-size: 13px; color: var(--ink-muted); line-height: 1.45; }
.cg-help.is-over { color: var(--pe-err); font-weight: var(--w-strong); }
.cg-err { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--pe-err); font-weight: var(--w-strong); line-height: 1.45; }
.cg-err svg { flex: none; margin-top: 2px; }
.cg-err[hidden] { display: none; }
.cg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cg-pe-set { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-pe-set:focus { outline: none; }
.cg-pe-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cg-pe-dt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
.cg-pe-dt .cg-inp { padding: 0 10px; }
.cg-pe-endhelp { margin-top: -10px; }

/* Type chips: radio buttons */
.cg-pe-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-pe-chipin { position: relative; display: inline-flex; }
.cg-pe-chipin input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cg-pe-chipin span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--ground); color: var(--ink); font-size: 15px; white-space: nowrap; }
.cg-pe-chipin input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--link); font-weight: 600; }
.cg-pe-chipin input:focus-visible + span { box-shadow: 0 0 0 4px rgba(208,21,122,.14); border-color: var(--accent); }

.cg-pe-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--pe-err);
  color: var(--pe-err); font-size: 14px; font-weight: var(--w-strong); line-height: 1.45; }
.cg-pe-alert svg { flex: none; margin-top: 1px; }
.cg-pe-alert[hidden] { display: none; }
.cg-pe-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* City type-ahead (as Add a place) */
.cg-city { position: relative; }
.cg-listbox { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto;
  border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-map); border: 1px solid var(--border); }
.cg-listbox[hidden] { display: none; }
.cg-listbox li { display: block; min-height: 44px; line-height: 44px; padding: 0 12px; border-radius: var(--radius-s); font-size: 15px; color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-listbox li[aria-selected="true"] { background: var(--surface-soft); }
.cg-listbox mark { background: none; color: inherit; font-weight: var(--w-strong); }

/* Map pin */
.cg-pe-pin[hidden] { display: none; }
.cg-pe-map { width: 100%; height: 200px; border-radius: 18px; overflow: hidden; background: var(--surface-soft); border: 1.5px solid var(--border); isolation: isolate; }
.cg-pe-pinicon { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 4px 12px -2px rgba(61,15,36,.45); cursor: grab; box-sizing: border-box; }
.cg-pe-pinicon:active { cursor: grabbing; }

/* Make it stand out */
.cg-pe-more { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cg-pe-more > summary { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 32px 8px 0; position: relative;
  cursor: pointer; list-style: none; }
.cg-pe-more > summary::-webkit-details-marker { display: none; }
.cg-pe-more > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .15s; }
.cg-pe-more[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.cg-pe-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.cg-pe-more__t { font: italic 400 28px/1.1 var(--font-display); color: var(--ink); }
.cg-pe-more__opt { font: var(--w-regular) 13px var(--font-sans); color: var(--ink-muted); margin-left: 6px; font-style: normal; }
.cg-pe-more__hint { font-size: 14px; color: var(--link); font-weight: var(--w-strong); }
.cg-pe-more__in { display: flex; flex-direction: column; gap: 16px; padding: 6px 0 22px; }
.cg-pe-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 16px; border: 1.5px dashed var(--accent-tint-border); border-radius: 14px; background: var(--ground); text-align: center; }
.cg-pe-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cg-pe-drop__t { font-size: 15px; color: var(--ink-muted); overflow-wrap: anywhere; }
.cg-pe-drop__t b { color: var(--link); font-weight: var(--w-strong); }
.cg-pe-drop:focus-within, .cg-pe-drop.is-over { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(208,21,122,.14); }
.cg-pe-drop:has(input[aria-invalid="true"]) { border-color: var(--pe-err); }
.cg-pe-linkbtn { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink);
  font: var(--w-strong) 14px var(--font-sans); text-decoration: underline; cursor: pointer; }
.cg-pe-linkbtn[hidden] { display: none; }

.cg-pe-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 4px; }
.cg-body .cg-pe-form .cg-pe-submit { height: 52px; padding: 0 26px; font-size: 17px; }
.cg-body .cg-pe-form .cg-pe-submit[disabled] { opacity: .65; cursor: progress; }
.cg-pe-fine { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }

/* Guest + thanks card */
.cg-pe-card { background: var(--surface); border-radius: var(--radius-xxl); padding: 30px 32px 26px; gap: 14px; align-items: flex-start; }
.cg-pe-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.cg-pe-lead strong { color: var(--ink); }
.cg-pe-done__ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); }
.cg-pe-done__act { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; padding-top: 6px; }
.cg-pe-done__act .cg-btn { flex: 1 1 200px; text-decoration: none; }
.cg-body .cg-pe-done .cg-btn--outline { height: 52px; border-color: var(--ink-caption); font-size: 16px; font-weight: var(--w-strong); }
.cg-body .cg-pe-done .cg-btn--primary { height: 52px; font-size: 16px; }
.cg-pe-card .cg-pe-fine { margin: 0; text-align: left; }

/* ---- Phones / narrow ------------------------------------------------------------------------------------ */
@media (max-width: 899px) {
  .cg-pe { grid-template-columns: minmax(0, 1fr); }
  .cg-pe-stage__in { position: relative; padding: 20px var(--gutter) 26px; max-width: none; gap: 10px; }
  .cg-pe-pair { grid-template-columns: minmax(0, 1fr); }
  .cg-pe-endhelp { margin-top: -6px; }
  .cg-pe-date { top: 16px; bottom: auto; }
  .cg-pe-img__hint { justify-content: flex-start; align-items: flex-start; padding: 22px 0 0 112px; }
  .cg-pe-send { flex-direction: column; align-items: flex-start; }
  .cg-pe-stage h1 { font-size: 38px; }
  .cg-pe-sub { margin-bottom: 6px; font-size: 15px; }
  .cg-pe-poster { transform: none; max-width: 480px; width: 100%; }
  .cg-pe-img { height: 140px; }
  .cg-pe-title { font-size: 26px; }
  .cg-pe-note { margin-top: 8px; font-size: 13px; }
  .cg-pe-side { padding: 26px var(--gutter) 48px; }
  .cg-pe-card { padding: 24px 20px 22px; border-radius: var(--radius-xl); }
}
@media (max-width: 420px) {
  .cg-pe-done__act .cg-btn { flex-basis: 100%; }
}

/* ---- Review page (/events/review, editors) ------------------------------------------------------------- */
.cg-er { padding-block: 24px 64px; display: flex; flex-direction: column; gap: 18px; }
.cg-er-h1 { margin: 0; font: italic 400 44px/1 var(--font-display); color: var(--ink); }
.cg-er-h2 { margin: 18px 0 0; font: italic 400 28px/1 var(--font-display); color: var(--ink); }
.cg-er-lead { margin: 0; font-size: 16px; color: var(--ink-muted); }
.cg-er-flash { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--live-tint); color: var(--on-live); font-weight: var(--w-strong); }
.cg-er-flash.is-error { background: var(--surface); border: 1.5px solid var(--pe-err); color: var(--pe-err); }
.cg-er-flash a { margin-left: 8px; color: inherit; text-decoration: underline; }
.cg-er-item { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; padding: 24px; border-radius: var(--radius-xl); background: var(--surface); }
.cg-er-poster { transform: none; box-shadow: var(--shadow-card); }
.cg-er-poster .cg-pe-img { height: 140px; }
.cg-er-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cg-er-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 15px; }
.cg-er-facts dt { font-weight: var(--w-strong); color: var(--ink-muted); }
.cg-er-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cg-er-desc { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; border-radius: 14px; background: var(--ground); font-size: 15px; line-height: 1.5; }
.cg-er-dup { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--warn-tint); color: var(--on-warn); font-weight: var(--w-strong); overflow-wrap: anywhere; }
.cg-er-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: end; }
.cg-er-approve, .cg-er-reject { display: flex; flex-direction: column; gap: 8px; }
.cg-er-check { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink); }
.cg-er-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.cg-er-recent { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-muted); }
/* Comments to review (Views/Location/CommentReviewV2.cshtml): the same items, one column, reasons as chips. */
.cg-cr .cg-cr-item { grid-template-columns: minmax(0, 1fr); }
.cg-cr-flags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cg-cr-flag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--warn-tint); color: var(--on-warn); font-size: 13px; font-weight: var(--w-strong); }
.cg-cr .cg-er-actions { max-width: 520px; }
@media (max-width: 899px) {
  .cg-er-item { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .cg-er-actions { grid-template-columns: minmax(0, 1fr); }
  .cg-er-h1 { font-size: 38px; }
}