/* Home project photo: keep the image around one third of the mobile viewport. */
.hero-visual.has-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(var(--photo-zoom,1));
  transform-origin:var(--photo-x,50%) var(--photo-y,50%);
  object-position:var(--photo-x,50%) var(--photo-y,50%);
}
@media (max-width:850px) {
  .hero-visual { min-height:0 !important; height:clamp(210px,33vh,280px); }
  .hero-visual img { min-height:0 !important; }
}

/* Injected controls on the existing project settings screen. */
.photo-framing-controls{margin:16px 0 22px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.photo-framing-controls h3{margin:0 0 5px;font-size:1rem}
.photo-framing-controls .framing-help{margin:0 0 15px;color:var(--muted);font-size:.8rem;line-height:1.6}
.photo-framing-preview{position:relative;width:100%;height:clamp(180px,30vh,250px);overflow:hidden;border-radius:10px;background:var(--soft);margin-bottom:16px}
.photo-framing-preview img{width:100%;height:100%;object-fit:cover;object-position:var(--photo-x,50%) var(--photo-y,50%);transform:scale(var(--photo-zoom,1));transform-origin:var(--photo-x,50%) var(--photo-y,50%)}
.framing-slider{display:grid;grid-template-columns:72px 1fr 44px;gap:10px;align-items:center;margin-top:12px}
.framing-slider label{font-size:.82rem;font-weight:700}
.framing-slider input{width:100%;accent-color:#55534e}
.framing-slider output{text-align:right;color:var(--muted);font-size:.78rem}
.framing-reset{margin-top:14px;border:1px solid var(--line);background:transparent;border-radius:9px;padding:9px 13px}