/* Nigun card — ported from the provided design package
   (karlin_nigun_react_component/components/NigunCard.css), adapted to the
   site's vanilla components and to the floating-card (modal) behavior.
   Sizes reduced ~30% from the reference so the tab content (especially the
   discussion) gets most of the vertical space. */

.nigunCard {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ===== hero ===== */
.nigunHero {
  display: grid;
  grid-template-columns: minmax(150px, 22%) 1fr;
  gap: 16px;
  padding: 12px 18px 10px;
  flex-shrink: 0;
}

.archiveVisual {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.archiveVisual img {
  display: block; width: 100%; height: 100%;
  min-height: 150px; max-height: 215px;
  object-fit: cover;
}

.nigunMain { min-width: 0; display: flex; flex-direction: column; }

.ornament {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--accent); margin-bottom: 1px;
}
.ornament span { height: 1px; width: 58px; background: var(--accent-soft); }
.ornament b { font-size: 10px; font-weight: 400; }

.nigunMain h1 {
  color: var(--primary);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.12;
  margin: 1px 0 2px;
  text-align: center;
}
.nigunMain .subtitle {
  color: #A17B45; text-align: center;
  font-size: clamp(12px, 1.2vw, 14px); margin: 0 0 7px;
}

.tagRow {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 9px;
}
.tagRow .tagChip {
  padding: 3px 11px; border: 1px solid var(--accent-soft);
  border-radius: 999px; background: #FCF7EF;
  color: var(--primary); font-size: 11.5px; text-decoration: none;
}
a.tagChip:hover { border-color: var(--accent); }

/* main player */
.mainPlayer {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px;
  align-items: center; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 13px; background: #FFFEFA;
}
.mainPlay {
  border: none; background: var(--primary); color: #fff;
  border-radius: 999px; width: 40px; height: 40px;
  display: inline-grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 0 0 2px #EAD0A6;
}
.mainPlay svg { width: 16px; height: 16px; fill: currentColor; }
.rowPlay svg { width: 14px; height: 14px; fill: currentColor; }
.shareButton svg { width: 15px; height: 15px; fill: currentColor; }
.playerCenter { min-width: 0; }
.waveform {
  height: 25px; display: flex; align-items: flex-end; gap: 2px;
  direction: ltr; overflow: hidden; opacity: .8; margin-bottom: 3px;
}
.waveform i {
  flex: 1 0 2px; max-width: 3px; min-width: 1px;
  border-radius: 3px; background: #8097B4;
  transform: scaleY(.7); transform-origin: bottom;
}
.waveform i.played { background: var(--accent); }
.mainPlayer .progress-line {
  height: 10px; display: flex; align-items: center; cursor: pointer;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) center / 100% 3px no-repeat;
  border-radius: 99px;
}
.mainPlayer .progress-line .fill {
  height: 3px; border-radius: 99px; background: var(--primary);
  transition: width .2s linear;
}
.timeRow {
  display: flex; justify-content: space-between; direction: ltr;
  color: var(--text-muted); font-size: 10px; margin-top: 2px;
}

