/* The Padel Club Azor, mobile first.
   Tokens: handoff/08_dev/design-tokens.json. Layout: handoff/01_reference/approved_mockup_desktop_mobile.png
   Breakpoints: 768 (tablet) / 1024 (desktop) / 1440 (container max).
   Visual finish: premium sports-lifestyle, editorial. Content-driven heights, hairline dividers,
   one type scale, one spacing rhythm (section 48 to 80px, inner 16 to 28px). */

:root {
  /* brand palette, from the club's identity sheet (Snir, 17.9.2026). Every UI colour is one of these five;
     hairlines, shadows and quiet fills use the deep green with transparency. Photos, video, banners and the
     hero's dark legibility overlay are not recoloured. */
  --cream: #FFFAF4;       /* page surfaces, light text on green */
  --green: #0C4826;       /* deep green: headings, text, buttons, footer */
  --green-2: #216D41;     /* green: secondary text, hover */
  --blush: #FFDFE5;       /* light pink */
  --mauve: #E1A6C2;       /* pink: accents (tournament level badge) */
  --white: #FFFFFF;       /* product cards */
  --ink: var(--green);
  --ink-soft: var(--green);
  --muted: var(--green-2);
  --hairline: rgba(12, 72, 38, .10);
  --tint: rgba(12, 72, 38, .06);   /* quiet fill on cream */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --r-card: 14px;         /* product cards */
  --r-btn: var(--radius-pill);
  --r-img: 16px;          /* editorial photos */
  --r-panel: var(--radius-lg);

  --gutter: 16px;
  --container: 1440px;
  --pad-x: max(var(--gutter), calc((100% - var(--container)) / 2)); /* centred content without wrappers */
  --header-h: 104px;      /* phones: 10px of air above and below the 84px logo (Snir, 19.9); 88px from 768px */

  --font-he: "Heebo", Arial, sans-serif;
  --font-latin: "Inter", Arial, sans-serif;
  --font-display: "Bodoni Moda", "Times New Roman", serif; /* the closest match to the logo wordmark, hero only */

  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 32px; --header-h: 88px; } }
@media (min-width: 1280px) { :root { --gutter: 56px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-he);
  font-size: 17px;
  line-height: 1.7;
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--cream); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; inset-inline-start: 16px; z-index: 100;
  background: var(--green); color: var(--cream); padding: 10px 18px; border-radius: var(--r-btn);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px;
  border-radius: var(--r-btn); border: 1px solid transparent;
  font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .01em; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-primary { background: var(--green); color: var(--cream); }
