/* PMG — Markets page (templates/markets.php). */

@keyframes pmgSpinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pmgSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

/* Hero: one column on small screens, two from 900px. */
.pmg-mk-hero__grid { grid-template-columns: minmax(0, 1fr); }
.pmg-mk-hero__title { font-size: clamp(46px, 9vw, 104px); }
@media (min-width: 900px) {
	.pmg-mk-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
	.pmg-mk-hero__title { font-size: clamp(44px, 5vw, 96px); }
}

.pmg-mk-globe svg { display: block; overflow: visible; }
.pmg-mk-globe .pmg-mk-node, .pmg-mk-globe .pmg-mk-hit { cursor: pointer; }

/* Market rail: scrolls sideways below 700px, five equal tiles above. */
.pmg-mk-rail { grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; overflow-y: hidden; }
.pmg-mk-rail::-webkit-scrollbar { display: none; }
@media (min-width: 700px) {
	.pmg-mk-rail { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}
.pmg-mk-tile { position: relative; text-align: left; background: transparent; border: 0; border-left: 1px solid rgba(255, 255, 255, .09); border-radius: 0; cursor: pointer; font: inherit; color: #fff; padding: 20px clamp(12px, 1.3vw, 22px); min-width: 0; scroll-snap-align: start; transition: background .35s; }
.pmg-site .pmg-mk-tile::before { inset: 0; }
.pmg-mk-tile.is-on { background: rgba(248, 57, 0, .1); }
@media (hover: hover) { .pmg-mk-tile:not(.is-on):hover { background: rgba(255, 255, 255, .04); } }
.pmg-mk-tile__bar { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: #F83900; box-shadow: 0 0 14px rgba(248, 57, 0, .8); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pmg-mk-tile.is-on .pmg-mk-tile__bar { transform: none; }
.pmg-mk-tile__rank { font-size: 11px; letter-spacing: .14em; color: #AEA7A6; transition: color .3s; }
.pmg-mk-tile__share { font-family: 'Clash Display', sans-serif; font-size: 15px; font-weight: 500; color: #F3E3E1; transition: color .3s; }
.pmg-mk-tile__code { display: block; font-family: 'Clash Display', sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; margin-top: 8px; line-height: 1; color: #AEA7A6; transition: color .3s; }
.pmg-mk-tile.is-on .pmg-mk-tile__rank, .pmg-mk-tile.is-on .pmg-mk-tile__share { color: #F83900; }
.pmg-mk-tile.is-on .pmg-mk-tile__code { color: #fff; }
.pmg-site .pmg-mk-tile:focus-visible { outline-offset: -2px; }

/* Selected market detail. */
.pmg-mk-detail.is-swap > * { animation: pmgFade .45s cubic-bezier(.2, .7, .2, 1) both; }
.pmg-mk-detail.is-swap > :nth-child(2) { animation-delay: .06s; }
.pmg-mk-tag { font-size: 13px; border: 1px solid rgba(255, 255, 255, .16); padding: 8px 14px; border-radius: 999px; color: #AEA7A6; }
.pmg-mk-stat { font-family: 'Clash Display', sans-serif; font-size: clamp(30px, 3.4vw, 52px); font-weight: 500; letter-spacing: -.04em; line-height: .9; color: #fff; }
.pmg-mk-stat.is-key { color: #F83900; }
.pmg-mk-stat__label { font-size: 12px; color: #AEA7A6; margin-top: 10px; line-height: 1.4; }

/* Channel mix: scrolls sideways in its own box on narrow screens, never vertically. */
.pmg-mk-mix { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.pmg-mk-mix:focus-visible { outline: 2px solid #F83900; outline-offset: 4px; }
.pmg-mk-mix__row { display: grid; min-width: 520px; grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 24px); }

/* Seasonality. */
.pmg-mk-chip { font: inherit; font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #F3E3E1; transition: color .3s, background .3s, border-color .3s, box-shadow .3s, transform .3s, opacity .3s; }
.pmg-mk-chip.is-on { border-color: #F83900; background: #F83900; color: #000; }
@media (hover: hover) { .pmg-mk-chip:not(.is-on):hover { border-color: rgba(248, 57, 0, .6); color: #fff; } }
.pmg-mk-curve { transition: opacity .4s; }
.pmg-mk-curve.is-off { opacity: 0; }
.pmg-mk-peak { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; pointer-events: none; }
.pmg-mk-peak::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid #F83900; }
.pmg-mk-month { text-align: center; color: #AEA7A6; transition: color .3s; }
.pmg-mk-month.is-peak { color: #F83900; }

/* CTA on orange: keep the label white and the focus ring visible. */
.pmg-site .pmg-mk-cta:hover { color: #fff; }
.pmg-site .pmg-mk-cta:focus-visible { outline-color: #000; }