@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Dancing+Script:wght@700&display=swap');

:root {
  --color-bg: #f7f6f2;
  --color-bg-alt: #edeef7;
  --color-bg-dark: #2d3154;
  --color-text: #2c2c3e;
  --color-text-muted: #545478;
  --color-text-light: #f7f6f2;
  --color-accent: #7b8fd4;
  --color-accent-deep: #3a54b1;
  --color-accent-deep-hover: #304692;
  --color-border: #c6c9e6;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Impact', sans-serif;
  --max-width: 1160px;
  --nav-height: 64px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 1rem;
}

picture {
  display: block;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}

/* ── Container ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  background-color: var(--color-accent-deep);
  color: var(--color-text-light);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid var(--color-accent-deep);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn:hover {
  background-color: var(--color-accent-deep-hover);
  border-color: var(--color-accent-deep-hover);
}

/* ── Nav ────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background-color: var(--color-bg);
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.nav-logo {
  font-family: 'Dancing Script', cursive;
  font-size: 2.05rem;
  font-weight: 700;
  color: var(--color-text);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-links a.active {
  color: var(--color-accent-deep);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  /* Padding pulled back by the same amount on the right, so the tap target is
     comfortably large without knocking the icon off the nav's edge. */
  padding: 0.6rem;
  margin-right: -0.6rem;
  color: var(--color-text);
}

.nav-toggle svg {
  display: block;
}

