/* 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 takes the sign-off's text column (the last one) */
  .mag-b .m-end>.m-cols.c2+.cm{margin-left:calc(50% + var(--g)/2)}
  .mag-b .m-end>.m-cols.c3+.cm{margin-left:calc((100% + var(--g))*2/3)}
}

/* 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)}
  .mag-b .m-end>.m-cols.c3+.cm{margin-left:calc(50% + var(--g)/2)}
}
/* 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)}}