/* ELSEWHERE · /pt/ only. Brazilian Portuguese runs about as long as the Spanish, so it needs room in the same few
   places /es/es.css gives it (the same rules, checked on this page). Everything else comes from /landing.css. */

/* the hero's kicker ("Um quebra-cabeça com a sua câmera", as long as the Spanish one) stays on one line on phones: a
   little less tracking and shorter rules either side, and below 390 px (360 px is a common Android width; the Spanish
   waits until 360) the rules step aside. If it ever wraps (a larger text size), it wraps balanced. */
.kicker-cat { text-wrap: balance; }
@media (max-aspect-ratio: 1/1) {
  .kicker-cat { text-align: center; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 479px) {
  .kicker-cat { gap: 8px; letter-spacing: .14em; }
  .kicker-cat::before, .kicker-cat::after { width: 18px; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 389px) {
  .kicker-cat::before, .kicker-cat::after { display: none; }
}

/* I · "5 rolos" under the shutter, in the same width as the thumbnail across from it */
.snap-film { letter-spacing: .1em; }

/* II · all six found: in a narrow frame the line goes over the button (each on one line) instead of beside it */
.find-photo { container-type: inline-size; }
@container (max-width: 393px) {
  .find-next { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
}

/* the Hollow Moon on phones: "Dias restantes" goes on two lines under the number, so the copy keeps its width */
@media (max-width: 719px) {
  .event-count span { max-width: 8em; text-wrap: balance; }
}

/* Strays: the realm over the place it came from, each on its own line ("A Cidade das Lanternas" fills the row alone) */
.card-row { flex-direction: column; align-items: flex-start; gap: 5px; }
.card-from { max-width: 100%; text-align: left; }
@media (min-width: 700px) and (max-width: 899px) {
  .card-realm { letter-spacing: .1em; }
}

/* the tales: the chapter buttons show only their numerals until the seven Portuguese names fit one row (landing.css does
   the same below 1280 px for the English) */
@media (max-width: 1365px) {
  .tale-to-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tale-to { justify-content: center; min-width: 46px; padding: 0 8px; }
  .tale-to-no { font-size: 15px; }
}