/* interests.css: styles for the interests section only. Use tokens from base.css; prefix every class with .interests-. See work/DESIGN.md.

   Format: one list (ul.interests-body, which is a .grid) on the page grid. Each <li class="interests-item"> is one interest.
   - Photos: each interest has one figure.interests-item__media holding one to three img.frame__img
     (or no figure at all). The figure is a small grid that reads the photo count with :has():
     one photo stands alone, two sit side by side, three make one large photo with two stacked beside it.
   - Captioned photos: a photo can instead be a nested figure.interests-shot holding the img.frame__img
     and its own figcaption.frame__caption. A shot takes a bare photo's place in the grid, so every
     count below reads "a .frame__img or an .interests-shot".
   - .interests-item--feature: the photos run across the page, with the text set across rail and main.
     When its label comes before the photos, the label heads the strip from the rail.
   - Every other item is a secondary interest. On phones they form a compact index (kicker and title
     beside a small photo, description full width, hairlines between). From tablets up they form a
     woven two-up gallery: rows alternate "wide, narrow" from the main line and "narrow, wide" from
     the rail, and the narrow one sits a little lower.
     Positions are counted among non-featured items only (:nth-child(… of …)), so items can be
     added, removed or featured without touching this file. */

.interests-body {
  row-gap: var(--space-m);
  align-items: start;
}

@media (min-width: 48em) {
  .interests-body { row-gap: var(--space-2xl); }
}

/* ---- Item anatomy (all sizes) ---- */

.interests-item__body { margin-top: var(--space-m); }

.interests-item__title { margin-top: var(--space-xs); }

.interests-item__text { margin-top: var(--space-s); }

.interests-item__more { margin-top: var(--space-s); }

/* ---- Photo groups (one to three photos or clips in one figure) ----
   Items are counted with :nth-child(N of :is(.frame__img, .interests-shot)), so <img> and <video> count together
   and the figcaption is ignored. */

.interests-item__media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
}
.interests-item__media > .frame__caption { grid-column: 1 / -1; margin-top: var(--space-3xs); }

