/* Pictures above the fold on moment pages (site/moment_layout.py); also the private layout previews. Uses the colour tokens from site.css, so light and
   dark follow the rest of the site. Every picture box has a fixed shape, so nothing moves while images load. */
.pg .ml-head h1{margin-bottom:10px}
/* phones: a shorter headline, so the strip of pictures peeks into the first screen */
@media (max-width:759px){.pg .ml-head h1{font-size:32px;line-height:1.05}}
.pg .ml-head .lead{margin-bottom:14px}
.pg .ml-pics{margin:0 0 18px}
.pg .ml-eyebrow{margin:0 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pg .ml-fig{margin:0;min-width:0}
.pg .ml-zoom{display:block;line-height:0;background:#e9e6df;border-radius:14px;overflow:hidden;cursor:zoom-in}
.pg .ml-zoom img{display:block;width:100%;height:auto}
.pg .ml-fig figcaption{padding:8px 2px 0;font-size:14px;line-height:1.45;color:var(--ink)}
.pg .ml-by{display:block;font-size:13px;font-weight:700;color:var(--mute);margin-bottom:2px}
.pg .ml-by .pi-src{color:var(--teal);text-decoration:underline;text-underline-offset:2px;font-weight:650}
.pg .ml-cap{display:block}
.pg .ml-note{margin:10px 0 0}
.pg .ml-banner{margin:28px 0 0;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--mute)}

/* A: the other pictures sit in a grid after the at-a-glance list */
.pg .ml-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:720px){.pg .ml-grid{grid-template-columns:1fr 1fr}}
.pg .ml-a-more .ml-zoom img{aspect-ratio:4/3;object-fit:contain}

/* B and C: a swipeable strip under the lead picture; each card is a fixed 4:3 box */
.pg .ml-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:14px 0 0;padding:0 0 6px;scroll-padding:0 16px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pg .ml-strip:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.pg .ml-card{flex:0 0 min(70vw,250px);scroll-snap-align:start}
.pg .ml-card .ml-zoom{border-radius:12px}
.pg .ml-card .ml-zoom img{aspect-ratio:4/3;object-fit:contain}
.pg .ml-card figcaption{font-size:13px}
.pg .ml-card .ml-by{font-size:12px}

/* phones: let the strip run to the screen edge so the next card peeks in */
@media (max-width:759px){.pg .ml-strip{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

/* C on wide screens: words on the left, pictures on the right, both above the fold */
@media (min-width:1100px){
  .pg .ml-wrap-c{max-width:1220px}
  .pg .ml-top-c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-areas:"head pics" "text pics";
    column-gap:44px;align-items:start}
  .pg .ml-top-c .ml-head{grid-area:head}
  .pg .ml-top-c .ml-text{grid-area:text}
  .pg .ml-top-c .ml-pics{grid-area:pics;grid-row:1 / span 2;margin-top:8px}
  .pg .ml-top-c .ml-strip{margin:14px 0 0;padding:0 0 6px}
  .pg .ml-top-c .ml-card{flex-basis:200px}
  .pg .ml-top-c h1{font-size:46px}
  .pg .ml-wrap-c > :not(.ml-top){max-width:720px}
}

/* Enlarged picture: engine/zoom.css and engine/zoom.js (site/event_images.py) */

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pg .ml-zoom{background:#1b1e24}
  :root:not([data-theme="light"]) .pg .ml-zoom img{filter:brightness(.92)}}
:root[data-theme="dark"] .pg .ml-zoom{background:#1b1e24}
:root[data-theme="dark"] .pg .ml-zoom img{filter:brightness(.92)}