.btn-primary:hover { background: var(--green-2); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: var(--blush); }
.btn-outline { background: transparent; color: var(--cream); border-color: rgba(255, 250, 244, .7); }
.btn-outline:hover { background: rgba(255, 250, 244, .12); border-color: var(--cream); }
.btn-block { width: 100%; }
.btn-ghost-green { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-ghost-green:hover { background: var(--green); color: var(--cream); }

/* ---------- typography helpers ---------- */
.section-title { font-size: 30px; line-height: 1.2; font-weight: 500; color: var(--green); margin: 0 0 18px; }
.body { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 36em; }
.split-copy .body { margin-bottom: 0; }
.split-copy .body + .body { margin-top: 14px; }
.split-copy .body:last-of-type { margin-bottom: 28px; }
.latin { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; }
.body .latin { white-space: nowrap; } /* brand names stay on one line inside Hebrew paragraphs */

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  height: var(--header-h); color: var(--cream);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-solid, .site-header.is-open {
  background: rgba(255, 250, 244, .96); color: var(--ink); box-shadow: 0 1px 0 var(--hairline);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.header-inner {
  height: 100%; padding-inline: var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: block; border-radius: 50%; }
.brand img { width: 76px; height: 76px; }
@media (max-width: 767px) { .brand img { width: 84px; height: 84px; } } /* phones: a little larger (Snir, 19.9) */
.menu-btn {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  display: grid; place-items: center;
}
.menu-btn svg { width: 28px; height: 28px; }
.menu-btn .icon-close { display: none; }
.site-header.is-open .menu-btn .icon-menu { display: none; }
.site-header.is-open .menu-btn .icon-close { display: block; }
.header-cta { display: none; gap: 8px; }
.header-cta-icon { flex: 0 0 auto; width: 19px; height: 19px; }
/* phones and tablets: the booking pill in our pink between the logo and the menu button (Snir, 17.9.2026) */
@media (max-width: 1023px) {
  .header-cta { display: inline-flex; min-height: 42px; padding: 0 18px; font-size: 14px; background: var(--mauve); color: var(--green); }
  .header-cta:hover { background: var(--blush); }
}

/* mobile drawer */
.site-nav {
  position: fixed; top: var(--header-h); inset-inline: 0; bottom: 0;
  background: var(--cream); color: var(--ink); padding: 24px var(--gutter) 40px;
  overflow: auto; display: none;
}
.site-header.is-open .site-nav { display: block; }
.nav-cta { width: 100%; margin-bottom: 16px; }
.site-nav li a {
  display: block; padding: 15px 0; min-height: 44px;
  font-size: 20px; font-weight: 500; color: var(--green);
  text-decoration: none; border-bottom: 1px solid var(--hairline);
}
.site-nav li a[aria-current] { color: var(--green-2); font-weight: 600; }
body.nav-open { overflow: hidden; }

@media (min-width: 1024px) {
  /* approved mockup: logo at the left edge, CTA at the right, menu between (בית nearest the CTA) */
  .header-inner { flex-direction: row-reverse; }
  .brand img { width: 78px; height: 78px; }
  .menu-btn { display: none; }
  .site-nav {
    position: static; inset: auto; padding: 0; background: transparent; color: inherit;
    display: block; overflow: visible; margin-inline: auto;
  }
  .nav-cta { display: none; }
  .site-nav ul { display: flex; gap: 32px; }
  .site-nav li a {
    padding: 8px 0; min-height: 0; font-size: 15px; font-weight: 500; color: inherit;
    border-bottom: 1px solid transparent; transition: border-color .25s var(--ease);
  }
  .site-nav li a:hover { border-bottom-color: currentColor; }
  .site-nav li a[aria-current] { color: inherit; font-weight: 500; border-bottom-color: currentColor; }
  .header-cta { display: inline-flex; }
  .site-header.is-solid .header-cta { background: var(--green); color: var(--cream); }
  .site-header.is-solid .header-cta:hover { background: var(--green-2); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--green);
  min-height: 520px; height: min(80svh, 720px); /* the one section that needs a height: it holds the video */
  display: flex; align-items: flex-end;
}
.hero-poster, .hero-poster img, .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-poster { margin: 0; }
.hero-poster img { background: var(--green); }
/* the hero never moves: no transform, no parallax, no scale. Only the poster to video opacity handoff */
/* the real-photo poster is always painted; the video fades over it only once it is actually playing */
.hero-media { opacity: 0; transition: opacity .6s var(--ease); }
.hero.is-playing .hero-media { opacity: 1; }
/* phone overlay: light at the top, firmer under the copy; the venue stays visible */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 30, 16, .22) 0%, rgba(6, 30, 16, .04) 32%, rgba(6, 30, 16, .34) 62%, rgba(6, 30, 16, .66) 100%);
}
@media (min-width: 768px) {
  /* tablets: the reel still fills the screen, the copy sits on the right over a soft gradient */
  .hero-poster img, .hero-media { object-position: 50% 50%; }
  .hero-overlay {
    background:
      linear-gradient(270deg, rgba(6, 30, 16, .50) 0%, rgba(6, 30, 16, .22) 38%, rgba(6, 30, 16, .04) 70%),
      linear-gradient(180deg, rgba(6, 30, 16, .14) 0%, rgba(6, 30, 16, 0) 30%, rgba(6, 30, 16, .38) 100%);
  }
}
@media (min-width: 1024px) {
  /* desktop: the 576px wide reel cannot fill the screen, so the hero splits. The reel keeps the left half at
     almost its own size, the right half is the brand green with the copy on it (Snir, 4.10.2026). */
  .hero { align-items: center; background: var(--green); }
  .hero-poster { inset: 0 0 0 auto; width: 52%; }
  .hero-poster img { width: 100%; height: 100%; object-position: 50% 50%; }
  .hero-media { inset: 0 0 0 auto; width: 52%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .hero-overlay {
    inset: 0 0 0 auto; width: 52%;
    background: linear-gradient(180deg, rgba(6, 30, 16, .18) 0%, rgba(6, 30, 16, 0) 35%, rgba(6, 30, 16, .28) 100%);
  }
}
.hero-copy {
  position: relative; z-index: 1; width: 100%; color: var(--cream);
  padding: 0 var(--pad-x) 40px;
}
.hero-title { margin: 0 0 14px; text-align: right; }
/* phones and tablets: the English line is set in the logo's own serif (Snir, 5.10.2026), the Hebrew stays Heebo */
.hero-title-en {
  display: block; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(38px, 10.5vw, 56px); line-height: 1.04; letter-spacing: .005em;
  text-shadow: 0 1px 18px rgba(6, 30, 16, .35);
}
.hero-logo { display: none; }
.hero-title-he { display: block; margin-top: 8px; font-size: clamp(20px, 5.4vw, 28px); font-weight: 500; line-height: 1.1; }
.hero-sub { font-size: 17px; line-height: 1.45; font-weight: 400; margin: 0 0 20px; text-align: right; }
/* phones: the two buttons share one row, so the copy covers as little of the courts as possible */
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-actions .btn { padding: 0 12px; }
.hero .btn-primary { border-color: rgba(255, 250, 244, .35); }

@media (min-width: 768px) {
  .hero { height: 720px; }
  .hero-copy { padding-bottom: 64px; }
  .hero-title { margin-bottom: 18px; }
  .hero-title-en { font-size: clamp(52px, 6vw, 88px); }
  .hero-title-he { margin-top: 10px; font-size: clamp(24px, 2.4vw, 34px); }
  .hero-sub { font-size: 21px; margin-bottom: 30px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
  .hero-actions .btn { padding: 0 28px; }
}
@media (min-width: 1024px) {
  /* the copy sits on the green half, centred in it, and the club's logo stands in for the written title
     (Snir, 5.10.2026). The title text stays in the DOM for search engines and screen readers. */
  .hero-copy { padding: 0 54% 0 var(--pad-x); } /* the copy keeps the green half, the reel keeps the other */
  .hero-copy-inner { max-width: 620px; margin-inline: auto; text-align: center; }
  .hero-title { margin-bottom: 22px; text-align: center; }
  .hero-logo { display: block; width: clamp(210px, 20vw, 300px); height: auto; margin: 0 auto; }
  .hero-title-en, .hero-title-he {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .hero-sub { text-align: center; }
  .hero-actions { justify-content: center; }
}

/* ---------- events banner (Snir, 5.10.2026) ----------
   Sits right under the first section. Rendered with the tournaments section from data/tournaments.json;
   assets/js/tournaments.js re-reads the date on load, so an old build never announces a finished tournament. */
.events-banner { margin: 14px 12px 0; }
.events-banner-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 14px; border-radius: 16px; background: var(--blush); color: var(--green); text-decoration: none;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.events-banner-link:hover { background: var(--mauve); }
.events-banner-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); }
.events-banner-glyph { width: 21px; height: 21px; }
.events-banner-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: right; }
.events-banner-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--green-2); }
.events-banner-title { font-size: 16px; font-weight: 700; line-height: 1.2; }
.events-banner-time { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--green-2); white-space: nowrap; }
.events-banner-cta {
  flex: 1 0 100%; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px; border-radius: var(--r-btn);
  background: var(--green); color: var(--cream); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.events-banner-link:hover .events-banner-cta { background: var(--green-2); }
@media (min-width: 768px) {
  .events-banner { margin: 22px var(--pad-x) 0; }
  .events-banner-link { gap: 16px; padding: 16px 18px; border-radius: 18px; }
  .events-banner-copy { flex: 0 1 auto; }
  .events-banner-title { font-size: 18px; }
  .events-banner-time { margin-inline-start: auto; font-size: 15px; }
  .events-banner-cta { flex: 0 0 auto; min-height: 44px; font-size: 14.5px; }
}
@media (min-width: 1024px) {
  .events-banner { max-width: 1400px; margin-inline: auto; padding-inline: calc(var(--pad-x) + 24px); }
  .events-banner-title { font-size: 20px; }
}

/* ---------- booking card (Snir's mock, 17.9.2026) ----------
   Cream card, green headline, quiet venue line with centred dots, a hairline divider, green pill CTA.
   Sits half over the hero's bottom edge, docks to the bottom of the screen while scrolling,
   releases when the footer arrives. The slot keeps the space so nothing jumps. */
main { background: var(--cream); } /* the strip beside the card matches About, so nothing reads as a band */
.book-card-slot { position: relative; z-index: 2; margin: -24px 12px 0; }
.book-card {
  min-height: 78px; padding: 12px 16px 12px 12px;
  background: var(--cream); border-radius: 18px;
  box-shadow: 0 16px 36px -22px rgba(12, 72, 38, .34), 0 0 0 1px rgba(12, 72, 38, .06);
  display: flex; align-items: center; gap: 0;
  transition: box-shadow .3s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
.book-card-text { min-width: 0; flex: 1 1 auto; text-align: right; }
.book-card-title { font-size: clamp(13.5px, 3.85vw, 15px); font-weight: 700; line-height: 1.25; color: var(--green); margin: 0; white-space: nowrap; }
.book-card-hl { display: flex; flex-wrap: wrap; align-items: baseline; margin: 4px 0 0; padding: 0; list-style: none;
  font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--green-2); }
.book-card-hl li { white-space: nowrap; }
.book-card-hl li + li::before { content: "·"; margin-inline: 6px; color: rgba(12, 72, 38, .4); font-weight: 700; }
/* the four highlights break two and two: an empty item takes the line break, so a separator never starts a line */
.book-card-hl-break { flex-basis: 100%; height: 0; }
.book-card-hl .book-card-hl-break::before, .book-card-hl .book-card-hl-break + li::before { content: none; }
.book-card-rule { flex: 0 0 1px; align-self: center; width: 1px; height: 44px; margin-inline: 12px 10px; background: rgba(12, 72, 38, .14); }
.book-card-cta { flex: 0 0 auto; min-height: 42px; height: 42px; padding: 0 18px; font-size: 13.5px; font-weight: 600; background: var(--green); color: var(--cream); }
.book-card-cta:hover { background: var(--green-2); }
/* phones (Snir, 18.9.2026): the hero video fills the whole screen and the card sits on its bottom edge, over the video.
   No button in the card (the hero has one): the headline and the venue line fill the card, centred. */
@media (max-width: 767px) {
  :root { --book-card-h: 104px; }  /* two lines of highlights */
  .hero { height: 100vh; height: 100svh; min-height: 560px; }
  .hero-copy { padding-bottom: calc(var(--book-card-h) + 40px); }
  .book-card-slot { margin-top: calc(-1 * (var(--book-card-h) + 12px)); }
  .book-card { display: block; min-height: var(--book-card-h); padding: 15px 12px 14px; text-align: center; }
  .book-card-text { text-align: center; }
  .book-card-title { font-size: clamp(19px, 6vw, 24px); line-height: 1.2; text-align: center; }
  .book-card-hl { justify-content: center; margin: 7px 0 0; font-size: clamp(11.5px, 3.3vw, 13.5px); font-weight: 500; line-height: 1.5; color: var(--green); }
  .book-card-hl li + li::before { margin-inline: 7px; color: var(--green); opacity: .55; }
  .book-card-rule, .book-card-cta { display: none; }
}
@media (max-width: 339px) {
  /* narrowest phones: one highlight to a line, never a separator at a line start */
  :root { --book-card-h: 150px; }
  .book-card-hl li { flex-basis: 100%; }
  .book-card-hl li + li::before { content: none; }
  .book-card-hl-break { display: none; }
}

/* docked: pinned to the bottom of the screen */
.book-card-slot.is-docked .book-card {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: 40;
  box-shadow: 0 16px 40px -18px rgba(12, 72, 38, .42), 0 0 0 1px rgba(12, 72, 38, .07);
  animation: dock-in .28s var(--ease);
}
@keyframes dock-in { from { opacity: 0; } to { opacity: 1; } }
.book-card-slot.is-hidden .book-card { opacity: 0; transform: translateY(12px); pointer-events: none; }

@media (min-width: 768px) {
  /* mock proportions: card about 6.6 times as wide as it is tall, about half of it over the hero */
  .book-card-slot { width: min(740px, calc(100% - 64px)); margin: -52px auto 0; }
  .book-card { min-height: 112px; padding: 16px 36px 16px 30px; border-radius: 24px; }
  .book-card-title { font-size: 22px; line-height: 1.2; }
  /* from here the four fit on one line, so the break comes out and every separator comes back */
  .book-card-hl { font-size: 13.5px; margin-top: 6px; flex-wrap: nowrap; }
  .book-card-hl li + li::before { margin-inline: 10px; }
  .book-card-hl-break { display: none; }
  .book-card-hl .book-card-hl-break + li::before { content: "·"; }
  .book-card-rule { height: 52px; margin-inline: 24px 20px; }
  .book-card-cta { min-height: 50px; height: 50px; padding: 0 32px; font-size: 17px; }
  .book-card-slot.is-docked .book-card { inset-inline: auto; width: min(740px, calc(100vw - 64px)); left: 50%; transform: translateX(-50%); bottom: 20px; }
  .book-card-slot.is-docked.is-hidden .book-card { transform: translateX(-50%) translateY(12px); }
}
@media (min-width: 1024px) {
  .book-card { padding: 16px 36px 16px 30px; }
  .book-card-title { font-size: 26px; }
  .book-card-hl { font-size: 15.5px; margin-top: 8px; }
  .book-card-hl li + li::before { margin-inline: 12px; }
  .book-card-rule { height: 56px; margin-inline: 30px 26px; }
  .book-card-cta { min-height: 56px; height: 56px; padding: 0 44px; font-size: 20px; }
}

/* ---------- split sections (about / community / visit) ---------- */
.split { display: grid; grid-template-columns: 1fr; background: var(--cream); padding: 0 var(--pad-x); }
.split-media { margin: 0; }
.split-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-img); }
.split-copy { padding: 28px 0 44px; text-align: right; }
.split-about { padding-top: 28px; }


