/* =====================================================================
   33-event-review.css — "Review your purchase", the second page of the
   event checkout.

   It renders inside the single event template's own shell
   (main.rhx-event > article.rhx-event__inner), so the cream ground, the
   page padding and the rust .rhx-action button all arrive from
   30-events.css. This file only has to do three things:

     1. narrow the column. 820px is right for an event to be read at and
        far too wide for four numbers to be checked at. A price list you
        have to sweep your eyes across is a price list you skim.
     2. set the lines as a two-column ledger — name on the left, money
        hard right, tabular figures — so the amounts line up on their
        decimal point and the total is obviously the sum above it.
     3. put the one rust action under it, full width on a phone.

   CASCADE: sorts after 30-events.css and 31-events-called-off.css and
   before 40-classes.css. Nothing in 30/31 selects .rhc-review or a dl
   inside .rhx-event__inner, so no rule here is fighting anything; the
   two places it deliberately reaches into another team's selector
   (.rhx-action spacing, and the shared sign-in paragraph) are scoped
   under .rhc-review so they cannot escape this page.

   Tokens are read from phase1.css / 00-tokens.css :root, never written.
   ===================================================================== */

.rhc-review {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--sp-2) 0 var(--sp-6);
}

.rhc-review__title {
  font-family: var(--d);
  font-size: var(--fs-h2);
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  max-width: 16ch;
}

/* The event, named once: "Title — dates, with teacher". It is a reminder,
   not a headline, so it stays quiet and wraps to as many lines as it needs. */
.rhc-review__event {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--tx-2);
  margin: 0 0 var(--sp-6);
  max-width: 46ch;
}

/* ---------- the ledger ---------- */

.rhc-review__lines {
  margin: 0 0 var(--sp-5);
  padding: 0;
  border-top: 1px solid var(--rule);
}

.rhc-review__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}

.rhc-review__label {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--tx);
  min-width: 0;
  /* "Riverhouse Lodge, 2 nights (October 16 and 17)" is a long label on a
     narrow phone. It wraps; it never pushes the money off the screen. */
  overflow-wrap: break-word;
}

.rhc-review__amount {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--tx);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The total is the number they are agreeing to, so it is the one that is
   set in the display face and sized up. */
.rhc-review__line--total {
  border-bottom: 0;
  padding-top: var(--sp-4);
}

.rhc-review__line--total .rhc-review__label,
.rhc-review__line--total .rhc-review__amount {
  font-family: var(--d);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}

/* When the purchase carries beds on two weekends there are two Lodge lines, one
   under the other, each naming its own weekend. They read as a pair: the rule
   between them is dropped so the eye does not cut the stay in half, and the
   second is stepped in a little to say it belongs with the first. */
.rhc-review__line--lodge:has(+ .rhc-review__line--offer-lodge) {
  border-bottom: 0;
  padding-bottom: 0;
}

.rhc-review__line--offer-lodge {
  padding-top: var(--sp-1, .5rem);
}

/* ---------- what happens next ---------- */

.rhc-review__cancel {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--tx-2);
  margin: 0 0 var(--sp-2);
  max-width: 46ch;
}

.rhc-review__charge {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--tx-2);
  margin: 0 0 var(--sp-6);
  max-width: 46ch;
}

/* ---------- the one action ---------- */

.rhc-review__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
}

.rhc-review__form {
  margin: 0;
}

/* Full width on a phone: this is the only thing to press on the page, and
   a thumb should not have to find it. */
.rhc-review .rhx-action,
.rhc-review__reserve {
  width: 100%;
  text-align: center;
}

.rhc-review__change {
  margin: 0;
  font-size: var(--fs-sm);
}

/* ---------- the short pages: a stale token, or a signed-out visitor ---------- */

.rhc-review__problem {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--tx);
  margin: 0 0 var(--sp-5);
  max-width: 46ch;
}

.rhc-review__signin {
  font-size: var(--fs-body);
  margin: 0 0 var(--sp-5);
}

/* ---------- wider than a phone ---------- */

@media (min-width: 720px) {
  .rhc-review {
    padding: var(--sp-4) 0 var(--sp-8);
  }

  .rhc-review__title {
    font-size: var(--fs-h1);
  }

  .rhc-review__line {
    padding: var(--sp-4) 0;
  }

  /* Side by side the button no longer needs the whole column, and the way
     back sits next to it rather than under it. */
  .rhc-review__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-6);
  }

  .rhc-review .rhx-action,
  .rhc-review__reserve {
    width: auto;
  }
}