/* Colosseum tactical cards — square photos + Rome map (23 October 2026).
   Scoped to #colosseum-guide.guide-article because the base card rules live in
   the page's own inline <style> at the same specificity. */

#colosseum-guide.guide-article .co-route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: start;
}

#colosseum-guide.guide-article .co-route-body { min-width: 0; }

#colosseum-guide.guide-article .co-route-photo { display: block; }

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

/* The Rome map replaces the old Italy locator: fill the panel, keep the sites centred. */
#colosseum-guide.guide-article .co-map-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

#colosseum-guide.guide-article .co-photo-credits {
  margin: 10px 0 0;
  color: var(--co-muted);
  font-size: 11px;
  line-height: 1.55;
}

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

@media (max-width: 850px) {
  /* The old inline rule turned the cards into three narrow columns, which a
     150px photo cannot survive — keep them as full-width rows instead. */
  #colosseum-guide.guide-article .co-route-grid { grid-template-columns: 1fr; }
  #colosseum-guide.guide-article .co-route-card { grid-template-columns: minmax(0, 1fr) 130px; }
  #colosseum-guide.guide-article .co-route-photo img { width: 130px; height: 130px; }
  #colosseum-guide.guide-article .co-map-panel { height: 320px; }
}

@media (max-width: 560px) {
  #colosseum-guide.guide-article .co-route-card { grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; }
  #colosseum-guide.guide-article .co-route-photo img { width: 104px; height: 104px; }
  #colosseum-guide.guide-article .co-map-panel { height: 280px; }
}