@media (min-width: 1024px) {
  .split { direction: ltr; gap: clamp(32px, 4vw, 56px); align-items: center; padding: 72px var(--pad-x); } /* DOM order = visual left-to-right order */
  .split > * { direction: rtl; }
  .split-media img { aspect-ratio: auto; }
  .split-copy { padding: 0; display: flex; flex-direction: column; justify-content: center; }
  .split-copy .body { margin-bottom: 0; }
  .split-copy .body:last-of-type { margin-bottom: 32px; }
  .split-copy .btn { align-self: flex-start; }

  .split-about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 36px var(--pad-x) 64px; align-items: center; }
  .split-about .split-copy { text-align: right; justify-content: center; }
  .split-about .section-title { font-weight: 700; margin-bottom: 18px; }
  .split-about .body { max-width: 34em; }



  .section-title { font-size: 44px; margin-bottom: 22px; }
  .body { font-size: 18px; line-height: 1.75; }
}
/* in a left-aligned Hebrew block the CTA hugs the left edge (mockup); flex-start in RTL is the right, so flip it */
@media (min-width: 1024px) {
  .split-about .split-copy .btn { align-self: flex-start; } /* flex-start in RTL = the right edge, under the copy */
}

/* ---------- gallery ---------- */
.gallery { background: var(--cream); padding: 0 var(--pad-x) 48px; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery-grid li:nth-child(3) { grid-column: 1 / -1; }
.gallery-grid img { width: 100%; height: auto; aspect-ratio: 1.25; object-fit: cover; object-position: 50% 50%; border-radius: var(--r-img); }
.gallery-grid li:nth-child(3) img { aspect-ratio: 2 / 1; object-position: 50% 12%; } /* wide phone crop: keep the heads in frame */
@media (min-width: 768px) {
  .gallery { padding: 0 var(--pad-x) 72px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .gallery-grid li:nth-child(3) { grid-column: auto; }
  .gallery-grid img, .gallery-grid li:nth-child(3) img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
}

/* ---------- tournaments (Snir's DEV package, 17.9.2026: final-mockups 01 desktop / 02 mobile) ----------
   Top banner (artwork cut from the approved mockups), intro with the filter chips, three cards, community banner.
   Brand palette only. Phones and tablets: horizontal cards, photo on the left; desktop: three cards in a row.
   Chips and cards come from data/tournaments.json (tools/sync_tournaments.py), filtering in assets/js/tournaments.js. */
.tournaments-section { background: var(--cream); padding: 28px 12px 48px; scroll-margin-top: calc(var(--header-h) + 8px); } /* menu "אירועים" lands below the fixed header */
.tournaments-inner { max-width: 1400px; margin-inline: auto; }

.tournaments-banner-top { display: block; overflow: hidden; border-radius: 14px; background: var(--mauve); }
.tournaments-banner-top img { display: block; width: 100%; height: auto; }

.tournaments-top { margin: 30px 0 20px; }
.tournaments-header { text-align: center; } /* type = the About block (.section-title / .body), centred (Snir, 18.9.2026) */
.tournaments-intro { margin-inline: auto; }
.tournaments-cta { display: none; margin-top: 16px; min-height: 46px; padding: 0 26px; font-size: 15px; } /* phones: hidden (Snir) */

.tournaments-filters { display: none; justify-content: center; gap: 6px; margin-top: 18px; } /* phones: hidden (Snir), every card shows */
.tournaments-chip {
  flex: 1 1 0; min-width: 0; height: 40px; padding: 0 6px; border: 0; border-radius: var(--radius-pill);
  background: var(--tint); color: var(--green); font: 500 13px/1 var(--font-he); white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tournaments-chip:hover { background: rgba(12, 72, 38, .10); }
.tournaments-chip[aria-pressed="true"] { background: var(--green); color: var(--cream); }

.tournaments-grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tournaments-empty { padding: 32px 16px; text-align: center; font-size: 14px; color: var(--green-2); }
.tournament-card[hidden], .tournaments-empty[hidden] { display: none; }
.tournament-card {
  min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 14px 32px -28px rgba(12, 72, 38, .5);
}
.tournament-card article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "body media"; height: 100%; }
.tournament-media { grid-area: media; position: relative; min-height: 190px; }
.tournament-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-phone, 50% 50%); }
/* date badge: top right corner of the photo, as in both mockups */
.tournament-date {
  position: absolute; top: 10px; right: 10px; margin: 0; min-width: 62px; padding: 7px 10px 6px;
  border-radius: 10px; background: var(--green); color: var(--cream); text-align: center; line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 250, 244, .6), 0 6px 14px -8px rgba(12, 72, 38, .6);
}
.tournament-date time { display: block; }
.tournament-date b { display: block; font-family: var(--font-latin); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.tournament-date span { display: block; margin-top: 4px; font-family: var(--font-latin); font-size: 10px; font-weight: 500; opacity: .85; }

/* a tournament that has passed: a quiet flag on the photo, and its button says so (assets/js/tournaments.js) */
.tournament-past {
  position: absolute; top: 10px; left: 10px; z-index: 1; margin: 0; padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(12, 72, 38, .88); color: var(--cream); font-size: 11.5px; font-weight: 600; line-height: 1;
}
.tournament-card.is-past .tournament-media img { filter: saturate(.75); }
.tournament-card.is-past .tournament-cta { background: rgba(12, 72, 38, .45); }
.tournament-card.is-past .tournament-cta:hover { background: rgba(12, 72, 38, .45); }
/* the one finished tournament that has photos keeps a live button (Snir, 14.10.2026) */
.tournament-card.is-past .tournament-cta-photos { background: var(--green); cursor: pointer; }
.tournament-card.is-past .tournament-cta-photos:hover { background: var(--green-2); }
.tournament-body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; text-align: right; }
/* the level pill sits on the photo, bottom left, opposite the date badge (Snir, 18.9.2026) */
.tournament-head { display: block; }
.tournament-title { font-size: 17px; line-height: 1.25; font-weight: 600; color: var(--green); margin: 0; }
.tournament-level {
  position: absolute; bottom: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding-block: 3px; padding-inline: 11px 3px; border-radius: var(--radius-pill);
  background: var(--blush); color: var(--green); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(12, 72, 38, .55);
}
.tournament-level-letter {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mauve); color: var(--green); font-family: var(--font-latin); font-size: 11.5px; font-weight: 600;
}
.tournament-details { display: grid; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.35; color: var(--green); }
.tournament-details li { display: flex; align-items: center; gap: 7px; }
.tournament-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--green); }
.tournament-cta { margin-top: auto; width: 100%; min-height: 40px; height: 40px; padding: 0 10px; font-size: 13.5px; background: var(--green); color: var(--cream); }
.tournament-cta:hover { background: var(--green-2); }

/* community banner: photo on the left cut on a diagonal, light pink panel with the copy on the right */
.tournaments-banner-bottom {
  position: relative; overflow: hidden; margin-top: 32px; min-height: 190px; border-radius: 14px; background: var(--blush);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px;
  padding-block: 18px; padding-inline: 16px 47%;
}
.tournaments-banner-media { position: absolute; inset-block: 0; left: 0; width: 44%; clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%); }
.tournaments-banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: 61% 50%; }
.tournaments-banner-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 72, 38, .55) 0%, rgba(12, 72, 38, 0) 70%); }
.tournaments-banner-tagline {
  position: absolute; z-index: 1; bottom: 14px; left: 12px; margin: 0; /* phones: under the ball, clear of it */
  font-family: var(--font-latin); font-size: 10px; font-weight: 500; line-height: 1.55; letter-spacing: .16em;
  color: var(--cream); text-align: left; text-shadow: 0 1px 8px rgba(12, 72, 38, .6);
}
.tournaments-banner-copy { position: relative; z-index: 1; text-align: right; }
.tournaments-banner-title { font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--green); margin: 0; }
.tournaments-banner-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--green-2); }
.tournaments-banner-cta {
  position: relative; z-index: 1; min-height: 40px; height: 40px; padding: 0 18px; font-size: 13.5px;
  background: transparent; color: var(--green); border: 1.5px solid var(--green);
}
.tournaments-banner-cta:hover { background: var(--green); color: var(--cream); }

