/* Copied from ui_kits/website/meet-christian.css — the kit stays the reference, this is the served copy. */
/* ===========================================================
   Verged · Meet Christian Schacht (verged.ai/meet-christian-schacht)
   Title Banner tier (first instance) · Bio · Booking widget.
   Tokens from colors_and_type.css; nav/footer from site-marketing.css.
   =========================================================== */

/* ---------- 1 · TITLE BANNER (compact hero tier) ---------- */
.v-tbanner { position: relative; overflow: hidden; background: var(--verge-navy); color: #FAFAFA; }
.v-tbanner__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 50%; z-index: 0;
}
.v-tbanner__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(21,39,63,0.74) 0%, rgba(10,19,32,0.86) 100%);
}
.v-tbanner__inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  padding: 164px 32px 64px;     /* compact: shorter than the About section hero */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.v-tbanner__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Plus Jakarta Sans', var(--font-body);
  font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verge-orange);
}
.v-tbanner__eyebrow::before,
.v-tbanner__eyebrow::after { content: ""; width: 26px; height: 2px; background: var(--verge-orange); border-radius: 2px; }
.v-tbanner__title {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 800; font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.06; letter-spacing: -0.022em; color: #FAFAFA;
  margin: 18px 0 0; text-wrap: balance;
}

/* ---------- 2 · BIO (light) ---------- */
.v-bio { padding: 104px 0; background: var(--verge-off-white); }
.v-bio__grid {
  max-width: 1080px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 360px 1fr; gap: 72px; align-items: center;
}
.v-bio__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden;
  background: var(--verge-navy-2);
}
.v-bio__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.v-bio__label {
  font-family: 'Plus Jakarta Sans', var(--font-body);
  font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verge-fog); margin: 0 0 14px;
}
.v-bio__name {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 800; font-size: 38px; letter-spacing: -0.022em;
  color: #0A1320; margin: 0 0 22px;
}
.v-bio__body {
  font-family: 'Inter', var(--font-body);
  font-weight: 400; font-size: 18px; line-height: 1.66;
  color: #0A1320; margin: 0; max-width: 46ch;
}

/* ---------- 3 · BOOKING (stone) ---------- */
.v-book { padding: 104px 0; background: var(--verge-stone); }
.v-book__head { text-align: center; max-width: 680px; margin: 0 auto 44px; padding: 0 32px; }
.v-book__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Plus Jakarta Sans', var(--font-body);
  font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verge-orange); margin-bottom: 18px;
}
.v-book__eyebrow::before,
.v-book__eyebrow::after { content: ""; width: 26px; height: 2px; background: var(--verge-orange); border-radius: 2px; }
.v-book__title {
  font-family: 'Plus Jakarta Sans', var(--font-display);
  font-weight: 800; font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12; letter-spacing: -0.02em; color: #0A1320; margin: 0;
}
.v-book__intro {
  font-family: 'Inter', var(--font-body);
  font-weight: 400; font-size: 17px; line-height: 1.6;
  color: #0A1320; margin: 18px 0 0;
}

/* Widget card */
.v-widget {
  max-width: 800px; margin: 0 auto; background: #fff;
  border: 1px solid var(--verge-stone); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(10,19,32,0.04);
  padding: 40px;
}
.v-widget__cols {
  display: grid; grid-template-columns: 55% 45%; gap: 36px; align-items: start;
}

/* Calendar */
.v-cal__month {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.v-cal__mlabel { font-family: 'Plus Jakarta Sans', var(--font-display); font-weight: 600; font-size: 17px; color: #0A1320; letter-spacing: -0.01em; }
.v-cal__navs { display: flex; gap: 6px; }
.v-cal__nav {
  width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--verge-stone);
  background: #fff; color: #0A1320; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.v-cal__nav:hover { border-color: var(--verge-navy); }
.v-cal__nav svg { width: 16px; height: 16px; }
.v-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.v-cal__dow {
  font-family: 'Plus Jakarta Sans', var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--verge-fog);
  text-align: center; padding-bottom: 8px;
}
.v-cal__day {
  aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 4px;
  font-family: 'Plus Jakarta Sans', var(--font-body); font-weight: 600; font-size: 14px;
  color: #0A1320; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.v-cal__day:hover { background: var(--verge-navy); color: #fff; }
.v-cal__day.is-empty { visibility: hidden; }
.v-cal__day.is-off { color: var(--verge-fog); cursor: default; }
.v-cal__day.is-off:hover { background: transparent; color: var(--verge-fog); }
.v-cal__day.is-today { box-shadow: inset 0 0 0 1px #0A1320; }
.v-cal__day.is-selected,
.v-cal__day.is-selected:hover { background: var(--verge-orange-deep); color: #fff; }

/* Time column */
.v-slots__label,
.v-slots__durlabel {
  font-family: 'Plus Jakarta Sans', var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--verge-fog); margin: 0 0 10px;
}
.v-dur { display: flex; gap: 8px; margin-bottom: 22px; }
.v-dur__tab {
  flex: 1; padding: 9px 6px; border-radius: 4px; border: 1px solid var(--verge-fog);
  background: transparent; color: var(--verge-fog); cursor: pointer;
  font-family: 'Plus Jakarta Sans', var(--font-body); font-weight: 600; font-size: 12.5px;
  white-space: nowrap; transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.v-dur__tab.is-on { background: var(--verge-navy); border-color: var(--verge-navy); color: #fff; }
.v-slots { display: flex; flex-direction: column; gap: 8px; }
.v-slot {
  width: 100%; padding: 13px 16px; border: 1px solid var(--verge-stone); border-radius: 4px;
  background: #fff; color: #0A1320; cursor: pointer; text-align: center;
  font-family: 'Plus Jakarta Sans', var(--font-body); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.v-slot:hover { border-color: var(--verge-orange-deep); }
.v-slot.is-selected { background: var(--verge-orange-deep); border-color: var(--verge-orange-deep); color: #fff; }

/* Confirm */
.v-confirm {
  width: 100%; margin-top: 30px; padding: 16px 24px; border: none; border-radius: 4px;
  background: var(--verge-orange-deep); color: #FAFAFA; cursor: pointer;
  font-family: 'Plus Jakarta Sans', var(--font-body); font-weight: 600; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .16s var(--ease), opacity .16s var(--ease);
}
.v-confirm[disabled] { background: var(--verge-fog); opacity: 0.5; cursor: not-allowed; }
.v-confirm:not([disabled]):hover { background: #A93A10; }
.v-confirm .v-arr { transition: transform .16s var(--ease); }
.v-confirm:not([disabled]):hover .v-arr { transform: translateX(4px); }
.v-book__foot {
  text-align: center; margin: 18px 0 0;
  font-family: 'Inter', var(--font-body); font-size: 13px; color: var(--verge-fog);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .v-bio__grid { grid-template-columns: 1fr; gap: 40px; max-width: 520px; }
  .v-bio__photo { max-width: 360px; }
  .v-widget { padding: 30px 24px; }
  .v-widget__cols { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .v-tbanner__inner { padding: 132px 24px 52px; }
  .v-bio, .v-book { padding: 68px 0; }
}