/* Photo moments: the pictures on the text-led pages (/ai, /why, /faq).
   Uses only styles.css tokens. Linked after styles.css and palette.css. */

.pm-photo { display: block; width: 100%; height: auto; object-fit: cover; background: var(--balise-paper-raised); }

/* ---------- /ai hero: the photo, and the answer that pointed to it ---------- */
.pm-ask { position: relative; margin: 0; padding: 0 0 2.5rem 0; }
.pm-ask-frame { position: relative; margin: 0 auto 0 0; width: min(100%, 26rem); }
.pm-ask-frame .pm-photo { aspect-ratio: 4 / 5; box-shadow: 0 28px 70px -34px rgba(11, 36, 32, .55); }
.pm-ask-tag {
  position: absolute; top: .8rem; right: .8rem; margin: 0; padding: .4rem .6rem .45rem; text-align: right;
  background: color-mix(in srgb, var(--balise-white) 94%, transparent); color: var(--balise-ink);
  font-size: .74rem; line-height: 1.3; max-width: 70%;
}
.pm-ask-tag b { display: block; font-family: var(--serif); font-size: .92rem; color: var(--balise-evergreen); }
.pm-ask .ai-chat {
  position: absolute; right: 0; bottom: 0; width: min(88%, 23rem); max-width: none; margin: 0;
  box-shadow: 0 22px 50px -26px rgba(11, 36, 32, .5);
}

/* Photos returned inside a chat, after the approval in Balise. */
.pm-chat-photos { display: flex; gap: .45rem; margin: 0; padding: 0; list-style: none; align-self: flex-start; }
.pm-chat-photos li { margin: 0; }
.pm-chat-photos img { display: block; width: 4.4rem; height: 4.4rem; object-fit: cover; border: 1px solid var(--balise-line); }
.pm-chat-photos.pm-wide img { width: min(15rem, 100%); height: auto; aspect-ratio: 3 / 2; }
.pm-chat-photos figcaption, .pm-chat-cap { margin: .15rem 0 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--balise-muted); }

@media (min-width: 961px) {
  .pm-ask { padding-bottom: 0; }
  .pm-ask-frame { width: min(86%, 27rem); }
  .pm-ask .ai-chat { bottom: -1.5rem; width: min(72%, 21.5rem); }
}
@media (max-width: 960px) {
  .pm-ask { padding: 0; }
  .pm-ask-frame { width: 100%; margin: 0; }
  .pm-ask-frame .pm-photo { aspect-ratio: 1; object-position: 50% 30%; }
  .pm-ask .ai-chat { position: relative; right: auto; bottom: auto; width: auto; margin: -1.25rem .9rem 0; }
}

/* ---------- /why: Eric's own roll, then a mosaic of everyday rolls ---------- */
.pm-band { margin: 1.8rem 0 2rem; }
.pm-band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin: 0 0 .7rem; }
.pm-band-head .kicker { margin: 0; }
.pm-band-head a { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--balise-clay); }
.pm-founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.pm-founder-lead { grid-row: span 2; }
.pm-founder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pm-shot { position: relative; margin: 0; overflow: hidden; background: var(--balise-stage-deep); }
.pm-shot .pm-photo { aspect-ratio: 1; }
.pm-founder-lead .pm-photo { aspect-ratio: auto; height: 100%; }
.pm-shot figcaption {
  position: absolute; left: .4rem; right: .4rem; bottom: .4rem; padding: .3rem .45rem .32rem;
  background: color-mix(in srgb, var(--balise-white) 93%, transparent); color: var(--balise-ink);
  font-size: .7rem; line-height: 1.3;
}
.pm-shot figcaption b { display: block; font-size: .76rem; color: var(--balise-evergreen); }
.pm-band-note { margin: .6rem 0 0; font-size: .86rem; color: var(--balise-muted); }

.pm-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pm-mosaic li { margin: 0; }
.pm-mosaic .pm-shot figcaption { left: .3rem; right: auto; bottom: .3rem; padding: .18rem .38rem .2rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .04em; }

/* ---------- /faq: a slim strip up top, and a few pictures inside answers ---------- */
.pm-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.pm-strip li { margin: 0; }
.pm-strip .pm-photo { aspect-ratio: 1; }
.pm-inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .2rem .15rem 1rem; max-width: 30rem; }
.pm-inline.pm-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; }
.pm-inline .pm-shot figcaption { font-size: .64rem; }

@media (max-width: 640px) {
  .pm-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-founder { grid-template-columns: minmax(0, 1fr); }
  .pm-founder-lead { grid-row: auto; }
  .pm-founder-lead .pm-photo { aspect-ratio: 4 / 5; height: auto; }
}

/* Inside the /why article, list and caption defaults from .legal must not apply. */
.pm-band .pm-mosaic, .pg-faq .pm-strip { padding: 0; }
.pm-band .pm-mosaic li, .pg-faq .pm-strip li { margin: 0; }
/* Small founder tiles keep only their title; the alt carries the rest. */
.pm-founder-grid figcaption { font-size: 0; padding: .28rem .45rem; right: auto; }
.pm-founder-grid figcaption b { font-size: .74rem; }