@media (min-width: 768px) {
  .tournaments-section { padding: 36px var(--pad-x) 64px; }
  .tournaments-cta { display: inline-flex; }
  .tournaments-filters { display: flex; }
  .tournaments-banner-top { border-radius: 16px; }
  .tournaments-top { margin: 40px 0 24px; }
  .tournaments-filters { gap: 10px; }
  .tournaments-chip { flex: 0 0 auto; padding: 0 22px; font-size: 14px; }
  .tournaments-grid { gap: 16px; }
  .tournament-card article { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .tournament-media { min-height: 250px; }
  .tournament-date { top: 14px; right: 14px; min-width: 72px; padding: 8px 12px 7px; border-radius: 12px; }
  .tournament-date b { font-size: 22px; }
  .tournament-date span { font-size: 11px; }
  .tournament-body { gap: 12px; padding: 20px 22px; }
  .tournament-title { font-size: 22px; }
  .tournament-level { bottom: 14px; left: 14px; font-size: 13px; }
  .tournament-level-letter { width: 24px; height: 24px; font-size: 12px; }
  .tournament-details { gap: 8px; font-size: 15px; }
  .tournament-icon { width: 20px; height: 20px; }
  .tournament-cta { min-height: 46px; height: 46px; font-size: 15px; }

  .tournaments-banner-bottom { margin-top: 40px; min-height: 200px; border-radius: 16px; gap: 16px; padding-block: 24px; padding-inline: 32px 48%; }
  .tournaments-banner-media { width: 54%; clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
  .tournaments-banner-media img { object-position: 50% 50%; }
  .tournaments-banner-tagline { top: 50%; bottom: auto; left: 28px; transform: translateY(-50%); font-size: 14px; }
  .tournaments-banner-title { font-size: 24px; }
  .tournaments-banner-sub { font-size: 15px; }
  .tournaments-banner-cta { min-height: 44px; height: 44px; padding: 0 26px; font-size: 14.5px; }
}
@media (min-width: 1024px) {
  .tournaments-section { padding: 40px var(--pad-x) 16px; }
  /* intro on the right, chips on the left of the same band; content sits 24px inside the banners (desktop mockup) */
  .tournaments-top { margin: 48px 24px 32px; }
  .tournaments-title { font-weight: 700; margin-bottom: 18px; } /* as the About title on desktop */
  .tournaments-cta { margin-top: 22px; }
  .tournaments-filters { margin-top: 24px; }
  .tournaments-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-inline: 24px; }
  .tournament-card article { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "media" "body"; }
  .tournament-media { min-height: 0; aspect-ratio: 1.68; }
  .tournament-media img { object-position: var(--pos, 50% 50%); }
  .tournament-body { gap: 0; padding: 16px 18px 18px; }
  .tournament-head { padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
  .tournament-title { font-size: 21px; }
  .tournament-details { flex: 1 1 auto; align-content: center; gap: 10px; padding: 16px 0 18px; }
  .tournament-cta { margin-top: 0; }

}
@media (min-width: 1280px) {
  /* community banner in one thin row: copy on the right, button beside it */
  .tournaments-banner-bottom { flex-direction: row; align-items: center; justify-content: flex-start; gap: 28px; margin-top: 48px; min-height: 120px; padding-block: 18px; padding-inline: 40px 50%; }
  .tournaments-banner-media { width: 48%; clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%); }
  .tournaments-banner-tagline { left: 48px; font-size: 17px; letter-spacing: .18em; }
  .tournaments-banner-title { font-size: clamp(22px, 1.8vw, 26px); }
  .tournaments-banner-sub { margin-top: 6px; font-size: 16px; }
  .tournaments-banner-cta { flex: 0 0 auto; }
}

/* ---------- everything you need to play (Snir's mock, 18.9.2026): rental, group and private training ----------
   Same type as the About and tournaments headers, centred, the full stop in pink. Phones: compact horizontal cards
   (photo on the left); from 768px three cards with the photo on top and the text centred under it (mock). */
.play-section { background: var(--cream); padding: 8px 12px 48px; }
.play-inner { max-width: 1400px; margin-inline: auto; }
.play-header { margin-bottom: 20px; text-align: center; }
.play-intro { margin-inline: auto; }
.play-dot { color: var(--mauve); }
.play-grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.play-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); grid-template-areas: "body media";
  overflow: hidden; background: var(--white); border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 14px 32px -28px rgba(12, 72, 38, .5);
}
.play-media { grid-area: media; position: relative; min-height: 124px; background: var(--green); }
.play-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play-body { grid-area: body; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px; text-align: right; }
.play-card-title { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--green); }
.play-card-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--green-2); }
/* the training cards lead to WhatsApp (Snir, 5.10.2026): the link covers the whole card, the icon says where to */
.play-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--green); text-decoration: none;
}
.play-cta::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.play-cta-icon { width: 17px; height: 17px; flex: 0 0 auto; color: #25D366; }
.play-card.is-linked:hover { box-shadow: 0 18px 34px -24px rgba(12, 72, 38, .55); }
.play-card:focus-within { outline: 2px solid var(--mauve); outline-offset: 3px; }
.play-badge {
  position: absolute; inset-inline-end: 10px; inset-block-start: 10px; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--blush); color: var(--green); box-shadow: 0 6px 14px -8px rgba(6, 30, 16, .6);
}
.play-badge-icon { width: 17px; height: 17px; }
@media (min-width: 768px) {
  .play-section { padding: 24px var(--pad-x) 64px; }
  .play-header { margin-bottom: 28px; }
  .play-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .play-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; }
  .play-media { min-height: 0; aspect-ratio: 4 / 3; }
  .play-body { padding: 18px 16px 20px; text-align: center; }
  .play-cta { justify-content: center; }
  .play-badge { width: 36px; height: 36px; inset-inline-end: 12px; inset-block-start: 12px; }
  .play-badge-icon { width: 19px; height: 19px; }
  .play-card-title { font-size: 20px; }
  .play-card-text { font-size: 15px; }
}
@media (min-width: 1024px) {
  .play-section { padding: 64px var(--pad-x) 72px; }
  .play-title { font-weight: 700; margin-bottom: 18px; } /* as the About title on desktop */
  .play-grid { gap: 20px; margin-inline: 24px; }
  .play-card-title { font-size: 22px; }
}

/* ---------- shop: the retail zone (approved reference: neutral surfaces, product-first grid) ---------- */
:root {
  --shop-bg: var(--cream);
  --shop-tile: #EEEEEB;               /* neutral field the product photos sit on (image, not UI) */
  --shop-line: rgba(12, 72, 38, .12);
  --shop-ink: var(--green);
  --shop-muted: var(--green-2);
  --shop-chip: var(--tint);
  --shop-chip-ink: var(--green);
}

.shop { background: var(--shop-bg); color: var(--shop-ink); padding: 40px 12px 44px; }
.shop-inner { max-width: 1360px; margin-inline: auto; }
.shop-intro { text-align: right; margin-bottom: 20px; }
.shop-title { font-size: 26px; line-height: 1.15; font-weight: 600; color: var(--shop-ink); margin: 0; }
.shop-body { font-size: 13.5px; line-height: 1.6; color: var(--shop-muted); margin: 8px 0 0; }
.shop-cta { margin-top: 16px; width: 100%; min-height: 44px; height: 44px; font-size: 13.5px; background: var(--green); color: var(--cream); }
.shop-cta:hover { background: var(--green-2); }

/* category chips */
.shop-nav { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; margin-bottom: 16px; padding-bottom: 2px; }
.shop-nav::-webkit-scrollbar { display: none; }
.shop-nav-item {
  flex: 0 0 auto; height: 38px; padding-inline: 16px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--shop-chip-ink);
  font: 500 12px/1 var(--font-he); transition: background-color .2s var(--ease), color .2s var(--ease);
}
.shop-nav-item:hover { background: rgba(12, 72, 38, .10); }
.shop-nav-item[aria-pressed="true"] { background: var(--green); color: var(--cream); }

/* grid */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.product-card { background: var(--white); border: 1px solid var(--shop-line); border-radius: 7px; overflow: hidden; min-width: 0; box-shadow: none; transition: border-color .2s var(--ease); }
.product-card:hover { border-color: rgba(12, 72, 38, .24); }
.product-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
/* the tile: product large and centred on a neutral field, never cropped */
.product-media { position: relative; background: #EAEEEF; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
/* the adidas photos are square and already sit on a neutral field with their own margin: fill the tile so the product reads large, no inner box */
.product-media picture { display: contents; }
.product-media img { width: 100%; height: 100%; object-fit: contain; }

.product-badge {
  position: absolute; top: 10px; inset-inline-start: 10px;
  font-family: var(--font-latin); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
  background: var(--green); color: var(--cream); padding: 6px 10px; border-radius: 11px; direction: ltr;
}
/* a Hebrew badge reads in Hebrew, and the club's exclusive racket wears the brand pink so it is seen first
   (Snir, 18.10.2026) */
.product-badge.is-he {
  font-family: var(--font-he); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; direction: rtl;
  background: var(--mauve); color: var(--green); padding: 6px 11px;
}
.product-card.is-featured { border-color: var(--mauve); box-shadow: 0 0 0 1px var(--mauve); }
.product-card.is-featured:hover { border-color: var(--mauve); box-shadow: 0 0 0 2px var(--mauve); }
.product-card.is-featured .product-cta { color: var(--green); }
.product-body { padding: 12px 12px 14px; text-align: right; display: flex; flex-direction: column; flex: 1; }
.product-cat { font-size: 10px; font-weight: 400; color: var(--green-2); margin: 0 0 4px; }
.product-name { font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--shop-ink); margin: 0; direction: ltr; unicode-bidi: isolate; text-align: right; text-wrap: initial;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-price { font-size: 12px; font-weight: 600; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.product-price s { color: var(--shop-muted); font-weight: 400; margin-inline-start: 6px; }
.product-stock { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--shop-muted); margin: 7px 0 0; }
.product-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(12, 72, 38, .25); flex: 0 0 auto; }
.product-stock.is-available .product-dot, .pp-stock.is-available .product-dot, .pm-stock.is-available .product-dot { background: var(--green); }
.product-cta { display: block; margin-top: auto; padding-top: 12px; font-size: 11px; font-weight: 600; color: var(--green); }
.product-grid .grid-note, .shop-empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center; font-size: 14px; color: var(--shop-muted); }

