/* ==========================================================================
   TRUE BOUNCE TENNIS ACADEMY - "Night Court" design system
   Tokens + global + header/footer + page shells.
   Component styles for dynamic sections ship with the True Bounce Core plugin.
   ========================================================================== */

:root {
  --tb-bg: #0C110E;
  --tb-surface: #141B16;
  --tb-surface-2: #1B241E;
  --tb-paper: #F2F4EE;
  --tb-paper-2: #E8EBE2;
  --tb-ink: #0C110E;
  --tb-accent: #D9F53F;
  --tb-accent-dim: #B9D22F;
  --tb-muted: #8A9A8C;
  --tb-muted-ink: #5A6B5E;
  --tb-line: #26302A;
  --tb-line-ink: rgba(12, 17, 14, 0.12);
  --tb-wa: #25D366;

  --tb-r-sm: 4px;
  --tb-r-md: 8px;
  --tb-r-pill: 999px;

  --tb-xs: 8px;
  --tb-sm: 14px;
  --tb-md: 24px;
  --tb-lg: 44px;
  --tb-xl: 80px;
  --tb-section: 112px;

  --tb-wrap: 1200px;
  --tb-gutter: 24px;

  --tb-font-h: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tb-font-b: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --tb-header-h: 176px;
  --tb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tb-bg);
  color: var(--tb-paper);
  font-family: var(--tb-font-b);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
img { border-radius: var(--tb-r-sm); }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tb-font-h);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 var(--tb-md);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 var(--tb-md); max-width: 66ch; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--tb-md); padding-left: 1.2em; }
li { margin-bottom: 6px; }

strong, b { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--tb-line); margin: var(--tb-lg) 0; }

::selection { background: var(--tb-accent); color: var(--tb-ink); }

:focus-visible {
  outline: 2px solid var(--tb-accent);
  outline-offset: 3px;
  border-radius: var(--tb-r-sm);
}

.tb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tb-accent); color: var(--tb-ink);
  padding: 12px 20px; font-family: var(--tb-font-h); font-weight: 700;
}
.tb-skip:focus { left: 12px; top: 12px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Layout helpers ---------- */
.tb-wrap { width: 100%; max-width: var(--tb-wrap); margin: 0 auto; padding: 0 var(--tb-gutter); }
.tb-wrap-wide { max-width: 1440px; }
.tb-wrap-narrow { max-width: 820px; }

.tb-section { padding: var(--tb-section) 0; }
.tb-section-tight { padding: var(--tb-xl) 0; }

.tb-paper { background: var(--tb-paper); color: var(--tb-ink); }
.tb-paper h1, .tb-paper h2, .tb-paper h3 { color: var(--tb-ink); }
.tb-dark { background: var(--tb-bg); color: var(--tb-paper); }
.tb-surface { background: var(--tb-surface); color: var(--tb-paper); }

.tb-lede { font-size: 1.15rem; color: var(--tb-muted); }
.tb-paper .tb-lede { color: var(--tb-muted-ink); }

.tb-label {
  font-family: var(--tb-font-h);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tb-accent);
  display: block;
  margin-bottom: var(--tb-sm);
}
.tb-paper .tb-label { color: var(--tb-muted-ink); }

.tb-rule {
  width: 56px; height: 3px; background: var(--tb-accent);
  border-radius: var(--tb-r-pill); margin-bottom: var(--tb-md);
}

/* ---------- Buttons ---------- */
.tb-btn,
.elementor-button.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--tb-font-h);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 16px 32px;
  border-radius: var(--tb-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--tb-ease), background-color 0.2s var(--tb-ease), color 0.2s var(--tb-ease), border-color 0.2s var(--tb-ease);
  white-space: nowrap;
}
.tb-btn:active { transform: translateY(1px); }

