/* Media — foto's / video's switch, photo wall, video */

/* Segmented control */
.seg {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: clamp(28px, 4vw, 48px);
  border-radius: calc(var(--r-sm) + 4px); background: var(--mist);
}
.seg__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border-radius: var(--r-sm); font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); transition: color .2s, background-color .2s;
}
.seg__btn svg { width: 18px; height: 18px; }
.seg__btn small { font-size: .75rem; letter-spacing: 0; padding: 2px 7px; border-radius: 99px; background: rgba(12, 13, 15, .08); }
a.seg__btn:hover { color: var(--ink); background: rgba(12, 13, 15, .05); }
.seg__btn[aria-current="page"] { background: var(--ink); color: #fff; }
.seg__btn[aria-current="page"] svg { color: var(--red); }
.seg__btn[aria-current="page"] small { background: var(--red); }

/* Photo wall: masonry columns keep every photo's own shape */
.media-grid { display: block; columns: 2 160px; column-gap: clamp(8px, 1.2vw, 16px); }
@media (min-width: 810px) { .media-grid { columns: 3; } }
@media (min-width: 1200px) { .media-grid { columns: 4; } }
.media-grid a { aspect-ratio: auto; margin-bottom: clamp(8px, 1.2vw, 16px); break-inside: avoid; }
.media-grid img { height: auto; }

/* Video */
.media-video { overflow: hidden; border-radius: var(--r-md); background: var(--ink); }
.media-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Send-your-move strip */