/* Design tokens come from the @florid-kit/tokens package (loaded before this
   file as vendor/tokens.css by `npm run build`). The page uses its own short
   color names below, mapped to the package's semantic tokens. Components only
   use these names, so changing a color only means changing it here. */

:root {
  color-scheme: light;
  --bg: var(--color-container-bg-default);
  --card: var(--color-container-bg-white);
  --surface: var(--color-container-bg-medium);          /* chips, call-to-action */
  --text: var(--color-content-body);
  --heading: var(--color-content-heading);
  --muted: var(--color-content-description);
  --border: var(--color-border-tertiary);
  --link: var(--color-container-filter-default);
  --button-bg: var(--color-container-action-primary-default);
  --button-bg-hover: var(--color-container-action-primary-hover);
  --button-text: var(--color-content-action-primary);
  --brand-accent: var(--color-container-brand-accent);
  --shadow: var(--color-alpha-dark-lightest);
}

/* The brand fonts (LOccitane Serif/Sans) aren't part of the token package.
   They're used when installed on the viewer's device; otherwise we fall back
   to similar system fonts. */
:root {
  --font-serif: var(--font-family-loccitane-serif-condensed), var(--font-family-loccitane-serif), Georgia, "Times New Roman", serif;
  --font-sans: var(--font-family-loccitane-sans), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--font-size-200);
  line-height: var(--line-height-240);
  /* Thin brand-yellow stripe across the top of the page. */
  border-top: var(--border-xl) solid var(--brand-accent);
}

h1, h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-500);
  color: var(--heading);
}

.page-header,
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

.page-header {
  padding-top: var(--spacing-5-xl);
  padding-bottom: var(--spacing-s);
}
h1 {
  margin: 0 0 var(--spacing-2-xs);
  font-size: var(--font-size-600);
  line-height: var(--line-height-480);
}
.subtitle { margin: 0; color: var(--muted); }
.upcoming[hidden] { display: none; }

.upcoming h2 {
  margin: 0;
  font-size: var(--font-size-450);
  line-height: var(--line-height-320);
}
.tz-note {
  margin: var(--spacing-2-xs) 0 0;
  font-size: var(--font-size-150);
  color: var(--muted);
}

.status { color: var(--muted); }

.sessions {
  list-style: none;
  padding: 0;
  margin: var(--spacing-xl) 0 var(--spacing-6-xl);
  /* As many columns as fit, each at least 320px wide (one column on phones). */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--spacing-xl);
}

/* Cards in a row share the row's height; flex column lets the Join button
   sit at the bottom so buttons line up across a row. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: var(--border-m) solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2-xl);
  box-shadow: 0 1px 3px var(--shadow);
}

.card h2 {
  margin: 0 0 var(--spacing-s);
  font-size: var(--font-size-350);
  line-height: var(--line-height-280);
}

.when { font-weight: var(--font-weight-700); margin: 0; }
.original-time { margin: 0; font-size: var(--font-size-150); color: var(--muted); }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  margin: var(--spacing-l) 0;
  padding: 0;
  list-style: none;
}

/* Small uppercase labels, following the design system's "UI uppercase" style. */
.chip {
  background: var(--surface);
  border-radius: var(--radius-full);
  padding: var(--spacing-3-xs) var(--spacing-m);
  font-size: var(--font-size-100);
  line-height: var(--line-height-200);
  letter-spacing: var(--letter-spacing-400);
  text-transform: var(--text-case-uppercase);
}

.host { margin: 0 0 var(--spacing-s); color: var(--muted); }

.about { margin-bottom: var(--spacing-xl); }

/* Descriptions keep the line breaks people typed into the intake form,
   and are cut to 5 lines (with "…") until the card is expanded. */
.description {
  white-space: pre-line;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.card.expanded .description {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
}

.toggle {
  margin-top: var(--spacing-2-xs);
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-weight: var(--font-weight-700);
  cursor: pointer;
}
.toggle:hover { text-decoration: underline; }
.toggle[hidden] { display: none; }


.button {
  align-self: flex-start; /* don't stretch to the card's full width */
  margin-top: auto;       /* push to the bottom of the card */
  background: var(--button-bg);
  color: var(--button-text);
  text-decoration: none;
  padding: var(--spacing-s) var(--spacing-xl);
  border-radius: var(--radius-l);
  font-weight: var(--font-weight-500);
  letter-spacing: var(--letter-spacing-100);
}
.button:hover { background: var(--button-bg-hover); }

a { color: var(--link); }

/* Visible keyboard focus for links and buttons. */
a:focus-visible,
button:focus-visible {
  outline: var(--border-l) solid var(--link);
  outline-offset: var(--spacing-3-xs);
}

/* "Want to host a session?" block above the session grid. */
.host-cta {
  margin: var(--spacing-xl) 0 var(--spacing-5-xl);
  padding: var(--spacing-3-xl);
  border: var(--border-m) solid var(--border);
  border-left: var(--border-xl) solid var(--brand-accent);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.host-cta h2 {
  margin: 0 0 var(--spacing-s);
  font-size: var(--font-size-450);
  line-height: var(--line-height-320);
}
.host-cta p { margin: 0 0 var(--spacing-xl); max-width: 60ch; }
.host-cta .button { display: inline-block; }