.tb-btn-primary { background: var(--tb-accent); color: var(--tb-ink); }
.tb-btn-primary:hover { background: var(--tb-accent-dim, #B9D22F); }

.tb-btn-ghost { background: transparent; color: var(--tb-paper); border-color: rgba(242, 244, 238, 0.45); }
.tb-btn-ghost:hover { border-color: var(--tb-paper); background: rgba(242, 244, 238, 0.08); }

.tb-paper .tb-btn-ghost { color: var(--tb-ink); border-color: rgba(12, 17, 14, 0.3); }
.tb-paper .tb-btn-ghost:hover { border-color: var(--tb-ink); background: rgba(12, 17, 14, 0.05); }

.tb-btn-wa { background: var(--tb-wa); color: #062B14; }
.tb-btn-wa:hover { background: #2FE274; }

.tb-btn-sm { padding: 11px 20px; font-size: 0.72rem; }

.tb-btn-row { display: flex; flex-wrap: wrap; gap: var(--tb-sm); align-items: center; }

/* ---------- Header ---------- */
.tb-announce {
  background: var(--tb-accent);
  color: var(--tb-ink);
  font-family: var(--tb-font-h);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px var(--tb-gutter);
}
.tb-announce a { text-decoration: underline; text-underline-offset: 3px; }

.tb-header {
  position: sticky;
  top: 0;
  z-index: 400;
  background: rgba(12, 17, 14, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--tb-line);
}

.tb-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--tb-gutter);
  height: var(--tb-header-h);
  display: flex;
  align-items: center;
  gap: var(--tb-md);
}

.tb-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-right: auto; }
.tb-brand img { max-height: 48px; width: auto; border-radius: 0; }

.tb-brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tb-accent);
  position: relative; flex: 0 0 auto;
}
.tb-brand-mark::before,
.tb-brand-mark::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--tb-ink);
  clip-path: inset(0 50% 0 0);
}
.tb-brand-mark::before { transform: rotate(28deg) scaleX(1.55); }
.tb-brand-mark::after { transform: rotate(-152deg) scaleX(1.55); }

.tb-brand-text { display: flex; flex-direction: column; line-height: 1; }
.tb-brand-name {
  font-family: var(--tb-font-h); font-weight: 800; font-size: 1.12rem;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--tb-paper);
}
.tb-brand-sub {
  font-family: var(--tb-font-h); font-weight: 600; font-size: 0.56rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--tb-muted); margin-top: 4px;
}

.tb-nav ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.tb-nav li { margin: 0; }
.tb-nav a {
  font-family: var(--tb-font-h);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tb-paper);
  padding: 6px 0;
  position: relative;
  display: block;
  transition: color 0.2s var(--tb-ease);
}
.tb-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--tb-accent); transition: width 0.22s var(--tb-ease);
}
.tb-nav a:hover { color: var(--tb-accent); }
.tb-nav a:hover::after,
.tb-nav .current-menu-item > a::after,
.tb-nav .current_page_parent > a::after { width: 100%; }
.tb-nav .current-menu-item > a { color: var(--tb-accent); }

.tb-header-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.tb-burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--tb-line);
  border-radius: var(--tb-r-pill);
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.tb-burger span { display: block; width: 18px; height: 2px; background: var(--tb-paper); position: relative; transition: background 0.2s; }
.tb-burger span::before, .tb-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--tb-paper);
  transition: transform 0.25s var(--tb-ease);
}
.tb-burger span::before { top: -6px; }
.tb-burger span::after { top: 6px; }
.tb-burger[aria-expanded="true"] span { background: transparent; }
.tb-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.tb-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.tb-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--tb-bg);
  padding: calc(var(--tb-header-h) + 24px) var(--tb-gutter) var(--tb-lg);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.35s var(--tb-ease), visibility 0.35s;
}
.tb-mobile-nav.is-open { transform: translateY(0); visibility: visible; }
.tb-mobile-nav ul { list-style: none; margin: 0 0 var(--tb-lg); padding: 0; }
.tb-mobile-nav li { border-bottom: 1px solid var(--tb-line); margin: 0; }
.tb-mobile-nav a {
  display: block; padding: 18px 0;
  font-family: var(--tb-font-h); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--tb-paper);
}
.tb-mobile-nav .current-menu-item > a { color: var(--tb-accent); }
.tb-mobile-actions { display: grid; gap: 12px; }
.tb-mobile-actions .tb-btn { width: 100%; }

