/*Reading across a 4k 16:9 monitor may cause discomfort with moving of the neck,
 * and continuity errors from returning to the incorrect line as one goes from far right
 * to far left. This is why newspapers are divided into columns; for easier reading.
 *
 * This CSS does the same for the Section block. It was originally built on the
 * premise that single Articles have multiple sections. One can adopt it for Articles if
 * one believes that single Sections ought to contain multiple Articles, but even so,
 * with the one and only single Main, containing multiple Sections/Articles, it can still
 * be used to put Sections ——which contain Articles—— into columns with this
 * stylesheet.   */


/* Although colours.css is imported by default.css, it is imported here in the rare case
 *  that this reusable code is reused by one who does not want to use the
 *  default.css stylesheet. The colour of the column rule could simply be defined
 *  here, but we want to keep a consistent colour palette.
 *
* One is free to replace or redefine the colour palette of colour.css, or use an
 * alternate stylesheet of ones own choosing. */
@import "colours.css";

:root { 
   --column-rule: hsl(var(--shadow-hue),85%);
}

/* Generally speaking, for the case of a wide monitor of 4k resolution,
 *  (3840 to 4096 px), there is a four column layout. Ideally, this ought to be changed
 *  for the case of an 8k monitor, however, it is assumed that an 8k monitor will likely
 *  be viewed from a similar viewing distance, and creating larger fonts for a greater
 *  resolution monitor is a better alternative. */
section {
   /* Standard syntax */
  column-count: 4;
  column-gap: 4ex;
  column-rule: 1px solid  var(--column-rule);
}

/* Changes for the electronic screen */

/* Three column layout */
@media screen and (max-width: 2704px) {
  section {
     /* Standard syntax */
   column-count: 3;
   }
}

/* Two column layout. As the veiwport width shrinks, we also shrink the gap
 *   between columns */
@media screen and (max-width: 2137px) {
  section {
     /* Standard syntax */
   column-count: 2;
    column-gap: 2ex;
   }
}

/* One column layout */
@media screen and (max-width: 1574px) {
  section {
     /* Standard syntax */
     column-count: 1;
   }
}

/* This section will hopefully be immutable, guaranteeing one column on small
 *   devices. It ought to be a redundancy, for errors above.  */
@media screen and (max-width: 720px) {
  section {
     /* Standard syntax */
     column-count: 1;
   }
}

/* Changes for printed output  */

/* Large paper. That is, larger than A2. Perhaps it ought to be redefined for sizes as
 *   large as A0, but it is presumed that larger sheets would be folded for newspaper/
 *   tabloids, anyway, so it is unlikely that more columns will be needed.

*  It is however recognised, that this is not the case for scrolls, banners, and other
*   uses. One is free to make appropriate changes as one sees fit.*/
@media print {
   article {
      padding-left: 3em;
   }
   
   section {
      column-count: 6;
      column-gap: 4em;
      column-rule: 1px solid  var(--column-rule);
   }
}

/*  Another though is that, instead of using millimetres (mm) for Max-Width, one uses
 *    the EM or EX measurements, thus having a greater idea of how many words,
 *    ——in particular, large words—— can fit in a column. Thus column size is also
 *    dependent on the default section font size  */

/* A2 paper */ 
@media print and (max-width: 420mm) {
   article {
      padding-left: 3em;
   }
   
   section {
      column-count: 4;
   }
}


/* A3 paper */ 
@media print and (max-width: 297mm) {
   article {
      padding-left: 3em;
   }
   
   section {
      column-count: 3;
      column-gap: 4ex;
   }
}

/* A4 paper */
@media print and (max-width: 210mm) {
   article {
      padding-left: 3em;
   }
   
   section {
      column-count: 2;
      column-gap: 4ex;
   }
}

/* A5 paper */
@media print and (max-width: 148mm) {
   article {
      padding-left: 3em;
   }
   
   section {
      column-count: 1;
   }
}