/* ==========================================================================
   host.css - Host / "Invite Swami to your city" group-reservation page.
   Scoped to the Host a Satsang template (body.page-template-page-host).
   Mobile-first (>90% phone): all rules are phone-default; desktop is the
   min-width enhancement. Nothing overflows horizontally at 375px.
   Loaded only on the host page (gated enqueue in functions.php). Does NOT
   touch shared site.css. WCAG-AA contrast on every dark container.
   ASCII-only source.
   ========================================================================== */

/* ---------- scoped fix: email field layout inside the stacked host form ----
   In .lead-form--stack (flex-direction:column) the shared rule
   .lead-form input[type=email]{ flex:1 1 240px } makes flex-basis apply to the
   COLUMN main axis = height -> a 240px-tall pill, misaligned vs the full-width
   text inputs/textarea below it. This is the "broken email layout". We scope
   the email input to match the text inputs (full width, normal radius, 48px
   min-height) only inside the stacked form. Shared site.css is untouched.      */
.lead-form--stack input[type=email]{
  flex:0 0 auto; width:100%; min-height:48px; font-size:16px;
  padding:.7em 1em; border-radius:var(--radius);
  border:1.5px solid rgba(233,217,174,.4);
  background:rgba(255,255,255,.95); color:var(--ink);
  font-family:var(--f-body);
}

/* ---------- booking panel (Step 1 = pick date + people; live price) -------- */
.host-booking{
  background:var(--bg-warm); border:1px solid var(--line, rgba(20,20,30,.08));
  border-radius:var(--radius-lg); padding:var(--s6) var(--s5);
  box-shadow:var(--sh-2);
}
@media (min-width:760px){ .host-booking{ padding:var(--s7) var(--s6); } }

.host-booking .field{ margin:0 0 var(--s5); }
.host-booking .field:last-child{ margin-bottom:0; }
.host-booking label{
  display:block; font-weight:600; font-size:var(--step--1);
  letter-spacing:.01em; margin:0 0 .5em; color:var(--ink);
}
.host-booking .hint{
  display:block; font-size:var(--step--1); color:var(--ink-soft);
  margin:.45em 0 0; line-height:1.4;
}

/* text + number + select share one full-width pill look (16px = no iOS zoom) */
.host-booking input[type=text],
.host-booking input[type=number],
.host-booking select,
.host-booking textarea{
  width:100%; min-height:48px; font-size:16px; padding:.7em 1em;
  border-radius:var(--radius); border:1.5px solid rgba(20,20,30,.16);
  background:#fff; color:var(--ink); font-family:var(--f-body);
  -webkit-appearance:none; appearance:none;
}
.host-booking textarea{ resize:vertical; line-height:1.5; min-height:88px; }
.host-booking input::placeholder,
.host-booking textarea::placeholder{ color:#6b7280; }
.host-booking input:focus,
.host-booking select:focus,
.host-booking textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,146,58,.18);
}

/* people stepper: - [count] + ; wraps cleanly, never overflows */
.host-people{ display:flex; align-items:stretch; gap:.5em; max-width:100%; }
.host-people button{
  flex:0 0 48px; width:48px; min-height:48px; font-size:1.4rem; line-height:1;
  border:1.5px solid rgba(20,20,30,.16); background:#fff; color:var(--ink);
  border-radius:var(--radius); cursor:pointer; font-family:var(--f-body);
}
.host-people button:hover{ border-color:var(--gold); }
.host-people input[type=number]{
  flex:1 1 auto; text-align:center; min-width:0;
  -moz-appearance:textfield;
}
.host-people input[type=number]::-webkit-outer-spin-button,
.host-people input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

/* min-25 warning (honest, not pushy) */
.host-min-note{
  display:none; margin:.5em 0 0; font-size:var(--step--1);
  color:#8a4b00; line-height:1.4;
}
.host-booking.is-below-min .host-min-note{ display:block; }

/* live price readout */
.host-price{
  margin:var(--s5) 0 0; padding:var(--s4) var(--s5);
  background:#fff; border:1px solid rgba(20,20,30,.1);
  border-left:4px solid var(--gold); border-radius:var(--radius);
}
.host-price .row{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:.4em var(--s4); align-items:baseline; margin:0 0 .35em;
}
.host-price .row:last-child{ margin-bottom:0; }
.host-price .row .lbl{ color:var(--ink-soft); font-size:var(--step--1); }
.host-price .row .val{ font-weight:600; color:var(--ink); }
.host-price .row.total .val{ font-size:var(--step-1); color:var(--night); }
.host-price .ph-inline{
  display:inline-block; font-size:.8em; padding:.05em .5em; border-radius:3px;
  background:rgba(184,146,58,.16); color:#7a5a12; margin-left:.3em;
  vertical-align:middle;
}

