/* The reviews page's own passages. Served on /reviews only, after styles.css. */

/* ---------- the opening (data-section="opening") ---------- */
.rv-open{padding-block:clamp(32px, 5vw, 72px) clamp(28px, 3vw, 48px)}
.rv-open h1{font-size:clamp(34px, 9vw, 42px);line-height:1.06;letter-spacing:-.018em}
.rv-scores{margin-top:16px;display:grid;gap:6px}
.rv-score{display:flex;align-items:baseline;gap:12px;margin:0}
.rv-whole{margin:0;font-size:clamp(16px, 15px + .2vw, 18px);color:var(--mist)}
.rv-score b{font-family:var(--display);font-weight:400;font-size:clamp(34px, 8vw, 44px);line-height:1}
.rv-score span{font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.5;color:var(--mist);max-width:22em}
@media (min-width:900px){
  .rv-open-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .rv-open h1{grid-column:1 / 7;font-size:clamp(42px, 20px + 2.3vw, 60px);line-height:1.02}
  .rv-scores{grid-column:8 / 13;margin:0;justify-self:end}
}

/* ---------- every review, whole (data-section="reviews") ----------
   2 to a row from 900px: the 2 long reviews, then the short one beside a bathroom (the thing a guest thanked us for). */
.rv-all{padding-bottom:clamp(64px, 8vw, 140px)}
.rv-grid{display:grid;gap:16px}
.rv-card{height:100%;font-size:16px}
.rv-photo{margin-top:12px}
.rv-photo .photo{aspect-ratio:4/3}
@media (min-width:900px){
  .rv-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:var(--gap);align-items:stretch}
  .rv-a{grid-column:1 / 7}
  .rv-b{grid-column:7 / 13}
  .rv-c{grid-column:1 / 7}
  .rv-photo{grid-column:7 / 13;margin:0}
  .rv-photo .photo{aspect-ratio:auto;height:clamp(240px, 22vw, 360px)}
  .rv-card{font-size:17px}
}

/* ---------- the Suite's own guests (data-section="suite-reviews") ----------
   Below the whole house's reviews: the heading and its line at the left, the Suite's reviews 2 to a row from 900px,
   whole, with the stars each guest gave. The section leaves when the Suite has no review. */
.rv-part{padding-block:clamp(48px, 6vw, 104px) clamp(64px, 8vw, 140px);border-top:1px solid var(--line)}
.rv-part-head .lede{margin-top:14px}
.rv-part-grid{display:grid;gap:16px;margin-top:clamp(22px, 3vw, 40px)}
.rv-score-part span{font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.5;color:var(--mist)}
@media (min-width:900px){
  .rv-part-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .rv-part-head h2{grid-column:1 / 7}
  .rv-part-head .lede{grid-column:7 / 13;margin:0;justify-self:end;max-width:30em}
  .rv-part-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap);align-items:stretch}
}