.tennis-page { --court: #1f6964; --ball-yellow: #d8ee43; }

.tennis-brand svg circle { fill: var(--red); stroke: none; }
.tennis-brand svg ellipse { fill: none; stroke: var(--cream); stroke-width: 2.4; }
.tennis-brand svg path { fill: none; stroke: var(--cream); stroke-width: 3; stroke-linecap: round; }

.tennis-hero .hero__image { background-image: url('/assets/raketka/tennis-hero.webp'); background-position: center center; }
.tennis-hero .hero__overlay { background: linear-gradient(90deg, rgba(7,38,37,.67) 0, rgba(7,38,37,.18) 53%, rgba(7,38,37,0) 75%), linear-gradient(0deg, rgba(7,38,37,.32), transparent 42%); }
.tennis-hero h1 { font-size: clamp(57px, 7vw, 108px); }
.tennis-hero h1 em { color: var(--ball-yellow); }
.tennis-hero .open-sticker { background: var(--red); }

.tennis-ball { width: 210px; height: 210px; border-radius: 50%; background: var(--ball-yellow); position: relative; box-shadow: inset -22px -28px 30px rgba(61,75,13,.14), 0 18px 40px rgba(20,47,44,.12); overflow: hidden; }
.tennis-ball::before, .tennis-ball::after { content: ''; position: absolute; width: 95%; height: 120%; top: -10%; border: 7px solid rgba(255,255,255,.85); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.tennis-ball::before { left: -69%; }
.tennis-ball::after { right: -69%; }
.tennis-ball--small { width: 72px; height: 72px; position: absolute; right: 8%; top: 14%; transform: rotate(24deg); }
.tennis-ball--small::before, .tennis-ball--small::after { border-width: 3px; }

.racket-mark { width: 35px; height: 52px; border: 3px solid var(--red); border-radius: 50%; position: relative; transform: rotate(25deg); }
.racket-mark::after { content: ''; position: absolute; width: 4px; height: 29px; left: 13px; bottom: -25px; background: var(--red); border-radius: 2px; }
.racket-mark--light { border-color: var(--ball-yellow); }
.racket-mark--light::after { background: var(--ball-yellow); }

.tennis-kit { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; align-items: center; min-height: 820px; overflow: hidden; }
.tennis-kit__visual { min-height: 620px; background: #9fd9d2; position: relative; display: grid; place-items: center; overflow: hidden; }
.tennis-kit__visual .tennis-ball { position: absolute; left: 11%; bottom: 10%; z-index: 2; }
.racket-illustration { width: 230px; height: 520px; position: relative; transform: rotate(24deg); z-index: 1; }
.racket-illustration__head { position: absolute; width: 230px; height: 320px; border: 25px solid var(--ink); border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0 15px, rgba(20,47,44,.5) 16px 18px), repeating-linear-gradient(90deg, transparent 0 15px, rgba(20,47,44,.5) 16px 18px); }
.racket-illustration__handle { position: absolute; width: 37px; height: 235px; left: 97px; top: 296px; background: var(--red); border: 8px solid var(--ink); }
.tennis-kit__copy { max-width: 690px; }
.kit-list { margin: 52px 0 0; padding: 0; list-style: none; }
.kit-list li { display: grid; grid-template-columns: 45px 1fr; gap: 20px; padding: 23px 0; border-top: 1px solid var(--line); }
.kit-list li:last-child { border-bottom: 1px solid var(--line); }
.kit-list li > span { color: var(--red); font-size: 11px; font-weight: 800; }
.kit-list h3 { margin: 0 0 5px; font-size: 17px; }
.kit-list p { margin: 0; max-width: 530px; font-size: 14px; opacity: .7; }

.tennis-how .how__visual { background: var(--ball-yellow); }
.tennis-score__court { height: 115px; margin-top: 35px; border: 3px solid var(--court); position: relative; }
.tennis-score__court::before, .tennis-score__court::after, .tennis-score__court span::before { content: ''; position: absolute; background: var(--court); }
.tennis-score__court::before { width: 3px; height: 100%; left: 50%; }
.tennis-score__court::after { height: 3px; width: 64%; left: 18%; top: 50%; }
.tennis-score__court span::before { width: 3px; height: 100%; left: 50%; }

.tennis-map { min-height: 640px; background: #a8d0ca; position: relative; display: grid; place-items: center; overflow: hidden; color: var(--ink); }
.tennis-page .place { overflow: hidden; }
.tennis-page .place__copy, .tennis-map { min-width: 0; }
.tennis-map__court { width: 68%; aspect-ratio: 1 / 1.72; border: 7px solid var(--paper); background: var(--court); position: relative; transform: rotate(8deg); box-shadow: 24px 26px 0 rgba(20,47,44,.15); }
.tennis-map__court::before, .tennis-map__court::after { content: ''; position: absolute; left: 13%; right: 13%; height: 4px; background: var(--paper); }
.tennis-map__court::before { top: 25%; }
.tennis-map__court::after { bottom: 25%; }
.tennis-map__net { position: absolute; left: -5%; right: -5%; top: 50%; height: 8px; background: var(--ink); box-shadow: 0 5px 0 rgba(255,255,255,.55); }
.tennis-map__line--v { position: absolute; top: 25%; bottom: 25%; left: 50%; width: 4px; background: var(--paper); }
.tennis-map .map-pin { left: 24%; top: 54%; }
.tennis-map > p { position: absolute; right: 8%; bottom: 7%; font-family: var(--display); font-style: italic; }

.tennis-cta { background: var(--court); }
.tennis-cta h2 em { color: var(--ball-yellow); }
.tennis-cta .tennis-ball--cta { position: absolute; width: 170px; height: 170px; right: -28px; bottom: -25px; }

@media (max-width: 900px) {
  .tennis-hero .hero__image { background-position: 56% center; }
  .tennis-hero .hero__overlay { background: linear-gradient(90deg, rgba(7,38,37,.74), rgba(7,38,37,.12)), linear-gradient(0deg, rgba(7,38,37,.44), transparent 55%); }
  .tennis-kit { grid-template-columns: 1fr; }
  .tennis-kit__visual { min-height: 560px; order: 2; }
  .tennis-kit__copy { order: 1; }
  .tennis-map { min-height: 520px; }
}

@media (max-width: 560px) {
  .tennis-hero h1 { font-size: clamp(50px, 14vw, 64px); }
  .tennis-hero .hero__lead { max-width: 340px; }
  .tennis-page .place .button { width: 100%; padding-inline: 16px; gap: 12px; }
  .tennis-kit__visual { min-height: 480px; margin: 0 -24px; }
  .racket-illustration { transform: scale(.78) rotate(24deg); }
  .tennis-kit__visual .tennis-ball { width: 145px; height: 145px; }
  .tennis-map__court { width: 62%; }
  .tennis-map .map-pin { left: 27%; width: 92px; height: 92px; }
  .tennis-cta .tennis-ball--cta { width: 110px; height: 110px; }
}