/* house gallery (gallery.html): cards of houses, each a plan redrawn from its data */
.gallery { max-width: 1180px; margin: 0 auto; padding: 12px 16px 40px; }
.gallery h2 { font-size: 17px; margin: 22px 0 6px; }
.gallery .lead { margin-top: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { background: #fff; border: 1px solid #e3ded6; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.card canvas { width: 100%; height: auto; display: block; cursor: zoom-in; background: #fbfaf7; }
.card .body { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.card .title { font-weight: 600; font-size: 15px; }
.card .meta { color: #6b665e; font-size: 12.5px; }
.card .note { color: #4d4a44; font-size: 12.5px; line-height: 1.45; }
.card .tabs { display: flex; gap: 4px; }
.card .tabs button, .zoomhead button { font-size: 12px; padding: 2px 8px; border: 1px solid #cfc8bd; border-radius: 6px; background: #f7f4ef; cursor: pointer; }
.card .tabs button.on, .zoomhead button.on { background: #2b2723; color: #fff; border-color: #2b2723; }
.card .go { align-self: flex-start; margin-top: 4px; padding: 6px 12px; border-radius: 8px; background: #2b2723; color: #fff; text-decoration: none; font-size: 13px; }
.zoom { position: fixed; inset: 0; background: rgba(20, 18, 16, 0.6); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.zoombox { background: #fff; border-radius: 12px; padding: 10px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 8px; }
.zoomhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zoomhead #zoomClose { margin-left: auto; }
.zoombox canvas { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; }