/* ============================================================
   MEDAL WALL (section 2)
   A full-screen wall of Medallions with four ways to look at them:
   Grid, Faces, Index and Search. Behaviour lives in js/medal-wall.js.
   ============================================================ */

.mwall {
  --mwall-bar: 40px;                 /* height of the bar buttons */
  --mwall-gap: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 560px;
  padding-top: var(--nav-height);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
  isolation: isolate;
}

.mwall__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Bar ---------- */
.mwall__bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--mwall-gap);
  padding: 14px var(--container-gutter);
  border-bottom: 1px solid var(--color-line);
}
.mwall__bar-end {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.mwall__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--mwall-bar);
  padding: 0 16px;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.mwall__btn:hover,
.mwall__btn[aria-pressed="true"],
.mwall__btn[aria-expanded="true"] {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.mwall__btn:focus-visible,
.mwall__sort:focus-visible,
.mwall__face:focus-visible,
.mwall__row:focus-visible,
.mwall__search-input:focus-visible {
  outline: 1px solid var(--color-brand);
  outline-offset: 2px;
}

.mwall__tabs { display: flex; }
.mwall__tabs .mwall__btn + .mwall__btn { margin-left: -1px; }   /* shared borders, like one strip */
.mwall__tabs .mwall__btn { min-width: 5.5rem; }

/* Changing the finish: the wall fades out, refills, and fades back in */
.mwall__wall { transition: opacity 0.26s ease, filter 0.26s ease; }
.mwall__wall.is-swapping { opacity: 0; filter: blur(4px); }

.mwall__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s;
}

/* Search field takes the title's place while the Search view is open */
.mwall__search {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  width: min(100%, 300px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out), visibility 0s 0.4s;
}
.mwall__search.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s, transform 0.4s var(--ease-out), visibility 0s;
}
.mwall[data-view="search"] .mwall__title { opacity: 0; }

.mwall__search-input {
  flex: 1;
  min-width: 0;
  height: var(--mwall-bar);
  padding: 0 8px;
  border: 1px solid var(--color-line);
  border-right: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}
.mwall__search-input::placeholder { color: var(--color-muted); font-style: italic; }
.mwall__search-input::-webkit-search-cancel-button { display: none; }
.mwall__search-close {
  width: var(--mwall-bar);
  height: var(--mwall-bar);
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.mwall__search-close:hover { background: var(--color-text); color: var(--color-bg); }

/* ---------- Panes ---------- */
.mwall__stage { position: relative; flex: 1; min-height: 0; }

.mwall__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
.mwall__pane.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s, visibility 0s;
}
.mwall__pane--faces,
.mwall__pane--index,
.mwall__pane--search {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-line) transparent;
}

/* ---------- Grid: the endless wall ---------- */
/* Arrows at either edge, over a fade into the black, to say the wall goes on sideways.
   They nudge in and out until the wall has been moved once. */
.mwall__pane--grid::before,
.mwall__pane--grid::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: clamp(48px, 7vw, 120px);
  pointer-events: none;
}
.mwall__pane--grid::before { left: 0;  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85), transparent); }
.mwall__pane--grid::after  { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0.85), transparent); }
.mwall__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  --cut: 14px;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  padding: 0;
  border: 14px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M14.3 .5H15.7L29.5 14.3V15.7L15.7 29.5H14.3L.5 15.7V14.3Z' fill='none' stroke='%23fff4e4' stroke-opacity='.82'/%3E%3C/svg%3E") 14;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background: rgba(20, 2, 3, 0.18);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fff4e4;
  cursor: pointer;
  transition: background-color 0.5s var(--ease-btn), color 0.5s var(--ease-btn), transform 0.2s var(--ease-btn);
}
.mwall__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.5s var(--ease-btn); }
.mwall__arrow--prev { left: clamp(12px, 2vw, 32px); }
.mwall__arrow--next { right: clamp(12px, 2vw, 32px); }
.mwall__arrow:hover { background: #fff4e4; color: var(--ox-deep, #3e0a0e); }
.mwall__arrow--prev:hover svg { translate: -3px 0; }
.mwall__arrow--next:hover svg { translate: 3px 0; }
.mwall__arrow:active { transform: scale(0.97); }
.mwall:not(.is-panned) .mwall__arrow--prev svg { animation: mwall-nudge-l 1.8s ease-in-out infinite; }
.mwall:not(.is-panned) .mwall__arrow--next svg { animation: mwall-nudge-r 1.8s ease-in-out infinite; }
@keyframes mwall-nudge-l { 0%, 100% { translate: 0 0; } 50% { translate: -4px 0; } }
@keyframes mwall-nudge-r { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) {
  .mwall__arrow svg { animation: none !important; }
}

.mwall__wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.mwall__wall.is-dragging { cursor: grabbing; }

.mwall__tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--medal);
  height: var(--medal);
  padding: 0;
  border: 0;
  background: none;
  cursor: inherit;
  will-change: transform;
}
/* Each Medallion lies in its own oxblood velvet slot, like the lining of the box in the hero.
   The slot is part of the tile layer, so it is painted once and only moved after that. */
