/* Lodge Connect — Public surface (lc-005)
 * A warmer, more spacious application of the same design tokens. Scoped to
 * `.lc-public` so the portal (efficient/task-focused) is untouched. Prism's
 * two-surface divergence: public is inviting/storytelling, portal is dense.
 */

.lc-public {
  /* Warm system serif for headings only — personality without a web-font
   * dependency or layout shift. Body stays on the system sans stack. */
  --lc-font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                     "Book Antiqua", Georgia, serif;
  background: var(--lc-bg);
  color: var(--lc-text);
  font-family: var(--lc-font-sans);
  line-height: var(--lc-leading);
  margin: 0;
}
.lc-public h1, .lc-public h2, .lc-public h3 {
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-semibold);
  line-height: 1.15;
  letter-spacing: 0.01em;
}
/* Color plain links maroon — but NOT anchor-styled buttons (.lc-btn), whose
   variant text colors must win. Without :not(.lc-btn), this rule's specificity
   (0,1,1) beat .lc-btn--primary / .lc-btn--on-dark (0,1,0), so <a> buttons on
   the maroon hero / CTA rendered maroon-on-maroon (invisible). [B1, B2] */
.lc-public a:not(.lc-btn) { color: var(--lc-maroon); }

/* ---------- Header ---------- */
.lc-public-header {
  background: var(--lc-surface);
  border-bottom: 1px solid var(--lc-border);
  padding: var(--lc-space-3) 0;
}
.lc-public-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-3);
  align-items: center;
  justify-content: space-between;
}
.lc-public-brand {
  font-family: var(--lc-font-display);
  font-weight: var(--lc-weight-semibold);
  font-size: var(--lc-text-lg);
  color: var(--lc-maroon) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--lc-space-2);
}
.lc-public-brand__logo {
  height: 44px;
  width: auto;
  flex: none;
  display: block;
}
.lc-public-brand__mark {
  font-size: var(--lc-text-xs);
  letter-spacing: 0.12em;
  color: var(--lc-gold-700);
}
@media (max-width: 480px) {
  /* Keep the logo, shrink the wordmark text so the header doesn't overflow. */
  .lc-public-brand__logo { height: 36px; }
  .lc-public-brand { font-size: var(--lc-text-base); }
}
.lc-public-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-4);
  align-items: center;
}
.lc-public-nav a { text-decoration: none; font-weight: var(--lc-weight-medium); }

/* ---------- Hero ---------- */
.lc-hero {
  background: linear-gradient(160deg, var(--lc-maroon), var(--lc-maroon-800));
  color: var(--lc-cream);
  padding: var(--lc-space-8) 0;
}
.lc-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--lc-text-sm);
  color: var(--lc-gold);
  margin: 0;
}
.lc-hero__title {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  margin: 0;
  color: var(--lc-cream);
}
.lc-hero__lede {
  font-size: var(--lc-text-lg);
  max-width: 52ch;
  color: #f3ece0;
}
/* Ghost button reads on the dark hero */
.lc-btn--on-dark { color: var(--lc-cream); border-color: rgba(245, 241, 232, 0.6); }
.lc-btn--on-dark:hover { background: rgba(245, 241, 232, 0.12); border-color: var(--lc-cream); }

/* ---------- Sections ---------- */
.lc-section { padding: var(--lc-space-8) 0; }
.lc-section--alt { background: var(--lc-surface-alt); }
.lc-section__title { font-size: var(--lc-text-2xl); color: var(--lc-maroon); margin-top: 0; }
.lc-cta { text-align: center; max-width: 60ch; margin-inline: auto; }
.lc-cta .lc-lead { margin-inline: auto; }
.lc-cta .lc-cluster { justify-content: center; }

/* Cards with a bottom CTA (e.g. the events list): flex column so the action
   pins to the bottom and CTAs align across a row regardless of title/blurb
   length. Grid items already stretch to equal height. [B3] */
.lc-card--cta { display: flex; flex-direction: column; }
.lc-card--cta > :last-child { margin-top: auto; margin-bottom: 0; }

/* ---------- Footer ---------- */
.lc-public-footer {
  background: var(--lc-ink);
  color: #e7ddd0;
  padding: var(--lc-space-6) 0;
  margin-top: var(--lc-space-8);
}
.lc-public-footer a { color: var(--lc-gold); }
.lc-public-footer__name { font-family: var(--lc-font-display); font-size: var(--lc-text-lg); margin: 0; }
.lc-public-footer .lc-card__meta { color: #b9ab9a; }