/* First screen (docs/design.md 5.1). Needs tokens.css and base.css. */

/* A soft sky over paper; the 3D picture (scripts/hero.mjs) has a clear background and sits on it. */
.home {
  overflow-x: hidden;
  background: linear-gradient(180deg, #CBE6EE 0, #DDEFE6 340px, var(--paper) 640px) no-repeat, var(--paper);
}

.home-page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) max(12px, env(safe-area-inset-bottom));
}

.home-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  max-width: 520px;
  padding-top: var(--s-6);
}

.home-title {
  /* Jua is lighter than the bold fallback the mockup was shot with: one step larger on phones. */
  font-size: clamp(3rem, 2rem + 6vw, 6.5rem);
  color: var(--ink);
  /* paper-cut lift: a hard pale edge under the letters */
  text-shadow: 0 3px 0 var(--paper-hi);
}

.home-lede {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  max-width: 22em;
}

/* Phones and tablets: the picture runs edge to edge under the lede, 3:2. */
.home-hero {
  display: block;
  margin: calc(-1 * var(--s-2)) calc(-1 * var(--gutter)) calc(-1 * var(--s-3));
}
.home-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
  margin: 0 auto;
}

.join-wrap { position: relative; }

/* The open rooms (plan P10, v5 V6): the second way in, under the class room's sheet and smaller,
   one button per map side by side, each tinted with its map's colour. */
.home-open { display: flex; gap: var(--s-2); align-self: stretch; margin-top: var(--s-1); }
.home-open-btn { flex: 1 1 0; min-width: 0; padding: 0 var(--s-3); white-space: nowrap; }
.home-open-btn[data-open-map='forest'] { background: var(--map-forest-tint); }
.home-open-btn[data-open-map='sea'] { background: var(--map-sea-tint); }

.home-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.home-foot { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); justify-content: flex-start; padding-top: var(--s-4); }

@media (min-width: 900px) {
  .home { background: linear-gradient(180deg, #CBE6EE 0, #DDEFE6 45%, var(--paper) 100%) fixed; }
  /* The whole first screen fits one desktop window (768px tall and up): spacing and the title
     follow the window height, and the privacy link sits beside the column instead of under it. */
  .home-page { --col: 520px; flex-direction: row; padding-left: max(var(--gutter), 7vw); }
  .home-main {
    max-width: var(--col);
    justify-content: center;
    gap: min(var(--s-4), 1.5vh);
    padding-top: min(var(--s-6), 3vh);
    padding-bottom: min(6vh, max(0px, 30vh - 240px));
  }
  .home-title { font-size: clamp(4rem, min(7vw, 18vh - 60px), 7.5rem); }
  .home-lede { font-size: var(--fs-lg); }
  /* The picture fills the room right of the column, in the middle of the window height. */
  .home-hero {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: calc(max(var(--gutter), 7vw) + var(--col) + var(--s-3));
    right: var(--gutter);
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .home-hero-img { max-width: none; max-height: 94vh; width: 100%; object-fit: contain; }
  .home .join { padding-top: min(var(--s-5), 2vh); padding-bottom: min(var(--s-5), 2vh); }
  .home-foot { position: relative; z-index: 1; align-self: flex-end; margin-left: auto; padding-top: 0; }
  .home-open { align-self: flex-start; }
  .home-open-btn { flex: 0 0 auto; min-width: 200px; padding: 0 var(--s-5); }
  .home-links { gap: var(--s-1) var(--s-2); }
  /* Beside the picture the small links become paper tags, so they read on the sky and the land. */
  .home-links .btn-quiet,
  .home-foot .btn-quiet {
    min-height: var(--hit);
    padding: 0 var(--s-3);
    color: var(--ink);
    background: var(--paper-hi);
    border-radius: var(--r-control);
    box-shadow: 0 3px 0 rgba(31, 43, 28, 0.35);
  }
}

/* Tablets in landscape: a narrower column leaves the picture more room. */
@media (min-width: 900px) and (max-width: 1199px) {
  .home-page { --col: 450px; }
}