/* The 2-Bedroom Suite's own passages, in page order. Served on /two-bedroom-suite only, after styles.css (which holds
   the opening, the plan and the doorway to the whole house). */

/* The price in the header and the phone's bar is the site's lowest starting price, the Studio's (Michael, 19 Oct:
   "Lowest, fixed"). On the Suite's own page it would read as the Suite's price, so here it steps aside and the bar is
   one button; the Suite's own price is on its card in the booking section below. */
.head-price,.ask-price{display:none}
.ask-bar .btn{flex:1;margin-left:0;justify-content:center}

/* ---------- where you'll sleep (data-section="where-you-sleep") ----------
   The 2 bedrooms as 2 tall portraits, each with its beds in one line. From 900px the heading sits at the left and the
   portraits take 5 columns each. */
.way-sleep{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line)}
.sleep-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 12px;margin-top:clamp(24px, 3vw, 40px)}
.sleep .photo{aspect-ratio:4/5}
.sleep h3{margin-top:14px;font-size:clamp(19px, 17px + .4vw, 24px)}
.sleep .beds{margin-top:6px;font-weight:600;font-size:15px;line-height:1.4}
.sleep p:not(.beds){margin-top:6px;font-size:15px;line-height:1.5;color:var(--mist)}
@media (min-width:900px){
  .way-sleep .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .way-sleep h2{grid-column:1 / 4}
  .sleep-grid{grid-column:4 / 13;grid-template-columns:1fr 1fr;column-gap:var(--gap);margin-top:0}
  .sleep h3{margin-top:18px}
  .sleep .beds{font-size:17px}
  .sleep p:not(.beds){font-size:16px;max-width:30em}
}

/* ---------- where you'll live (data-section="where-you-live") ----------
   The living room, the dining table and the kitchen's coffee corner, then the balcony and a bathroom: 2 to a row on a
   phone (the bathroom across both), 3 then 1 + 2 from 900px, every photograph in a row the same height. */
.way-live{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line)}
.way-live-head .lede{margin-top:14px}
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 12px;margin-top:clamp(26px, 3vw, 44px)}
.live-grid .photo{aspect-ratio:4/5}
.live-grid .lv-e{grid-column:1 / -1}
.live-grid .lv-e .photo{aspect-ratio:4/3}
@media (min-width:900px){
  .way-live-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .way-live-head h2{grid-column:1 / 6}
  .way-live-head .lede{grid-column:6 / 13;margin:0;justify-self:end;max-width:31em}
  .live-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:clamp(32px, 3vw, 48px)}
  .live-grid figure{grid-column:span 4}
  /* The bathroom's file is 800px wide on the record: 7 columns keep it sharp (8 drew it at 0.9 of a pixel). */
  .live-grid .lv-d{grid-column:span 5}
  .live-grid .lv-e{grid-column:span 7}
  .live-grid .photo,.live-grid .lv-e .photo{aspect-ratio:auto;height:clamp(300px, 32vw, 540px)}
}