/* Our Clients module — styles specific to this module. Everything generic
   (card, form-group, btn, admin-table, badge, post-grid/post-card, alert,
   two-col, stack, row, empty-state, footer, blog-header, app-header, ...)
   already comes from /insights/assets/insights.css, shared across
   Insights/Resources/Clients so all three logged-in areas and all three
   public sections look and behave the same. */

/* ---- screenshot upload field (write/upload.php) ---- */
.screenshot-upload-field{
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.screenshot-upload-field input[type=file]{ display:block; margin:0 auto; font-size:.9rem }
.screenshot-upload-current{ font-size:.85rem; color:var(--muted-foreground); margin-top:.5rem }
.screenshot-upload-current img{
  display:block; margin:.6rem auto 0; max-width:100%; max-height:220px;
  border:1px solid var(--border); border-radius:.4rem;
}

/* ---- admin review preview (admin/review.php) ---- */
.review-preview{ padding:1.5rem; text-align:center }
.review-preview img{
  max-width:100%; max-height:65vh; border:1px solid var(--border);
  border-radius:.4rem; box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.client-url-line{ font-size:.9rem; color:var(--muted-foreground); word-break:break-all }

/* ---- public listing grid (clients/) ----
   insights.css's shared .post-card img rule uses a fixed 16:9 box with
   object-fit:cover, which is right for blog featured images but wrong
   here: client screenshots are cropped to whatever wide aspect ratio the
   admin's crop-margin settings produce (often much wider than 16:9), so
   "cover" was zooming in and slicing off the top/bottom to fill the box.
   Overriding to object-fit:contain scales the whole cropped screenshot
   down to fit the box instead -- nothing sliced off, just letterboxed
   with the card's background on the two thin edges if the ratios don't
   match exactly. This only touches display on this page; the stored
   file itself is untouched. */
.post-card img{ object-fit:contain; background:var(--muted) }

/* ---- public detail page (clients/post/<slug>/) ---- */
.client-hero{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--muted); margin:1.5rem 0 2rem; text-align:center;
}
.client-hero img{ display:block; width:100%; height:auto }
.client-visit-row{ margin:1.5rem 0; text-align:center }
.client-description{ font-size:1.08rem; color:var(--muted-foreground); margin:0 0 1rem }

/* ---- crop-margin setup tool (admin/settings.php) ---- */
.crop-tool{ display:flex; gap:2rem; flex-wrap:wrap; align-items:flex-start }
.crop-tool-preview{ position:relative; display:inline-block; line-height:0; max-width:100%; }
.crop-tool-preview img{ display:block; max-width:100%; height:auto; border:1px solid var(--border) }
.crop-overlay{ position:absolute; left:0; right:0; background:rgba(220,38,38,.35); pointer-events:none }
.crop-overlay-top{ top:0 }
.crop-overlay-bottom{ bottom:0 }
.crop-overlay-side{ position:absolute; top:0; bottom:0; background:rgba(220,38,38,.35); pointer-events:none }
.crop-overlay-left{ left:0 }
.crop-overlay-right{ right:0 }
.crop-tool-controls{ min-width:220px; flex:1 }
.crop-tool-controls .form-group input{ max-width:9rem }
.crop-tool-note{ font-size:.82rem; color:var(--muted-foreground); background:var(--muted); border-radius:.5rem; padding:.75rem 1rem; margin-bottom:1.25rem }