/* =============================================================
   barrio_npm_prototype — attached-files list + viewer modals

   Shared across every detail page via _attachment-list.html.twig +
   _attachment-modal.html.twig: the .np-file-* list rows, the
   attachment viewer modal (#np-attachment-modal — img/iframe +
   circular close), and the link viewer modal (barrioNpmLinkModal).
   JS: js/detail-modals.js. See documentation/attached-file-handling.md.
   (Extracted from detail.css.)
   ============================================================= */

/* Shared attached-files list (_attachment-list.html.twig). */
.np-file-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-file-row {
  margin-bottom: 6px;
}
/* Row is a contextual-region so the standard Drupal edit "pencil" (editors
   only) anchors to it; leave headroom on the right so it clears the meta. */
.np-file-row.contextual-region {
  position: relative;
}
.np-file-row .contextual {
  right: 6px;
  top: 6px;
}
.np-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e7e2d8;
  border-radius: 8px;
  background: #fff;
  color: #2c2c2b;
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.np-file:hover {
  border-color: var(--hue, #6c675f);
  box-shadow: 0 1px 6px rgba(44, 44, 43, .08);
}
.np-file-icon {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #8a8377;
}
.np-file-icon--image {
  background: #4a90d9;
}
.np-file-icon--pdf {
  background: #d9534f;
}
.np-file-name {
  flex: 1 1 auto;
  font-weight: 700;
}
.np-file-meta {
  flex: 0 0 auto;
  font-size: 12px;
  color: #8a8377;
}
/* Circular high-contrast close so it stays visible over the PDF viewer's dark
   toolbar (and over light images). Parent selector beats Bootstrap's .btn-close
   (equal single-class specificity otherwise); background-color adds a white fill
   behind the existing dark × SVG and opacity:1 undoes Bootstrap's faint .5. */
.np-attachment-modal .np-attachment-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 22px;                 /* content-box: 22 + 2×9 padding = 40px circle */
  height: 22px;
  padding: 9px;
  background-color: #fff;
  background-size: 14px auto;   /* keep the × proportionate in the circle */
  border-radius: 50%;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: background-color .12s, box-shadow .12s;
}
.np-attachment-modal .np-attachment-modal-close:hover {
  background-color: #f0ece3;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.np-attachment-modal .np-attachment-modal-close:focus-visible {
  outline: 2px solid #2c2c2b;
  outline-offset: 2px;
}
.np-attachment-modal-slot {
  display: flex;
  min-height: 60vh;
}
.np-attachment-img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  margin: auto;
}
.np-attachment-iframe {
  width: 100%;
  height: 82vh;
  border: 0;
}
.np-attachment-modal-foot {
  padding: 12px 20px;
  border-top: 1px solid #e7e2d8;
  text-align: right;
}
.np-attachment-download {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  background: #2c2c2b;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.np-attachment-download:hover {
  background: #4c4842;
  color: #fff;
}

/* Link viewer modal (barrioNpmLinkModal) — head bar (title + open-in-new-tab +
   close), an optional "may not embed" hint, and a full-height iframe. */
.np-link-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e7e2d8;
}
.np-link-modal-title {
  flex: 1 1 auto;
  overflow: hidden;
  font-weight: 700;
  font-size: 15px;
  color: #2c2c2b;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-link-modal-newtab {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 14px;
  color: #2c2c2b;
  text-decoration: none;
}
.np-link-modal-newtab:hover {
  text-decoration: underline;
}
.np-link-modal-note {
  margin: 0;
  padding: 8px 16px;
  background: #fdf6e3;
  border-bottom: 1px solid #e7e2d8;
  font-size: 13px;
  color: #6c675f;
}
.np-link-modal-frame {
  display: block;
  width: 100%;
  height: 78vh;
  border: 0;
}