/* The home page's own passages, in page order. Served on the home page only, after styles.css. */

/* ---------- the opening (data-section="opening") ----------
   One photograph filling the screen under the header, edge to edge: the lazy river from a laptop up, the clubhouse pool
   (a tall photograph, made for a phone) below 900px. The words sit at the foot, on a velvet shade that rises from the
   bottom of the photograph. */
.hero{position:relative;height:calc(100svh - var(--hh) - var(--bar));min-height:540px;background:var(--velvet);color:var(--white);overflow:hidden}
.hero-photo{position:absolute;inset:0}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-wide{display:none}
.hero-tall{object-position:50% 34%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:66%;z-index:1;pointer-events:none;background:linear-gradient(to top, rgba(15,58,57,.9) 0%, rgba(15,58,57,.72) 42%, rgba(15,58,57,0) 100%)}
.hero-words{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(26px, 5svh, 44px)}
.hero h1{font-size:clamp(36px, 10vw, 44px);line-height:1.04;letter-spacing:-.02em}
.hero-place{margin-top:12px;font-size:16px;line-height:1.5;max-width:30em}
@media (min-width:900px){
  .hero{height:calc(100svh - var(--hh));min-height:600px}
  .hero-wide{display:block;object-position:50% 58%}
  .hero-tall{display:none}
  .hero::after{height:60%;background:linear-gradient(to top, rgba(15,58,57,.84) 0%, rgba(15,58,57,.6) 40%, rgba(15,58,57,0) 100%)}
  .hero-words{left:var(--edge);right:auto;width:min(62vw, 860px);bottom:clamp(44px, 8svh, 104px)}
  .hero h1{font-size:clamp(50px, 20px + 3.1vw, 80px);line-height:1.02}
  .hero-place{margin-top:clamp(14px, 1.2vw, 22px);font-size:clamp(18px, 16px + .3vw, 23px);max-width:28em}
}

/* ---------- 3 ways to stay (data-section="ways-to-stay") ----------
   The townhouse's 3 bedrooms side by side, labelled like a plan: a bracket over the Studio's room, a bracket over the
   Suite's 2, and one bracket under all 3 for the whole house. Labels and brackets sit beside the photographs, never on
   them. On a phone the whole house comes first and its bracket runs down the left of the Studio and the Suite. */
.ways-sec{padding-block:clamp(56px, 8vw, 140px) clamp(64px, 8vw, 140px)}
.ways-head .lede{margin-top:14px}
.ways-sec .plan{margin-top:clamp(30px, 4vw, 64px)}
@media (min-width:900px){
  .ways-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .ways-head h2{grid-column:1 / 6}
  .ways-head .lede{grid-column:6 / 13;margin:0;justify-self:end;max-width:31em}
}

/* ---------- the house inside (data-section="the-house") ----------
   Our words and a guest's review card side by side, then one large photograph and 2 beside it. */
.inside-sec{padding-bottom:clamp(64px, 9vw, 150px)}
.inside-words .lede{margin-top:14px}
.inside-words .more{margin-top:6px}
.inside-review{margin-top:26px}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.inside-grid .big{grid-column:1 / -1;margin-inline:calc(-1*var(--pad))}
.inside-grid .big .photo{aspect-ratio:4/3}
.inside-grid .big figcaption{padding-inline:var(--pad)}
.inside-grid .tall .photo{aspect-ratio:1/1}
@media (min-width:900px){
  .inside-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .inside-words{grid-column:1 / 7}
  .inside-words h2{max-width:12em}
  .inside-review{grid-column:8 / 13;margin:0}
  .inside-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:var(--gap);margin-top:clamp(32px, 3.4vw, 56px)}
  .inside-grid .big{grid-column:1 / 9;grid-row:1 / 3;margin:0}
  .inside-grid .big .photo{aspect-ratio:3/2}
  .inside-grid .big figcaption{padding:0}
  .inside-grid .tall{grid-column:9 / 13}
  .inside-grid .tall .photo{aspect-ratio:16/10}
  .inside-grid .t-a{grid-row:1}
  .inside-grid .t-b{grid-row:2}
}

