/* ZCF Photo Attachments */
.zcf-media-composer { margin-top: 12px; }
.zcf-media-picker-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.zcf-media-file-label { position:relative; overflow:hidden; cursor:pointer; }
.zcf-media-file-label input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.zcf-media-status { margin:10px 0 0; color:var(--zcf-text-muted, #5b6b77); font-size:.85rem; }
.zcf-media-composer-list { display:grid; gap:12px; margin-top:14px; }
.zcf-media-composer-card { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding:12px; border:1px solid var(--zcf-border, #b8cbd9); background:var(--zcf-surface, #fff); }
.zcf-media-composer-card.is-uploading { opacity:.78; }
.zcf-media-composer-card.is-error { border-color:#a53030; }
.zcf-media-composer-thumb { aspect-ratio:4/3; background:#e6edf2; overflow:hidden; border:1px solid var(--zcf-border, #b8cbd9); }
.zcf-media-composer-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.zcf-media-composer-fields { display:grid; gap:9px; min-width:0; }
.zcf-media-composer-fields label { display:grid; gap:4px; font-size:.82rem; font-weight:700; color:var(--zcf-text-muted, #536572); }
.zcf-media-composer-fields input,
.zcf-media-composer-fields select { width:100%; box-sizing:border-box; }
.zcf-media-composer-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.zcf-media-composer-head span { font-size:.78rem; color:var(--zcf-text-muted, #647684); }
.zcf-media-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
.zcf-media-progress { block-size:7px; background:#dfe7ed; overflow:hidden; border-radius:99px; }
.zcf-media-progress > span { display:block; block-size:100%; inline-size:0; background:var(--zcf-accent, #1e75a8); transition:inline-size .2s ease; }

.zcf-media-gallery {
  margin:18px 0 6px;
  max-width:100%;
}
.zcf-media-gallery--single {
  display:grid;
  justify-items:center;
  max-width:100%;
}
.zcf-media-gallery--grid {
  display:grid;
  gap:12px;
}
.zcf-media-gallery--count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.zcf-media-gallery--count-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.zcf-media-gallery--count-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.zcf-media-item {
  margin:0;
  min-width:0;
  max-width:100%;
  position:relative;
}
.zcf-media-gallery--single .zcf-media-item {
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}
.zcf-media-gallery--single .zcf-media-item--portrait { max-width:min(460px,100%); }
.zcf-media-gallery--single .zcf-media-item--square { max-width:min(600px,100%); }
.zcf-media-gallery--single .zcf-media-item--landscape { max-width:min(760px,100%); }
.zcf-media-open {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  margin:0;
  padding:0;
  border:1px solid var(--zcf-border, #b8cbd9);
  border-radius:8px;
  background:var(--zcf-surface-muted, #e8eef2);
  box-shadow:0 1px 2px rgba(11,42,61,.08);
  cursor:zoom-in;
  overflow:hidden;
  text-align:left;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.zcf-media-open:hover {
  border-color:var(--zcf-accent, #1e75a8);
  box-shadow:0 5px 16px rgba(11,42,61,.16);
}
.zcf-media-open:active { transform:translateY(1px); }
.zcf-media-open:focus-visible {
  outline:3px solid var(--zcf-focus, #f2aa00);
  outline-offset:3px;
}
.zcf-media-item img {
  display:block;
  max-width:100%;
  height:auto;
  object-fit:contain;
  background:transparent;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.zcf-media-gallery--single .zcf-media-open {
  width:fit-content;
  max-width:100%;
}
.zcf-media-gallery--single .zcf-media-item img {
  width:auto;
  max-width:100%;
  max-height:520px;
  margin-inline:auto;
}
.zcf-media-gallery--grid .zcf-media-open {
  aspect-ratio:4/3;
  padding:4px;
}
.zcf-media-gallery--grid .zcf-media-item img {
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
}
.zcf-media-enlarge-cue {
  position:absolute;
  top:8px;
  right:8px;
  display:grid;
  place-items:center;
  min-width:30px;
  height:30px;
  padding:0 7px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:999px;
  background:rgba(3,19,29,.66);
  color:#fff;
  font:700 1rem/1 system-ui,sans-serif;
  opacity:.72;
  pointer-events:none;
  transform:translateY(-1px);
  transition:opacity .16s ease, transform .16s ease, background .16s ease;
}
.zcf-media-open:hover .zcf-media-enlarge-cue,
.zcf-media-open:focus-visible .zcf-media-enlarge-cue {
  opacity:1;
  transform:none;
  background:rgba(3,19,29,.82);
}
.zcf-media-item figcaption {
  box-sizing:border-box;
  padding:8px 3px 2px;
  color:var(--zcf-text-muted, #536572);
  font-size:.84rem;
  line-height:1.45;
}
.zcf-media-gallery--single figcaption {
  width:100%;
  max-width:68ch;
  margin-inline:auto;
}
.zcf-media-state {
  display:inline-block;
  margin-top:5px;
  padding:3px 7px;
  background:#fff2c7;
  color:#6d4a00;
  border:1px solid #d4a62b;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.zcf-media-lightbox {
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(4,12,18,.88);
}
.zcf-media-lightbox[hidden] { display:none; }
.zcf-media-lightbox-panel {
  position:relative;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  width:min(1100px,100%);
  max-height:calc(100vh - 48px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:#09151d;
  color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.zcf-media-lightbox-stage {
  min-height:240px;
  display:grid;
  place-items:center;
  overflow:auto;
  padding:18px;
}
.zcf-media-lightbox-stage img {
  display:block;
  max-width:100%;
  max-height:calc(100vh - 170px);
  width:auto;
  height:auto;
  object-fit:contain;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.zcf-media-lightbox-caption { margin:0; padding:12px 70px 16px 18px; color:#dbe7ed; font-size:.92rem; }
.zcf-media-lightbox-close,
.zcf-media-lightbox-prev,
.zcf-media-lightbox-next { position:absolute; z-index:2; width:44px; height:44px; border:1px solid rgba(255,255,255,.45); background:rgba(0,0,0,.55); color:#fff; font-size:1.45rem; cursor:pointer; }
.zcf-media-lightbox-close { top:12px; right:12px; }
.zcf-media-lightbox-prev { left:12px; top:50%; transform:translateY(-50%); }
.zcf-media-lightbox-next { right:12px; top:50%; transform:translateY(-50%); }
.zcf-media-lightbox button:focus-visible { outline:3px solid #f2aa00; outline-offset:2px; }
body.zcf-media-lightbox-open { overflow:hidden; }

.zcf-media-admin-summary { margin-block:18px; }
.zcf-media-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.zcf-media-stat-grid p { margin:0; padding:14px; border:1px solid var(--zcf-border, #b8cbd9); background:var(--zcf-surface-muted, #eef3f7); }
.zcf-media-stat-grid strong,.zcf-media-stat-grid span { display:block; }
.zcf-media-stat-grid strong { font-size:1.35rem; color:var(--zcf-accent-strong, #0f4567); }
.zcf-media-stat-grid span { margin-top:4px; font-size:.78rem; color:var(--zcf-text-muted, #60727f); }

@media (max-width:720px) {
  .zcf-media-composer-card { grid-template-columns:96px minmax(0,1fr); gap:10px; padding:10px; }
  .zcf-media-composer-thumb { aspect-ratio:1; }
  .zcf-media-card-actions .zcf-button { min-height:40px; }
  .zcf-media-gallery--grid { gap:7px; }
  .zcf-media-gallery--count-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zcf-media-gallery--count-3 .zcf-media-item:last-child { grid-column:1 / -1; }
  .zcf-media-gallery--count-3 .zcf-media-item:last-child .zcf-media-open { aspect-ratio:16/9; }
  .zcf-media-gallery--single .zcf-media-item img { max-height:440px; }
  .zcf-media-lightbox { padding:0; }
  .zcf-media-lightbox-panel { width:100%; height:100%; max-height:none; border:0; border-radius:0; }
  .zcf-media-lightbox-stage img { max-height:calc(100vh - 130px); }
  .zcf-media-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:420px) {
  .zcf-media-composer-card { grid-template-columns:1fr; }
  .zcf-media-composer-thumb { width:100%; aspect-ratio:16/9; }
  .zcf-media-gallery--grid { gap:6px; }
  .zcf-media-gallery--single .zcf-media-item img { max-height:390px; }
  .zcf-media-item figcaption { font-size:.78rem; }
  .zcf-media-enlarge-cue { top:6px; right:6px; min-width:28px; height:28px; }
}

@media (max-width:360px) {
  .zcf-media-gallery--count-2,
  .zcf-media-gallery--count-3,
  .zcf-media-gallery--count-4 { grid-template-columns:1fr; }
  .zcf-media-gallery--count-3 .zcf-media-item:last-child { grid-column:auto; }
  .zcf-media-gallery--count-3 .zcf-media-item:last-child .zcf-media-open { aspect-ratio:4/3; }
}

.zcf-media-preview-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 -6px;
  color:var(--zcf-text-muted, #536572);
}
.zcf-media-preview-heading strong { color:var(--zcf-accent-strong, #0f4567); }
.zcf-media-preview-heading span { font-size:.78rem; }
@media (max-width:520px) {
  .zcf-media-preview-heading { display:block; }
  .zcf-media-preview-heading span { display:block; margin-top:3px; }
}

/* The generic composer disclosure uses a wrapping flex row for formatting
   buttons. Photo attachments need a full-width vertical workspace. */
.zcf-media-composer .zcf-composer-disclosure-content {
  display:block;
  width:100%;
  box-sizing:border-box;
}
.zcf-media-composer-list,
.zcf-media-composer-card { width:100%; box-sizing:border-box; }

.zcf-media-composer-card.is-removing {
  opacity: .62;
  pointer-events: none;
}