/*
 * Local SEO city page (`templates/pages/local-city.php`) chrome — `lc-*`
 * classes ported from `local-city.jsx`'s own page-local `PageStyles()`
 * <style> block, same per-page-CSS-file convention `about.css` uses for
 * `am-*`.
 *
 * FF-11 (2026-08-27) restored the rule sets the 1.7 port deliberately
 * dropped with its deferred sections: the hero's two-column grid + flip
 * card (`.lc-hero-grid`/`.lc-hero-card`/`.lc-flip-*`/`.lc-chip`), the
 * event rows' going cluster (`.lc-going*`, incl. the mobile grid's
 * `going` area), and the signup plate's live form
 * (`.lc-signup-form`/`-field`/`-input`/`-ctas`/`-or`). Three event-STATE
 * rules (`.event-registered`, `.event-registered-check`,
 * `.event-card-status`) are copied from `events.css` — this page renders
 * `render_event_registered_lockup()` and the blocked status line
 * (FF-11-D14) without loading that sheet (Lesson 2: every rendered class
 * needs a base rule a page actually loads).
 */

/* ---- HERO ---- */
.lc-hero-pad { max-width: 1440px; margin: 0 auto; padding: 0 96px; }
.lc-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--rhythm-64);
  align-items: center;
}
.lc-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lc-hero-lead { max-width: 540px; margin: 0; }
/* FF-41 Phase 1 walkthrough follow-up #1 (owner, 2026-09-22): the sublink centres UNDER the
   button, as the Home hero's does (`home.php`'s inner column is `align-items:center`). The
   design's own rule is `flex-start` (local-city.jsx:515) — an owner-requested deviation,
   recorded. `.lc-hero-copy` is a flex-start column, so this block still shrinks to the
   button's width and sits left; only its children centre. */
.lc-hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 8px; }
.lc-hero-card { display: flex; justify-content: center; }

/* ---- PROFILE FLIP CARD ----
   Server renders every face; `local-city.js` folds the card to its edge
   (rotateY 0 → -90), swaps the visible face while edge-on, folds back.
   The rotation never passes ±90 so text never mirrors. */
.lc-flip-stage { perspective: 1600px; width: 100%; max-width: calc(380 * var(--el-px)); }
.lc-flip-card {
  transform-origin: center center;
  transform: rotateY(0deg);
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.lc-flip-card.is-collapsed { transform: rotateY(-90deg); }
.lc-flip-face {
  background: #fff;
  border-radius: var(--r-card-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
  display: flex; flex-direction: column;
}
/* `hidden` + author `display: flex` needs its own rule (Lesson 2) — the
   inactive faces are `[hidden]` in the server markup and toggled by JS. */
.lc-flip-face[hidden] { display: none; }
.lc-flip-photo { width: 100%; aspect-ratio: 1 / 1; background: var(--lavender); overflow: hidden; }
.lc-flip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* SC-49 (2026-10-05): the striped initial tile that stands in for a roster
   photo whose file fails to load (`render_member_photo()` + member-photo.js) —
   the Matches tile's recipe at the hero's size; ships `hidden` (Lesson 2). */
.lc-flip-photo-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background-image: var(--grad-placeholder-stripes);
  color: var(--couple-purple);
  font: 700 calc(120 * var(--el-px))/1 var(--font-display);
  letter-spacing: -0.8px;
  overflow: hidden;
}
.lc-flip-photo-empty span { opacity: 0.55; }
.lc-flip-photo-empty[hidden] { display: none; }
.lc-flip-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 4px; }
.lc-flip-name { font: var(--type-h3); color: var(--fg-heading); letter-spacing: -0.3px; }
.lc-flip-age { color: var(--couple-purple); }
.lc-flip-meta { font: var(--type-body-sm); color: var(--ink-500); margin-bottom: 14px; }
.lc-flip-interests-label { margin-bottom: 10px; }
.lc-flip-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; }
.lc-chip {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: var(--border-hairline) solid var(--couple-purple);
  background: var(--lavender);
  color: var(--couple-purple);
  font: 700 14px/1 var(--font-body);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .lc-flip-card { transition: none; }
}

