/* Bento: the look every page of cards shares, and their packing (the owner's pick of mock-bento):
   the person page's tiles (css/person.css) and the position page's Overview (css/position.css), each a
   grid with class="bento", packed by js/bento.js so the cards fit together with no holes. */

/* ---------- one look: the same width, gap, corners, padding and titles ---------- */
.bento { gap: 16px; }
@media (min-width: 621px) { .pb.bento { width: min(100% - 32px, 1200px); } }
.bento > :is(.pb-tile, .pos-tile):not(.pb-hero, .pb-fold, .pb-map) { padding: 20px; }
.bento > :is(.pb-tile, .pos-tile) { border-radius: 26px; }
.pb.bento :is(h3, .card-title, .relation-title) { margin: 0 0 12px; font-size: 18px; }
.bento .pb-fold-head:focus-visible { border-radius: 26px; }

/* ---------- each card's shape: how many of the 4 columns it takes (4: the whole row) ---------- */
.bento > * { --bento-w: 1; }
.bento > :is(.pb-hero, .pb-bio, .pb-record, .pb-promise, .pb-take, .pb-odds, .pb-barpoll, .pb-bareval, .pb-powers, .pb-money, .pb-rel) { --bento-w: 2; }
.bento > :is(.pos-holder, .pos-odds, .pos-barpoll, .pos-bareval, .pos-job, .pos-powers, .pos-news, .pos-map) { --bento-w: 2; }
.bento > :is(.pb-talk, .pos-race, .pos-prev) { --bento-w: 4; }

/* ---------- packed (js/bento.js): 4px rows, each card spanning as many as it's tall ---------- */
.is-bento { grid-auto-rows: 4px; row-gap: 0 !important; align-items: stretch; }
.is-bento > * { align-self: stretch !important; margin: 0 0 16px !important; }
.is-bento > .is-lifted { margin: 0 !important; }
.is-bento.is-bento-measuring > * { align-self: start !important; }

/* A card with room to spare keeps its content at the top and its link ("Open the map →", "All news →")
   at the bottom; a folded card's one line sits in the middle; the map grows. */
.is-bento > :is(.pb-tile, .pos-tile):not([hidden], .pb-hero, .pb-rel, .pb-map, .pb-fold, .pb-take, .is-lifted) { display: flex; flex-direction: column; }
.is-bento > * > :is(.pb-go, .pos-more, .pb-foot, .area-mini-go):last-child { margin-top: auto; padding-top: 12px; }
.is-bento > .pb-fold:not([hidden], .is-open) { display: flex; flex-direction: column; justify-content: center; }
.is-bento > .pos-map .area-mini-map { flex: 1; min-height: 200px; }
.is-bento > .pb-map { grid-template-rows: auto minmax(160px, 1fr) auto; }