/* Two items: side by side, same size. */
.interests-item__media:has(> :nth-child(2 of :is(.frame__img, .interests-shot))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Three photos: the first runs across the top, cropped wide (3:2); the other two sit
   side by side beneath it, cropped square, which trims upright photos only at top and
   bottom, so nothing at their side edges is lost. Put the widest scene first. */
.interests-item__media:has(> :nth-child(3 of :is(.frame__img, .interests-shot))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.interests-item__media:has(> :nth-child(3 of :is(.frame__img, .interests-shot))) > :nth-child(1 of :is(.frame__img, .interests-shot)) { grid-column: 1 / -1; --ratio: 3 / 2; }
.interests-item__media:has(> :nth-child(3 of :is(.frame__img, .interests-shot))) > :nth-child(n+2 of :is(.frame__img, .interests-shot)) { --ratio: 1 / 1; }

@media (min-width: 48em) {
  .interests-item__media { gap: var(--space-xs); }
}

/* A captioned photo: its caption sits directly beneath it and wraps within the photo's width.
   --ratio is set on the shot by the rules above and inherits to its photo. */
.interests-shot { margin: 0; min-width: 0; }

/* ---- Featured item ---- */

.interests-item--feature {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid; /* inherits the page grid's rail and main lines */
  row-gap: 0;
}
.interests-item--feature > * { grid-column: full; }

/* Phones: the featured photos run edge to edge, so they stay the section's largest images.
   A single featured photo is cropped wide: 4:3 on phones, 16:9 from tablets up. */
.interests-item--feature .interests-item__media { margin-inline: calc(-1 * var(--gutter)); }
.interests-item--feature .interests-item__media > .frame__caption { margin-inline: var(--gutter); }
/* Captions of edge-to-edge photos keep the page margin on the side that meets the screen edge.
   With two or three photos the last one is the right half of a pair and the one before it the
   left half, so each caption gives up the margin on its inner side. */
.interests-item--feature .interests-shot > .frame__caption { margin-inline: var(--gutter); }
.interests-item--feature .interests-shot:nth-last-child(2 of :is(.frame__img, .interests-shot)) > .frame__caption { margin-right: 0; }
.interests-item--feature .interests-shot:nth-last-child(1 of :is(.frame__img, .interests-shot)):not(:nth-child(1 of :is(.frame__img, .interests-shot))) > .frame__caption { margin-left: 0; }
.interests-item--feature .interests-item__media:not(:has(> :nth-child(2 of :is(.frame__img, .interests-shot)))) > :is(.frame__img, .interests-shot) { --ratio: 4 / 3; }

/* Three featured items: on phones the first runs wide across the top and the other two sit
   beneath it at the figure's own ratio (frame--4x5); from tablets up all three stand in a
   row at that ratio. */
.interests-item--feature .interests-item__media:has(> :nth-child(3 of :is(.frame__img, .interests-shot))) > :nth-child(n+2 of :is(.frame__img, .interests-shot)) { --ratio: inherit; }

@media (min-width: 48em) {
  .interests-item--feature .interests-item__media { margin-inline: 0; }
  .interests-item--feature .interests-item__media > .frame__caption,
  .interests-item--feature .interests-item__media > .interests-shot > .frame__caption { margin-inline: 0; }
  .interests-item--feature .interests-item__media:not(:has(> :nth-child(2 of :is(.frame__img, .interests-shot)))) > :is(.frame__img, .interests-shot) { --ratio: 16 / 9; }
  .interests-item--feature .interests-item__media:has(> :nth-child(3 of :is(.frame__img, .interests-shot))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .interests-item--feature .interests-item__media:has(> :nth-child(3 of :is(.frame__img, .interests-shot))) > :nth-child(1 of :is(.frame__img, .interests-shot)) { grid-column: auto; --ratio: inherit; }
}

.interests-item--feature .interests-item__body { margin-top: var(--space-l); }

.interests-item--feature .interests-item__title { max-width: 18ch; }

.interests-item--feature .interests-item__text { margin-top: var(--space-m); }

@media (min-width: 48em) {
  .interests-item--feature .interests-item__body {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: full;
    align-items: first baseline; /* kicker, title and text share the first line */
  }
  .interests-item--feature .interests-item__body > * { grid-column: main; }
  .interests-item--feature .interests-item__kicker {
    grid-column: rail;
    grid-row: 1;
  }
  .interests-item--feature .interests-item__title { margin-top: 0; }
}

/* The featured title and paragraph stack in the main column (a short title such as a
   place name would otherwise sit alone beside the paragraph). */
.interests-item--feature .interests-item__text { max-width: var(--measure); }

/* A featured item with no title: its label moves out of the rail to head the
   description, which sits directly beneath it. */
.interests-item--feature .interests-item__body:not(:has(.interests-item__title)) .interests-item__text { margin-top: var(--space-s); }
@media (min-width: 48em) {
  .interests-item--feature .interests-item__body:not(:has(.interests-item__title)) .interests-item__kicker {
    grid-column: main;
    grid-row: auto;
  }
}

/* A featured item whose label comes first (its body before the photos): the label heads the
   strip from the rail, and each photo then carries its own caption. An optional sentence
   in the body runs beside the label, in the main column. */
.interests-item--feature > .interests-item__body:first-child { margin-top: 0; }
.interests-item--feature > .interests-item__body:first-child + .interests-item__media { margin-top: var(--space-s); }
@media (min-width: 48em) {
  .interests-item--feature > .interests-item__body:first-child .interests-item__kicker {
    grid-column: rail;
    grid-row: 1;
  }
  .interests-item--feature > .interests-item__body:first-child .interests-item__text { margin-top: 0; }
}

/* ---- Secondary items (everything not featured) ---- */

/* Phones: each entry reads kicker, title, its photos, then the description, with
   hairlines between entries. The photos vary by kind, so the list never becomes a
   uniform stack: a group of photos runs full width, a single photo stands as a large
   frame against the right edge, and a polaroid print sits tilted towards the left.
   The body wrapper steps aside (display: contents) so its lines join the entry grid. */
.interests-item--feature { margin-bottom: var(--space-m); }
@media (max-width: 47.99em) {
  /* The entry after the featured interest draws the hairline between them. It stands
     3rem below the captions (the margin above plus the list's row gap) and 3rem above
     the entry's label: twice the room between ordinary entries, the same on both sides. */
  .interests-item--feature + .interests-item:not(.interests-item--feature) { padding-top: var(--space-xl); }

  /* Captioned featured photos, two or three together: the captions run in half-width
     columns, so they drop the dash to keep a readable line... */
  .interests-item--feature .interests-item__media:has(> :nth-child(2 of :is(.frame__img, .interests-shot))) > .interests-shot > .frame__caption::before { content: none; }
  /* ...and the wide first photo of three keeps clear air between its caption and the pair beneath. */
  .interests-item--feature .interests-item__media:has(> :nth-child(3 of :is(.frame__img, .interests-shot))) > .interests-shot:nth-child(1 of :is(.frame__img, .interests-shot)) { padding-bottom: var(--space-s); }
}

.interests-item:not(.interests-item--feature) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--border-hair);
  padding-top: var(--space-m);
}
.interests-item:not(.interests-item--feature) .interests-item__body { display: contents; }
.interests-item:not(.interests-item--feature) .interests-item__kicker { grid-row: 1; }
.interests-item:not(.interests-item--feature) .interests-item__title { grid-row: 2; }
.interests-item:not(.interests-item--feature) .interests-item__media {
  grid-row: 3;
  margin-top: var(--space-m);
  margin-bottom: var(--space-3xs);
}
.interests-item:not(.interests-item--feature) .interests-item__media:not(.polaroid):not(:has(> :nth-child(2 of :is(.frame__img, .interests-shot)))) {
  width: 68%;
  justify-self: end; /* a single photo: a large frame set against the right edge */
}

/* A polaroid print: the shared .polaroid component, sized and placed here only.
   Undo the photo-group grid so the print's own border and caption layout apply. */
.interests-item__media.polaroid { display: block; }
.interests-item:not(.interests-item--feature) .interests-item__media.polaroid {
  width: min(62%, 15rem);
  justify-self: start;
  margin-left: var(--space-s); /* room for the tilt, towards the left as the single frame sits right */
  margin-top: var(--space-l);
  margin-bottom: var(--space-xs);
}

/* Tablets: a two-up gallery across the page, the right one dropped. */
@media (min-width: 48em) {
  /* A hairline across the page, with equal room above and below (the list's row gap),
     sets the featured interest apart from the gallery that follows. */
  .interests-item--feature:not(:last-child) {
    margin-bottom: 0;
    padding-bottom: var(--space-2xl);
    border-bottom: var(--border-hair);
  }
  .interests-item:not(.interests-item--feature) { display: block; border-top: 0; padding-top: 0; }
  .interests-item:not(.interests-item--feature) .interests-item__media { grid-row: auto; margin: 0; }
  .interests-item:not(.interests-item--feature) .interests-item__media:not(.polaroid):not(:has(> :nth-child(2 of :is(.frame__img, .interests-shot)))) { width: auto; }
  .interests-item:not(.interests-item--feature) .interests-item__body { display: block; margin-top: var(--space-m); }
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)) { grid-column: 1 / 5; }
  .interests-item:nth-child(2n of :not(.interests-item--feature)) { grid-column: 5 / 9; margin-top: var(--space-xl); }

  .interests-item:not(.interests-item--feature) .interests-item__media.polaroid {
    width: min(100%, 18rem);
    margin: var(--space-s) auto var(--space-xs); /* a print rests a little in from its column */
  }
}