@media (min-width: 768px) {
  .shop { padding: 64px 32px 68px; }
  .shop-intro { margin-bottom: 24px; }
  .shop-title { font-size: 34px; }
  .shop-body { font-size: 15px; margin-top: 10px; }
  .shop-cta { width: auto; min-width: 180px; margin-top: 18px; }
  .shop-nav { gap: 10px; overflow: visible; margin-bottom: 22px; }
  .shop-nav-item { height: 40px; padding-inline: 20px; font-size: 13px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .product-body { padding: 18px 18px 20px; }
  .product-cat { font-size: 11.5px; margin-bottom: 6px; }
  .product-name { font-size: 16px; }
  .product-price { font-size: 14px; }
  .product-stock { font-size: 13px; margin-top: 10px; }
  .product-cta { font-size: 12.5px; padding-top: 16px; }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  /* homepage: intro block and its CTA both sit on the right, products below */

}

/* ---------- homepage shop section: the same blocks as /shop/, banners full width ---------- */
.shop.shop-home { padding: 0; }
.shop-home .shop-page { padding-top: 24px; }
@media (min-width: 768px) {
  .shop-home .shop-page { padding-top: 40px; padding-bottom: 48px; }
}

/* ---------- /shop/ catalogue page (approved reference) ---------- */
.page-shop { background: var(--shop-bg); }
.page-shop-main { padding-top: var(--header-h); background: var(--shop-bg); } /* beats the cream `main` surface of the club pages */
.shop-page { max-width: 1360px; margin-inline: auto; padding: 24px 12px 32px; }

/* approved banner artwork (assets/shop/, used as supplied): full width, native aspect ratio,
   no crop, no overlay, no filter. Mobile files below 768px, desktop files from 768px up (<picture>). */
.shop-banner { display: block; width: 100%; overflow: hidden; background: var(--shop-ink); }
.shop-banner img { display: block; width: 100%; height: auto; }
/* bottom banner: full width but thinner (Snir, 17.9). The artwork is trimmed top and bottom by the viewport,
   with the window placed so the text and the ball's logo always stay in frame (measured on the files):
   phones 1080x520 shown as 1080x430, window rows 76 to 506 (logo bars from about 86, Hebrew line 439 to 493);
   desktop 1920x360 shown as 1920x250, window rows 110 to 360 (all text between 185 and 341). */
.shop-banner--bottom img { aspect-ratio: 1080 / 430; object-fit: cover; object-position: 50% 84%; }
@media (min-width: 768px) { .shop-banner--bottom img { aspect-ratio: 1920 / 250; object-position: 50% 100%; } }

/* heading band */
.shop-top { margin-bottom: 16px; }
.shop-head { text-align: center; }
.shop-head-title { font-size: 25px; line-height: 1.15; font-weight: 600; color: var(--shop-ink); margin: 0; }
.shop-head-sub { font-size: 12.5px; line-height: 1.6; color: var(--shop-muted); margin: 6px 0 0; }
.shop-head .shop-cta { display: flex; width: 100%; margin: 14px 0 0; }
/* phones: chips as an even 4-column block, like the reference row, wrapping to a second row */
/* phones: one segmented bar, four chips in view (as in the reference), the rest scroll */
.shop-top .shop-nav { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6px) / 4); gap: 2px; overflow-x: auto; margin: 16px 0 0; padding: 3px; background: var(--shop-chip); border-radius: 8px; white-space: nowrap; }
.shop-top .shop-nav-item { width: 100%; padding-inline: 6px; height: 38px; font-size: 12.5px; }


@media (min-width: 768px) {
  .shop-page { padding: 40px 32px 56px; }

  /* heading on the right, chips on the left in the same band */
  .shop-top { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; margin-bottom: 24px; }
  .shop-head { text-align: right; }
  .shop-head-title { font-size: 44px; }
  .shop-head-sub { font-size: 14px; margin-top: 8px; }
  .shop-head .shop-cta { display: inline-flex; width: auto; min-width: 150px; min-height: 42px; height: 42px; margin-top: 16px; font-size: 13.5px; }
  .shop-top .shop-nav { display: flex; gap: 2px; margin: 0; padding: 3px; overflow: visible; justify-self: start; }
  .shop-top .shop-nav-item { width: auto; padding-inline: 20px; height: 40px; font-size: 13.5px; }

}

