/* ============================================================
   GRAYVER LAW GROUP — Calendar / booking pages
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 24px 56px; }
.page.wide main { max-width: 920px; }

/* ---------- Top band ---------- */

.topband {
  background: var(--glg-navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
}
.topband .brand img { height: 30px; width: auto; display: block; }
.topband .eyebrow {
  color: rgba(255,255,255,0.7);
  font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
}

/* ---------- Lead ---------- */

.lead { margin-bottom: 28px; }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px;
}
.eyebrow.gold { color: var(--glg-gold); }
.lead h1 {
  font-family: var(--font-sans);
  font-weight: 300; font-size: 34px; line-height: 1.15;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--glg-navy);
  margin: 0 0 10px;
}
.lead h1 .role {
  font-size: 18px; font-weight: 400; letter-spacing: 0.04em;
  text-transform: none; color: var(--fg-2);
}
.blurb { font-size: 15px; color: var(--fg-2); margin: 0; max-width: 60ch; line-height: 1.6; }
.blurb a { color: var(--glg-navy); }

/* ---------- Calendar embed card ---------- */

.cal-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-top: 3px solid var(--glg-gold);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.cal-card iframe { display: block; width: 100%; min-height: 640px; background: #fff; }
.cal-card.empty {
  padding: 48px 24px; text-align: center; color: var(--fg-3); font-size: 14px;
  border-top-color: var(--border-1);
}

/* ---------- Directory ---------- */

.person-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.person-card {
  display: block; text-decoration: none;
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-1);
  border-left: 3px solid var(--glg-navy);
  padding: 20px 22px;
  transition: box-shadow var(--dur-1) var(--ease-standard), border-left-color var(--dur-1) var(--ease-standard);
}
.person-card:hover { box-shadow: var(--shadow-2); border-left-color: var(--glg-gold); }
.pc-name { font-size: 17px; font-weight: 600; color: var(--glg-navy); }
.pc-role { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.pc-cta {
  margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--glg-gold);
}

/* ---------- Footer ---------- */

.foot {
  border-top: 1px solid var(--border-1);
  padding: 18px 32px; text-align: center;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}

@media (max-width: 520px) {
  .topband { padding: 16px 20px; }
  .lead h1 { font-size: 26px; }
  .page main { padding: 28px 18px 40px; }
}