/* =============================================================================
   The second desktop (portfolio-2.html): a turquoise wall, the framed
   portrait hung on it, his name under it like a museum label, and app icons
   of worn paper with their names under them. Loaded after style.css, which
   still does the windows and the icons' dragging.
   ============================================================================= */

body.desktop-2 {
  background: #3ab1bf url("../assets/desktop-2/wall.jpg") center / cover no-repeat fixed;
  --app-w: clamp(43px, 3.78vw, 73px);   /* one app square's width (30% under the first try, his call) */
}

/* The portrait hangs near the top of the wall and takes 80% of its height,
   leaving room under it for the name; on a narrow screen it keeps to the
   width instead. Everything else is worked out from its size and place. */
body.desktop-2 {
  --paint-h: min(calc(80 * var(--vh)), calc(92 * var(--vh) - 62px), calc(94vw * 1.5));   /* the portrait's height (in a very short
                                                  window a little less, so the name under it stays in view) … */
  --paint-w: calc(var(--paint-h) / 1.5);          /* … and width: its file is 1024x1536 */
  --paint-top: calc(4 * var(--vh));
}
.desktop-2 .painting {
  position: absolute;
  left: 50%;
  top: var(--paint-top);
  height: var(--paint-h);
  width: auto;
  transform: translateX(-50%);
  box-shadow: 0 28px 50px -22px rgba(0, 38, 46, .6), 0 8px 16px -8px rgba(0, 38, 46, .45);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* His name and what he does, centred under the painting like the label of a
   picture in a museum (his pick, "D"). An image of his own lettering. */
.desktop-2 .wordmark {
  position: absolute;
  left: 50%;
  top: calc(var(--paint-top) + var(--paint-h) + 4 * var(--vh));
  width: min(380px, 60vw);
  margin: 0;
  transform: translateX(-50%);
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
.desktop-2 .wordmark img { display: block; width: 100%; height: auto; }

/* The icons hang around the portrait as he laid them out: "my work" on its
   left, level with the first of six in a column on its right. The same wall
   separates each side from the painting, the rows are evenly spaced, and it
   is all worked out from the painting's own size, so it holds on any screen
   wide enough to have wall beside the painting. */
body.desktop-2 {
  --side: calc(clamp(43px, 3.78vw, 73px) + 44px); /* an icon's box: room for its name, which keeps its width when the square shrinks */
  --room: calc((var(--side) - var(--app-w)) / 2); /* the box either side of its square */
  /* the wall between the painting and each square: half of the first try
     (his call), 30 px on a 1440 px screen */
  --gap: max(calc(clamp(13px, 1.3vw, 26px) + 11px),
             calc(2.7em - var(--app-w) / 2));   /* and room for half a long name, at any text size */
  /* from one row to the next: the painting's share, but never more than a
     third again an icon's own height (its square and its name, in ems so a
     browser that sets text larger moves the rows apart with it), so in a
     narrower window, where the icons shrink, the rows close up with them
     under the first one instead of leaving gaps (his call) */
  --pitch: min(calc(var(--paint-h) * .155), calc((var(--app-w) + 2.8em) * 1.3));
  --row0: calc(var(--paint-top) + var(--paint-h) * .06);
}
@media (min-width: 721px) {
  /* 80% of the first size, on a computer (his call), 58 px on a wide
     screen; a narrower window shrinks it by only 60% of what its width would
     (his call), never under 43.6 px. A short window still has the last word,
     so one row's name never runs into the next square, and so does a narrow
     tall one, so a name never reaches the painting. */
  body.desktop-2 {
    --app-wide: clamp(43.6px, calc(23.2px + 1.812vw), 58px);
    --app-w: max(34px, min(var(--app-wide), calc(12.4 * var(--vh)) - 47px, 50vw - var(--paint-w) / 2 - 33px));
    /* and in a window narrow for its height the painting leaves 130 px of
       wall each side, so the icons' names never reach it */
    --paint-h: min(calc(80 * var(--vh)), calc(92 * var(--vh) - 62px), calc((100vw - 260px) * 1.5));
  }
  .desktop-2 .icons {
    inset: 0;
    display: block;
    direction: ltr;
  }
  .desktop-2 .icon {
    position: absolute;
    width: var(--side);
    left: calc(50vw + var(--paint-w) / 2 + var(--gap) - var(--room));
    top: calc(var(--row0) + var(--row, 0) * var(--pitch));
  }
  .desktop-2 .icon--left { left: calc(50vw - var(--paint-w) / 2 - var(--gap) - var(--app-w) - var(--room)); }
}
/* A window too short for six in a column, a phone turned on its side
   among them: the right side stands in two columns of three, with twice
   the room between rows. */
@media (min-width: 721px) and (max-height: 660px) {
  body.desktop-2 {
    --pitch: min(calc(var(--paint-h) * .31), calc((var(--app-w) + 2.8em) * 1.3));
    --app-w: max(34px, min(var(--app-wide), calc(24.8 * var(--vh)) - 47px));
  }
  .desktop-2 .icon:nth-child(n+6) {                /* genie, tommy, play!, a name's width
                                                    over (in ems, for a browser's larger text) */
    left: calc(50vw + var(--paint-w) / 2 + var(--gap) - var(--room) + max(var(--side), 5.8em));
    top: calc(var(--row0) + (var(--row) - 3) * var(--pitch));
  }
}

.desktop-2 .icon { padding: 8px 8px 6px; }
.desktop-2 .icon__app {
  display: block;
  width: calc(var(--app-w) * 300 / 264);   /* the file's square is a little wider than the icon */
  margin: calc(var(--app-w) * -18 / 264);  /* … so its empty margin is taken back */
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(0, 38, 46, .35));
}
.desktop-2 .icon__name {
  margin-top: 9px;
  font: 600 13px/1.2 var(--font-ui);
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 30, 36, .55), 0 0 8px rgba(0, 30, 36, .3);
}

/* A phone has no wall beside the painting (his pick, "M1"): the name at the
   top, the painting under it, and the icons below in rows of four, the last
   row centred. The spacing is set on the icons' box only until the page frees
   them for dragging (app.js reads their spots first, then takes over). */
@media (max-width: 720px) {
  body.desktop-2 {
    --app-w: 38px;
    --paint-h: min(calc(60 * var(--vh)), calc(84vw * 1.5));
    --paint-top: calc(12 * var(--vh));
  }
  .desktop-2 .wordmark { top: calc(3.6 * var(--vh)); width: 78vw; }
  .desktop-2 .icons:not(.is-free) {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--paint-top) + var(--paint-h) + 3.5 * var(--vh));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    max-width: calc(4 * 72px + 3 * 10px);
    margin: 0 auto;
    direction: ltr;
  }
  .desktop-2 .icon { width: 72px; padding: 6px 0 4px; }
  .desktop-2 .icon__name { font-size: 11.5px; }
}