/* ---------- availability calendar (FOMO: open vs taken) -------------------- */
.host-cal{ margin:var(--s5) 0 0; }
.host-cal-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:var(--s3); margin:var(--s4) 0 0; list-style:none; padding:0;
}
/* WCAG 2.5.5 tap-target floor on calendar day cells (>90% mobile) */
.host-cal-grid li,.host-slot{ min-height:44px; }
.host-slot{
  display:flex; flex-direction:column; gap:.2em; text-align:left;
  padding:.7em .9em; border-radius:var(--radius);
  border:1.5px solid rgba(20,20,30,.14); background:#fff; cursor:pointer;
  font-family:var(--f-body); color:var(--ink); min-height:48px;
}
.host-slot .slot-date{ font-weight:600; font-size:var(--step--1); }
.host-slot .slot-city{ font-size:.82em; color:var(--ink-soft); }
.host-slot .slot-state{
  font-size:.74em; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  margin-top:.15em;
}
.host-slot.is-open{ border-color:rgba(46,125,50,.5); }
.host-slot.is-open .slot-state{ color:#2e7d32; }
.host-slot.is-open:hover{ border-color:#2e7d32; box-shadow:var(--sh-1); }
.host-slot.is-few{ border-color:rgba(184,90,18,.55); background:#fffaf3; }
.host-slot.is-few .slot-state{ color:#b85a12; }
.host-slot.is-taken{ opacity:.55; cursor:not-allowed; background:#f4f2ee; }
.host-slot.is-taken .slot-state{ color:#7a7166; }
.host-slot[aria-pressed="true"]{
  border-color:var(--gold); box-shadow:0 0 0 2px rgba(184,146,58,.35);
}
/* honest empty state when CEO has set no real dates */
.host-cal-empty{
  margin:var(--s4) 0 0; padding:var(--s5);
  background:#fff; border:1px dashed rgba(20,20,30,.18);
  border-radius:var(--radius); color:var(--ink-soft); line-height:1.55;
}
/* honest momentum cue (first-to-reserve gets first choice; no invented dates) */
.host-cal-momentum{
  display:block; margin:var(--s3) 0 0; padding:.5em .8em;
  background:rgba(184,146,58,.1); border-left:3px solid var(--gold);
  border-radius:var(--radius); font-size:var(--step--1); color:#7a5a12;
}

/* ---------- main-category trust rows (image beside title+copy) ------------- */
/* mobile-first: image stacks ABOVE copy; desktop: 2-up alternating */
.host-cat{ display:grid; gap:var(--s5); align-items:center; margin:0 0 var(--s8); }
.host-cat:last-child{ margin-bottom:0; }
.host-cat .host-cat-media img{
  width:100%; height:auto; display:block; border-radius:var(--radius-lg);
  box-shadow:var(--sh-2); object-fit:cover;
}
@media (min-width:860px){
  .host-cat{ grid-template-columns:1fr 1fr; gap:var(--s8); }
  .host-cat.flip .host-cat-media{ order:2; }
}

/* ---------- reservation CTA card (refundable deposit) ---------------------- */
.host-reserve-card{ border-left:4px solid var(--gold); }
.host-reserve-card .deposit-amt{
  font-size:var(--step-2); font-weight:600; color:var(--night); line-height:1;
}
.host-reserve-card .deposit-sub{
  font-size:var(--step--1); color:var(--ink-soft); margin:.3em 0 0;
}
.host-steps-strip{
  display:grid; gap:var(--s2); margin:var(--s4) 0 0; padding:0; list-style:none;
}
.host-steps-strip li{
  position:relative; padding-left:1.7em; font-size:var(--step--1);
  color:var(--ink-soft); line-height:1.5;
}
.host-steps-strip li::before{
  content:counter(hostc); counter-increment:hostc;
  position:absolute; left:0; top:0; width:1.25em; height:1.25em;
  display:grid; place-items:center; border-radius:50%;
  background:var(--gold); color:#fff; font-size:.7em; font-weight:700;
}
.host-steps-strip{ counter-reset:hostc; }

/* deposit reserve form: capture date + city + people + notes WITH the deposit,
   so a reservation is one transaction (Scenario C). Mirrors the booking-panel
   field look; 16px inputs = no iOS zoom; 44/48px tap targets (WCAG 2.5.5). */
.host-reserve-form{ margin:var(--s4) 0 0; }
.host-reserve-form__lede{
  margin:0 0 var(--s4); font-size:var(--step--1); color:var(--ink-soft);
  line-height:1.5;
}
.host-reserve-form .field{ margin:0 0 var(--s4); }
.host-reserve-form .field:last-of-type{ margin-bottom:0; }
.host-reserve-form label{
  display:block; font-weight:600; font-size:var(--step--1);
  letter-spacing:.01em; margin:0 0 .4em; color:var(--ink);
}
.host-reserve-form input[type=text],
.host-reserve-form input[type=date],
.host-reserve-form input[type=number],
.host-reserve-form textarea{
  width:100%; min-height:48px; font-size:16px; padding:.7em 1em;
  border-radius:var(--radius); border:1.5px solid rgba(20,20,30,.16);
  background:#fff; color:var(--ink); font-family:var(--f-body);
  -webkit-appearance:none; appearance:none;
}
.host-reserve-form textarea{ resize:vertical; line-height:1.5; min-height:72px; }
.host-reserve-form input::placeholder,
.host-reserve-form textarea::placeholder{ color:#6b7280; }
.host-reserve-form input:focus,
.host-reserve-form textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,146,58,.18);
}

/* honest-placeholder pill, reused for unconfirmed business values */
.ph-inline{ /* (also defined inline in markup; kept consistent here) */ }