/* HanAnHua v95 — independent position photos + responsive focal/crop framing. */

/* The two industry cards remain compact, but their photos get a predictable
   responsive viewing window so people/equipment stay readable. */
.industry-field-card > figure{
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#ece8dc;
}

/* CMS image framing. `scale` is intentionally separate from `transform`, so
   the existing hover/reveal animation can continue to work. */
img[data-cms-img-key]{
  --cms-img-x:50%;
  --cms-img-y:50%;
  --cms-img-zoom:1;
}
.field-card-photo figure img[data-cms-img-key],
.facility-card img[data-cms-img-key]{
  object-fit:cover;
  object-position:var(--cms-img-x) var(--cms-img-y);
  transform-origin:var(--cms-img-x) var(--cms-img-y);
  scale:var(--cms-img-zoom);
}

/* Slightly quieter hover movement for framed photos, so a saved crop does not
   jump noticeably when the pointer enters the card. */
.field-card-photo:hover figure img[data-cms-img-key]{
  transform:scale(1.018);
}

/* The crop/framing editor lives inside the existing CMS image dialog. */
.cms-crop-editor{
  margin-top:14px;
  padding:14px;
  border:1.5px solid #1d1d1d;
  border-radius:16px;
  background:#fff9df;
}
.cms-crop-editor[hidden]{display:none !important}
.cms-crop-editor h3{margin:0 0 5px;font-size:15px}
.cms-crop-editor p{margin:0 0 11px;font-size:12px;line-height:1.45;color:#4e4a3f}
.cms-crop-preview{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1.5px solid #1d1d1d;
  border-radius:12px;
  background:#ddd;
}
.cms-crop-preview img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--preview-x,50%) var(--preview-y,50%);
  transform-origin:var(--preview-x,50%) var(--preview-y,50%);
  scale:var(--preview-zoom,1);
}
.cms-crop-controls{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  margin-top:12px;
}
.cms-crop-control{
  display:grid;
  grid-template-columns:112px minmax(0,1fr) 42px;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
}
.cms-crop-control input[type="range"]{width:100%}
.cms-crop-control output{text-align:right;font-variant-numeric:tabular-nums;font-size:11px}
.cms-crop-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.cms-image-apply-row{display:flex;justify-content:flex-end;margin-top:14px}

@media(max-width:820px){
  .industry-field-card > figure{aspect-ratio:16 / 10}
}
@media(max-width:560px){
  .cms-crop-control{grid-template-columns:88px minmax(0,1fr) 38px}
  .industry-field-card > figure{aspect-ratio:4 / 3}
}