/* meta strip */
.metaStrip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 9px; border-top: 1px solid #EEE3D2; border-bottom: 1px solid #EEE3D2;
}
.metaItem { display: flex; align-items: center; gap: 8px; padding: 6px 9px; min-width: 0; }
.metaItem:not(:last-child) { border-left: 1px solid #EEE3D2; }
.metaIcon {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent); border: 1px solid var(--accent-soft);
}
.metaIcon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.metaItem small { display: block; color: var(--text-muted); margin-bottom: 1px; font-size: 10px; }
.metaItem strong {
  display: block; color: var(--primary); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== tabs ===== */
.nigunCard .tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  width: calc(100% - 36px); margin: 0 auto; flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 11px 11px 0 0; overflow: hidden;
}
.nigunCard .tabs button {
  border: 0; background: #FFFAF2; color: var(--primary);
  min-height: 36px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.nigunCard .tabs button + button { border-right: 1px solid var(--border-strong); }
.nigunCard .tabs button.active { background: var(--primary); color: #fff; }
.nigunCard .tabs .count {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  margin-inline-start: 6px; padding: 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .15); font-size: 11px;
}
.nigunCard .tabs button:not(.active) .count { background: #EFE4D4; color: var(--primary); }

.tabPanel {
  width: calc(100% - 36px); margin: 0 auto 14px;
  border: 1px solid var(--border-strong); border-top: 0;
  border-radius: 0 0 14px 14px; background: #FFFEFA; padding: 13px 15px;
  flex: 1; min-height: 140px; overflow-y: auto;
}
.tabPanel[hidden] { display: none; }

.panelTitle { margin-bottom: 10px; }
.panelTitle h2 {
  color: var(--primary); font-family: var(--font-display);
  font-size: 17px; margin: 0 0 1px;
}
.panelTitle p { margin: 0; color: var(--text-muted); font-size: 11.5px; }

/* ===== versions ===== */
.versionList { display: grid; gap: 7px; }
.versionRow2 {
  width: 100%; display: grid; grid-template-columns: 62px 1fr 115px 34px;
  align-items: center; gap: 10px; text-align: right;
  padding: 7px 11px; border: 1px solid #EADFCE; border-radius: 10px;
  background: #FFFDFA; color: inherit; cursor: pointer;
  font: inherit;
}
.versionRow2:hover { border-color: #D8BF97; }
.versionRow2.selected {
  border-color: var(--primary); background: #F6F8FB;
  box-shadow: inset 3px 0 0 var(--primary);
}
.versionNumber { color: var(--primary); font-weight: 700; font-size: 12px; }
.versionText { min-width: 0; }
.versionText strong {
  display: block; color: var(--primary); font-size: 13px; margin-bottom: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.versionText small { display: block; color: var(--text-muted); line-height: 1.4; font-size: 11.5px; }
.versionYear { color: var(--primary); font-weight: 700; font-size: 12px; }
.versionYear em {
  display: block; color: #9A7643; font-size: 10px;
  font-style: normal; font-weight: 500; margin-top: 1px;
}
.rowPlay {
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--primary); border: 1px solid var(--primary);
}
.versionRow2.selected .rowPlay { background: var(--primary); color: #fff; }
.rowDownload {
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border-strong); color: var(--text-muted);
  font-size: 13px; text-decoration: none;
}

/* ===== discussion ===== */
.discussionSummary {
  border: 1px solid #DEC69E; background: #FCF7EF;
  border-radius: 11px; padding: 10px 13px; margin-bottom: 11px;
}
.summaryLabel {
  display: inline-block; color: #936B36; font-size: 11px;
  font-weight: 700; margin-bottom: 4px;
}
.discussionSummary p { margin: 0; line-height: 1.65; font-size: 13px; }

.messages { display: grid; gap: 8px; }
.messageCard {
  border: 1px solid #EADFCE; border-radius: 11px;
  padding: 9px 12px; background: #fff;
}
.messageCard header { display: flex; align-items: center; gap: 8px; }
.messageCard .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--accent-soft);
  color: var(--primary); display: grid; place-items: center; font-weight: 800;
  font-size: 12px; flex-shrink: 0;
}
.messageCard header strong { display: block; color: var(--primary); font-size: 12.5px; }
.messageCard header time { display: block; color: var(--text-muted); font-size: 10.5px; margin-top: 0; }
.messageCard p { line-height: 1.65; margin: 6px 0 0; font-size: 13px; }
.messageCard audio { width: 100%; margin-top: 7px; height: 36px; }
.messageCard .m-image {
  max-height: 130px; border-radius: 8px; margin-top: 7px; display: block;
}
.messageCard .attachment {
  margin-top: 7px; padding: 7px 10px; border-radius: 8px;
  background: var(--surface-2); color: var(--primary); font-size: 12px;
  display: block; text-decoration: none;
}
.messageCard .attachment:hover { background: var(--accent-soft); }

/* archival material inside the versions tab */
.archiveStrip { margin-top: 13px; }
.archiveStrip h3 { color: var(--primary); font-size: 13.5px; margin-bottom: 6px; }

/* ===== footer ===== */
.cardFooter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 18px 12px; flex-shrink: 0;
}
.shareButton {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--primary); border-radius: 999px;
  background: #fff; color: var(--primary);
  padding: 5px 13px; font-weight: 700; cursor: pointer; font-size: 12px;
}
.shareButton:hover { background: var(--primary-soft); }
.currentVersion {
  color: var(--text-muted); font-size: 11.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== standalone page (not in a modal): the page scrolls normally ===== */
.nigun-page .nigunCard { max-width: 860px; margin: 14px auto; }
.nigun-page .tabPanel { overflow: visible; }

/* ===== responsive ===== */
@media (max-width: 820px) {
  .nigunHero { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .archiveVisual img { min-height: 130px; max-height: 170px; }
  .nigunMain h1 { font-size: clamp(22px, 7vw, 30px); }
  .metaStrip { grid-template-columns: 1fr 1fr; }
  .metaItem:last-child { grid-column: 1 / -1; border-top: 1px solid #EEE3D2; }
  .metaItem:nth-child(2) { border-left: none; }
  .nigunCard .tabs, .tabPanel { width: calc(100% - 20px); }
  .tabPanel { padding: 11px; }
  .versionRow2 { grid-template-columns: 1fr 36px; gap: 4px 10px; }
  .versionNumber { grid-column: 1; grid-row: 1; }
  .rowPlay, .rowDownload { grid-column: 2; grid-row: 1 / span 3; }
  .versionText { grid-column: 1; }
  .versionText strong { white-space: normal; }
  .versionYear { grid-column: 1; font-size: 11.5px; }
  .cardFooter { padding: 0 12px 11px; }
}
@media (max-width: 520px) {
  .archiveVisual { display: none; }
  .mainPlayer { grid-template-columns: 38px 1fr; padding: 8px 10px; }
  .mainPlay { width: 36px; height: 36px; }
  .metaStrip { display: block; }
  .metaItem, .metaItem:not(:last-child), .metaItem:last-child { border-left: none; border-top: 1px solid #EEE3D2; }
  .metaItem:first-child { border-top: none; }
  .nigunCard .tabs button { min-height: 36px; font-size: 13px; }
  .panelTitle h2 { font-size: 16px; }
}