/* ---------- the resort (data-section="the-resort") ----------
   The page's one pale ground. Heading and words, then the clubhouse pool large with the resort from above and the tiki
   bar beside it, then a row of 4: arcade, ice cream shop, hot tubs, fitness center. Her resort photographs are 1,200
   wide, so none runs edge to edge on a laptop (it would be soft); on a phone the clubhouse pool runs edge to edge and
   the 6 smaller photographs scroll sideways. Nothing here says the resort's pools are the house's own or free. */
.resort-sec{background:var(--pool);padding-block:clamp(56px, 8vw, 140px)}
.resort-words .lede{margin-top:14px}
.resort-words .more{margin-top:6px}
.resort-grid{margin-top:28px}
.r-main{margin:0 calc(-1*var(--pad))}
.r-main .photo{aspect-ratio:4/3}
.r-main figcaption{padding-inline:var(--pad)}
.day-row{display:grid;grid-auto-flow:column;grid-auto-columns:66%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:22px var(--pad) 0;scroll-padding-inline:var(--pad);scrollbar-width:none;margin-inline:calc(-1*var(--pad))}
.day-row::-webkit-scrollbar{display:none}
.day-row figure{margin:0;scroll-snap-align:start}
.day-row .photo{aspect-ratio:4/5}
@media (min-width:900px){
  .resort-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .resort-head h2{grid-column:1 / 6}
  .resort-words{grid-column:7 / 13;justify-self:end;max-width:31em}
  .resort-words .lede{margin-top:0}
  .resort-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:var(--gap);margin-top:clamp(32px, 3.4vw, 56px)}
  .r-main{grid-column:5 / 13;grid-row:1 / 3;margin:0}
  .r-main .photo{aspect-ratio:3/2}
  .r-main figcaption{padding:0}
  .day-row{display:contents}
  .day-row .d1,.day-row .d2{grid-column:1 / 5}
  .day-row .d1{grid-row:1}
  .day-row .d2{grid-row:2}
  .day-row .d1 .photo,.day-row .d2 .photo{aspect-ratio:16/10}
  .day-row .d3,.day-row .d4,.day-row .d5,.day-row .d6{grid-row:3;margin-top:clamp(8px, 1vw, 20px)}
  .day-row .d3 .photo,.day-row .d4 .photo,.day-row .d5 .photo,.day-row .d6 .photo{aspect-ratio:4/3}
  .day-row .d3{grid-column:1 / 4}
  .day-row .d4{grid-column:4 / 7}
  .day-row .d5{grid-column:7 / 10}
  .day-row .d6{grid-column:10 / 13}
}

/* ---------- Disney and Christmas (data-section="disney") ----------
   The bunk room's Mickey and Minnie beside the words, and the 2 doorways: the area and Christmas. */
.disney-sec{padding-block:clamp(64px, 9vw, 150px)}
.disney{display:grid;gap:28px}
.disney-photo{aspect-ratio:4/5;max-width:520px}
.disney-words .lede{margin-top:14px}
.xmas{margin-top:22px;max-width:30em}
.links{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:8px}
@media (min-width:900px){
  .disney{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .disney-photo{grid-column:1 / 6;max-width:none}
  .disney-words{grid-column:7 / 13}
}

/* ---------- the guests (data-section="guests") ----------
   The rating, then a card for each guest: stars, their own words at body size, their name and where they wrote it. */
.guests-sec{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line)}
.guests-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
.score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.score b{font-family:var(--display);font-weight:400;font-size:clamp(56px, 40px + 3vw, 88px);line-height:.9;letter-spacing:-.03em}
.score span{font-family:var(--body);font-size:17px;color:var(--mist);max-width:12em;line-height:1.35;letter-spacing:0}
.cards{display:grid;gap:16px;margin-top:clamp(26px, 3vw, 44px)}
@media (min-width:900px){
  .cards{grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
  .cards>div{display:flex}
  .cards .review{flex:1}
}