/**
 * Column layout - the fraction shortcodes.
 *
 * Flex rather than grid, on purpose: the row does not know in advance how
 * many columns it holds or what fractions they are, and flex-basis lets each
 * column carry its own share without the row declaring a template. It also
 * means a row that overfills wraps on its own instead of overflowing.
 *
 * The gap is subtracted from each basis so two halves plus one gap land on
 * the row's exact width. Getting this wrong is what made old theme grids
 * drop the last column to its own line at certain widths.
 *
 * @package illus-caden
 */

:root {
  --ic-col-gap: var(--ic-space-lg);
}

/* The row's vertical margin is the same measure as the gap between its own
   columns, so the spacing reads as one system on both axes. */
.ic-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ic-col-gap);
  margin-block: var(--ic-col-gap);
  align-items: start;
}

/* Each column reserves its share of the row minus its share of the gaps.
   min-width:0 so long words and wide tables shrink instead of forcing an
   overflow, which is the usual way a flex column breaks a layout. */
.ic-col {
  min-width: 0;
  flex: 0 1 auto;
}

.ic-col--one-half      { width: calc(50%     - (var(--ic-col-gap) / 2)); }
.ic-col--one-third     { width: calc(33.3333% - (var(--ic-col-gap) * 2 / 3)); }
.ic-col--two-thirds    { width: calc(66.6667% - (var(--ic-col-gap) / 3)); }
.ic-col--one-fourth    { width: calc(25%     - (var(--ic-col-gap) * 3 / 4)); }
.ic-col--three-fourths { width: calc(75%     - (var(--ic-col-gap) / 4)); }

/* The first and last things in a column should sit flush with the column,
   whatever they are. Post content sets its own vertical rhythm and it would
   otherwise push the two columns out of alignment at the top. */
.ic-col > :first-child { margin-top: 0; }
.ic-col > :last-child  { margin-bottom: 0; }

/* ------------------------------------------------------------
   MEASURE - a row holds the reading column too

   A row used to break out to the site width, for the same reason
   capsules did: two columns of readings inside a 720px measure looked
   cramped. Both breakouts are gone (see the MEASURE note in
   rc-transistor.css), because a row running wider than the prose
   around it reads as a different page rather than as part of this one.

   A row therefore takes what .entry-content gives it, and each column
   is a fraction of the measure. Nothing declares a width here: the cap
   on `.ic-single__main > *` is the only one in play.
   ------------------------------------------------------------ */

/* A capsule inside a column is already as wide as the row made it, so it
   fills the column and adds no vertical margin of its own. */
.entry-content .ic-cols .rct-capsule {
  margin-block: 0;
}

/* ------------------------------------------------------------
   NARROW - columns stack. Below the tablet break a half column is
   too tight for a table of readings, and a quarter is unusable.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .ic-col--one-half,
  .ic-col--one-third,
  .ic-col--two-thirds,
  .ic-col--one-fourth,
  .ic-col--three-fourths {
    width: 100%;
  }
}