/* zmenek.net 2026 redesign (Polaroid), see docs/superpowers/specs/2026-11-02-zmenek-polaroid-design.md
   Home, listings and search: the listing heading, the card grid, "0 results" and the page numbers.
   The print itself (.print), its tilt and the undeveloped print live in zn2026.css. */

/* ---------------------------------------------------------------- Listing heading */
#mainContent .ce_text h3 {
  margin-bottom: 28px;
  font: 800 30px/1.15 var(--head);
  color: #fff;
  text-shadow: 0 1px 2px rgba(60,10,30,.55), 0 0 12px rgba(80,10,40,.35);
}
#mainContent .ce_text h3 span { color: var(--orange-lt); }

/* ---------------------------------------------------------------- Cards grid: fixed columns, so a short last row keeps the card width */
.profileList .list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 34px; }
.profileList .list > .profileBox { min-width: 0; }

/* ---------------------------------------------------------------- "0 results" */
.profileList p.empty {
  padding: 28px;
  border-radius: 3px;
  background: var(--cream) var(--damask-cream);
  box-shadow: var(--shadow-print);
  font: 700 20px/1.3 var(--head);
  color: var(--brown);
  text-align: center;
}

/* ---------------------------------------------------------------- Page numbers: white tiles on the pinboard */
.pagination { margin-top: 52px; }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* the classes previous/next sit on the li and on its a: only the tile is padded (0,2,1 outranks the 0,2,0 rules below) */
.pagination li.previous, .pagination li.next { padding: 0; }
.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: var(--shadow-print);
  font: 700 18px/1 var(--head);
  color: var(--brown);
  text-decoration: none;
}
.pagination .current { background: var(--orange); color: var(--brown-deep); font-weight: 800; }
.pagination .previous, .pagination .next { padding: 0 16px; font-size: 16px; }
/* the tiles sit on the pink: the white ring with the brown halo, then the tile's own shadow */
.pagination a:focus-visible { box-shadow: 0 0 0 6px var(--brown-deep), var(--shadow-print); }

@media (hover: hover) {
  .pagination a:hover { background: var(--tile-hover); color: var(--plum); }
}

/* ---------------------------------------------------------------- 1000px and below: 3 cards across */
@media (max-width: 1000px) {
  .profileList .list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
}

/* ---------------------------------------------------------------- Phones: 2 cards across, the current page +-2 */
@media (max-width: 680px) {
  #mainContent .ce_text h3 { font-size: 23px; }
  .profileList .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .pagination { margin-top: 40px; }
}
@media (max-width: 680px) {
  .pagination ul { justify-content: center; gap: 3px; }
  .pagination .previous, .pagination .next { padding: 0 8px; }
  @supports selector(:has(*)) {
    .pagination ul:has(.current) > li { display: none; }                      /* 0,2,2 */
    .pagination ul:has(.current) > li.previous,
    .pagination ul:has(.current) > li.next,                                   /* 0,3,2 */
    .pagination ul > li:has(> .current),
    .pagination ul > li:has(+ li > .current),
    .pagination ul > li:has(+ li + li > .current),                           /* 0,2,2, later wins */
    .pagination ul > li:has(> .current) + li,
    .pagination ul > li:has(> .current) + li + li { display: block; }        /* 0,2,3 / 0,2,4 */
  }
}