/*
 * Default presentation for the "2col" layout, and for every layout deriving
 * from it -- layout_as_3col loads this file through the parent lookup done by
 * Layout_interface::load_scripts_n_styles().
 *
 * Deliberately neutral: no brand colour, no font. Skins are expected to
 * override these rules, and every part of a card has its own class so that
 * they can also be reordered:
 *   .grille                the grid
 *   .grille_Ncol           number of columns, set by the layout
 *   .grille_item           one card, whatever the derived layout
 *   .h2col                 the heading, carries the link
 *   .grille_item_thumb     the thumbnail link
 *   .grille_item_image     the thumbnail itself
 *   .grille_item_initial   placeholder shown when there is no thumbnail
 *   .grille_item_intro     the introduction
 *
 * The column count is deliberately NOT set on .grille: derived layouts used to
 * redefine it, and which value won depended on the order the stylesheets were
 * linked. It only comes from the .grille_Ncol modifier now.
 */

.grille {
  display: grid;
  grid-gap: 10px;
}

.grille_1col { grid-template-columns: repeat(1, 1fr); }
.grille_2col { grid-template-columns: repeat(2, 1fr); }
.grille_3col { grid-template-columns: repeat(3, 1fr); }
.grille_4col { grid-template-columns: repeat(4, 1fr); }
.grille_5col { grid-template-columns: repeat(5, 1fr); }
.grille_6col { grid-template-columns: repeat(6, 1fr); }

.grille_item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  /* min-width: 0 keeps a long word from stretching its grid column */
  min-width: 0;
}

.h2col {
  font-size: 1.2em;
  margin: 0;
  padding: 5px;
}

.h2col a {
  text-decoration: none;
}

.grille_item_thumb {
  display: block;
}

.grille_item_image {
  max-width: 100%;
  height: auto;
}

.grille_item_initial {
  display: block;
  font-size: 2.5em;
  line-height: 2;
  color: #999;
  background-color: #f4f4f4;
}

.grille_item_intro {
  padding: 5px;
}

/*
    tablet
    -------------- 900px --------------------
*/
@media only screen and (max-width: 900px) {

  .grille_4col,
  .grille_5col,
  .grille_6col { grid-template-columns: repeat(3, 1fr); }

}

/*
    smartphone
    -------------- 500px --------------------
*/
@media only screen and (max-width: 500px) {

  .grille_1col,
  .grille_2col,
  .grille_3col,
  .grille_4col,
  .grille_5col,
  .grille_6col { grid-template-columns: repeat(1, 1fr); }

}