/* Home sections after the intro: selected works. (The services band is css/services.css.)
   Reads every value from tokens.css; tiles, captions, eyebrows and arrow links come from
   components.css. */

/* ---------- Selected works ---------- */
/* KOBU's staggered index (References/Mobbin/04): four projects at different sizes off a
   shared 12-column grid (Luke 9/30: keep the layout, add a fourth). Two columns that run down
   on their own, so each tile drops against its neighbor: at left a large landscape and a
   smaller one pulled in from the edge, at right a dropped portrait with a square under it
   (Luke 9/30: Mr. Henry's was a small landscape). The square runs the right column past the
   left one, and the room it leaves under Lockmoor holds a note (the bio's style) with the
   portfolio link. Column 8 stays open all the way down. A hairline opens the section, since
   it follows another paper section. */

.work {
  padding: 0 var(--gutter) var(--space-section);
  background: var(--paper);
  color: var(--ink);
}
/* Its head is the shared .more-head and .more-title (components.css): the rule, the eyebrow,
   then the statement, as About's "Selected works" and a project page's "More projects" (brand
   pass 10/12: it had the eyebrow alone) */

.work__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.work__col { display: flex; flex-direction: column; grid-row: 1; align-self: start; }
.work__col--left { grid-column: 1 / span 7; }
.work__col--right { grid-column: 9 / span 4; }

/* Left: the second tile is 6 of the column's 7 grid columns, set against the right edge */
.work__col--left .tile + .tile {
  align-self: flex-end;
  width: calc((100% - 6 * var(--gutter)) / 7 * 6 + 5 * var(--gutter));
  margin-top: clamp(72px, 8vw, 136px);
}
/* Right: a portrait dropped well below the first tile's top, then a square dropped by the
   same amount, so it ends well below the left column */
.work__col--right .tile:first-child { --tile-ratio: 4 / 5; margin-top: clamp(112px, 14vw, 240px); }
.work__col--right .tile + .tile { --tile-ratio: 1 / 1; margin-top: clamp(112px, 14vw, 240px); }

/* The note: the left column runs the full height of the section, and the note sinks to its
   foot, ending level with Mr. Henry's caption. It starts on the column's second grid column,
   in line with Lockmoor, and is 4 grid columns wide. Lockmoor's bottom margin is the least
   room above it, so on narrower screens the column grows rather than the two touching. */
.work__col--left { align-self: stretch; --col: calc((100% - 6 * var(--gutter)) / 7); }
.work__col--left .tile + .tile { margin-bottom: clamp(56px, 6vw, 96px); }
.work__note {
  margin-top: auto;
  margin-left: calc(var(--col) + var(--gutter));
  width: calc(var(--col) * 4 + var(--gutter) * 3);
}
/* On its own line, and ending on its baseline as a caption does, so the two meet on it */
.work__note .arrow-link { display: flex; width: fit-content; margin-bottom: calc(-1 * var(--descent-gap)); }

/* "View portfolio" is the bio's arrow link, as "About Spenser" (Luke 9/30) */

/* Narrower desktop: the note takes a fifth grid column so its text keeps a fair measure */
@media (max-width: 1279px) {
  .work__note { width: calc(var(--col) * 5 + var(--gutter) * 4); }
}

/* Tablet keeps the two staggered columns, smaller (KOBU's tablet does), the right one a
   column wider (8-12) so its captions keep to one line. Phone: one column in
   reading order (Cardona, Lockmoor, Princess, Mr. Henry's), alternating left and right so it
   still reads as a collage, the tile gap between them, then the note */
@media (max-width: 989px) {
  .work__col--right { grid-column: 8 / span 5; }
}
@media (max-width: 600px) {
  .work__grid { display: flex; flex-direction: column; --span10: calc((100% - 11 * var(--gutter)) / 12 * 10 + 9 * var(--gutter)); --span9: calc((100% - 11 * var(--gutter)) / 12 * 9 + 8 * var(--gutter)); }
  .work__col { display: contents; }
  /* On the grid's lines: Cardona across, Lockmoor on columns 3-12, Princess 1-9, Mr. Henry's 4-12 */
  .work__col--left .tile:first-child { width: 100%; }
  .work__col--left .tile + .tile, .work__col--right .tile + .tile { align-self: flex-end; width: var(--span10); margin: var(--space-tiles) 0 0; }
  .work__col--right .tile:first-child { width: var(--span9); margin-top: var(--space-tiles); }
  .work__col--right .tile + .tile { width: var(--span9); }
  /* The note comes last, after Mr. Henry's */
  .work__note { order: 1; align-self: stretch; width: auto; margin: var(--space-tiles) 0 0; }
}

/* ---------- Lifestyle photo (Luke 10/14) ---------- */
/* One wide photo across the page (the gutters') after the services band (Spenser 10/15: the
   convertible, moved here from the contact page): tokens.css --lifestyle-ratio, 16:9 on phones. The tile gap from the band's edge to the
   photo and from the photo to the closing's first line (the closing's own band space,
   --space-band, would leave a gap twice that). Padding, not margins: the body under the page
   is ink. */
.home-photo { padding: var(--space-tiles) var(--gutter) 0; background: var(--paper); }
.home-photo .frame { width: 100%; aspect-ratio: var(--lifestyle-ratio); }
.home-photo + .cta { padding-top: var(--space-tiles); }
@media (max-width: 600px) {
  .home-photo .frame { aspect-ratio: 16 / 9; }
}