/* ------------------------------------------------------------------------
   Flank blocks — a site-wide layout language for "text with media beside it".

   Markup (pages may keep their own classes alongside these):
     <div class="flank">
       <div class="flank-txt">  paragraphs, headings, CTAs </div>
       <div class="flank-media"> <figure class="shot">…</figure> … </div>
     </div>
   Include /assets/flank.js on the page — it moves the shots inline on
   small screens and back into the rails on large ones.

   Wide screens : media splits into rails on BOTH sides of the text column.
   Small screens: each shot floats right/left alternately INSIDE the text,
                  so paragraphs wrap around it. Text lines never get
                  narrower than about 4 words.
   Tiny screens : floats give way to full-width stacked images.
   Two-column text (.devcols/.pgrid/.feat2/.cols2) inside a flank column
   collapses to one column whenever the COLUMN (not the viewport) is
   narrow, so it can never go skinny beside the media.
   ------------------------------------------------------------------------ */

.flank{gap:32px; align-items:start;}
.flank > .flank-txt{container-type:inline-size;}

/* wide: side rails; the center column never drops below a ~30ch measure */
@media (min-width:1200px){
  .flank{display:grid; grid-template-columns:280px minmax(30ch,1fr) 280px;}
  .flank > .flank-media{display:contents;}
  .flank > .flank-media > .shot:nth-child(odd){grid-column:1;}
  .flank > .flank-media > .shot:nth-child(even){grid-column:3;}
  .flank > .flank-txt{grid-column:2; grid-row:1 / span 2; order:0;}
}

/* narrow: shots live inside the text (flank.js moves them) and float so the
   copy wraps around; width is capped so at least ~4 words fit beside them */
@media (max-width:1199.98px){
  .flank{display:block;}
  .flank > .flank-txt > .shot{float:right; clear:right; max-width:min(44%, 300px);
        margin:4px 0 14px 18px;}
  .flank > .flank-txt > .shot.fl{float:left; clear:left; margin:4px 18px 14px 0;}
  .flank > .flank-txt::after{content:""; display:table; clear:both;}
  /* two-column text never shares a line with a float: it drops below, takes
     the full column, and the container query above stays truthful */
  .flank > .flank-txt > :is(.devcols, .pgrid, .feat2, .cols2){clear:both;}
}

/* tiny: no room to share a line at all — stack the images */
@media (max-width:340px){
  .flank > .flank-txt > .shot,
  .flank > .flank-txt > .shot.fl{float:none; max-width:100%; margin:12px 0;}
}

/* the box is the image: figures shrink-wrap to the screenshot instead of
   stretching it to fill their slot */
.flank .shot img{width:auto; max-width:100%; height:auto;}

/* two-column text collapses when the text COLUMN gets narrow */
@container (max-width:620px){
  .flank-txt :is(.devcols, .pgrid, .feat2, .cols2){grid-template-columns:1fr;}
}