body.tb-nav-open { overflow: hidden; }

/* ---------- Footer ---------- */
.tb-footer { background: var(--tb-surface); color: var(--tb-paper); border-top: 1px solid var(--tb-line); }
.tb-footer-main { padding: var(--tb-xl) 0 var(--tb-lg); }
.tb-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr 1.1fr;
  gap: var(--tb-lg);
}
.tb-footer h4 {
  font-family: var(--tb-font-h); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tb-muted);
  margin: 0 0 var(--tb-md);
}
.tb-footer ul { list-style: none; margin: 0; padding: 0; }
.tb-footer li { margin-bottom: 10px; }
.tb-footer a:hover { color: var(--tb-accent); }
.tb-footer p, .tb-footer li, .tb-footer address {
  font-size: 0.94rem; color: rgba(242, 244, 238, 0.82); font-style: normal;
}
.tb-footer-brand .tb-brand { margin-bottom: var(--tb-md); }
.tb-footer-coach { font-family: var(--tb-font-h); font-weight: 700; color: var(--tb-paper); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.85rem; }
.tb-footer-phone { font-family: var(--tb-font-h); font-weight: 700; font-size: 1.05rem; color: var(--tb-paper); display: block; }
.tb-footer-loc { margin-bottom: var(--tb-md); }
.tb-footer-loc strong { display: block; font-family: var(--tb-font-h); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.03em; margin-bottom: 4px; }
.tb-footer-social { display: flex; gap: 10px; margin-top: var(--tb-md); }
.tb-footer-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--tb-line);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.tb-footer-social a:hover { border-color: var(--tb-accent); background: rgba(217, 245, 63, 0.1); }
.tb-footer-social svg { width: 17px; height: 17px; fill: currentColor; }

.tb-footer-bottom {
  border-top: 1px solid var(--tb-line);
  padding: var(--tb-md) 0;
  display: flex; flex-wrap: wrap; gap: var(--tb-sm) var(--tb-md);
  align-items: center; justify-content: space-between;
  font-size: 0.84rem; color: var(--tb-muted);
}
.tb-footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--tb-md); }

/* ---------- Floating WhatsApp ---------- */
.tb-wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 450; }
.tb-wa-toggle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--tb-wa); color: #062B14;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(12, 40, 22, 0.4);
  transition: transform 0.2s var(--tb-ease);
}
.tb-wa-toggle:hover { transform: scale(1.06); }
.tb-wa-toggle svg { width: 28px; height: 28px; fill: currentColor; }
.tb-wa-menu {
  position: absolute; right: 0; bottom: 68px;
  background: var(--tb-surface); border: 1px solid var(--tb-line);
  border-radius: var(--tb-r-md); padding: 14px; width: 262px;
  display: none; box-shadow: 0 18px 40px rgba(6, 12, 8, 0.55);
}
.tb-wa-menu.is-open { display: block; }
.tb-wa-menu p {
  font-family: var(--tb-font-h); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tb-muted);
  margin: 0 0 10px;
}
.tb-wa-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--tb-r-sm);
  border: 1px solid var(--tb-line); margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.tb-wa-menu a:last-child { margin-bottom: 0; }
