/* Rates: the tariff ledger, rooms, the 1+1 totals, the trip estimate and what a day includes. Scoped to body.page-rates. */

/* ---------- Sheet title ---------- */
.page-rates .sheet-title__inset { position: relative; }

/* ---------- Tariff ledger: hairline rows, the price set like a sounding ---------- */
.page-rates .tariff { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--neat); }
.page-rates .tariff__row { display: grid; gap: var(--s-3) var(--col-gap); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.page-rates .tariff__text { display: grid; gap: var(--s-1); align-content: start; }
.page-rates .tariff__text p { max-width: 34em; }
.page-rates .tariff__price { display: grid; gap: .625rem; justify-items: start; }
.page-rates .tariff__price .fig--lg { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.page-rates .tariff__end { margin-top: var(--s-6); }
@media (min-width: 768px) {
  .page-rates .tariff__row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-rates .tariff__pic { grid-column: 1 / span 4; }
  .page-rates .tariff__text { grid-column: 5 / span 5; }
  .page-rates .tariff__price { grid-column: 10 / -1; justify-items: end; text-align: right; }
}
@media (min-width: 1024px) {
  .page-rates .tariff__pic { grid-column: 1 / span 3; }
}
/* rooms: no picture per row, name left and price right */
.page-rates .tariff--rooms .tariff__row { grid-template-columns: minmax(0, 1fr) auto; }
.page-rates .tariff--rooms .tariff__text,
.page-rates .tariff--rooms .tariff__price { grid-column: auto; }
.page-rates .tariff--rooms .tariff__price { justify-items: end; text-align: right; }

/* ---------- Rooms band ---------- */
.page-rates .rooms__grid { display: grid; gap: var(--s-8) var(--col-gap); }
.page-rates .rooms__main { display: grid; gap: var(--s-6); align-content: start; }
.page-rates .rooms__fauna { display: grid; gap: var(--s-3); justify-items: start; }
.page-rates .rooms__fauna > p { color: var(--fg-2); }
@media (min-width: 1024px) {
  .page-rates .rooms__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .page-rates .rooms__main { grid-column: 1 / span 6; }
  .page-rates .rooms__photo { grid-column: 7 / -1; --ar: 4 / 3; } /* ends near the price column */
}

/* ---------- Totals: the 1+1 table and the trip estimate ---------- */
.page-rates .totals__grid { display: grid; gap: var(--s-8) var(--col-gap); }
.page-rates .totals__fixed { display: grid; gap: var(--s-3); align-content: start; }
.page-rates .totals__gulf { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.page-rates .totals__gulf > p { color: var(--fg-2); max-width: 34em; }
@media (min-width: 1024px) {
  .page-rates .totals__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .page-rates .totals__fixed { grid-column: 1 / span 6; }
  .page-rates .est { grid-column: 8 / -1; }
}

.page-rates .combo { width: 100%; border-collapse: collapse; border-top: 1px solid var(--neat); }
.page-rates .combo th,
.page-rates .combo td { padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 400; }
.page-rates .combo thead th { font-size: 1.125rem; line-height: 1.3; vertical-align: bottom; } /* prices line up when a room name wraps */
.page-rates .combo tbody th { width: 38%; font-size: 1.125rem; line-height: 1.3; }
.page-rates .combo th > .label { display: block; margin-top: .375rem; white-space: nowrap; }
/* the unit price stacks over its unit, sized as a figure, so "per night" never breaks */
.page-rates .combo th > .label .fig { display: block; margin-bottom: .125rem; font-size: 1.0625rem; color: var(--fg); letter-spacing: .02em; }
.page-rates .combo td .fig { font-size: var(--fs-fig); line-height: 1.1; }
@media (max-width: 599px) {
  .page-rates .combo th,
  .page-rates .combo td { padding-right: var(--s-1); }
  .page-rates .combo thead th,
  .page-rates .combo tbody th { font-size: 1rem; }
  .page-rates .combo tbody th { width: 36%; }
  .page-rates .combo td .fig { font-size: 1.375rem; }
}

/* the estimate: a chart title block, neatline and inner rule */
.page-rates .est {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-4);
  border: 1px solid var(--neat);
  outline: 1px solid var(--rule);
  outline-offset: -7px;
  background-color: var(--field);
}
.page-rates .est__formula { color: var(--fg-2); }
.page-rates .est__fields { display: grid; gap: var(--s-3) var(--col-gap); }
@media (min-width: 480px) { .page-rates .est__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.page-rates .stepper { display: flex; }
.page-rates .stepper .icon-btn { flex: none; border-color: var(--neat); }
.page-rates .stepper input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0 -1px;
  padding: 0 .5rem;
  text-align: center;
  font: 500 1rem/1 var(--sans);
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}
.page-rates .stepper input::-webkit-inner-spin-button,
.page-rates .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.page-rates .stepper input:focus-visible { position: relative; z-index: 1; }
.page-rates .stepper .icon-btn[aria-disabled="true"] { color: var(--fg-2); border-color: var(--rule); background-color: transparent; cursor: default; }
.page-rates .stepper .icon-btn[aria-disabled="true"]:active { transform: none; }

.page-rates .est__room { margin: 0; padding: 0; border: 0; min-width: 0; }
.page-rates .est__room legend { padding: 0; margin-bottom: var(--s-1); }
.page-rates .est__opt { display: flex; align-items: center; gap: .625rem; min-height: 2.25rem; cursor: pointer; }
.page-rates .est__opt input { accent-color: var(--fg); }

.page-rates .est__sum { display: grid; border-top: 1px solid var(--neat); }
.page-rates .est__sum > div { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.page-rates .est__sum dd { margin: 0; }
.page-rates .est__qty {
  display: block;
  margin-top: .125rem;
  color: var(--fg-2);
  font: 500 .8125rem/1.4 var(--sans);
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-rates .est__sum .est__total { border-bottom-color: var(--neat); }
.page-rates .est__total dt { font-weight: 600; }

/* ---------- What a fishing day includes ---------- */
.page-rates .included__grid { display: grid; gap: var(--s-8) var(--col-gap); }
.page-rates .included__text { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.page-rates .included__text .sec-head { margin-bottom: 0; }
.page-rates .included__list { justify-self: stretch; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.page-rates .included__list li { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 1024px) {
  .page-rates .included__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .page-rates .included__photo { grid-column: 1 / span 5; }
  .page-rates .included__text { grid-column: 7 / -1; }
}