main > .wonders { order: 3; }
.wonders { padding-top: 78px; }
.wonder-stage { --wonder-accent: #d9bd7e; --wonder-glow: rgba(191,143,74,.24); --wonder-bg: #121827; min-height: 470px; display: flex; align-items: stretch; position: relative; overflow: hidden; border: 1px solid rgba(184,199,231,.15); border-radius: 26px; background: radial-gradient(circle at 74% 36%, var(--wonder-glow), transparent 40%), linear-gradient(140deg, color-mix(in srgb, var(--wonder-bg) 92%, #26304a), var(--wonder-bg)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 26px 65px rgba(0,0,0,.22); color: #f2f3f7; }
.wonder-stage[data-wonder="pyramids"] { --wonder-accent: #e5c17b; --wonder-glow: rgba(193,137,68,.28); --wonder-bg: #17110e; }
.wonder-stage[data-wonder="gardens"] { --wonder-accent: #8bcaa4; --wonder-glow: rgba(66,139,105,.27); --wonder-bg: #0b1b1b; }
.wonder-stage[data-wonder="zeus"] { --wonder-accent: #e3c581; --wonder-glow: rgba(91,113,181,.29); --wonder-bg: #10172a; }
.wonder-stage[data-wonder="artemis"] { --wonder-accent: #b8c7ff; --wonder-glow: rgba(107,100,178,.28); --wonder-bg: #151429; }
.wonder-stage[data-wonder="mausoleum"] { --wonder-accent: #d8b488; --wonder-glow: rgba(145,102,78,.25); --wonder-bg: #1c1519; }
.wonder-stage[data-wonder="colossus"] { --wonder-accent: #e8c477; --wonder-glow: rgba(176,126,53,.27); --wonder-bg: #171a22; }
.wonder-stage[data-wonder="lighthouse"] { --wonder-accent: #a9d2df; --wonder-glow: rgba(70,131,161,.27); --wonder-bg: #0c1925; }
/* точечный узор только над текстовой частью, картинку не задевает */
.wonder-stage::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 44%; z-index: 0; background-image: radial-gradient(circle, rgba(222,231,255,.4) 0 1px, transparent 1.2px); background-size: 93px 93px; opacity: .23; mask-image: linear-gradient(90deg, #000 55%, transparent 100%); pointer-events: none; }
.wonder-stage__content { position: relative; z-index: 2; flex: 0 0 44%; max-width: 44%; padding: 49px 40px 44px 48px; }
.wonder-stage__kicker { display: block; color: var(--wonder-accent); font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 1.8px; }
.wonder-stage__content h3 { margin: 17px 0 20px; font-family: var(--display); font-size: clamp(28px, 3.2vw, 43px); font-weight: 600; line-height: 1.14; letter-spacing: -.05em; }
.wonder-stage__content > p { margin: 0; color: #b0b9cb; font-size: 13px; line-height: 1.85; }
.wonder-stage__meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; padding-top: 19px; border-top: 1px solid rgba(184,199,231,.14); color: #919db4; font-family: 'IBM Plex Mono', monospace; font-size: 9px; line-height: 1.6; }
.wonder-stage__meta span + span::before { content: '·'; margin-right: 20px; color: var(--wonder-accent); }
/* картинка занимает свою половину целиком, без наложений и масок */
.wonder-stage__art { position: relative; z-index: 1; flex: 1 1 auto; min-height: 380px; }
.wonder-stage__art svg { width: 100%; height: auto; }
.wonder-stage__art img.wonder-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wonder-stage__index { position: absolute; z-index: 2; right: 28px; top: 14px; color: var(--wonder-accent); opacity: .09; font-family: var(--display); font-size: 96px; font-weight: 700; line-height: 1; letter-spacing: -.08em; pointer-events: none; }
.wonder-selector { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.wonder-tab { min-width: 0; min-height: 86px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--muted); text-align: left; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.wonder-tab > span { color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-size: 8px; }
.wonder-tab > strong { overflow: hidden; max-width: 100%; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wonder-tab > small { overflow: hidden; max-width: 100%; font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.wonder-tab:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); color: var(--ink); transform: translateY(-2px); }
.wonder-tab.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 2px 0 var(--accent); }

@media (max-width: 1100px) {
  .wonder-stage__content { flex-basis: 46%; max-width: 46%; padding-left: 36px; }
  .wonder-stage::before { width: 46%; }
  .wonder-tab { padding-inline: 10px; }
  .wonder-tab > small { font-size: 7px; }
}

@media (max-width: 900px) {
  .wonder-stage__content { flex-basis: 52%; max-width: 52%; padding: 37px 28px 37px 32px; }
  .wonder-stage__content h3 { font-size: 30px; }
  .wonder-stage__content > p { font-size: 11px; }
  .wonder-stage::before { width: 52%; }
  .wonder-stage__art { min-height: 320px; }
  .wonder-selector { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .wonder-selector::-webkit-scrollbar { display: none; }
  .wonder-tab { min-width: 144px; flex-shrink: 0; }
}

@media (max-width: 700px) {
  .wonders { padding-top: 55px; }
  .wonder-stage { flex-direction: column; min-height: 0; border-radius: 21px; }
  .wonder-stage::before { width: 100%; height: 52%; bottom: auto; mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .wonder-stage__content { flex: 1 1 auto; max-width: 100%; padding: 28px 24px 8px; }
  .wonder-stage__content h3 { margin-block: 14px 16px; font-size: 27px; }
  .wonder-stage__content > p { font-size: 11px; line-height: 1.75; }
  .wonder-stage__meta { flex-direction: column; gap: 4px; margin-top: 20px; padding-top: 14px; font-size: 8px; }
  .wonder-stage__meta span + span::before { display: none; }
  .wonder-stage__art { flex: 0 0 auto; width: 100%; min-height: 0; height: 230px; }
  .wonder-tab { min-width: 128px; min-height: 81px; }
}

@media (prefers-reduced-motion: reduce) {
  .wonder-stage__art, .wonder-stage:hover .wonder-stage__art, .wonder-tab, .wonder-tab:hover { transform: none; transition: none; }
}