/* The resort page's own passages, in page order. Served on /the-resort only, after styles.css (which holds the
   opening, shared with the ways' own pages, and the dates). */

/* ---------- a day at the resort (data-section="a-day") ----------
   4 times of day, each a small label, a heading with its line of words, and its photographs. From 900px the label
   stays at the left while its time of day scrolls past, and the photographs in a row share one height. Morning's 2
   portraits stand beside its words; the other 3 times put their words above a row. */
.day{padding-block:clamp(8px, 2vw, 32px) clamp(40px, 5vw, 80px)}
.hour{padding-block:clamp(44px, 5.5vw, 96px);border-top:1px solid var(--line)}
.hour:first-child{border-top:0}
.hour-label{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--velvet)}
.hour-label::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
.hour-words h2{margin-top:12px;font-size:clamp(26px, 6.4vw, 30px)}
.hour-words p{margin-top:12px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;color:var(--mist);max-width:36em}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;margin-top:26px}
.shots figure{min-width:0}
.shots .photo{aspect-ratio:4/5}
.shots figcaption{margin-top:8px;font-size:15px;line-height:1.4;color:var(--mist)}
/* On a phone, 3 photographs lead with the first across the row; midday's 2 landscapes take a row each. */
@media (max-width:899.98px){
  .shots figure:first-child:nth-last-child(3){grid-column:1 / -1}
  .shots figure:first-child:nth-last-child(3) .photo{aspect-ratio:4/3}
  .h-midday .shots figure{grid-column:1 / -1}
  .h-midday .s-a .photo{aspect-ratio:4/3}
  .h-midday .s-b .photo{aspect-ratio:3/2}
}
@media (min-width:900px){
  .hour{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
  .hour-label{grid-column:1 / 3;align-self:start;position:sticky;top:calc(var(--hh) + 28px);margin-top:14px}
  .hour-body{grid-column:3 / 13;display:grid;grid-template-columns:repeat(10,1fr);column-gap:var(--gap);align-content:start;
    --sh:clamp(280px, 26vw, 440px)}
  .hour-words{grid-column:1 / -1;display:grid;grid-template-columns:repeat(10,1fr);column-gap:var(--gap);align-items:end}
  .hour-words h2{grid-column:1 / 6;margin:0;font-size:clamp(28px, 16px + 1.3vw, 40px)}
  .hour-words p{grid-column:6 / 11;margin:0;justify-self:end;max-width:31em}
  .shots{grid-column:1 / -1;grid-template-columns:repeat(10,1fr);column-gap:var(--gap);row-gap:0;margin-top:clamp(28px, 3vw, 44px)}
  .shots figure{grid-column:auto / span 3}
  .shots .photo{aspect-ratio:auto;height:var(--sh)}
  .shots figcaption{margin-top:10px}
  .h-midday .shots figure{grid-column:auto / span 5}
  .h-afternoon .s-a{grid-column:auto / span 4}
  .h-evening .s-c{grid-column:auto / span 4}
  /* Morning: the words at the left, its 2 portraits beside them. */
  .h-morning .hour-words{grid-column:1 / 5;display:block;align-self:end}
  .h-morning .hour-words h2{font-size:clamp(28px, 16px + 1.3vw, 40px)}
  .h-morning .hour-words p{margin-top:16px;max-width:none}
  .h-morning .shots{grid-column:5 / 11;grid-template-columns:repeat(6,1fr);margin-top:0}
  .h-morning .shots figure{grid-column:auto / span 3}
  .h-morning .shots .photo{height:auto;aspect-ratio:4/5}
}

/* ---------- a guest's word, then home (data-section="guest") ---------- */
.res-guest{padding-block:clamp(56px, 7vw, 120px);border-top:1px solid var(--line)}
.res-guest-grid{display:grid;gap:40px}
.res-home h2{font-size:clamp(26px, 6.4vw, 30px)}
.res-home p{margin-top:10px;font-size:clamp(16px, 15px + .2vw, 18px);line-height:1.6;max-width:32em}
@media (min-width:900px){
  .res-guest-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
  .res-guest-grid>.guest-voice{grid-column:1 / 7}
  .res-home{grid-column:8 / 13}
  .res-home h2{font-size:clamp(28px, 16px + 1.3vw, 40px)}
}