/* ---- CONTENT SHELL ---- */
.lc-shell { max-width: 1440px; margin: 0 auto; padding: var(--rhythm-96) 96px var(--rhythm-128); }
.lc-shell-inner { max-width: 1260px; display: flex; flex-direction: column; gap: var(--rhythm-128); }
.lc-section { display: flex; flex-direction: column; align-items: flex-start; }
.lc-prose p { font: var(--type-body-lg); color: var(--ink-700); margin: 0 0 1em; }
.lc-prose p:last-child { margin-bottom: 0; }

/* ---- EVENT ROWS ---- */
.lc-event-list { list-style: none; padding: 0; margin: 32px 0 24px; display: flex; flex-direction: column; gap: var(--rhythm-56); width: 100%; }
.lc-event-row {
  display: grid;
  grid-template-columns: calc(96 * var(--el-px)) calc(96 * var(--el-px)) 1fr auto;
  column-gap: 32px;
  align-items: center;
  text-decoration: none;
  border-radius: var(--r-card);
  padding: 20px 24px;
  margin: 0 -24px;
  transition: background 160ms ease;
}
.lc-event-row:hover { background: var(--lavender); text-decoration: none; }
.lc-event-date { display: flex; flex-direction: column; gap: 4px; }
.lc-event-day { line-height: 1; }
.lc-event-time { font: var(--type-eyebrow); color: var(--fg-heading); letter-spacing: -0.1px; margin-top: 2px; }
.lc-event-host-tile {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--lavender);
  box-shadow: var(--shadow-card);
}
.lc-event-host-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-event-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lc-event-desc { line-height: 1.2; }
.lc-event-host { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lc-event-host-name { font: 700 16px/1.2 var(--font-display); color: var(--fg-heading); letter-spacing: -0.2px; }
.lc-event-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.lc-going { display: flex; align-items: center; gap: 12px; }
.lc-going-avatars { display: flex; }
.lc-going-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: var(--lavender); box-shadow: var(--shadow-subtle); flex-shrink: 0; }
.lc-going-avatar:not(:first-child) { margin-left: -10px; }
.lc-going-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-going-count { font: var(--type-caption); color: var(--ink-700); white-space: nowrap; }

/* Event-STATE rules for FF-11-D14's registered/blocked rows — copied from
   `events.css:345-359` (this page does not load that sheet). */
.event-registered { display: inline-flex; align-items: center; gap: 12px; color: var(--couple-purple); }
.event-registered-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--couple-purple);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.event-card-status {
  font: 600 14px var(--font-body);
  color: var(--ink-500);
}

/* ---- SIGNUP CALLOUT ---- */
.lc-signup {
  width: 100%;
  max-width: calc(var(--measure-intro) + 160px);
  align-self: center;
  margin-top: var(--rhythm-64);
  background: var(--lavender);
  border-radius: var(--r-section);
  padding: var(--rhythm-64) 64px;
}
.lc-signup-title { font: var(--type-h3); color: var(--couple-purple-dark); letter-spacing: -0.3px; margin: 0 0 28px; }
.lc-signup-form { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.lc-signup-field { display: flex; flex-direction: column; gap: 10px; }
.lc-signup-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--lavender-edge);
  background: transparent;
  padding: 10px 2px;
  font: var(--type-body);
  color: var(--ink-700);
  outline: none;
  transition: border-color 160ms ease;
}
.lc-signup-input::placeholder { color: var(--lavender-placeholder); }
.lc-signup-input:focus { border-bottom-color: var(--couple-purple); }
.lc-signup-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lc-signup-or { font: 500 italic 16px/1 var(--font-body); color: var(--ink-400); }
.lc-signup-fine { font: 500 italic 14px/1.5 var(--font-body); color: var(--ink-500); margin: 0; }