.mwall__tile::before {
  content: '';
  position: absolute;
  top: calc(var(--medal) * -0.16);
  right: calc(var(--medal) * -0.16);
  bottom: calc(var(--medal) * -0.48);              /* room under the Medallion for its name and price */
  left: calc(var(--medal) * -0.16);
  border-radius: 4px;
  background:
    var(--velvet),
    /* the round seat pressed into the velvet, where the Medallion lies */
    radial-gradient(circle at 50% 38.5%, rgba(6, 0, 0, 0.66) calc(var(--medal) * 0.4), rgba(6, 0, 0, 0.42) calc(var(--medal) * 0.52),
      rgba(255, 176, 166, 0.09) calc(var(--medal) * 0.535), rgba(255, 176, 166, 0) calc(var(--medal) * 0.57)),
    /* a soft sheen across the top of the velvet */
    linear-gradient(180deg, rgba(255, 196, 186, 0.07), rgba(255, 196, 186, 0) 32%),
    /* velvet: lit from above, falling off to the edges */
    radial-gradient(78% 64% at 50% 34%, #761517, #4b090a 55%, #260203 100%);
  box-shadow:
    inset 0 12px 16px -6px rgba(0, 0, 0, 0.75),      /* the case lip shading the velvet; no outline */
    inset 0 -1px 0 rgba(255, 190, 186, 0.08);
  pointer-events: none;
}
.mwall__tile-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.7)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.65));   /* resting in the seat */
  transition: transform 0.5s var(--ease-out);
}
.mwall__tile-label {
  position: absolute;
  top: calc(100% + var(--medal) * 0.07);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--color-text);
  pointer-events: none;
}
.mwall__tile-label .mwall__tile-meta {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* The price: gold, on its own line in a solid pill that sits over the foot of the slot, like a tag */
.mwall__tile-label .mwall__tile-price {
  margin-top: 5px;
  padding: 5px 13px 4px;
  border: 1px solid rgba(230, 200, 145, 0.6);
  border-radius: 999px;
  background: #2a0607;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-size: clamp(16px, calc(var(--medal) * 0.18), 20px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ecd09a;
}
.mwall__face-no,
.mwall__preview-cap span,
.mdetail__no {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
@media (hover: hover) {
  .mwall__wall:not(.is-dragging) .mwall__tile:hover { z-index: 1; }
  .mwall__wall:not(.is-dragging) .mwall__tile:hover .mwall__tile-img { transform: translateY(-4%) scale(1.08); }
}


/* ---------- Faces + Search results ---------- */
.mwall__faces {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 40px 24px;
  margin: 0;
  padding: 40px var(--container-gutter) 64px;
  list-style: none;
}
.mwall__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
}
.mwall__face-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s var(--ease-out);
}
.mwall__face-name {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.15;
}
@media (hover: hover) {
  .mwall__face:hover .mwall__face-img { transform: translateY(-4px) scale(1.06); }
}

/* Faces come in one after another each time the view opens */
.mwall__pane.is-active .mwall__faces li { animation: mwall-rise 0.7s var(--ease-out) both; animation-delay: calc(var(--i) * 25ms); }
@keyframes mwall-rise {
  from { opacity: 0; transform: translateY(14px); }
}

.mwall__empty {
  margin: 0;
  padding: 18vh var(--container-gutter) 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-style: italic;
  text-align: center;
  color: var(--color-muted);
}

/* ---------- Index ---------- */
.mwall__index {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
  gap: 0 clamp(24px, 4vw, 64px);
  padding: 0 var(--container-gutter);
}
.mwall__head,
.mwall__row {
  display: grid;
  grid-template-columns: 56px minmax(140px, 1.1fr) minmax(0, 2fr) 140px 100px;
  gap: 16px;
  align-items: baseline;
  width: 100%;
}
.mwall__head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.mwall__sort {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.mwall__sort:hover,
.mwall__sort.is-sorted { color: var(--color-text); }
.mwall__sort.is-sorted::after { content: ' \2193'; }
.mwall__sort.is-sorted.is-desc::after { content: ' \2191'; }

.mwall__rows { margin: 0 0 64px; padding: 0; list-style: none; }
.mwall__row {
  padding: 11px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.3s;
}
.mwall__row > span:first-child { font-family: var(--font-ui); font-size: 11px; color: var(--color-muted); }
.mwall__row-act { color: var(--color-muted); font-style: italic; }
.mwall__head .mwall__row-act { font-style: normal; }
/* Rows you are not pointing at step back */
@media (hover: hover) {
  .mwall__rows:hover .mwall__row:not(:hover) { opacity: 0.3; }
}

.mwall__preview {
  position: sticky;
  top: 0;
  align-self: start;
  margin: 0;
  padding-top: 40px;
  text-align: center;
}
.mwall__preview-img {
  display: block;
  width: min(100%, 52vh);
  aspect-ratio: 1;
  margin: 0 auto 16px;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.7));
}
.mwall__preview-cap { font-family: var(--font-display); font-size: 20px; }