.tb-wa-menu a:hover { border-color: var(--tb-wa); background: rgba(37, 211, 102, 0.08); }
.tb-wa-menu .tb-wa-name { font-family: var(--tb-font-h); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tb-wa-menu .tb-wa-num { font-size: 0.84rem; color: var(--tb-muted); }

/* ---------- Page shells ---------- */
.tb-pagehead { padding: calc(var(--tb-xl) + 20px) 0 var(--tb-xl); background: var(--tb-bg); position: relative; overflow: hidden; }
.tb-pagehead::after {
  content: ""; position: absolute; right: -180px; top: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid var(--tb-line); pointer-events: none;
}
.tb-pagehead h1 { max-width: 16ch; margin-bottom: var(--tb-sm); }
.tb-pagehead .tb-lede { max-width: 56ch; }

.tb-breadcrumb { font-size: 0.8rem; color: var(--tb-muted); margin-bottom: var(--tb-md); }
.tb-breadcrumb a:hover { color: var(--tb-accent); }
.tb-breadcrumb span { margin: 0 8px; }

.tb-content { padding: var(--tb-xl) 0; }
.tb-content h2 { margin-top: var(--tb-lg); }
.tb-content h3 { margin-top: var(--tb-md); }
.tb-content img { margin: var(--tb-md) 0; }
.tb-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--tb-md); }
.tb-content th, .tb-content td { border: 1px solid var(--tb-line-ink); padding: 10px 14px; text-align: left; }
.tb-content blockquote {
  border-left: 3px solid var(--tb-accent); margin: var(--tb-md) 0;
  padding: 4px 0 4px var(--tb-md); font-size: 1.1rem;
}

/* Blog / archive fallback listing */
.tb-postlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--tb-md); }
.tb-postcard { background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: var(--tb-r-sm); overflow: hidden; }
.tb-postcard img { border-radius: 0; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tb-postcard-body { padding: var(--tb-md); }
.tb-postcard h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tb-postcard time { font-size: 0.8rem; color: var(--tb-muted); }

.tb-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--tb-lg); }
.tb-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--tb-line); border-radius: var(--tb-r-pill);
  font-family: var(--tb-font-h); font-weight: 700; font-size: 0.8rem;
}
.tb-pagination .page-numbers.current { background: var(--tb-accent); color: var(--tb-ink); border-color: var(--tb-accent); }
.tb-paper .tb-pagination .page-numbers { border-color: var(--tb-line-ink); }

/* ---------- Elementor integration ---------- */
.elementor-widget-shortcode { width: 100%; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--tb-wrap); }
.elementor-button-wrapper .elementor-button { border-radius: var(--tb-r-pill); }
.elementor-widget-heading .elementor-heading-title { font-family: var(--tb-font-h); }
.elementor-widget-text-editor { font-family: var(--tb-font-b); }

/* ---------- Motion ---------- */
.tb-js .tb-reveal { opacity: 0; transform: translateY(18px); }
.tb-js .tb-reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s var(--tb-ease), transform 0.6s var(--tb-ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tb-js .tb-reveal, .tb-js .tb-reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tb-nav { display: none; }
  .tb-burger { display: flex; }
  .tb-header-cta .tb-btn-hide-sm { display: none; }
}

@media (max-width: 1024px) {
  :root { --tb-section: 88px; --tb-xl: 60px; }
  .tb-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 782px) {
  :root { --tb-section: 72px; --tb-xl: 52px; --tb-lg: 32px; --tb-gutter: 20px; }
  body { font-size: 16px; }
  .tb-footer-grid { grid-template-columns: 1fr; gap: var(--tb-md); }
  .tb-footer-bottom { flex-direction: column; align-items: flex-start; }
  .tb-btn { padding: 14px 24px; }
  .tb-btn-row .tb-btn { flex: 1 1 auto; }
  .tb-wa-float { right: 14px; bottom: 14px; }
}

@media (max-width: 480px) {
  .tb-brand-sub { display: none; }
  .tb-btn-row { flex-direction: column; align-items: stretch; }
  .tb-btn-row .tb-btn { width: 100%; }
}

/* ---------- Header WhatsApp option ---------- */
.tb-header-wa { position: relative; flex: 0 0 auto; }
.tb-header-wa-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--tb-line);
  color: var(--tb-wa); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s var(--tb-ease), background 0.2s var(--tb-ease);
}
.tb-header-wa-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.tb-header-wa-toggle:hover { border-color: var(--tb-wa); background: rgba(37, 211, 102, 0.1); }
.tb-header-wa-menu {
  position: absolute; right: 0; top: calc(100% + 12px);
  background: var(--tb-surface); border: 1px solid var(--tb-line);
  border-radius: var(--tb-r-md); padding: 14px; width: 262px;
  display: none; box-shadow: 0 18px 40px rgba(6, 12, 8, 0.55); z-index: 420;
}
.tb-header-wa-menu.is-open { display: block; }
.tb-header-wa-menu p {
  font-family: var(--tb-font-h); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--tb-muted);
  margin: 0 0 10px;
}
.tb-header-wa-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--tb-r-sm);
  border: 1px solid var(--tb-line); margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.tb-header-wa-menu a:last-child { margin-bottom: 0; }
