/* ModelBook V6.1 — visual hero crop */
.hero-cropped{
  background-image:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.48)),var(--hero-image) !important;
  background-position:var(--hero-position, center center) !important;
  background-size:var(--hero-size, cover) auto !important;
  background-repeat:no-repeat !important;
}

@supports (background-size: max(100%, 120%)) {
  .hero-cropped{
    background-size:max(100%, var(--hero-size, 100%)) auto !important;
  }
}

.crop-admin{
  grid-column:1/-1;
  border-top:1px solid #eee;
  margin-top:18px;
  padding-top:26px;
}

.crop-admin h2{
  margin:0 0 8px;
}

.crop-admin p{
  color:#666;
  margin:0 0 22px;
}

.crop-grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:24px;
  align-items:start;
}

.crop-block{
  background:#fbfaf7;
  border:1px solid #e8e2d8;
  border-radius:22px;
  padding:18px;
}

.crop-block h3{
  margin:0 0 14px;
}

.crop-preview{
  position:relative;
  width:100%;
  min-height:280px;
  border-radius:18px;
  overflow:hidden;
  background-color:#111;
  background-image:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.30)),var(--crop-image);
  background-position:var(--crop-x,50%) var(--crop-y,50%);
  background-size:var(--crop-size,100%) auto;
  background-repeat:no-repeat;
  cursor:grab;
  user-select:none;
  touch-action:none;
  border:1px solid rgba(0,0,0,.12);
}

.crop-preview:active{
  cursor:grabbing;
}

.crop-preview::before,
.crop-preview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.crop-preview::before{
  background:
    linear-gradient(to right, transparent 33.333%, rgba(255,255,255,.38) 33.333%, rgba(255,255,255,.38) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,255,255,.38) 66.666%, rgba(255,255,255,.38) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(255,255,255,.38) 33.333%, rgba(255,255,255,.38) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,255,255,.38) 66.666%, rgba(255,255,255,.38) calc(66.666% + 1px), transparent calc(66.666% + 1px));
}

.crop-preview::after{
  box-shadow:inset 0 0 0 999px rgba(0,0,0,.04);
}

.crop-desktop{
  aspect-ratio:16/7;
}

.crop-mobile{
  aspect-ratio:9/15;
  min-height:520px;
}

.crop-cross{
  position:absolute;
  width:22px;
  height:22px;
  left:var(--crop-x,50%);
  top:var(--crop-y,50%);
  transform:translate(-50%,-50%);
  border:2px solid #d5a75f;
  border-radius:999px;
  box-shadow:0 0 0 4px rgba(0,0,0,.35);
  pointer-events:none;
}

.crop-safe{
  position:absolute;
  left:8%;
  right:8%;
  top:23%;
  bottom:18%;
  border:1px dashed rgba(213,167,95,.75);
  pointer-events:none;
}

.crop-controls{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.crop-controls label{
  margin:0 !important;
}

.crop-controls input[type="range"]{
  padding:0 !important;
}

@media(max-width:800px){
  .hero-cropped{
    background-image:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.36)),var(--hero-mobile-image) !important;
    background-position:var(--hero-mobile-position, center center) !important;
    background-size:var(--hero-mobile-size, cover) auto !important;
  }

  .crop-grid{
    grid-template-columns:1fr;
  }

  .crop-mobile{
    max-width:360px;
    margin:auto;
  }
}