/* Unique prefix: dcms-placed- */
.dcms-placed-grid{
  --gap: 24px; --dcms-cols: 3;
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(var(--dcms-cols), minmax(0,1fr));
}
@media (max-width: 992px){ .dcms-placed-grid{ --dcms-cols:2 } }
@media (max-width: 576px){ .dcms-placed-grid{ --dcms-cols:1 } }

.dcms-placed-card{ position:relative; overflow:hidden; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.dcms-placed-imgwrap{ position:relative; aspect-ratio: 3/4; background:#f2f4f7; }
.dcms-placed-imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.dcms-placed-imgph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:56px; color:#7a7a7a; background:linear-gradient(135deg,#f6f7f9,#eceff3); }

.dcms-placed-overlay{
  position:absolute; inset:auto 0 0 0; padding:18px 20px;
  background:linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  color:#fff; display:flex; flex-direction:column; gap:8px;
  transform:translateY(0); transition:background .25s ease;
}
.dcms-placed-card:hover .dcms-placed-overlay{ background:linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); }
.dcms-placed-name{ font-weight:700; letter-spacing:.2px; }
.dcms-placed-see{
  border:0; background:transparent; color:#fff; text-decoration:none;
  font-weight:600; padding:0; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.dcms-placed-arrow{ display:inline-block; transform:translateX(0); transition:transform .2s; }
.dcms-placed-see:hover .dcms-placed-arrow{ transform:translateX(3px); }

/* Modal */
.dcms-placed-modal{ position:fixed; inset:0; display:none; z-index:99999; }
.dcms-placed-modal.open{ display:block; }
.dcms-placed-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.dcms-placed-dialog{
  position:relative; z-index:1; margin:40px auto; max-width:900px; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.dcms-placed-close{
  position:absolute; top:10px; right:12px; border:0; background:#000; color:#fff; width:34px; height:34px;
  border-radius:50%; font-size:20px; line-height:1; cursor:pointer; opacity:.85;
}
.dcms-placed-body{ display:grid; grid-template-columns: 1fr 1.2fr; gap:0; }
.dcms-placed-modal-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.dcms-placed-modal-info{ padding:22px 24px; }
.dcms-placed-modal-name{ margin:0 0 12px; font-size:22px; }
.dcms-placed-modal-row{ margin:6px 0; }
.dcms-placed-socials{ display:flex; gap:10px; margin-top:14px; }
.dcms-placed-socials a{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:#f1f2f4; color:#222; text-decoration:none;
}
@media (max-width: 680px){
  .dcms-placed-body{ grid-template-columns: 1fr; }
}

/* === SEE INFO only on hover, no pink background === */
.dcms-placed-see{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  appearance: none;
  padding: 0;
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;

  /* hidden by default; show on hover */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.dcms-placed-card:hover .dcms-placed-see{
  opacity: 1;
  transform: translateY(0);
}

/* keep the name always visible */
.dcms-placed-name{ font-weight:700; letter-spacing:.2px; }

/* === Center the modal perfectly (both axes) === */
.dcms-placed-modal{ position: fixed; inset: 0; display: none; z-index: 99999; }
.dcms-placed-modal.open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* gutter on small screens */
}
.dcms-placed-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

/* dialog sizing & layout */
.dcms-placed-dialog{
  position: relative;
  z-index: 1;
  width: min(900px, 96vw);
  max-height: 90vh;
  margin: 0; /* allow flex centering */
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.dcms-placed-body{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
}
@media (max-width: 680px){
  .dcms-placed-body{ grid-template-columns: 1fr; }
}

/* image area scales nicely */
.dcms-placed-modal-img{
  background:#f6f7f9;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
}
.dcms-placed-modal-img img{
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

/* close button using Font Awesome */
.dcms-placed-close{
  position:absolute;
  top:10px; right:12px;
  background:#fff;
  border:0;
  width: 38px; height: 38px;
  border-radius: 50%;
  color:#111;
  box-shadow: 0 1px 8px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.dcms-placed-close:hover{ filter: brightness(0.95); }
.dcms-placed-close i{ pointer-events:none; }

/* prevent body scroll when modal is open */
body.dcms-locked{ overflow:hidden; }