/*!
 * More Voices — gallery and like/share bar (stage 3)
 * (c) 2026 COPAGACLUB.ETH LLC. All rights reserved.
 * Uses the theme's own text color and font, so it fits light and dark themes.
 * Change the accent with --mv-accent on .mv-gallery / .mv-engage (e.g. in your theme).
 */
.mv-gallery, .mv-engage {
  --mv-accent: #E4572E;
  --mv-soft: color-mix(in srgb, currentColor 8%, transparent);
  --mv-line: color-mix(in srgb, currentColor 18%, transparent);
  --mv-muted: color-mix(in srgb, currentColor 65%, transparent);
}

/* ---------- gallery */
.mv-gallery { display: grid; gap: 20px; margin: 1.5em 0; }
.mv-gallery__filter, .mv-gallery__pages { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mv-gallery__pages { justify-content: center; color: var(--mv-muted); font-size: .92em; }
.mv-chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--mv-line);
  color: inherit; text-decoration: none; font-size: .92em; line-height: 1.4;
}
.mv-chip:hover { background: var(--mv-soft); }
.mv-chip[aria-current="page"] { background: var(--mv-accent); border-color: var(--mv-accent); color: #fff; }
.mv-gallery__grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(var(--mv-cols, 3), minmax(0, 1fr));
}
@media (max-width: 900px) { .mv-gallery__grid { grid-template-columns: repeat(min(var(--mv-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .mv-gallery__grid { grid-template-columns: minmax(0, 1fr); } }
.mv-card { margin: 0; padding: 0; min-width: 0; }
.mv-card__link { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.mv-card__media {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #23395B 0%, #0B1220 70%);
}
.mv-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.mv-card__play {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: var(--mv-accent); box-shadow: 0 4px 16px rgba(0,0,0,.35); transition: transform .2s ease;
}
.mv-card__play::before {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.mv-card__link:hover .mv-card__media img { transform: scale(1.04); }
.mv-card__link:hover .mv-card__play, .mv-card__link:focus-visible .mv-card__play { transform: scale(1.1); }
.mv-card__link:focus-visible { outline: 3px solid var(--mv-accent); outline-offset: 3px; border-radius: 12px; }
.mv-card__title { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.mv-card__meta { display: flex; gap: 12px; color: var(--mv-muted); font-size: .85em; font-variant-numeric: tabular-nums; }
.mv-gallery__empty { color: var(--mv-muted); }

/* ---------- like / comments / share bar */
.mv-engage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 24px; }
.mv-engage__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--mv-line); background: transparent; color: inherit; font: inherit; font-size: .92em;
  cursor: pointer; text-decoration: none; line-height: 1;
}
.mv-engage__btn:hover { background: var(--mv-soft); }
.mv-engage__btn:focus-visible, .mv-share__panel a:focus-visible, .mv-share__panel button:focus-visible { outline: 3px solid var(--mv-accent); outline-offset: 2px; }
.mv-engage__btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; }
.mv-engage__like[aria-pressed="true"] { color: var(--mv-accent); border-color: var(--mv-accent); }
.mv-engage__like[aria-pressed="true"] svg { fill: currentColor; }
.mv-engage__like[aria-pressed="true"] svg { animation: mv-pop .3s ease; }
@keyframes mv-pop { 50% { transform: scale(1.25); } }
.mv-engage__n { font-variant-numeric: tabular-nums; }
.mv-engage__views { margin-inline-start: auto; color: var(--mv-muted); font-size: .9em; }
/* 8.8: dislike, "You like this · name", the "why?" box and the invitation */
.mv-engage__dislike[aria-pressed="true"] { color: var(--mv-accent); border-color: var(--mv-accent); }
.mv-engage__dislike[aria-pressed="true"] svg { fill: currentColor; }
.mv-engage__me { flex-basis: 100%; color: var(--mv-muted); font-size: .88em; }
.mv-engage__ask { flex-basis: 100%; }
.mv-engage__why, .mv-engage__join { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--mv-line); border-radius: 12px; background: var(--mv-soft); max-width: 560px; }
.mv-engage__why label { display: grid; gap: 6px; font-size: .92em; }
.mv-engage__why textarea { font: inherit; color: inherit; background: transparent; border: 1px solid var(--mv-line); border-radius: 8px; padding: 8px 10px; resize: vertical; width: 100%; box-sizing: border-box; }
.mv-engage__why textarea:focus-visible { outline: 3px solid var(--mv-accent); outline-offset: 1px; }
.mv-engage__join p { margin: 0; font-size: .92em; }
.mv-engage__row { display: flex; flex-wrap: wrap; gap: 8px; }
.mv-engage__joinbtn { background: var(--mv-accent); border-color: var(--mv-accent); color: #fff; }
.mv-engage__joinbtn:hover { background: var(--mv-accent); filter: brightness(1.08); }
.mv-engage__status { flex-basis: 100%; min-height: 0; color: var(--mv-muted); font-size: .88em; }
.mv-engage__status:empty { display: none; }

.mv-share { position: relative; }
.mv-share__panel {
  position: absolute; z-index: 20; top: calc(100% + 6px); inset-inline-start: 0; min-width: 190px;
  background: #fff; color: #13233A; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px;
}
.mv-share__panel[hidden] { display: none; }
.mv-share__panel ul { list-style: none; margin: 0; padding: 0; }
.mv-share__panel li { margin: 0; }
.mv-share__panel a, .mv-share__panel button {
  display: block; width: 100%; text-align: start; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; font-size: .92em; text-decoration: none; cursor: pointer;
}
.mv-share__panel a:hover, .mv-share__panel button:hover { background: #F1F4F8; }

@media (prefers-reduced-motion: reduce) {
  .mv-card__media img, .mv-card__play { transition: none; }
  .mv-engage__like[aria-pressed="true"] svg, .mv-engage__dislike[aria-pressed="true"] svg { animation: none; }
}

/* 9.9: protected videos — a label on the gallery card, and a line where [morevoices id] would show the player */
.mv-card__media { position: relative; }
.mv-card__lock { position: absolute; left: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(11, 18, 32, .82); color: #fff; font-size: .8em; font-weight: 700; }
.mv-card__lock::before { content: ""; width: 10px; height: 12px; border-radius: 2px; background: currentColor; box-shadow: inset 0 -5px 0 0 currentColor; clip-path: polygon(0 45%, 15% 45%, 15% 25%, 30% 5%, 70% 5%, 85% 25%, 85% 45%, 100% 45%, 100% 100%, 0 100%); }
.mv-locked { padding: 12px 14px; border: 1px dashed currentColor; border-radius: 12px; opacity: .9; }

/* 9.9.2: member pages — their videos, the website's videos, and their card with the contact form */
.mv-member { display: grid; gap: 28px; max-width: 1100px; margin: 0 auto; }
.mv-member__name { margin: 0; }
.mv-member__about { margin: .4em 0 0; max-width: 65ch; opacity: .85; }
.mv-member section > h2, .mv-member__form h2 { margin: 0 0 .5em; font-size: 1.25em; }
.mv-member__card { display: grid; gap: 6px; padding: 18px; border: 1px solid rgba(127, 127, 127, .35); border-radius: 16px; }
.mv-member__card p { margin: 0; overflow-wrap: anywhere; }
.mv-member__cardname { font-weight: 700; font-size: 1.1em; }
.mv-member__form { display: grid; gap: 10px; margin-top: 12px; max-width: 560px; }
.mv-member__form label { display: grid; gap: 4px; font-size: .92em; }
.mv-member__form input, .mv-member__form textarea { font: inherit; padding: 9px 12px; border: 1px solid rgba(127, 127, 127, .5); border-radius: 10px; width: 100%; min-width: 0; box-sizing: border-box; }
.mv-member__form button { justify-self: start; font: inherit; font-weight: 700; padding: 9px 20px; border-radius: 999px; border: 0; background: #E4572E; color: #fff; cursor: pointer; }
.mv-member__msg { padding: 10px 12px; border-radius: 10px; background: rgba(228, 87, 46, .12); font-weight: 600; }
.mv-member__trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.mv-member__wa { display: inline-block; font-weight: 700; padding: 8px 18px; border-radius: 999px; background: #1F8F4E; color: #fff !important; text-decoration: none; }
.mv-member__wa:hover, .mv-member__wa:focus-visible { background: #17733E; }


/* 9.9.30: the featured video, big across the whole gallery */
.mv-card--featured { grid-column: 1 / -1; }
.mv-card--featured .mv-card__media { max-height: 70vh; }
.mv-card--featured .mv-card__title { font-size: 1.35em; }