/* ---- VENUE CARDS ---- */
.lc-venue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; width: 100%; margin-top: var(--rhythm-56); }
.lc-venue { display: flex; flex-direction: column; gap: 14px; }
.lc-venue-photo {
  aspect-ratio: 644 / 406;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: grid; place-items: center;
}
.lc-venue-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-venue-name { font: var(--type-h3); color: var(--fg-heading); letter-spacing: -0.3px; text-decoration: none; }
.lc-venue-name:hover { text-decoration: underline; }
.lc-venue-addr { font: var(--type-body-sm); color: var(--ink-500); }

/* ---- NEARBY TOWNS ---- */
.lc-towns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--rhythm-56); }
.lc-town {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--lavender);
  color: var(--couple-purple);
  font: 700 16px/1 var(--font-display);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.lc-town:hover { background: var(--couple-purple); color: #fff; text-decoration: none; }

/* ============ RESPONSIVE — the marketing gutter ladder ============ */
@media (max-width: 1100px) {
  .lc-hero-pad { padding: 0 56px; }
  .lc-hero-grid { gap: 48px; }
  .lc-shell { padding: 80px 56px 96px; }
  .lc-shell-inner { gap: 96px; }
  .lc-signup { padding: 48px; }
}
@media (max-width: 900px) {
  .lc-hero-pad { padding: 0 48px; }
  .lc-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .lc-hero-copy { align-items: flex-start; }
  .lc-flip-stage { max-width: 360px; margin: 0 auto; }
  .lc-shell { padding: 64px 48px 80px; }
  .lc-shell-inner { gap: 80px; }
  .lc-venue-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .lc-hero-pad { padding: 0 40px; }
  .lc-shell { padding: 56px 40px 72px; }
  .lc-signup { padding: 40px; }
  /* Event listing on mobile — the Events-page "square-portrait header
     card": small SQUARE host photo top-left spanning the date + type
     header rows; HOSTED BY leads the full-width body; title full width;
     then the action row — Register pill on the LEFT, the going cluster on
     its row at the RIGHT with the count stacked under the avatars. The
     info + cta wrappers dissolve (display:contents) so every leaf places
     into the grid independently. */
  .lc-event-row {
    grid-template-columns: 104px 35px 1fr;
    grid-template-areas:
      "media  date  date"
      "media  type  type"
      "hosted hosted hosted"
      "title  title  title"
      "btn    btn   going";
    column-gap: 20px; row-gap: 14px;
    align-items: start;
  }
  .lc-event-host-tile { grid-area: media; width: 104px; height: 104px; align-self: start; }
  .lc-event-date { grid-area: date; align-self: start; }
  .lc-event-info { display: contents; }
  .lc-event-type { grid-area: type; align-self: start; }
  .lc-event-desc { grid-area: title; }
  .lc-event-host { grid-area: hosted; align-self: start; }
  .lc-event-cta { display: contents; }
  .lc-event-row .btn-pill,
  .lc-event-row .event-registered,
  .lc-event-row .event-card-status { grid-area: btn; align-self: center; justify-self: start; }
  .lc-going {
    grid-area: going;
    align-self: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding-left: 20px;
  }
  .lc-going-count { white-space: nowrap; }
  .lc-event-day { font-size: 38px !important; }
}
@media (max-width: 640px) {
  .lc-hero-pad { padding: 0 20px; }
  .lc-shell { padding: 48px 20px 56px; }
  .lc-shell-inner { gap: 64px; }
  .lc-signup { padding: 28px 20px; border-radius: var(--r-card-lg); }
  .lc-signup-ctas { flex-direction: column; align-items: stretch; }
  .lc-signup-or { text-align: center; }
  .lc-event-row { grid-template-columns: 96px 27px 1fr; column-gap: 16px; row-gap: 12px; margin: 0 -12px; padding: 16px 12px; }
  .lc-event-host-tile { width: 96px; height: 96px; }
  .lc-going { padding-left: 16px; }
  .lc-event-day { font-size: 30px !important; }
  .lc-venue-grid { grid-template-columns: 1fr; gap: 24px; }
  .lc-flip-stage { max-width: 320px; }
}