/* Desktops: the weave. Each row pairs a five-column item with a four-column one, the
   smaller one a little lower. Rows alternate between starting at the main line and
   starting at the rail, so the gallery mirrors itself instead of leaning right. */
@media (min-width: 64em) {
  .interests-item:nth-child(4n+1 of :not(.interests-item--feature)) { grid-column: 4 / 9; margin-top: 0; }
  .interests-item:nth-child(4n+2 of :not(.interests-item--feature)) { grid-column: 9 / 13; margin-top: var(--space-xl); }
  .interests-item:nth-child(4n+3 of :not(.interests-item--feature)) { grid-column: 1 / 5; margin-top: var(--space-xl); }
  .interests-item:nth-child(4n+4 of :not(.interests-item--feature)) { grid-column: 5 / 10; margin-top: 0; }
}

/* A last item left alone in its row (an odd number of secondary items) closes the
   list with its photos and text side by side, instead of leaving half a row empty. */
@media (min-width: 48em) {
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)) {
    grid-column: full;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start; /* kicker meets the photo's top edge, as in the phone rows */
    margin-top: 0;
  }
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)) .interests-item__media { grid-column: 1 / 5; }
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)) .interests-item__body { grid-column: 5 / 9; margin-top: 0; }
  /* With a polaroid, the text is centred on the print so the two read as one pair. */
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)):has(.polaroid) { align-items: center; }
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)) .interests-item__media.polaroid { width: min(100%, 16rem); }
}
@media (min-width: 64em) {
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)) .interests-item__media { grid-column: 4 / 8; }
  /* A lone last polaroid: the print steps left towards the rail, as the weave's rail rows do,
     and its text sits right beside it, centred on the print, so the two read as one pair. */
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)) .interests-item__media.polaroid { grid-column: 3 / 7; width: min(100%, 20rem); }
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)):has(.polaroid) .interests-item__body { grid-column: 7 / 11; }
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)) .interests-item__body { grid-column: 9 / 13; }
}