/* The three bars fold into an X while the panel is open. */
.nav-toggle-bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s linear;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar-top {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar-mid {
  opacity: 0;
  transform: scaleX(0.4);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar-bot {
  transform: translateY(-5px) rotate(-45deg);
}

@keyframes nav-row-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ── Page offset for fixed nav ──────────────────────────── */
main {
  padding-top: var(--nav-height);
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  display: flex;
  align-items: flex-end;
  background-color: var(--color-bg-dark);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/images/lenka_jerk.jpg');
  background-image: -webkit-image-set(
    url('assets/images/lenka_jerk.webp') type('image/webp'),
    url('assets/images/lenka_jerk.jpg') type('image/jpeg')
  );
  background-image: image-set(
    url('assets/images/lenka_jerk.webp') type('image/webp'),
    url('assets/images/lenka_jerk.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center top;
  opacity: 0.6;
  filter: grayscale(55%);
}

.hero .container {
  max-width: none;
  padding-left: clamp(1.5rem, 6vw, 6rem);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 580px;
  padding: 0 0 5rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* ── Hero eyebrow (inner page heroes) ──────────────────── */
.hero-eyebrow {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: 0.75rem;
}

/* ── Event banner ───────────────────────────────────────── */
.event-banner {
  background-color: var(--color-accent-deep);
  overflow: hidden;
  padding: 0.9rem 0;
  position: relative;
  display: flex;
  align-items: center;
}

.event-banner::before,
.event-banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.event-banner::before {
  left: 0;
  background: linear-gradient(to right, var(--color-accent-deep), transparent);
}

.event-banner::after {
  right: 0;
  background: linear-gradient(to left, var(--color-accent-deep), transparent);
}

.event-banner-track {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  animation: banner-scroll 50s linear infinite;
  white-space: nowrap;
}

.event-banner-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.event-banner:hover .event-banner-track {
  animation-play-state: paused;
}

.event-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(247, 246, 242, 0.8);
}

/* Drawn as a shape rather than a "·" glyph, so it sits where we put it
   instead of wherever the font puts the character. The row is all caps, and
   for this face the middle of the cap height lands on the middle of the line
   box, so centring the dot in the row centres it on the text. */
.event-item-dot {
  align-self: center;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(247, 246, 242, 0.5);
}

/* main.js lays out an even number of runs, so a half-track shift lands
   exactly where it started and the loop never shows a seam or a gap. */
@keyframes banner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Nav Instagram icon ─────────────────────────────────── */
.nav-instagram {
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.nav-instagram:hover {
  opacity: 1;
}

/* ── Club info layout ───────────────────────────────────── */
.club-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.club-info-lead h2 {
  margin-top: 0.75rem;
}

.club-info-body p {
  font-size: 1.3rem;
  color: var(--color-text-muted);
  margin-top: 0;
}

.club-info-body p + p {
  margin-top: 1rem;
}


/* ── Section base ───────────────────────────────────────── */
.section {
  padding: 6rem 0;
}

.section-alt {
  background-color: var(--color-bg-alt);
}

.section-header {
  margin-bottom: 3rem;
}

.section-eyebrow {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: 0.75rem;
}

.section h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.section p {
  font-size: 1.3rem;
  color: var(--color-text-muted);
  max-width: 680px;
  margin-top: 1rem;
}

/* ── Coach section (alternating photo/text rows) ────────── */
.coach-rows {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.coach-row {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 2.5rem;
  align-items: center;
}

.coach-row.reverse {
  grid-template-columns: 1fr minmax(200px, 300px);
}

.coach-row-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(44, 44, 62, 0.04), 0 4px 16px rgba(44, 44, 62, 0.06);
}

.coach-row-media-wide img {
  aspect-ratio: 4 / 3;
}

.coach-row-text {
  border-left: 2px solid var(--color-accent);
  padding-left: 2rem;
}

.coach-row.reverse .coach-row-text {
  border-left: none;
  border-right: 2px solid var(--color-accent);
  padding-left: 0;
  padding-right: 2rem;
}

.coach-row-text p {
  font-size: 1.3rem;
  color: var(--color-text-muted);
}

.coach-row-text .btn {
  margin-top: 1.5rem;
}

/* ── Membership cards ───────────────────────────────────── */
.membership-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.membership-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(44, 44, 62, 0.04), 0 4px 16px rgba(44, 44, 62, 0.06);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.membership-card h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.membership-price {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--color-accent-deep);
}

.membership-price a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.membership-price a:hover {
  color: var(--color-accent-deep-hover);
}

.membership-price span {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.membership-card p {
  font-size: 1.12rem;
  color: var(--color-text-muted);
  margin: 0;
  max-width: none;
}

.membership-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.membership-card li {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  padding-left: 1rem;
  position: relative;
}

.membership-card li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.membership-cards.preview .membership-card {
  padding: 2rem;
}


/* ── Page hero (inner pages) ────────────────────────────── */
.page-hero {
  background-color: var(--color-bg-alt);
  padding: 5rem 0 4rem;
  text-align: center;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1;
}

.page-hero p {
  font-size: 1.3rem;
  color: var(--color-text-muted);
  margin: 1rem auto 0;
  max-width: 620px;
}

/* ── Contact channels ───────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.contact-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(44, 44, 62, 0.04), 0 4px 16px rgba(44, 44, 62, 0.06);
}

.contact-channels {
  border-top: 1px solid var(--color-border);
}

.channel {
  display: block;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.channel-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  margin-bottom: 0.35rem;
}

/* Flex row so the arrow can never wrap onto a line of its own,
   however long the value is or however narrow the column gets. */
.channel-value {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color 0.2s;
}

.channel-text {
  overflow-wrap: anywhere;
}

/* The email address is the one thing this page exists to hand over,
   so it gets display scale and the heavier weight. */
.channel-primary .channel-value {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.channel-arrow {
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform 0.2s, color 0.2s;
}

.channel-meta {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

.channel:hover .channel-value,
.channel:focus-visible .channel-value {
  color: var(--color-accent-deep);
}

.channel:hover .channel-arrow,
.channel:focus-visible .channel-arrow {
  color: var(--color-accent-deep);
  transform: translateX(0.3rem);
}

.channel:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 4px;
}

/* ── CTA row ────────────────────────────────────────────── */
.cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-row.center {
  justify-content: center;
}

/* ── Team photo collage ─────────────────────────────────── */
.team-grid {
  columns: 3 260px;
  column-gap: 0.75rem;
}

.team-grid-item {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}

.team-grid-item img {
  width: 100%;
  display: block;
  border-radius: 6px;
  transition: opacity 0.2s;
}

.team-grid-item img:hover {
  opacity: 0.88;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-bg-dark);
  padding: 2.25rem 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.footer-nav a {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 246, 242, 0.65);
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--color-text-light);
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.footer-email {
  font-size: 0.87rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(247, 246, 242, 0.65);
  transition: color 0.2s;
}

.footer-email:hover {
  color: var(--color-text-light);
}

.footer-logo {
  height: 48px;
  width: auto;
  display: block;
}

.footer-brand {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-light);
  opacity: 0.9;
  flex-shrink: 0;
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .event-banner-track {
    animation: none;
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* The drop-down panel spans the full width, so its rules can run edge to
     edge while the text stays on the same 1.5rem margin as .container. */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 0.5rem;
    gap: 0;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 18px 40px rgba(44, 44, 62, 0.12);
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
  }

  .nav-links.open {
    display: flex;
  }

  /* Nav rows: the club's condensed display face at a size you can actually
     hit with a thumb, rather than the desktop link scaled down. */
  .nav-links li:not(.nav-social) > a {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 0 1.5rem;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links li:not(.nav-social) > a.active {
    color: var(--color-accent-deep);
    box-shadow: inset 3px 0 0 var(--color-accent-deep);
  }

  /* The social link is a different kind of thing from a page, so it sits
     below the rules rather than posing as another row. */
  .nav-social {
    padding: 1.1rem 1.5rem 0.35rem;
  }

  .nav-links .nav-instagram {
    width: 44px;
    height: 44px;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    opacity: 1;
  }

  .nav-links .nav-instagram svg {
    width: 20px;
    height: 20px;
  }

  /* Rows arrive in sequence, which reads as the panel unfolding. */
  .nav-links.open > li {
    animation: nav-row-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .nav-links.open > li:nth-child(1) { animation-delay: 0.03s; }
  .nav-links.open > li:nth-child(2) { animation-delay: 0.07s; }
  .nav-links.open > li:nth-child(3) { animation-delay: 0.11s; }
  .nav-links.open > li:nth-child(4) { animation-delay: 0.15s; }

  .nav-toggle {
    display: block;
  }

  .hero-content {
    padding: 0 0 3rem;
  }

  .club-info {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

.coach-row,
  .coach-row.reverse {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .coach-row-media {
    order: -1;
  }

  .coach-row-media-wide img {
    aspect-ratio: 4 / 5;
  }

  .coach-row-text,
  .coach-row.reverse .coach-row-text {
    border: none;
    padding: 0;
  }

  .membership-cards {
    grid-template-columns: 1fr;
  }

  .membership-card {
    padding: 1.75rem;
  }

  .membership-cards.preview .membership-card {
    padding: 1.5rem;
  }

  .team-grid {
    columns: 2 160px;
  }


  .section {
    padding: 4rem 0;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Lead with the contact details; the photo follows. */
  .contact-media {
    order: 2;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}