/* Grid of linked page cards, used by the [query] shortcode and the index grids.

   Three card styles, ported from the old theme's index_1col / index_2col /
   index_2col_img_desc. `layout` in the content selects between them, and the
   country index uses two at once — four feature cards over a run of compact
   ones. Below 641px the feature and row styles both collapse to a horizontal
   card with a small thumbnail, as they did on live. */
.card-index { clear: both; }
.card-index .card-index-list { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 15px; }
.card-index .card-index-item { display: block; background-color: #ffffff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.11), 0 1px 2px rgba(0, 0, 0, 0.22); font-weight: 400; text-decoration: none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.card-index .card-index-item:hover { box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26); }
.card-index .card-index-picture { display: block; overflow: hidden; background-color: #dddddd; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 48px 48px; }
.card-index .card-index-picture img { display: block; }
.card-index .card-index-title { display: block; color: #333333; font-weight: 600; }
.card-index .card-index-item:hover .card-index-title { color: #66bb18; }

/* Compact — small cards, the image cropped to a fixed-height strip. */
.card-index .card-index-compact .card-index-item { width: 48%; margin: 7px 4% 7px 0; }
.card-index .card-index-compact .card-index-item:nth-of-type(2n) { margin-right: 0; }
.card-index .card-index-compact .card-index-picture { height: 100px; }
.card-index .card-index-compact .card-index-picture img { width: auto; height: 100px; margin-left: 50%; transform: translateX(-50%); }
.card-index .card-index-compact .card-index-title { padding: 15px; font-size: 14px; line-height: 1.2; }

/* Feature and row both start as a horizontal card with a thumbnail. */
.card-index .card-index-feature .card-index-item, .card-index .card-index-row .card-index-item { display: flex; align-items: center; width: 100%; margin: 7px 0; }
.card-index .card-index-feature .card-index-picture, .card-index .card-index-row .card-index-picture { width: 120px; min-width: 120px; height: 100px; margin: 10px 0 10px 10px; }
.card-index .card-index-feature .card-index-picture img, .card-index .card-index-row .card-index-picture img { width: auto; height: 100px; margin-left: 50%; transform: translateX(-50%); }
.card-index .card-index-feature .card-index-title, .card-index .card-index-row .card-index-title { padding: 10px; font-size: 16px; line-height: 1.2; }

@media (min-width: 521px) and (max-width: 640px) {
  .card-index .card-index-compact .card-index-picture, .card-index .card-index-compact .card-index-picture img { height: 130px; }
}

@media (min-width: 641px) {
  .card-index .card-index-compact .card-index-item { width: 23.5%; margin: 0 2% 15px 0; }
  .card-index .card-index-compact .card-index-item:nth-of-type(2n) { margin-right: 2%; }
  .card-index .card-index-compact .card-index-item:nth-of-type(4n) { margin-right: 0; }
  .card-index .card-index-compact .card-index-picture, .card-index .card-index-compact .card-index-picture img { height: 120px; }

  /* Feature — two per row, the image filling the card. */
  .card-index .card-index-feature .card-index-item { display: block; width: 49%; margin: 0 2% 15px 0; }
  .card-index .card-index-feature .card-index-item:nth-of-type(2n) { margin-right: 0; }
  .card-index .card-index-feature .card-index-picture { width: auto; min-width: 0; height: auto; margin: 0; }
  .card-index .card-index-feature .card-index-picture img { width: 100%; height: auto; margin: 0; transform: none; }
  .card-index .card-index-feature .card-index-title { padding: 15px 20px 20px 20px; font-size: 18px; line-height: 1.3; }

  /* Row — one per row, the image beside the title. */
  .card-index .card-index-row .card-index-item { width: 100%; margin: 0 0 20px 0; }
  .card-index .card-index-row .card-index-picture { width: 49%; min-width: 49%; height: 180px; margin: 0; }
  .card-index .card-index-row .card-index-picture img { width: 100%; height: 100%; margin: 0; object-fit: cover; transform: none; }
  .card-index .card-index-row .card-index-title { padding: 15px 25px; font-size: 18px; line-height: 1.2; }
}