/* ...and with no photo, its text simply starts at the main line. */
@media (min-width: 48em) {
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)):not(:has(.interests-item__media)) .interests-item__body { grid-column: 3 / 9; }
}
@media (min-width: 64em) {
  .interests-item:nth-child(2n+1 of :not(.interests-item--feature)):nth-last-child(1 of :not(.interests-item--feature)):not(:has(.interests-item__media)) .interests-item__body { grid-column: 4 / 10; }
}

/* ---- A larger interest (.interests-item--large on the <li>) ----
   Makes the second interest of a row the equal of its partner: the two share the row
   half and half, level with each other, and the large one's photos stand as tall as a
   three-photo mosaic of the same width (one 3:2 photo over two squares), so a pair of
   photos beside a mosaic fills the same space. Upright photos are cropped at the sides
   to fit; adjust each photo's object-position if a subject sits off-centre. */
.interests-item--large:not(.interests-item--feature) {
  container-type: inline-size; /* lets the photos size themselves from the block's width */
  --mosaic-gap: var(--space-2xs);
}
.interests-item--large:not(.interests-item--feature) .interests-item__media > .frame__img,
.interests-item--large:not(.interests-item--feature) .interests-item__media > .interests-shot > .frame__img {
  aspect-ratio: auto;
  height: calc(100cqw * 7 / 6 + var(--mosaic-gap) / 2);
}
@media (min-width: 48em) {
  .interests-item--large:not(.interests-item--feature) { --mosaic-gap: var(--space-xs); }
  .interests-body > .interests-item.interests-item--large:not(.interests-item--feature),
  .interests-body > .interests-item:not(.interests-item--feature):has(+ .interests-item--large) { margin-top: 0; }
}
@media (min-width: 64em) {
  .interests-body > .interests-item:not(.interests-item--feature):has(+ .interests-item--large) { grid-column: 1 / 7; }
  .interests-body > .interests-item.interests-item--large:not(.interests-item--feature) { grid-column: 7 / 13; }
}