/* ============================================================
   PBR PRICE ESTIMATOR
   Ported verbatim from the Squarespace code block on
   patrickbray.com/private-events, with two changes:
   the palette now inherits from site.css, and the CTA
   scrolls to the booking form on this site instead of
   linking out to /book-patrick.

   All prices live in the PRICING object in estimator.js.
   That is the only thing you ever need to edit.
   ============================================================ */

.pbr-est{
  --line:rgba(50,56,42,.22);
  --paper-card:rgba(255,255,255,.38);

  max-width:760px;
  margin:0 auto;
  color:var(--ink);
  font-family:inherit;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.pbr-est *{box-sizing:border-box;}

.pbr-est__head{margin:0 0 1.5rem;}
.pbr-est__title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.7rem,4.4vw,2.5rem);
  line-height:1.14;
  margin:0 0 .5rem;
  color:var(--olive);
  letter-spacing:.01em;
}
.pbr-est__lede{
  margin:0;
  font-size:1.05rem;
  line-height:1.6;
  opacity:.82;
  max-width:52ch;
}

.pbr-est__step{border:0;padding:0;margin:0 0 1.4rem;}
.pbr-est__legend{
  padding:0;
  margin:0 0 .6rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.62;
}
/* auto-fitting grid: two across on a phone, one row on a laptop.
   No breakpoint needed, the columns work it out. */
.pbr-est__opts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:.45rem;
}

.pbr-est__opt{
  min-width:0;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--paper-card);
  padding:.6rem .75rem;
  font:inherit;
  font-size:.95rem;
  line-height:1.25;
  color:var(--ink);
  text-align:left;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.pbr-est__opt:hover{border-color:var(--rust);}
.pbr-est__opt:focus-visible{outline:2px solid var(--rust);outline-offset:2px;}
.pbr-est__opt[aria-pressed="true"]{
  background:var(--rust);
  border-color:var(--rust);
  color:#fff;
}
.pbr-est__opt b{display:block;font-weight:700;font-size:.92rem;}
.pbr-est__opt span{
  display:block;
  font-size:.73rem;
  line-height:1.3;
  opacity:.72;
  margin-top:.1rem;
  font-weight:400;
}
.pbr-est__opt[aria-pressed="true"] span{opacity:.85;}

/* ---------- result ---------- */
.pbr-est__result{
  margin-top:1.75rem;
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease;
}
.pbr-est__result.is-visible{opacity:1;transform:none;}

.pbr-est__figure{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2rem,7vw,3rem);
  line-height:1.05;
  color:var(--rust);
  margin:0;
  letter-spacing:.005em;
}
.pbr-est__figure small{
  display:block;
  font-family:inherit;
  font-size:.85rem;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.55;
  margin-bottom:.35rem;
}
.pbr-est__summary{
  margin:.6rem 0 0;
  font-size:1rem;
  opacity:.85;
}
.pbr-est__cta{
  display:inline-block;
  margin-top:1.25rem;
  background:var(--rust);
  color:#fff;
  text-decoration:none;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:.95rem 2rem;
  border-radius:999px;
  transition:background .15s ease;
}
.pbr-est__cta:hover{background:var(--rust-deep);color:#fff;}
.pbr-est__cta:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}

.pbr-est__fine{
  margin:1.1rem 0 0;
  font-size:.82rem;
  line-height:1.6;
  opacity:.68;
  max-width:56ch;
}
.pbr-est__fine strong{font-weight:700;opacity:1;}

.pbr-est__hint{
  margin:1.25rem 0 0;
  font-size:.9rem;
  opacity:.6;
  font-style:italic;
}

@media (max-width:540px){
  .pbr-est__step{margin-bottom:1.05rem;}
  .pbr-est__lede{font-size:.94rem;}
  .pbr-est__result{margin-top:1.35rem;padding-top:1.2rem;}
}
/* Below 430px the grid is always two across, so a lone last card
   would sit as an orphan. Let it span instead. */
@media (max-width:430px){
  .pbr-est__opts > :last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (prefers-reduced-motion:reduce){
  .pbr-est__result{transition:none;}
}