/* ---------- Detail view ---------- */
.mdetail {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--nav-height) var(--container-gutter);
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  transition: opacity 0.5s;
}
.mdetail[hidden] { display: none; }
.mdetail.is-open { opacity: 1; }
@supports (backdrop-filter: blur(1px)) {
  .mdetail { background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}

.mdetail__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 360px);
  align-items: center;
  gap: clamp(32px, 6vw, 112px);
  transform: translateY(24px);
  transition: transform 0.7s var(--ease-out);
}
.mdetail.is-open .mdetail__inner { transform: none; }

.mdetail__coin {
  position: relative;
  width: min(66vh, 44vw);
  aspect-ratio: 1;
  perspective: 1100px;
}
/* A soft light that follows the pointer behind the coin */
.mdetail__coin::before {
  content: '';
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(201, 164, 106, 0.16), transparent 58%);
  transition: background-position 0.3s;
}
.mdetail__coin-img {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease-out);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.75));
}
.mdetail__coin:hover .mdetail__coin-img { transition-duration: 0.15s; }

.mdetail__no { margin: 0 0 14px; }
.mdetail__name {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(40px, 4.6vw, 72px);
  font-weight: 400;
  line-height: 0.95;
}
.mdetail__act {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-style: italic;
  line-height: 1.3;
  color: var(--color-muted);
}
.mdetail__meta {
  margin: 28px 0 0;
  border-top: 1px solid var(--color-line);
}
.mdetail__meta div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-line);
}
.mdetail__meta dt {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.mdetail__meta dd { margin: 0; font-family: var(--font-display); font-size: 16px; }
.mdetail__nav { display: flex; gap: 8px; margin-top: 28px; }
.mdetail__close { position: absolute; top: 16px; right: var(--container-gutter); }

/* Stepping between Medallions */
.mdetail.is-swapping .mdetail__coin-img { animation: mdetail-coin 0.6s var(--ease-out); }
.mdetail.is-swapping .mdetail__info > * { animation: mdetail-text 0.5s var(--ease-out) both; }
.mdetail.is-swapping .mdetail__info > :nth-child(2) { animation-delay: 40ms; }
.mdetail.is-swapping .mdetail__info > :nth-child(3) { animation-delay: 80ms; }
.mdetail.is-swapping .mdetail__info > :nth-child(4) { animation-delay: 120ms; }
@keyframes mdetail-coin {
  from { opacity: 0; scale: 0.94; }
}
@keyframes mdetail-text {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1080px) {
  .mwall__faces { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mwall__head,
  .mwall__row { grid-template-columns: 48px minmax(130px, 1fr) minmax(0, 1.6fr) 130px; }
  .mwall__head > :last-child,
  .mwall__row > :last-child { display: none; }
}

@media (max-width: 768px) {
  .mwall { min-height: 520px; }
  .mwall__bar {
    grid-template-columns: auto 1fr;
    row-gap: 10px;
    padding-block: 12px;
  }
  .mwall__bar-end { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .mwall[data-view="search"] .mwall__bar-end { min-height: var(--mwall-bar); }
  .mwall__search { inset: 0; width: 100%; }
  .mwall__tabs { grid-column: 1 / -1; justify-content: center; }
  .mwall__btn { padding: 0 8px; font-size: 11px; }
  .mwall__tabs .mwall__btn { min-width: 0; flex: 1; }

  .mwall__faces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; padding-top: 28px; }
  .mwall__face-name { font-size: 14px; }

  .mwall__index { grid-template-columns: 1fr; }
  .mwall__preview { display: none; }
  .mwall__head,
  .mwall__row { grid-template-columns: 36px minmax(0, 1fr) 112px; gap: 10px; }
  .mwall__head > .mwall__row-act,
  .mwall__row > .mwall__row-act { display: none; }

  .mdetail { align-items: start; overflow-y: auto; padding-top: 64px; }
  .mdetail__inner { grid-template-columns: 1fr; justify-items: center; gap: 24px; }
  .mdetail__coin { width: min(78vw, 46vh); }
  .mdetail__info { width: 100%; }
  .mdetail__nav { justify-content: space-between; padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .mwall__pane,
  .mwall__pane.is-active .mwall__faces li,
  .mdetail,
  .mdetail__inner,
  .mdetail.is-swapping * { transition: none !important; animation: none !important; }
}