.tb-header-wa-menu a:hover { border-color: var(--tb-wa); background: rgba(37, 211, 102, 0.08); }

@media (max-width: 480px) {
  .tb-header-wa { display: none; }
}

/* ---------- Uploaded logo ---------- */
.tb-logo-img {
  max-height: 46px;
  width: auto;
  border-radius: 0;
  flex: 0 0 auto;
}
.tb-footer .tb-logo-img { max-height: 52px; }
@media (max-width: 480px) {
  .tb-logo-img { max-height: 38px; }
}

/* ---------- Logo tile ----------
   The academy logo is drawn mostly in dark ink, so on the night-court header it
   sits on a bone tile rather than disappearing into the background. */
.tb-brand .tb-logo-img {
  background: var(--tb-paper);
  padding: 8px 12px;
  border-radius: var(--tb-r-sm);
  max-height: 150px;
  width: auto;
  box-sizing: content-box;
}
.tb-footer .tb-brand .tb-logo-img { max-height: 150px; }
@media (max-width: 480px) {
  .tb-brand .tb-logo-img { max-height: 76px; padding: 6px 8px; }
}

/* A hero holding a real photograph does not need the decorative court lines. */
.tb-hero.has-photo::before { display: none; }

/* Keep hero copy readable over a photograph. */
.tb-hero.has-photo::after {
  background: linear-gradient(100deg, rgba(12, 17, 14, 0.95) 0%, rgba(12, 17, 14, 0.88) 42%, rgba(12, 17, 14, 0.45) 100%);
}
@media (max-width: 782px) {
  .tb-hero.has-photo::after {
    background: linear-gradient(180deg, rgba(12, 17, 14, 0.86) 0%, rgba(12, 17, 14, 0.93) 100%);
  }
}

/* ---------- Hero headline ----------
   Hero headline: two lines, never four. The headline is written as two
   deliberate lines, so size it from the width it actually has instead of
   letting a narrow column break both halves in two. */
.tb-hero .tb-hero-copy { max-width: min(1060px, 100%); }
.tb-hero .tb-hero-copy h1 {
  font-size: clamp(2rem, 5.2vw, 4rem);
  letter-spacing: -0.025em;
  text-wrap: normal;
  max-width: none;
  margin-bottom: 22px;
}
.tb-hero .tb-hero-sub { max-width: 54ch; }

/* The copy now runs wider, so the photograph is held back a little further. */
.tb-hero.has-photo::after {
  background: linear-gradient(100deg, rgba(12, 17, 14, 0.96) 0%, rgba(12, 17, 14, 0.92) 45%, rgba(12, 17, 14, 0.78) 72%, rgba(12, 17, 14, 0.42) 100%);
}
@media (max-width: 1024px) {
  .tb-hero .tb-hero-copy h1 { font-size: clamp(1.75rem, 5.6vw, 3.2rem); }
}

/* ---------- Empty sections on the home page ----------
   The home page should never stack up bands that say a thing has not happened
   yet. A section whose content block is still empty removes itself here; the
   moment the academy publishes a tournament, album or video it returns on its
   own. The dedicated pages still show the explanatory message. */
body.home .e-con.e-parent:not(.e-child):has(.tb-empty-card) { display: none !important; }

/* ---------- Statistics row ----------
   The academy publishes only figures it can stand behind, so this row has to
   look deliberate with one entry as well as with four. */
.tb-stats { display: flex; flex-wrap: wrap; gap: var(--tb-lg) 56px; }
.tb-stat { flex: 0 1 auto; min-width: 150px; max-width: 260px; }

