/* =====================================================================
   Phone and small-tablet layer. Loaded only when the viewport is 980px or
   narrower (see the media attribute on the <link> in index.html), so
   desktop never downloads or applies any of this. style.css already
   handles the basics (stacked layout, drawer menu); this file tunes the
   experience for touch and small screens.
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }
.layout { padding: 12px; gap: 12px; }
.panel { padding: 14px; }

/* ---------- touch targets ---------- */
.icon-btn { width: 42px; height: 42px; }
.nav-link { padding: 13px 14px; }
.chip { padding: 8px 13px; min-height: 36px; }
.btn { min-height: 40px; }
.filter-input { min-height: 40px; font-size: 16px; }   /* 16px stops iOS zooming into the field */

/* ---------- no decorative motion on phones ---------- */
.card, .feed-item, .tier-row, .tile { animation: none; }
.detail-art img.float, .detail-art .emblem, .card:hover .card-art img, .card:hover .card-art .emblem { animation: none; transform: none; }

/* ---------- cards: one per row with the thumbnail beside the text ---------- */
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; gap: 10px; }
  .card { display: flex; flex-direction: row; align-items: stretch; }
  .card-art { width: 112px; min-width: 112px; aspect-ratio: 1 / 1; height: auto; border-radius: 0; }
  .card-body { padding: 10px 12px; justify-content: center; min-width: 0; }
  .card-body h3 { font-size: .86rem; letter-spacing: .05em; }
  .card-body .sub { font-size: .72rem; }
  .card-body .summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .78rem; margin-top: 4px; }
  .card-status { margin-top: 2px; }
}

/* ---------- home ---------- */
@media (max-width: 640px) {
  .stat-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile p { display: none; }
  .hero p.lead { font-size: .95rem; }
}

/* ---------- card page ---------- */
@media (max-width: 640px) {
  .detail-art, .gallery { max-width: 100%; }
  .shots { grid-template-columns: 1fr 1fr; gap: 8px; }
  .trailer-grid { grid-template-columns: 1fr; }
  .tagged-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .pager .btn { max-width: 100%; width: 100%; justify-content: center; }
}

/* ---------- news feed ---------- */
@media (max-width: 640px) {
  .feed-item { padding: 12px; }
  .feed-body h3 { font-size: .95rem; }
}

/* ---------- search fills the screen ---------- */
@media (max-width: 640px) {
  .search-overlay { padding: 0; place-items: stretch; }
  .search-box { width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; border: 0; display: flex; flex-direction: column; padding: 12px; }
  .search-box input { font-size: 16px; min-height: 44px; }
  .search-results { flex: 1; overflow: auto; max-height: none; }
  .search-results a { padding: 12px; }
}