/* The editor and public homepage share an exact 16:9 frame at every width. */
.pj-website-home-card.website-solution-card, .pj-b-home-card { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; border: 0; padding: 0; }
.pj-website-home-card .pj-website-card-media { position: absolute; inset: 0; }
.xii-crop-slot { display: block; position: relative; min-width: 0; height: 100%; overflow: hidden; }
.xii-crop-slot > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--crop-x, 50%) var(--crop-y, 50%); transform: scale(var(--crop-zoom, 1)); transform-origin: var(--crop-x, 50%) var(--crop-y, 50%); }
.pj-b-home-card:is(:hover, :focus-visible) .pj-b-home-card-media { transform: none; }
.xii-crop-editors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-block: 20px; }
.xii-crop-editor { min-width: 0; padding: 16px; border: 1px solid var(--pj-b-line, #ddd); border-radius: 14px; }
.xii-crop-editor h4 { margin: 0 0 12px; }
.xii-crop-editor .xii-crop-slot { height: auto; aspect-ratio: var(--crop-ratio, 16 / 9); touch-action: none; cursor: grab; border-radius: 8px; background: #ededf0; }
.xii-crop-editor .xii-crop-slot > img { position: absolute; inset: 0; user-select: none; }
.xii-crop-editor label { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; }
.xii-crop-editor input[type=range] { flex: 1; min-width: 0; }
.xii-crop-editor input[type=file] { width: 100%; font-size: 14px; }
.xii-crop-editor button { min-height: 44px; margin-top: 8px; }
.xii-crop-help { color: var(--pj-b-muted, #666); font-size: 13px; margin-block: 10px; }

.pj-website-home-card .pj-website-card-media-split, .pj-b-home-card-media-split { gap: 0; }