@media (min-width: 1024px) {
  /* heading on the right, chips on the left in the same band */
  .shop-top { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .shop-top .shop-nav { margin-top: 50px; justify-self: end; }
}
/* homepage featured row: always four across from tablet up, never an orphan card */
@media (min-width: 768px) { .shop-home .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 768px) and (max-width: 1023px) {
  /* four narrow cards on tablet: compact card type so full product names fit */
  .shop-home .product-body { padding: 12px 12px 14px; }
  .shop-home .product-cat { font-size: 10px; }
  .shop-home .product-name { font-size: 12.5px; }
  .shop-home .product-stock { font-size: 11px; margin-top: 7px; }
  .shop-home .product-cta { font-size: 11px; padding-top: 12px; }
}
@media (min-width: 1024px) { .shop-home .product-grid { gap: 20px; } }

/* ---------- product page ---------- */
.product-page { max-width: 1320px; margin-inline: auto; padding: 24px 12px 50px; display: grid; gap: 24px; }
.pp-gallery { position: relative; }
.pp-main { position: relative; background: var(--shop-tile); border-radius: var(--radius-md); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 32px; }
.pp-main picture { display: contents; }
.pp-main img { max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; }
.pp-main.is-racket img { max-height: 86%; }
.pp-thumbs { display: flex; gap: 8px; margin-top: 12px; }
.pp-thumb { width: 72px; height: 72px; padding: 8px; border: 1px solid var(--shop-line); border-radius: var(--radius-sm); background: var(--shop-tile); cursor: pointer; }
.pp-thumb picture { display: contents; }
.pp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pp-info { text-align: right; }
.pp-cat { font-size: 11px; margin-bottom: 8px; }
.pp-title { font-size: 28px; line-height: 1.15; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.pp-price { font-size: 22px; font-weight: 600; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.pp-price s { color: var(--muted); font-weight: 400; margin-inline-start: 8px; font-size: 16px; }
.pp-body { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.pp-meta { display: grid; gap: 8px; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--shop-line); font-size: 14px; }
.pp-meta li { display: flex; gap: 12px; }
.pp-meta-key { color: var(--muted); min-width: 64px; }
.pp-meta-val { color: var(--ink); }
/* the club store sells on the floor, not online: availability line instead of a cart button */
.pp-stock { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 14px; font-weight: 500; color: var(--shop-ink); }
.pp-stock .product-dot { width: 8px; height: 8px; }
.pp-note { font-size: 13px; color: var(--shop-muted); margin: 8px 0 0; }
.pp-back { display: block; margin-top: 24px; font-size: 13px; color: var(--muted); }
.pp-missing { font-size: 15px; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .product-page { grid-template-columns: 1.1fr .9fr; gap: 64px; padding: 48px 32px 80px; align-items: start; direction: ltr; }
  .product-page > * { direction: rtl; }
  .pp-title { font-size: 36px; }
}

/* ---------- product popup (Snir, 18.9.2026): a product opens over the page instead of a new page ----------
   Phones: a sheet rising from the bottom. Tablet and desktop: a centred card, photo on the left, details on the right. */
html.modal-open { overflow: hidden; }
.product-modal {
  width: 100%; max-width: none; max-height: 92svh; margin: auto 0 0; padding: 0; border: 0; border-radius: 20px 20px 0 0;
  background: var(--cream); color: var(--ink); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 -20px 50px -24px rgba(12, 72, 38, .55);
}
.product-modal::backdrop { background: rgba(12, 72, 38, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.product-modal[open] { animation: pm-in .3s var(--ease); }
@keyframes pm-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.pm-close {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255, 250, 244, .94); color: var(--green); cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(12, 72, 38, .45);
}
.pm-close svg { width: 20px; height: 20px; }
.pm-close:hover { background: var(--blush); }
.pm-grid { display: grid; }
.pm-media { position: relative; display: flex; align-items: center; justify-content: center; height: 44svh; background: #EAEEEF; } /* the product photos' own field */
.pm-media picture { display: contents; }
.pm-media img { width: 100%; height: 100%; object-fit: contain; }
.pm-info { padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); text-align: right; }
.pm-cat { margin: 0 0 6px; font-size: 12.5px; color: var(--green-2); }
.pm-title { margin: 0 0 8px; font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--green); direction: ltr; unicode-bidi: isolate; text-align: right; }
.pm-price { margin: 0 0 10px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-price s { margin-inline-start: 8px; font-size: 14px; font-weight: 400; color: var(--green-2); }
.pm-body { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.pm-meta { display: grid; gap: 7px; margin: 14px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--hairline); font-size: 14px; }
.pm-meta li { display: flex; gap: 12px; }
.pm-meta-key { min-width: 64px; color: var(--green-2); }
.pm-meta-val { color: var(--green); }
.pm-stock { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 14px; font-weight: 600; color: var(--green); }
.pm-stock .product-dot { width: 8px; height: 8px; }
.pm-note { margin: 6px 0 0; font-size: 13px; color: var(--green-2); }
@media (min-width: 768px) {
  .product-modal { width: min(880px, calc(100% - 48px)); max-height: min(640px, 90vh); margin: auto; border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(12, 72, 38, .6); }
  .pm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); direction: ltr; } /* photo on the left */
  .pm-grid > * { direction: rtl; }
  .pm-media { height: auto; min-height: 420px; }
  .pm-info { align-self: center; padding: 40px 34px 34px; }
  .pm-title { font-size: 28px; }
  .pm-close { top: 14px; left: 14px; }
}

/* ---------- tournament photo gallery (Snir, 14.10.2026) ----------
   A finished tournament opens the club's photos over the page. Dark green chrome, because here the photos are
   the content: one big picture, a caption, a counter and a strip of thumbnails. */
.gallery-modal {
  width: 100%; max-width: none; max-height: 94svh; margin: auto 0 0; padding: 0; border: 0; border-radius: 20px 20px 0 0;
  background: var(--green); color: var(--cream); overflow: hidden; overscroll-behavior: contain;
  box-shadow: 0 -20px 50px -24px rgba(6, 30, 16, .7);
}
.gallery-modal::backdrop { background: rgba(6, 30, 16, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gallery-modal[open] { display: flex; flex-direction: column; animation: pm-in .3s var(--ease); }
.gallery-close {
  position: absolute; top: 10px; left: 10px; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255, 250, 244, .94); color: var(--green); cursor: pointer;
}
.gallery-close svg { width: 19px; height: 19px; }
.gallery-close:hover { background: var(--blush); }
.gallery-head { padding: 16px 16px 10px; padding-inline-end: 62px; text-align: right; }
.gallery-title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 700; color: var(--cream); }
.gallery-counter { margin: 3px 0 0; font-size: 12.5px; color: rgba(255, 250, 244, .7); }
.gallery-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #061E10; }
.gallery-figure { margin: 0; width: 100%; height: 56svh; display: flex; align-items: center; justify-content: center; }
.gallery-figure picture { display: contents; }
.gallery-figure img { width: 100%; height: 100%; object-fit: contain; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 250, 244, .9); color: var(--green); cursor: pointer;
}
.gallery-nav svg { width: 20px; height: 20px; }
.gallery-nav:hover { background: var(--blush); }
.gallery-prev { inset-inline-start: 10px; }
.gallery-next { inset-inline-end: 10px; }
.gallery-caption { margin: 0; padding: 10px 16px 0; font-size: 13px; line-height: 1.5; color: rgba(255, 250, 244, .82); text-align: right; }
.gallery-strip {
  display: flex; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 auto; width: 44px; height: 60px; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: #061E10; cursor: pointer; opacity: .55; transition: opacity .2s var(--ease), box-shadow .2s var(--ease);
}
.gallery-thumb picture { display: contents; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--mauve); }
/* the photo on a finished card opens the same popup */
.tournament-media.is-clickable { cursor: pointer; }
@media (min-width: 768px) {
  /* portrait photos: the panel is only as wide as it needs to be, so the picture is not lost in a dark field */
  .gallery-modal { width: min(660px, calc(100% - 48px)); max-height: 92vh; margin: auto; border-radius: 22px; }
  .gallery-head { padding: 20px 20px 12px; padding-inline-end: 70px; }
  .gallery-title { font-size: 20px; }
  .gallery-figure { height: min(62vh, 620px); }
  .gallery-nav { width: 48px; height: 48px; }
  .gallery-prev { inset-inline-start: 16px; }
  .gallery-next { inset-inline-end: 16px; }
  .gallery-caption { padding: 12px 20px 0; font-size: 14px; }
  .gallery-strip { gap: 10px; padding: 12px 20px 18px; }
  .gallery-thumb { width: 54px; height: 74px; }
}

/* ---------- tournament landing page (client brief, 21.10.2026) ----------
   Built out of the pieces the rest of the site already uses: the photo hero, the cream card under it,
   a photo band and the green closing block. No icon grids, no numbered badges (Snir, 21.10.2026). */
.page-event { background: var(--cream); }
.page-event .book-strip { display: none; } /* one call to action on this page: registration */
.ev-main { padding-top: var(--header-h); }

.ev-hero { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; background: var(--green); color: var(--cream); }
.ev-hero-media { position: absolute; inset: 0; }
.ev-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; } /* past the watermark in the photo's corner */
.ev-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 30, 16, .62) 0%, rgba(6, 30, 16, .45) 34%, rgba(6, 30, 16, .82) 62%, rgba(6, 30, 16, .95) 100%);
}
.ev-hero-inner { position: relative; z-index: 1; width: 100%; padding: 40px var(--pad-x) 36px; text-align: center; }
.ev-kicker { display: inline-flex; align-items: center; gap: 8px; background: var(--mauve); color: var(--green);
  border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; }
.ev-title { margin: 16px 0 0; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(38px, 9.6vw, 68px); line-height: 1.04; letter-spacing: -.005em; direction: ltr; unicode-bidi: isolate; text-align: center;
  text-shadow: 0 1px 18px rgba(6, 30, 16, .4); }
.ev-sub { margin: 10px auto 0; max-width: 520px; font-size: 17px; line-height: 1.5; color: rgba(255, 250, 244, .92); }
.ev-actions { display: grid; gap: 10px; margin-top: 22px; }
.ev-actions .btn { width: 100%; }
.ev-wa { background: #1F8A4C; color: #fff; gap: 9px; }
.ev-wa:hover { background: #18703E; }
.ev-wa svg { width: 19px; height: 19px; }

.ev-section { padding: 36px var(--pad-x); }
.ev-section-title { margin: 0 0 18px; text-align: center; }

/* the prizes: centred, on the brand pink, written as copy and not as a row of boxes (Snir, 21.10.2026) */
.ev-centre { text-align: center; }
.hl { background: linear-gradient(transparent 58%, var(--mauve) 58%, var(--mauve) 92%, transparent 92%); padding-inline: 2px; }
.ev-prizes-band { background: var(--blush); padding: 40px var(--pad-x) 44px; }
.ev-prizes-inner { max-width: 760px; margin-inline: auto; text-align: center; }
.ev-prizes-band .section-title { margin: 0 0 22px; }
.ev-prizes-band .hl { background: linear-gradient(transparent 56%, var(--white) 56%, var(--white) 90%, transparent 90%); }
.ev-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--green-2); }
/* the first prize sits on a ticket, so it reads as something you win and not as a paragraph */
.ev-ticket { position: relative; background: var(--cream); border-radius: 20px; padding: 30px 22px 28px;
  box-shadow: 0 24px 48px -34px rgba(12, 72, 38, .6); }
.ev-ticket::before, .ev-ticket::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  background: var(--blush); border-radius: 50%;
}
.ev-ticket::before { inset-inline-start: -13px; }
.ev-ticket::after { inset-inline-end: -13px; }
.ev-ticket h3 { margin: 10px 0 0; font-size: clamp(27px, 7.4vw, 40px); line-height: 1.15; font-weight: 800; color: var(--green); }
.ev-stars { margin: 12px 0 0; font-size: 17px; letter-spacing: .32em; color: var(--mauve); }
.ev-hotel { margin: 12px 0 0; padding-top: 14px; border-top: 1px dashed rgba(12, 72, 38, .25);
  font-size: 17px; font-weight: 700; color: var(--green); }
.ev-hotel-city { margin: 4px 0 0; font-size: 14.5px; color: var(--green-2); }
.ev-rest { margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(12, 72, 38, .18); display: grid; gap: 22px; }
.ev-rest > div { padding: 0; border: 0; }
.ev-rest dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--green-2); }
.ev-rest dd { margin: 7px 0 0; font-size: 16.5px; line-height: 1.55; font-weight: 600; color: var(--green); }

/* the card under the hero reads centred on this page too */
.page-event .book-card { justify-content: center; }
.page-event .book-card-text { text-align: center; }
.page-event .book-card-hl { justify-content: center; }

/* who stands behind the day */
.ev-partners { padding: 34px var(--pad-x) 10px; text-align: center; }
.ev-partners ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.ev-partners li { display: grid; place-items: center; width: 108px; height: 72px; padding: 10px 14px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: 14px; }
.ev-partners img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.ev-partners li:first-child { background: var(--green); }

