/* ============================================================================
 * MelóPont — Közösség: csatolmányok (FEED-MEDIA-01, 2026.10.12)
 * cm-att-  = a szerkesztő tálcája · cm-md- = megjelenítés a bejegyzésen és a nagyító
 * Színek a melopont-style.css / community.css tokenjeiből; az oldal-saját tokenek itt (--cm-md-*).
 * ========================================================================== */
:root {
  --cm-md-lb-bg: rgba(10, 15, 25, .94);
  --cm-md-lb-btn: rgba(255, 255, 255, .14);
  --cm-md-lb-btn-hover: rgba(255, 255, 255, .26);
  --cm-md-shade: rgba(10, 15, 25, .55);
  --cm-md-pdf: #B42318;
  --cm-md-sheet: #067647;
  --cm-md-word: #175CD3;
}

/* ── Szerkesztő ── */
.cm-att { margin-top: 10px; }
.cm-att-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cm-att-btn { min-height: 44px; }
.cm-att-btn svg { width: 18px; height: 18px; }
.cm-att-help { flex: 1 1 220px; min-width: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-muted); }
.cm-att-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cm-att-head { margin-top: 10px; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-text-muted); }
.cm-att-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cm-att-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px;
  border: 1px solid var(--mp-card-border); border-radius: 12px; background: var(--cm-soft);
}
.cm-att-item.is-bad { border-color: var(--mp-red); background: var(--mp-red-light); }
.cm-att-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--mp-white); }
.cm-att-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 8px; background: var(--mp-white); color: var(--mp-text-muted);
}
.cm-att-ic svg { width: 24px; height: 24px; }
.cm-att-spin { display: inline-flex; animation: cm-att-spin 1s linear infinite; }
@keyframes cm-att-spin { to { transform: rotate(360deg); } }
.cm-att-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-att-name { font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-text-primary); overflow-wrap: anywhere; }
.cm-att-meta { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); overflow-wrap: anywhere; }
.cm-att-st { font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-blue); }
.cm-att-st.is-err { color: var(--mp-red-dark); }
.cm-att-x {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--mp-text-muted); cursor: pointer;
}
.cm-att-x:hover { background: var(--cm-soft-hover); color: var(--mp-text-primary); }
.cm-composer.cm-att-drop { outline: 3px dashed var(--mp-blue); outline-offset: 4px; }

/* ── Megjelenítés a bejegyzésen ── */
.cm-content.is-empty { display: none; }
.cm-md { display: grid; gap: 10px; margin-top: 12px; }
.cm-md-grid { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; }
.cm-md-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cm-md-grid--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cm-md-grid--3 .cm-md-img:first-child { grid-column: 1 / -1; }
.cm-md-grid--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cm-md-img {
  position: relative; display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: var(--cm-soft); cursor: zoom-in; overflow: hidden;
}
.cm-md-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-md-grid--1 .cm-md-img img { height: auto; max-height: 560px; object-fit: contain; background: var(--cm-soft); }
.cm-md-grid--2 .cm-md-img, .cm-md-grid--3 .cm-md-img, .cm-md-grid--4 .cm-md-img { aspect-ratio: 4 / 3; }
.cm-md-grid--3 .cm-md-img:first-child { aspect-ratio: 16 / 9; }
.cm-md-img:focus-visible { outline: 3px solid var(--mp-blue); outline-offset: -3px; }
.cm-md-img.is-missing::after, .cm-md-video.is-missing::after {
  content: 'A fájl most nem tölthető be'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); background: var(--cm-soft);
}
.cm-md-img[data-more]::after {
  content: attr(data-more);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--cm-md-shade); color: var(--mp-white); font-size: calc(26px * var(--mp-fs, 1)); font-weight: 700;
}
.cm-md-video { position: relative; }
.cm-md-video video { display: block; width: 100%; max-height: 520px; border-radius: 12px; background: var(--mp-text-primary); }
.cm-md-meta, .cm-md-doc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cm-md-meta { justify-content: space-between; margin-top: 6px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }
.cm-md-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--mp-card-border); border-radius: var(--mp-radius-pill); background: var(--mp-white);
  font: inherit; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-blue); cursor: pointer;
}
.cm-md-link:hover { background: var(--mp-blue-light); }
.cm-md-doc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px;
  border: 1px solid var(--mp-card-border); border-radius: 12px; background: var(--cm-soft);
}
.cm-md-doc-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 10px; background: var(--mp-white); color: var(--cm-md-word);
}
.cm-md-doc-ic.is-pdf { color: var(--cm-md-pdf); }
.cm-md-doc-ic.is-xls, .cm-md-doc-ic.is-xlsx, .cm-md-doc-ic.is-ods { color: var(--cm-md-sheet); }
.cm-md-doc-txt { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-md-doc-name { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-text-primary); overflow-wrap: anywhere; }
.cm-md-doc-meta { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }
@media (max-width: 480px) { .cm-md-doc-act { width: 100%; } .cm-md-doc-act .cm-md-link { flex: 1; justify-content: center; } }

/* ── Nagyító ── */
html.cm-md-noscroll { overflow: hidden; }
.cm-md-lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--cm-md-lb-bg); color: var(--mp-white);
}
.cm-md-lb[open] { display: flex; align-items: center; justify-content: center; }
.cm-md-lb::backdrop { background: var(--cm-md-lb-bg); }
.cm-md-lb-img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 8px; }
.cm-md-lb-btn {
  position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 48px; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--mp-radius-pill);
  background: var(--cm-md-lb-btn); color: var(--mp-white); font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600; cursor: pointer;
}
.cm-md-lb-btn:hover, .cm-md-lb-btn:focus-visible { background: var(--cm-md-lb-btn-hover); }
.cm-md-lb-btn:focus-visible { outline: 3px solid var(--mp-white); outline-offset: 2px; }
.cm-md-lb-close { top: 16px; right: 16px; }
.cm-md-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); padding: 0; }
.cm-md-lb-next { right: 12px; top: 50%; transform: translateY(-50%); padding: 0; }
.cm-md-lb-count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: var(--mp-radius-pill);
  background: var(--cm-md-lb-btn); color: var(--mp-white); font-size: calc(15px * var(--mp-fs, 1)); font-weight: 600;
}
.cm-md-lb-count:empty { display: none; }
@media (max-width: 600px) {
  .cm-md-lb-prev, .cm-md-lb-next { top: auto; bottom: 12px; transform: none; }
  .cm-md-lb-count { bottom: 18px; }
}