/* The v2 guides (Phase 014, step 7): the list, a guide, registration and the guide's manage page. */

.gx-page { padding-bottom: 48px; }
.routesx-titlerow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.gx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.gx-card { display: flex; gap: 20px; align-items: flex-start; }
.gx-photo { flex: none; width: 120px; height: 120px; border-radius: var(--r-m); object-fit: cover; background: var(--c-surface-2); }
.gx-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gx-name { margin: 0; }
.gx-name a { color: var(--c-text); }
.gx-short, .gx-routes { margin: 0; }
.gx-phones { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-weight: 600; }
.gx-phones > span { display: inline-flex; gap: 6px; align-items: center; }
.gx-link { display: inline-flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.gx-routes { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.gx-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.gx-layout .h3 { margin: 0; }
.gx-description { white-space: pre-line; }
.gx-fields { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.gx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gx-show { display: flex; gap: 12px; align-items: flex-start; padding-block: 12px; border-top: 1px solid var(--c-outline); }
.gx-show:first-of-type { border-top: 0; }
.gx-show p { margin: 2px 0 6px; }
.gx-state { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-lvl3-bg); color: var(--c-lvl3-fg); }
.gx-state.is-on { background: var(--c-lvl1-bg); color: var(--c-lvl1-fg); }
.gx-orders { padding-top: 12px; border-top: 1px solid var(--c-outline); }
.gx-months .select { width: auto; }
.gx-page .notice { margin: 0 0 16px; }

@media (max-width: 820px) {
	.gx-layout, .gx-pair { grid-template-columns: minmax(0, 1fr); }
	.gx-card { gap: 14px; }
	.gx-photo { width: 84px; height: 84px; }
}

/* ---- the equipment page (Shop/default.htm) ---- */
.shopx { padding-bottom: 48px; }
.shopx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 20px; }
.shopx-grid .tile { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .shopx-grid .tile-caption { padding: 14px; } .shopx-grid .tile-caption b { font-size: 17px; } }