/* the day itself, written over a photo of the club */
.ev-band { position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; color: var(--cream); background: var(--green); }
.ev-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.ev-band::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 30, 16, .35) 0%, rgba(6, 30, 16, .55) 45%, rgba(6, 30, 16, .92) 100%); }
.ev-band-copy { position: relative; z-index: 1; padding: 0 var(--pad-x) 34px; max-width: 640px; margin-inline: auto; text-align: center; }
.ev-band-copy h2 { margin: 0 0 12px; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.2; font-weight: 700; }
.ev-band-copy p { margin: 0; font-size: 16.5px; line-height: 1.65; color: rgba(255, 250, 244, .92); }
.ev-band-note { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid rgba(255, 250, 244, .25); color: var(--mauve) !important; font-weight: 600; }

.ev-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ev-shot { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--green); border: 0; padding: 0; cursor: pointer; }
.ev-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-shots-more { display: block; margin: 14px auto 0; }

.ev-cta { margin: 36px 0 0; padding: 36px var(--pad-x) calc(36px + env(safe-area-inset-bottom)); background: var(--green); color: var(--cream); text-align: center; }
.ev-cta h2 { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 700; }
.ev-cta .hl { background: linear-gradient(transparent 58%, var(--green-2) 58%, var(--green-2) 92%, transparent 92%); }
.ev-cta p { margin: 10px auto 0; max-width: 520px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 250, 244, .88); }
.ev-cta .ev-actions { max-width: 520px; margin-inline: auto; }
.ev-tagline { margin: 22px 0 0 !important; font-family: var(--font-latin); font-size: 11px; font-weight: 500; letter-spacing: .3em;
  color: rgba(255, 250, 244, .6) !important; direction: ltr; }

@media (max-width: 767px) {
  /* the cream card sits on the hero's bottom edge, as it does on the home page */
  .page-event .ev-hero-inner { padding-bottom: calc(var(--book-card-h) + 30px); }
}
@media (min-width: 768px) {
  .ev-hero { min-height: 620px; }
  .ev-hero-inner { padding: 60px var(--pad-x) 48px; }
  .ev-sub { font-size: 19px; }
  .ev-actions { grid-template-columns: repeat(2, minmax(0, 260px)); }
  .ev-section { padding: 56px var(--pad-x); max-width: 1400px; margin-inline: auto; }
  .ev-section-title { margin-bottom: 24px; }
  .ev-prizes-band { padding: 60px var(--pad-x) 64px; }
  .ev-ticket { padding: 38px 32px 34px; }
  .ev-stars { font-size: 20px; }
  .ev-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 36px; padding-top: 30px; }
  .ev-partners li { width: 164px; height: 92px; }
  .ev-partners img { max-height: 56px; }
  .ev-band { min-height: 520px; }
  .ev-band-copy { padding: 0 var(--pad-x) 52px; max-width: 760px; }
  .ev-shots { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .ev-cta h2 { font-size: 30px; }
}
@media (min-width: 1024px) {
  /* the portrait photo keeps one side, the event takes the other, as the home hero does */
  .ev-hero { min-height: 640px; align-items: center; }
  .ev-hero-media { inset: 0 0 0 auto; width: 46%; }
  .ev-hero-media::after { background: linear-gradient(270deg, rgba(6, 30, 16, .25) 0%, rgba(6, 30, 16, .1) 60%, rgba(6, 30, 16, .5) 100%); }
  .ev-hero-inner { padding: 0 50% 0 var(--pad-x); max-width: 1400px; margin-inline: auto; }
  .ev-title { font-size: clamp(54px, 4.6vw, 76px); }
  .ev-cta { padding: 60px var(--pad-x); }
}

/* ---------- tournament landing page, poster version (the club's own artwork, 21.10.2026) ----------
   The court texture, the giant serif word and the cut-out players come from the poster the client designed.
   Everything here is live text on that background, so it reflows and stays readable on a phone. */
.page-poster { background: #3F8C67 url("../img/court-texture.webp") repeat; background-size: 360px auto; color: var(--cream); }
.page-poster .book-strip { display: none; }
.page-poster main { background: transparent; } /* the club pages paint main cream; here the court shows through */
.pv-main { padding-top: var(--header-h); }
.pv-wrap { max-width: 1100px; margin-inline: auto; padding-inline: var(--pad-x); }

.pv-hero { position: relative; padding: 26px 0 36px; text-align: center; overflow: hidden; }
.pv-mark { width: 96px; height: 96px; margin: 0 auto; display: block; }
.pv-word { position: relative; margin: 42px 0 0; display: flex; align-items: center; justify-content: center; gap: .04em;
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; line-height: .9;
  font-size: clamp(62px, 21vw, 180px); direction: ltr; }
.pv-word span { display: block; }
.pv-word span:nth-child(2) { transform: translateY(.07em); }
.pv-word span:nth-child(3) { transform: translateY(.14em); }
.pv-word span:nth-child(4) { transform: translateY(.07em); }
.pv-figure { position: absolute; pointer-events: none; }
.pv-figure img { width: 100%; height: auto; display: block; }
.pv-f1 { width: 46px; top: -42%; inset-inline-start: 4%; }
.pv-f2 { width: 52px; top: -46%; inset-inline-end: 6%; }
.pv-f3 { width: 44px; bottom: -34%; inset-inline-start: 26%; }
.pv-f4 { width: 48px; bottom: -40%; inset-inline-end: 24%; }
.pv-date { margin: 30px 0 0; font-family: var(--font-display); font-size: clamp(22px, 6.4vw, 38px); font-weight: 500;
  letter-spacing: .1em; direction: ltr; }
.pv-name { margin: 10px auto 0; max-width: 520px; font-family: var(--font-display); font-size: clamp(20px, 5.4vw, 30px);
  font-weight: 500; line-height: 1.15; letter-spacing: .06em; direction: ltr; }

.pv-facts { margin: 26px auto 0; max-width: 560px; font-size: 16.5px; font-weight: 700; line-height: 1.9; }
.pv-facts p { margin: 0; }
.pv-facts .pv-soft { font-weight: 500; color: rgba(255, 250, 244, .86); }
.pv-actions { display: grid; gap: 10px; margin: 24px auto 0; max-width: 460px; }
.pv-actions .btn { width: 100%; }
.pv-wa { background: #1F8A4C; color: #fff; gap: 9px; }
.pv-wa:hover { background: #18703E; }
.pv-wa svg { width: 19px; height: 19px; }

.pv-rule { height: 1px; margin: 34px 0 0; background: rgba(255, 250, 244, .26); }
.pv-section { padding: 34px 0 0; text-align: center; }
.pv-h2 { margin: 0 0 16px; font-family: var(--font-display); font-size: clamp(26px, 7vw, 40px); font-weight: 500; letter-spacing: .04em; direction: ltr; }
.pv-h2-he { font-family: var(--font-he); font-weight: 700; letter-spacing: 0; direction: rtl; }
.pv-list { margin: 0; padding: 0; list-style: none; font-size: 16.5px; line-height: 1.75; }
.pv-list li + li { margin-top: 14px; }
.pv-list b { display: block; font-weight: 700; }
.pv-list span { color: rgba(255, 250, 244, .86); }
.pv-prize-1 { padding: 18px 16px; border: 1px solid rgba(255, 250, 244, .34); border-radius: 16px; }
.pv-prize-1 b { font-size: 19px; }
.pv-note { margin: 22px auto 0; max-width: 560px; padding: 16px; border-radius: 16px; background: rgba(255, 250, 244, .12);
  font-size: 16px; font-weight: 600; line-height: 1.6; }

.page-poster .ev-shots-more { border: 1px solid rgba(255, 250, 244, .5); color: var(--cream); background: transparent; }
.page-poster .ev-shots-more:hover { background: rgba(255, 250, 244, .14); }
.pv-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px; margin: 30px 0 0; padding: 0 0 40px; list-style: none; }
.pv-partners img { height: 36px; width: auto; object-fit: contain; }
.pv-partners li:last-child img { height: 56px; }   /* the round club mark reads smaller at the same height */
.pv-partners .pv-mono { filter: brightness(0) invert(1); }
.pv-tagline { margin: 26px 0 0; font-family: var(--font-latin); font-size: 11px; font-weight: 500; letter-spacing: .3em;
  color: rgba(255, 250, 244, .66); direction: ltr; }

@media (min-width: 768px) {
  .pv-hero { padding: 40px 0 48px; }
  .pv-mark { width: 118px; height: 118px; }
  .pv-f1 { width: 78px; top: -40%; } .pv-f2 { width: 86px; top: -44%; }
  .pv-f3 { width: 72px; bottom: -32%; } .pv-f4 { width: 80px; bottom: -38%; }
  .pv-facts { font-size: 18px; }
  .pv-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-section { padding-top: 48px; }
  .pv-list { font-size: 17.5px; }
  .pv-shots { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .pv-partners img { height: 44px; }
  .pv-partners li:last-child img { height: 68px; }
}
@media (min-width: 1024px) {
  .pv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
}

/* ---------- footer (Snir's footer DEV package, 17.9.2026: assets/footer-reference-desktop.png) ----------
   One deep green section. The club photo sits at its top and dissolves into the green (never a standalone image block);
   invitation and CTAs over the fade, logo line, one row of contact and social tiles, a thin bottom bar.
   Phones: shorter photo, CTAs side by side, tiles 3 across, menu before the copyright line. */
.site-footer { position: relative; overflow: hidden; background: var(--green); color: var(--cream); }
.footer-hero { position: relative; }
.footer-bg { position: absolute; top: 0; left: 0; width: 100%; height: 250px; object-fit: cover; object-position: 50% 45%; }
.footer-hero::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 252px; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 72, 38, 0) 0%, rgba(12, 72, 38, .18) 36%, rgba(12, 72, 38, .74) 72%, var(--green) 100%);
}
.footer-hero-inner { position: relative; z-index: 1; padding: 136px var(--gutter) 0; }
.footer-hero-copy { text-align: right; }
.footer-title { margin: 0; font-size: 27px; line-height: 1.2; font-weight: 700; color: var(--cream); text-wrap: balance; }
.footer-title-accent { color: var(--mauve); }
.footer-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 250, 244, .9); }
.footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.footer-cta { gap: 8px; min-height: 48px; padding: 0 12px; font-size: 15px; font-weight: 600; }
.footer-cta-icon { flex: 0 0 auto; width: 16px; height: 16px; }
.footer-cta--primary { background: var(--mauve); color: var(--green); }
.footer-cta--primary:hover { background: var(--blush); }
.footer-cta--ghost { background: transparent; color: var(--cream); border: 1.5px solid rgba(255, 250, 244, .85); }
.footer-cta--ghost:hover { background: rgba(255, 250, 244, .1); border-color: var(--cream); }

