/* Majlis Talks articles: one article grid for every article (loaded after mag.css + comments.css).
   12 columns, fixed page margins (--pm) and one gutter (--g), the same at every desktop width.
   Text columns are always 3 grid columns wide and start on grid lines 1, 4, 7 or 10, so their edges
   line up from section to section. The margins are wider than the fixed prev/next side tabs, so the
   tabs never sit over text. Phone (<=760px) keeps its single column from mag.css untouched. */
@media (min-width:761px){
  .mag-page{--pm:5rem;--g:1.5rem}
  .mag-b{--gap:var(--g);padding-left:var(--pm);padding-right:var(--pm)}
  .mag-page>.p-next{margin-left:var(--pm);margin-right:var(--pm);column-gap:var(--g)}
  .mag-b .m-split,.mag-b .m-spread{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
  .mag-b .m-split>*,.mag-b .m-spread>*,.mag-b .m-cols,.mag-b .m-end{min-width:0}
  /* CSS text columns use the grid gutter, so a block spanning 6 or 9 grid columns splits exactly on grid lines */
  .mag-b .m-cols{column-gap:var(--g)}

  /* opening spread: dark card cols 1-6, text page cols 7-12; nothing bleeds into the margins */
  .mag-b .m-left{grid-column:1/7;margin-left:0}
  .mag-b .m-right{grid-column:7/13;padding-left:0}
  .mag-b .m-r-top{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--g)}
  .mag-b .m-r-top .m-side{grid-column:1/3}
  .mag-b .m-r-top .m-key{grid-column:3/7}

  /* side pull quote / caption column: cols 1-3 */
  .mag-b .m-side{grid-column:1/4}
  /* 2: side quote + text */
  .mag-b .b-s2 .m-cols.c3{grid-column:4/13}
  .mag-b .b-s2 .m-cols.c2{grid-column:4/10}
  /* 3: big quote cols 1-4 (its longest words need the 4th column at its type size), illustration cols 5-12,
     caption in cols 1-3 at the foot of the illustration */
  .mag-b .b-s3{grid-template-rows:auto 1fr}
  .mag-b .b-s3 .pq-xl{grid-column:1/5;grid-row:1;margin-top:0}
  .mag-b .b-s3 .m-break{grid-column:5/13;grid-row:1/3;margin:0}
  .mag-b .b-s3 .m-side-r{grid-column:1/4;grid-row:2;align-self:end}
  .mag-b .b-s3>.pq-xl:only-child{grid-column:1/10}
  /* 4: main body */
  .mag-b .b-s4 .m-cols.c3,.mag-b .b-s4.has-side .m-cols.c3{grid-column:4/13}
  .mag-b .b-s4 .m-cols.c2,.mag-b .b-s4 .m-cols.narrow,.mag-b .b-s4.has-side .m-cols.narrow{grid-column:4/10}
  .mag-b .b-s4>.m-end,.mag-b .b-s4.has-side>.m-end{grid-column:4/13}
  /* 5: illustration cols 1-6 with its caption under it in cols 1-3; closing text, sign-off and comments cols 7-12 */
  .mag-b .b-s5 .m-mid{grid-column:1/7;grid-row:1;margin-left:0}
  .mag-b .b-s5 .m-side{grid-column:1/4;grid-row:2;margin-top:1rem}
  .mag-b .b-s5>.m-cols,.mag-b .b-s5>.m-end{grid-column:7/13;grid-row:1/3}
  /* the comment box spans all the text columns of the closing block (left edge of the first to right edge of the last),
     24px under whichever column ends lower (it follows the multi-column text block, so it clears the taller one) */
  .mag-b .m-end>.m-cols+.cm{margin-left:0;margin-right:0;width:auto;margin-top:1.5rem}
}

/* tablet: same margins and gutter; text columns are 6 grid columns wide and start on lines 1 or 7 */
@media (min-width:761px) and (max-width:1100px){
  .mag-b .m-cols.c3{columns:2}
  .mag-b .m-right .m-cols.c2{columns:1}
  .mag-b .m-left{align-self:start}
  .mag-b .m-r-top{grid-template-columns:minmax(0,1fr)}
  .mag-b .m-r-top .m-side,.mag-b .m-r-top .m-key{grid-column:1/-1}
  .mag-b .m-side{grid-column:1/7}
  .mag-b .b-s2,.mag-b .b-s4.has-side{row-gap:1.5rem}
  .mag-b .b-s2 .m-side,.mag-b .b-s4.has-side .m-side{grid-row:1}
  .mag-b .b-s2 .m-cols.c3,.mag-b .b-s2 .m-cols.c2,
  .mag-b .b-s4 .m-cols.c3,.mag-b .b-s4.has-side .m-cols.c3,
  .mag-b .b-s4 .m-cols.c2,.mag-b .b-s4 .m-cols.narrow,.mag-b .b-s4.has-side .m-cols.narrow{grid-column:1/13;grid-row:2}
  .mag-b .b-s4:not(.has-side) .m-cols{grid-row:auto}
  .mag-b .b-s2 .m-cols.c2{columns:2}
  .mag-b .b-s4 .m-cols.narrow{columns:2}
  .mag-b .b-s4>.m-end,.mag-b .b-s4.has-side>.m-end{grid-column:1/13}
  .mag-b .b-s3{grid-template-rows:auto auto auto;row-gap:1.5rem}
  .mag-b .b-s3 .pq-xl{grid-column:1/10;grid-row:1}
  .mag-b .b-s3 .m-break{grid-column:1/13;grid-row:2}
  .mag-b .b-s3 .m-side-r{grid-column:1/7;grid-row:3;align-self:start}
  .mag-b .b-s5{grid-template-rows:auto auto auto}
  .mag-b .b-s5 .m-mid{grid-column:1/13;grid-row:1}
  .mag-b .b-s5 .m-side{grid-column:1/7;grid-row:2}
  .mag-b .b-s5>.m-cols,.mag-b .b-s5>.m-end{grid-column:1/13;grid-row:3;margin-top:var(--mg)}
}
/* photo caption on the text page: one text column wide (half the text page) */
@media (min-width:761px){.mag-b .m-top .photo-cap{max-width:none;flex:0 1 calc(50% - var(--g)/2)}}
/* the wide comment box: name + email side by side, split on the same gutter as the text columns above */
@media (min-width:761px){.mag-b .m-end>.cm .cm-row{column-gap:var(--g)}}