/* Markets: What Backs Every aUSD (black band, both themes) */

.s-markets {
  --mk-line: var(--band-line);
  background: var(--band);
  color: var(--band-ink);
  padding: 140px 30px;
}

/* band stays black in dark theme too (band tokens are theme-invariant);
   no html.dark overrides needed */

.s-markets .mk-container {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* head */

.s-markets .mk-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.s-markets .mk-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

/* production hides the MARKETS tag label in this section variant, but the
   zero-height slot still creates the 20px flex gap above the H2 */
.s-markets .mk-kicker {
  display: block;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* the See All Markets button is display:none in production at this variant;
   its empty wrapper still creates the 24px flex gap above the tabs */
.s-markets .mk-see-all {
  display: block;
  height: 0;
  overflow: hidden;
}

.s-markets h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.2;
  color: var(--band-ink);
  margin: 0;
  width: 100%;
}

/* tabs */

.s-markets .mk-tabs {
  width: 100%;
}

.s-markets .mk-controller {
  display: flex;
  width: 100%;
}

.s-markets .mk-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid var(--mk-line);
  background: transparent;
  cursor: pointer;
}

.s-markets .mk-wm {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  opacity: 0.3;
}

.s-markets .mk-wm img {
  height: 20px;
  width: auto;
  display: block;
}

.s-markets .mk-tab.is-active .mk-wm {
  opacity: 1;
}

/* 2px white bar under the active tab */
.s-markets .mk-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--band-ink);
  z-index: 1;
}

/* hover: white fill, wordmark flips to black (instant state swap) */
@media (hover: hover) {
  .s-markets .mk-tab:not(.is-active):hover {
    background: var(--band-ink);
  }
  .s-markets .mk-tab:not(.is-active):hover .mk-wm {
    opacity: 1;
    filter: invert(1);
  }
}

/* panel */

.s-markets .mk-panel {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mk-line);
}

.s-markets .mk-panel[hidden] {
  display: none;
}

/* left artwork */

.s-markets .mk-art {
  position: relative;
  flex: none;
  width: 450px;
  aspect-ratio: 450 / 520;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-markets .mk-art-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.s-markets .mk-art-wm {
  position: relative;
  width: 66%;
  aspect-ratio: 4.91667 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-markets .mk-art-wm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.s-markets .mk-art-wm.is-hidden {
  visibility: hidden;
}

/* middle statement + stat */

.s-markets .mk-mid {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  border-right: 1px solid var(--mk-line);
}

.s-markets h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  color: var(--band-ink);
  margin: 0;
}

.s-markets .mk-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.s-markets .mk-stat {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.2;
  color: var(--band-ink);
  white-space: pre;
}

.s-markets .mk-stat-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--band-ink);
  margin: 0;
}

/* right info card */

.s-markets .mk-review {
  flex: 1 1 0;
  min-width: 0;
  max-width: 303px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 30px;
}

/* production reserves this 120px slot but paints nothing in it; keeping the
   box (hidden, not removed) is what pins the card body to the bottom edge */
.s-markets .mk-review-img {
  display: block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  visibility: hidden;
}

.s-markets .mk-review-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.s-markets .mk-review-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.s-markets .mk-copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--band-ink);
  margin: 0;
}

.s-markets .mk-asset {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.s-markets .mk-asset-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--band-ink);
  margin: 0;
}

.s-markets .mk-asset-meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--band-ink);
  opacity: 0.7;
  margin: 0;
}

/* tablet */

@media (max-width: 1439px) {
  .s-markets {
    padding: 100px 30px;
  }
  .s-markets .mk-container {
    gap: 50px;
  }
  .s-markets h2 {
    font-size: 38px;
  }
  .s-markets h3 {
    font-size: 30px;
  }
  .s-markets .mk-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(50px, 1fr));
    align-items: start;
  }
  .s-markets .mk-art {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 2.02105 / 1;
  }
  .s-markets .mk-mid {
    justify-content: center;
    gap: 36px;
    height: 100%;
  }
  .s-markets .mk-review {
    max-width: none;
    height: 100%;
    gap: 24px;
  }
  .s-markets .mk-review-img {
    width: 62px;
    height: 62px;
  }
  .s-markets .mk-review-body {
    gap: 24px;
  }
}

/* phone */

@media (max-width: 767px) {
  .s-markets {
    padding: 80px 20px;
  }
  .s-markets .mk-container {
    gap: 40px;
  }
  .s-markets h2 {
    font-size: 26px;
  }
  .s-markets h3 {
    font-size: 24px;
  }
  .s-markets .mk-controller {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(50px, 1fr));
  }
  .s-markets .mk-panel {
    display: grid;
    grid-template-columns: repeat(1, minmax(50px, 1fr));
    /* production phone slices show a 24px black gap between the tab grid
       and the panel */
    margin-top: 24px;
  }
  .s-markets .mk-art {
    /* measured from production 390 slices: 350 x 295 artwork */
    aspect-ratio: 350 / 295;
  }
  .s-markets .mk-mid {
    padding: 20px;
    justify-content: center;
    gap: 24px;
    height: auto;
    border-right: 0;
  }
  .s-markets .mk-review {
    padding: 20px;
    gap: 24px;
    height: auto;
    border-top: 1px solid var(--mk-line);
  }
  .s-markets .mk-review-body {
    gap: 16px;
  }
}