/* logo line: short text, a hairline, the logo on the far left (reference) */
.footer-brand-block { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.footer-brand-line { margin: 0; padding-inline-end: 18px; border-inline-end: 1px solid rgba(255, 250, 244, .45); font-size: 15px; line-height: 1.45; color: rgba(255, 250, 244, .92); text-align: left; }
.footer-brand { display: block; flex: 0 0 auto; border-radius: 50%; }
.footer-brand img { display: block; width: 76px; height: 76px; }

.footer-inner { position: relative; z-index: 1; padding: 0 var(--gutter) 24px; }
.footer-contacts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; margin: 26px 0 0; padding: 18px 0;
  list-style: none; border-block: 1px solid rgba(255, 250, 244, .18);
}
.footer-contacts li:not(:nth-child(3n + 1)) { border-inline-start: 1px solid rgba(255, 250, 244, .14); }
.footer-contact {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 44px; height: 100%;
  padding: 4px 6px; color: var(--cream); text-align: center; text-decoration: none;
}
.footer-icon { width: 24px; height: 24px; margin-bottom: 5px; }
.footer-contact b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.footer-contact span { font-size: 12px; line-height: 1.3; color: rgba(255, 250, 244, .72); }
a.footer-contact:hover b { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact.is-soon { opacity: .5; } /* TikTok: coming soon, not a link */

.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; text-align: center; font-size: 13px; color: rgba(255, 250, 244, .75); }
.footer-legal { order: 1; margin: 0; direction: ltr; unicode-bidi: isolate; } /* © and year first, then the Hebrew line */
.footer-legal > span { unicode-bidi: isolate; }
.footer-tagline { order: 2; margin: 0; font-family: var(--font-latin); font-size: 11px; font-weight: 500; letter-spacing: .3em; color: rgba(255, 250, 244, .6); }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-block; padding: 11px 0; font-size: 14px; color: rgba(255, 250, 244, .9); text-decoration: none; }
.footer-nav a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 768px) {
  .footer-bg { height: 380px; }
  .footer-hero::after { height: 382px; }
  .footer-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; padding: 220px var(--pad-x) 0; }
  .footer-title { font-size: 36px; }
  .footer-sub { font-size: 18px; }
  .footer-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
  .footer-cta { min-height: 50px; padding: 0 26px; font-size: 16px; }
  .footer-brand-block { margin: 0; gap: 26px; }
  .footer-brand-line { padding-inline-end: 26px; font-size: 18px; }
  .footer-brand img { width: 140px; height: 140px; }
  .footer-inner { padding: 0 var(--pad-x) 28px; }
  .footer-contacts { margin-top: 36px; padding: 22px 0; }
  .footer-contact b { font-size: 14px; }
  .footer-contact span { font-size: 13px; }
}
@media (min-width: 1024px) {
  .footer-bg { height: 480px; object-position: 50% 40%; }
  .footer-hero::after { height: 482px; }
  .footer-hero-inner { gap: 48px; padding-top: 300px; }
  .footer-title { font-size: clamp(38px, 3.3vw, 50px); }
  .footer-sub { margin-top: 10px; font-size: 21px; }
  .footer-actions { gap: 16px; margin-top: 28px; }
  .footer-cta { min-height: 54px; padding: 0 32px; font-size: 17px; }
  .footer-brand-block { gap: 34px; }
  .footer-brand-line { padding-inline-end: 34px; font-size: 21px; line-height: 1.5; }
  .footer-brand img { width: 196px; height: 196px; }
  .footer-contacts { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 40px; padding: 26px 0; }
  .footer-contacts li:nth-child(n + 2) { border-inline-start: 1px solid rgba(255, 250, 244, .16); }
  .footer-icon { width: 26px; height: 26px; }
  .footer-contact b { font-size: 15px; }
  .footer-contact span { font-size: 13.5px; }
  /* bottom bar: copyright on the right, menu in the middle, tagline on the left */
  .footer-inner { padding-bottom: 30px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; gap: 24px; padding-top: 22px; }
  .footer-legal, .footer-tagline { order: 0; }
  .footer-nav ul { gap: 0; }
  .footer-nav li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-inline: 14px; background: rgba(255, 250, 244, .32); vertical-align: middle; }
  .footer-nav a { padding: 8px 0; font-size: 14px; }
}

/* ---------- SNIR credit bar: the bar Snir uses on his client sites (dark, SNIR. mark, link to snirdote.co.il) ---------- */
.snir-credit { background: #111114; padding: 18px 24px; direction: rtl; }
.snir-credit__link { display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; }
.snir-credit__mark { color: #F4F4F5; font-family: var(--font-latin); font-size: 17px; font-weight: 800; letter-spacing: .06em; direction: ltr; unicode-bidi: isolate; }
.snir-credit__dot { color: #6B6B73; }
.snir-credit__text { color: #8A8A93; font-size: 13px; }
.snir-credit__link:hover .snir-credit__text { color: #C8C8CF; }
@media (max-width: 480px) {
  .snir-credit { padding: 14px 16px; }
  .snir-credit__mark { font-size: 15px; }
  .snir-credit__text { font-size: 12px; }
}

/* ---------- booking strip: pink, fixed to the bottom of the screen on every page (Snir, 17.9.2026) ----------
   Since 18.9 it rises only once the booking card has been scrolled past, and it is thinner on phones.
   The page keeps the strip's height free at its end, so the footer's last line is never covered. */
body { padding-bottom: calc(42px + env(safe-area-inset-bottom)); }
.book-strip {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: calc(42px + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
  background: var(--mauve); color: var(--green); text-decoration: none;
  font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .01em;
  box-shadow: 0 -12px 28px -20px rgba(12, 72, 38, .55);
  transition: background-color .25s var(--ease), transform .35s var(--ease), visibility 0s;
}
/* until the booking card has been scrolled past (main.js), the strip waits below the screen; without JS it just shows */
.book-strip.is-waiting { transform: translateY(110%); visibility: hidden; transition: background-color .25s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.book-strip:hover { background: var(--blush); }
.book-strip-icon { flex: 0 0 auto; width: 16px; height: 16px; transition: transform .25s var(--ease); }
.book-strip:hover .book-strip-icon { transform: translateX(-3px); }
.book-strip:focus-visible { outline: 3px solid var(--green); outline-offset: -7px; }
@media (min-width: 768px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .book-strip { gap: 10px; min-height: calc(56px + env(safe-area-inset-bottom)); font-size: 17px; }
  .book-strip-icon { width: 18px; height: 18px; }
}

/* ---------- phones: centre the editorial blocks (Snir, 2026-09-16) ---------- */
@media (max-width: 767px) {
  .split-about .split-copy,
  .shop-intro { text-align: center; }
  .split-about .split-copy .body { margin-inline: auto; }
  .split-about .split-copy .btn { align-self: center; }
  .split-about .split-copy { display: flex; flex-direction: column; }
  .shop-body { margin-inline: auto; }
  .shop-brand { justify-content: center; }
}

/* ---------- direction guard: Latin-only strings always read LTR, whatever the container rules ----------
   Alignment is inherited from the block: every copy block declares an explicit edge (right / left / center),
   never `start`, so an LTR label sits on the same edge as the Hebrew around it. */
[dir="ltr"], .latin { direction: ltr; unicode-bidi: isolate; }
.hero .hero-title { text-align: right; }

/* tablet only: stacked layout, so the shop CTA sits centred and the inset photos stay shallower */
@media (min-width: 768px) and (max-width: 1023px) {
  .split-about .split-media img { aspect-ratio: 16 / 10; }
}

/* ---------- reveal (opt-in via JS, visible at rest) ---------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}