/* Christ the Redeemer tactical cards — square photos + a wider map
   (23 October 2026). Scoped to #christ-guide.guide-article because rio-access.css
   carries the base card rules at the same specificity.

   Width budget at 1440px: a 503px map + 18px gap leaves ~851px for the cards, so
   the 2x2 grid only survives above ~1300px. Between 1300 and 1120 the cards run
   in a single column beside the map; below 1120 the map drops under them and the
   cards get the full width back, two across. */

#christ-guide.guide-article .cr-route-layout {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 503px);
}

#christ-guide.guide-article .cr-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#christ-guide.guide-article .cr-route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 134px;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  align-items: stretch;
}

#christ-guide.guide-article .cr-route-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#christ-guide.guide-article .cr-route-body a { margin-top: auto; }

#christ-guide.guide-article .cr-route-photo { display: block; }

#christ-guide.guide-article .cr-route-photo img {
  display: block;
  width: 134px;
  height: 134px;
  object-fit: cover;
  border-radius: 3px;
  background: #dfe6dd;
}

#christ-guide.guide-article .cr-photo-credits {
  margin: 12px 0 0;
  color: var(--site-muted, #607578);
  font-size: 11px;
  line-height: 1.55;
}

#christ-guide.guide-article .cr-photo-credits a { font-size: 11px; }

/* Too little width for two cards beside the 503px map — one column instead. */
@media (max-width: 1399px) {
  #christ-guide.guide-article .cr-route-grid { grid-template-columns: 1fr; }
}

/* Map goes under the cards; they get the full width back, two across. */
@media (max-width: 1120px) {
  #christ-guide.guide-article .cr-route-layout { grid-template-columns: 1fr; }
  #christ-guide.guide-article .cr-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Each card would fall under ~330px — single column. */
@media (max-width: 900px) {
  #christ-guide.guide-article .cr-route-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  #christ-guide.guide-article .cr-route-card { grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; }
  #christ-guide.guide-article .cr-route-photo img { width: 104px; height: 104px; }
}