/* Mobile. Loaded last so it wins without !important.
   Three breakpoints: 62rem (tablet), 46rem (large phone), 30rem (small phone). */

/* Tap targets: 44px is the accessibility floor, and these are buttons people
   poke while holding a phone in one hand at a temple. */
@media (hover: none) and (pointer: coarse) {
  .seg button, .icon-btn, .site-nav a, .tabs button { min-height: 44px }
  .also-list a, .crumbs a { padding-block: .5rem }
}

@media (max-width: 62rem) {
  .deity-head { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) }
}

@media (max-width: 46rem) {
  :root { --maxw: 100% }
  .wrap { padding: 0 .9rem }

  /* header becomes two rows: brand + language, then nav; the sticky header must
     stay short or it eats a phone screen */
  .site-head .wrap { padding-block: .5rem; row-gap: .45rem }
  .brand { font-size: 1.15rem }
  .brand small { display: none }
  /* brand, then controls, then nav -- each gets a full row so nothing is
     dropped. Text size in particular stays: it is the one control that matters
     most on a phone, since these get read aloud by older family members. */
  .brand { order: 1 }
  .controls { order: 2; width: 100%; gap: .3rem; justify-content: flex-start }
  .site-nav { order: 3; width: 100%; margin-inline-end: 0; justify-content: space-between }
  .site-nav a { flex: 1; text-align: center; padding-inline: .3rem }
  .seg button { padding: .3rem .5rem }

  .hero { padding: 1.4rem 0 1rem }
  .hero p { font-size: var(--fs-small) }

  /* stack the label above the field; the field must never be an unlabelled pill */
  .search { margin-bottom: 1.1rem; flex-direction: column; gap: .3rem; align-items: stretch }
  .search label { text-align: center }
  .search input { min-width: 0; width: 100% }

  .grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .7rem }
  .card img { aspect-ratio: 4 / 5 }
  .card-body { padding: .55rem .6rem .7rem }
  .card-name { font-size: 1rem }
  .card-epithet, .card-texts { font-size: .78rem }
  .card-texts { gap: .25rem }

  /* portrait above the name, not beside it */
  .deity-head { grid-template-columns: 1fr; gap: .9rem; padding: .8rem 0 .4rem }
  .deity-head figure { max-width: 11rem; margin-inline: auto }
  .deity-head figcaption { text-align: center }
  .deity-head h1 { text-align: center }
  #deity-epithet { text-align: center }

  .tabs { gap: .2rem }
  .tabs button { flex: 1; padding: .6rem .4rem; font-size: var(--fs-small) }

  /* verse numbers move into a tighter gutter so the line itself keeps its measure */
  .verse { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0 .45rem; padding: .5rem 0 }
  .verse-num { font-size: .7em }
  .vtext p { font-size: calc(1.02rem * var(--fs-step)) }

  .also { padding: .9rem 1rem; margin-top: 1.6rem }
  .text-list { grid-template-columns: 1fr }
}

@media (max-width: 30rem) {
  .brand-text { font-size: .95em }
  .site-nav a { font-size: .78rem }
  .grid { grid-template-columns: 1fr 1fr }
  .verse { grid-template-columns: 1.2rem minmax(0, 1fr) }
  .also-list a { font-size: .78rem }
}

/* Landscape phone: the sticky header is pure cost when the screen is 380px tall */
@media (max-height: 30rem) and (orientation: landscape) {
  .site-head { position: static }
}