/* 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.
   - .interests-item--feature: the photos run across the page, with the text set across rail and main.
   - 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 .frame__img), 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 .frame__img)) { 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 .frame__img)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.interests-item__media:has(> :nth-child(3 of .frame__img)) > :nth-child(1 of .frame__img) { grid-column: 1 / -1; --ratio: 3 / 2; }
.interests-item__media:has(> :nth-child(3 of .frame__img)) > :nth-child(n+2 of .frame__img) { --ratio: 1 / 1; }

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

/* ---- 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); }
.interests-item--feature .interests-item__media:not(:has(> :nth-child(2 of .frame__img))) > .frame__img { --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 .frame__img)) > :nth-child(n+2 of .frame__img) { --ratio: inherit; }

@media (min-width: 48em) {
  .interests-item--feature .interests-item__media { margin-inline: 0; }
  .interests-item--feature .interests-item__media > .frame__caption { margin-inline: 0; }
  .interests-item--feature .interests-item__media:not(:has(> :nth-child(2 of .frame__img))) > .frame__img { --ratio: 16 / 9; }
  .interests-item--feature .interests-item__media:has(> :nth-child(3 of .frame__img)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .interests-item--feature .interests-item__media:has(> :nth-child(3 of .frame__img)) > :nth-child(1 of .frame__img) { 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;
  }
}

/* ---- 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-l); }

.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 .frame__img))) {
  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) {
  .interests-item--feature { margin-bottom: var(--space-xl); } /* a clear pause before the gallery */
  .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 .frame__img))) { 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 {
  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; }
}