/* ==========================================================================
   "Book on Airbnb" page. Every number was measured from the live page's computed
   styles (1440px viewport).
   ========================================================================== */

.jth-book {
  font-family: "Windsor", Georgia, serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  color: var(--jth-ink);
}
.jth-book h1, .jth-book h2, .jth-book h3, .jth-book p { margin: 0; }

/* The old builder's container: 1170 / 970 / 750, full width with 15px gutters on phones. */
.jb-wrap { box-sizing: border-box; margin: 0 auto; padding: 30px 15px 100px; }
@media (min-width: 768px)  { .jb-wrap { width: 750px; } }
@media (min-width: 992px)  { .jb-wrap { width: 970px; } }
@media (min-width: 1200px) { .jb-wrap { width: 1170px; } }

.jth-book .jb-title {
  margin-bottom: 76px;                       /* 16px heading margin + a 60px spacer */
  text-align: center; font-size: 36px; line-height: 54px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;
}

/* Location heading with its rule underneath (680px wide, 1px black). */
.jth-book .jb-location {
  box-sizing: content-box; max-width: 680px; margin: 0 0 35px; padding: 0;
  font-size: 36px; line-height: 54px; font-weight: 700; letter-spacing: 1px;
  border-bottom: 1px solid #000;
}
.jb-location + .jb-grid { margin-top: 0; }
.jb-grid + .jb-location { margin-top: 60px; } /* the spacer live puts between location groups */

/* Two to a row; each card has 20px side padding and 70px under it (the grid bleeds 15px each side
   like the old builder's row, so the cards line up with the heading). */
.jb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -15px; }
.jb-card { box-sizing: border-box; min-width: 0; padding: 0 20px 70px; }
.jb-card__img { display: block; margin-bottom: 20px; }
.jb-card__img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.jth-book .jb-card__name { font-size: 30px; line-height: 36px; font-weight: 400; letter-spacing: 2px; }
.jth-book .jb-card__sleeps { margin: 0 0 5px; font-size: 14px; line-height: 30px; text-transform: uppercase; }
.jth-book .jb-card__text p { margin: 0; font-weight: 100; color: #665452; }
.jb-card__btn {
  display: inline-block; box-sizing: border-box; margin-top: 15px; padding: 10px 15px; max-width: 100%;
  font-size: 13px; line-height: 18px; letter-spacing: 1px; text-transform: uppercase; text-align: center; text-decoration: none;
  color: #fff; background: #A55E48; border-radius: 5px;
  transition: background-color .2s ease;
}
/* Live's hover sets the text to the same colour as the background (the label disappears); keep it readable. */
.jb-card__btn:hover, .jb-card__btn:focus { color: #fff; background: #665452; }

/* Phones (values measured on live at 390px): single column, no bottom padding on the wrapper or the cards,
   25px location headings, 27px line for the capacity text. */
@media (max-width: 767px) {
  .jb-wrap { padding-bottom: 30px; }
  .jb-grid { grid-template-columns: 1fr; margin: 0 -15px; }
  .jb-card { padding-bottom: 0; }
  .jth-book .jb-location { font-size: 25px; line-height: 38px; }
  .jth-book .jb-card__sleeps { line-height: 27px; }
}