/* Photo-and-card pages: /pet-pokemon-card and /turn-animals-into-pokemon.
   Loaded after pillar.css. Every pair is one real scan: the photo the app
   saved and the card it drew from it, taped side by side with the shared
   .rp-keepsake arrangement from pillar.css. These rules only lay the pairs
   out in a grid, caption them and give the hero a keepsake instead of the
   pillar's holo card. */

/* The hero stage holds a keepsake, which wants more width than a card. */
.cd-hero .rp-hero-stage { flex: 0 1 430px; }
.cd-hero .rp-keepsake { max-width: 430px; }
.cd-hero .rp-polaroid img { aspect-ratio: 9 / 14; object-fit: cover; }

/* The pair grid. Three across on a laptop (four for a set of four, so none
   is left alone on a row), two on a phone; a short last row is centred.
   Alternate tiles mirror the tilt, so a row reads as laid out by hand. */
.cd-pairs {
  list-style: none;
  margin: 36px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 24px;
  max-width: 1080px;
}
.cd-pairs > li { flex: 1 1 300px; max-width: 350px; min-width: 0; }
/* A set of four goes 2 + 2 on every screen wide enough, with room for big cards. */
@media (min-width: 720px) { .cd-pairs--four > li { flex-basis: calc(50% - 12px); max-width: 420px; } }
.cd-pair { margin: 0; text-align: center; }
.cd-pair .rp-keepsake { max-width: 400px; padding: 22px 10px 6px; }
/* The card is the point: it takes eight of the twelve columns and the photo
   sits behind it, instead of the even split .rp-keepsake uses elsewhere. */
.cd-pair .rp-polaroid { grid-column: 1 / 7; }
.cd-pair .rp-keepsake__card { grid-column: 5 / 13; margin-top: 26%; }
/* The card covers the polaroid's right side, so its date sits at the left. */
.cd-pair .rp-polaroid__label { text-align: left; padding-left: 4px; }
.cd-pair .rp-polaroid img { aspect-ratio: 9 / 14; object-fit: cover; }
.cd-pairs > li:nth-child(even) .rp-polaroid { transform: rotate(4deg); }
.cd-pairs > li:nth-child(even) .rp-keepsake__card { transform: rotate(-4deg); }
.cd-pair figcaption {
  margin-top: 6px;
  font-size: 20px;
  line-height: 1.25;
  color: #e5e7eb;
}
.cd-pair figcaption b { display: block; color: #fff; font-weight: normal; }

/* The zoo section is a lit scene (the zoo story's gates photo). Its text sits
   centred over the whole width, so the scrim is an even dark wash, heavier
   at the top where the heading and intro are. */
.cd-scene { --scene-scrim: linear-gradient(180deg, #111827f0 0%, #111827d9 30%, #111827c7 100%); }
.cd-scene .cd-pair figcaption { text-shadow: 0 0 2px #000, 0 0 6px #000; }
.cd-scene .cd-tier { text-shadow: none; box-shadow: 2px 2px 0 #000; }   /* dark text on a solid chip needs no glow */

/* Rarity chips, in the colours of the app's card frames. */
.cd-tier {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border: 2px solid #000;
  font-size: 16px;
  line-height: 1.2;
  color: #111827;
  background: #d1d5db;
}
.cd-tier--uncommon { background: #4ade80; }
.cd-tier--rare { background: #60a5fa; }
.cd-tier--epic { background: #c084fc; }

/* Three short steps, numbered like the pillar's How it works. */
.cd-steps {
  list-style: none;
  margin: 32px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 960px;
  counter-reset: cd-step;
}
.cd-steps li {
  counter-increment: cd-step;
  padding: 18px 18px 16px;
  border: 3px solid #000;
  background: #1f2937;
  box-shadow: 4px 4px 0 #000;
  font-size: 20px;
  line-height: 1.3;
  text-align: left;
}
.cd-steps li::before {
  content: counter(cd-step);
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 8px;
  background: var(--gold);
  color: #111827;
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  line-height: 1.5;
}
.cd-steps strong { display: block; color: #fff; font-weight: normal; }

/* A cross-link to the sister page, with three small cards as the hook. */
.cd-teaser {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}
.cd-teaser-cards { display: flex; flex: 0 0 auto; }
.cd-teaser-cards img {
  width: 120px;
  border-radius: 7px;
  filter: drop-shadow(0 8px 12px #0006);
}
.cd-teaser-cards img + img { margin-left: -36px; }
.cd-teaser-cards img:nth-child(1) { transform: rotate(-8deg); }
.cd-teaser-cards img:nth-child(3) { transform: rotate(8deg); }
.cd-teaser-copy { flex: 1 1 300px; text-align: left; }
.cd-teaser-copy p { font-size: 20px; line-height: 1.35; }

@media (max-width: 719px) {
  .cd-hero .rp-hero-stage { flex-basis: auto; width: 100%; }
  .cd-pairs { gap: 18px 8px; }
  .cd-pairs > li, .cd-pairs--four > li { flex: 0 1 calc(50% - 4px); }
  .cd-pair .rp-keepsake { padding: 16px 4px 4px; }
  .cd-pair .rp-polaroid { padding: 5px 5px 0; }
  .cd-pair .rp-polaroid__label { font-size: 13px; padding: 7px 2px 9px; }
  .cd-pair .rp-taped::before { height: 14px; top: -7px; }
  .cd-pair figcaption { font-size: 16px; }
  .cd-tier { font-size: 14px; padding: 1px 6px; }
  .cd-teaser-copy { text-align: center; }
  .cd-teaser-cards img { width: 96px; }
}