/*
 * /rent/ — Rent the Wheeler.
 *
 * Loaded only on this route (functions.php's per-route convention), so a
 * visitor reading the story page never downloads this table's CSS.
 *
 * Two custom shapes here, both absent from theme.css because nothing else on
 * the site needed them yet: a stat pair for the two seating capacities (they
 * have to be legible in the first two seconds, per the build brief), and a
 * definitions grid for the rate/tech-spec terms, sized for full-sentence
 * values rather than the short facts `.record__grid` was built for.
 */

/* -------------------------------------------------------------- stats -- */

.rent-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem clamp(2rem, 1rem + 4vw, 4rem);
  margin: 2rem 0 0;
  padding: 0;
}

.rent-stat { margin: 0; }

@media print {
  .proto-banner, .masthead, .colophon, .skip-link { display: none !important; }
  main { padding: 0 !important; }
}

.rent-stat dt {
  font-weight: 650;
  margin: 0 0 0.35rem;
}

.rent-stat dd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  margin: 0;
}

.rent-stat__num {
  font-family: var(--display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--accent);
}

/* ------------------------------------------------------ capacity to scale -- */

/*
 * The two rooms at true relative scale: one dot per seat, forty to a row.
 *
 * The whole figure is capped at a single measure and both rooms' SVGs are
 * width:100% of it with the same 400-unit viewBox width, so one seat is the
 * same number of rendered pixels in both blocks at every screen size. That
 * shared pitch is the entire honesty of the drawing; if the two blocks were
 * ever allowed to scale independently, the picture would start lying.
 *
 * Colour: the dots are --ember (5.35:1 on --paper), not the signature amber.
 * --accent is 2.69:1 here, which is below the 3:1 a meaningful graphical
 * object needs, so it stays a surface on this page rather than a mark.
 */

.capacity {
  max-width: 34rem;
  margin: 2rem 0 0;
}

.capacity__room + .capacity__room { margin-top: 1.75rem; }

.capacity__name {
  font-size: var(--step-1);
  margin: 0 0 0.15rem;
}

.capacity__count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin: 0 0 0.6rem;
}

.capacity__n {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--ink);
}

.capacity__seats {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.capacity__dots { fill: var(--ember); }

.capacity figcaption {
  margin-top: 1.25rem;
  max-width: var(--measure);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- table -- */

.rent-table-wrap {
  overflow-x: auto;
  margin: 1.75rem 0;
  border: 1px solid var(--stone-300);
}

.rent-table {
  width: 100%;
  min-width: 22rem;
  border-collapse: collapse;
}

.rent-table caption {
  text-align: left;
  padding: 0.85rem 1.1rem;
  font-size: var(--step--1);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone-700);
  background: var(--paper-raised);
  border-bottom: 1px solid var(--stone-300);
}

.rent-table th,
.rent-table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--stone-300);
}

.rent-table tbody tr:last-child th,
.rent-table tbody tr:last-child td { border-bottom: 0; }

.rent-table thead th {
  background: var(--band);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rent-table tbody th {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--ink);
}

.rent-table__num {
  font-weight: 700;
  font-size: var(--step-1);
}

/* ----------------------------------------------------------------- dl -- */

/*
 * Same dt/dd-pairs-wrapped-in-a-div shape as .record__grid, but sized for
 * this page's full-sentence rate and tech-spec terms rather than the short
 * facts the provenance disclosure carries.
 */
.rent-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem var(--gutter);
  margin: 1.75rem 0 0;
}

.rent-terms dt {
  font-weight: 700;
  color: var(--stone-700);
  margin: 0 0 0.3rem;
}

.rent-terms dd { margin: 0; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 30rem) {
  .rent-stats { gap: 1.5rem 2rem; }
  .rent-stat__num { font-size: var(--step-3); }
}