/* Styles of /xingo-planners/ only (moved out of its <style> block on 2026-11-10).
   Loaded after the shared sheets, at the same place the block was, so the
   cascade is unchanged. Rules shared by several pages go in /css. */

/* Xingo Planners: a photo case with no text sections. Pairs of images sit on
   the content columns: 4 each with one empty column between on the nine of
   desktop (5 each, two between, on the twelve above 1200px), 1-4 and 5-8
   on tablet). Phone: the landscape photos stack, the portrait covers stay
   two across (2 + 2 columns). */
body.case-page .xp-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}
body.case-page .xp-row > .cp-figure { display: block; min-width: 0; }
body.case-page .xp-row > .cp-figure:nth-child(1) { grid-column: 1 / span 4; }
body.case-page .xp-row > .cp-figure:nth-child(2) { grid-column: 6 / span 4; }
body.case-page .xp-row .cp-fit { width: 100%; }

@media (min-width: 75.0625em) {
  body.case-page .xp-row > .cp-figure:nth-child(1) { grid-column: 1 / span 5; }
  body.case-page .xp-row > .cp-figure:nth-child(2) { grid-column: 8 / span 5; }
}

/* The logo is a square drawing: shown whole on a wide box. */
body.case-page .xp-logo { --cp-ar: 3 / 1; }

@media (min-width: 64em) {
  /* First screen: the pair of photos takes rows 9 to 12. */
  body.case-page .cp-stage > .xp-row { grid-row: 9 / span 4; }
  /* The hero crops the photo a little to fill rows 2 to 8. */
  body.case-page .cp-hero .cp-fit--cover > img { object-position: 50% 50%; }
}
@media (max-width: 63.99em) {
  body.case-page .xp-row { grid-column: 1 / -1; }
  body.case-page .xp-row > .cp-figure:nth-child(1) { grid-column: 1 / span 4; }
  body.case-page .xp-row > .cp-figure:nth-child(2) { grid-column: 5 / span 4; }
}
@media (max-width: 37.49em) {
  body.case-page .xp-row > .cp-figure:nth-child(1) { grid-column: 1 / span 2; }
  body.case-page .xp-row > .cp-figure:nth-child(2) { grid-column: 3 / span 2; }
  body.case-page .xp-row--wide { row-gap: var(--cp-gap); }
  body.case-page .xp-row--wide > .cp-figure:nth-child(1),
  body.case-page .xp-row--wide > .cp-figure:nth-child(2) { grid-column: 1 / -1; }
}