/* ---------- Home page rhythm ----------
   A hidden or empty section can leave two bands of the same tone back to back,
   which doubles the space between them. Collapse the second one's top padding
   so the vertical rhythm holds either way. */
body.home .e-con.tb-paper + .e-con.tb-paper > .e-con-inner,
body.home .e-con.tb-dark + .e-con.tb-dark:not(.tb-cta-final) > .e-con-inner,
body.home .e-con.tb-paper + .e-con:has(.tb-empty-card) + .e-con.tb-paper > .e-con-inner,
body.home .e-con.tb-dark + .e-con:has(.tb-empty-card) + .e-con.tb-dark > .e-con-inner {
  padding-block-start: 0 !important;
}

/* Let the photograph read through on the right of the hero. */
.tb-hero.has-photo::after {
  background: linear-gradient(100deg, rgba(12, 17, 14, 0.95) 0%, rgba(12, 17, 14, 0.90) 44%, rgba(12, 17, 14, 0.72) 70%, rgba(12, 17, 14, 0.30) 100%);
}
/* The closing call to action still needs air beneath its accent rule. */
body.home .e-con.tb-dark + .e-con.tb-dark.tb-cta-final > .e-con-inner { padding-block-start: var(--tb-xl) !important; }

/* A rule the width of the band makes a single statistic look placed, not left over. */
.tb-stats { margin-top: var(--tb-md); border-top: 1px solid var(--tb-line-ink); }
.tb-dark .tb-stats { border-top-color: var(--tb-line); }
.tb-stat { margin-top: -1px; }

/* ---------- Page gutters ----------
   Elementor's boxed containers carry a maximum width but no side padding, so
   below that width the content ran to the very edge of the screen. Give every
   section the same gutter the header and footer use, and never let content
   touch the screen edge. */
.elementor .e-con.e-con-boxed > .e-con-inner { padding-inline: var(--tb-gutter); }

/* ---------- Button rows ----------
   Elementor gives a button widget the full width of its flex parent, which
   pushed the second button off screen on tablets. Let the row wrap, and let
   each button take only the width it needs. */
.e-con.tb-btnrow { flex-wrap: wrap; }
.e-con.tb-btnrow > .elementor-widget { width: auto; flex: 0 0 auto; max-width: 100%; }
@media (max-width: 520px) {
  .e-con.tb-btnrow > .elementor-widget { width: 100%; }
  .e-con.tb-btnrow .elementor-button { width: 100%; }
}

/* ---------- Header at in-between widths ----------
   The full menu, both calls to action and the WhatsApp control cannot all sit
   on a narrow laptop screen, so they hand over in stages rather than collide. */
@media (max-width: 1500px) {
  .tb-header-cta .tb-btn { padding: 11px 18px; font-size: 0.72rem; }
}
@media (max-width: 1340px) {
  .tb-header-cta .tb-btn-hide-sm { display: none; }
}
@media (max-width: 1240px) {
  .tb-nav ul { gap: 16px; }
  .tb-nav a { font-size: 0.72rem; letter-spacing: 0.04em; }
}
@media (max-width: 1180px) {
  .tb-nav { display: none; }
  .tb-burger { display: flex; }
}
@media (max-width: 430px) {
  .tb-header .tb-brand-text { display: none; }
  .tb-header-inner { gap: 12px; }
}

/* ---------- Logo scale ----------
   The brand mark is set at 150px. On a phone that would take a third of the
   screen, so the header steps down while the footer keeps the full size. */
@media (max-width: 900px) {
  :root { --tb-header-h: 132px; }
  .tb-header .tb-brand .tb-logo-img { max-height: 108px; }
}
@media (max-width: 600px) {
  :root { --tb-header-h: 100px; }
  .tb-header .tb-brand .tb-logo-img { max-height: 76px; padding: 6px 8px; }
  .tb-footer .tb-brand .tb-logo-img { max-height: 120px; }
}
/* A 150px mark needs the wordmark to hold its own beside it. */
.tb-header .tb-brand-name { font-size: 1.24rem; }
.tb-footer .tb-brand-name { font-size: 1.24rem; }